The Framaspace project currently hosts a cloud environment (files, calendars, contacts, wiki, kanban, etc.) for more than 1,200 associations and groups. That’s as many instances of the Nextcloud free software. Unfortunately, it’s not always easy to get to grips with Nextcloud, despite the documentation, forums and so on. So Framasoft decided to get an intern, Val, to work on the subject of supporting people using Nextcloud for the first time. Here’s his story.

Hi Val, can you introduce yourself?

Hi! I’m Val, and I’m 22. I was raised in Paris’ suburbs, and I have been studying at INSA Lyon, an engineering school in Villeurbanne for 4 years now. I am parisian, lyonnais, suburbanite, or even Swedish, depending on the mood.
If everything goes as expected, I’ll graduate next year as an Telecommunication Engineer.

I like singing and playing music, climbing plastic walls, solving Rubik’s cubes and playing video games, when I’m not busy tweaking some lines of code. Over the last few years, I have also been active in multiple associations, including some at INSA or the Red Cross.

You chose Framasoft for your internship. Why?

I had to search for an internship while being in Sweden, and it wasn’t really easy. Searching from another country didn’t help of course, and I also wanted an internship matching my personal values. Basically, being cheap labour to help big business get richer isn’t really my thing.

The year before, I participated in organising an event with the Exit Lyon association, at which a Framasoft employee gave a conference on queer emancipation through digital technology. Being engaged in associations, I already knew Framasoft from their web services, as many do. I still had her email, so I sent an application, and there I am!

It was kind of an ideal case: an internship in a non-profit, breaking with capitalism, and contributing to build more social justice in our society.

Let’s talk about your internship. What was the general objective?

Framasoft’s collaborative cloud platform for associations and activist groups, Framaspace, has been active for 2 years now, and is based on Nextcloud. Even though it is a good solution, this open source software is far from perfect, and in particular is more difficult to use than other existing solutions (closed-source and maintained by GAFAMs, such as Google Drive or Microsoft 365).

My internship tries to solve part of this problem: how to make sure that first time someone logs into Nextcloud they don’t run away. My aim is to make the first use of Nextcloud easier, by supporting users and helping them using the software. It would encourage people to stay on a free solution that respects their privacy, and not run towards GAFAM solutions, considered easier to use.

Luckily, Nextcloud allows the community to create apps that integrate with the software to enhance it. Hence my first contribution to this mission is a Nextcloud app, « Intros ».

OK, so let’s talk about the Intros App. What’s it for? Who is the target audience?

Intros answers an user’s most simple question when meeting Nextcloud: « Where is the button to [insert a random action]? ».

To answer it, Intros highlight elements, buttons or even parts of Nextcloud’s interface to explain what they do. For example, the app will highlight the small sharing icon and display a text explaining how to share a file to someone else. This applies to several Nextcloud apps, including files, contacts or calendar.

Video demonstration of how the ‘Intros’ app works

Technically, how does it work?

The app uses the intro.js library, which helps creating step-by-step tutorials that highlight a web page’s elements. The library simply integrates to Nextcloud as any other javascript library would, and we can customise tutorials for the users.

That’s it? No! The library handles most of the visual aspects for us, but it had to be adapted to integrate to Nextcloud properly. For example, remembering when a tutorial has already been seen to not display it again, and making a menu to re-enable it if needed. Or even handling multiple languages, displaying buttons in Nextcloud’s style, highlighting elements nested in menus… Lots of small enhancements that allow a smooth integration of the library to Nextcloud.

Have you encountered any technical or organisational problems?

Of course, otherwise where would the fun be? As always when I’m coding something, sometimes it works and I think, « wow, I’m a genius », and sometimes (often) it doesn’t work and I think, « wow, I’m an intern ».

For example, during development I realised that the application sometimes had trouble finding some elements on the page. One of the problems with intro.js is that the library is designed to be deployed on a site that has been designed by the person who writes the tutorials. This person would have a good knowledge of the site’s structure, and would know which elements need to be selected for it to work every time… Except this person isn’t me. I’m integrating it into Nextcloud, which I obviously didn’t design, so I have to adapt to the structure of the existing pages. As if that wasn’t simple enough, the way the pages are built changes depending on the application (Files, Calendar, Contacts…) or even the version of Nextcloud. So I had to reverse-engineer the HTML DOM on a case-by-case basis, to find out which elements it was possible to select and avoid selecting elements that could change name, class or even completely disappear.

But even being careful, it sometimes didn’t work. The application couldn’t find certain elements, and displayed an explanation over empty space. Not ideal. In intro.js, by default, you give a list of elements to highlight and the explanations that go with them, and the library takes care of detecting them in the DOM when the page loads. This was the critical point in this case: when the page loads. The elements are all loaded at once, so they can’t change along the way. I had problems with this specifically in two cases:

• first, elements nested in menus. We sometimes want to highlight an element that isn’t visible on page load, and would be after a user click
• then, elements that aren’t loaded immediately on page load. Some Nextcloud apps take a bit more time to load their elements, so the library can’t detect them on load.

So what? Well, press the keys on the keyboard, in the right order if possible, and after a while it makes code that solves the problem. Here, instead of detecting all the elements at once, I’ve made sure to detect them just before they’re needed. Each time the user presses ‘next’, the application detects the next element to be highlighted and replaces the default element with this element before launching the next step. This way, we don’t have to worry about page load times or the fact that the button is in a menu. All that’s left to do is simulate a user click with javascript for buttons in menus and tada! It works.

Now that the app has been published, what’s next?

What’s next? It’s not really about me anymore! I hope the app will be used by Nextcloud’s users, and it’s already in use in Framaspace.

We have also discussed with Nextcloud for a possible integration of the app to the software core (and not as a third-party app). That would make it easier to add new tutorial to the apps for developers, but Nextcloud had some remarks regarding this. One of them was that the app explains the interface, while they could simply improve it so it wouldn’t need an explanation.

And of course, the app can still be perfected (I’m only a humble intern, after all) to make it more efficient, easier to maintain,… It’s also very important since we want it to be maintained over the (frequent!) Nextcloud updates.

A little birdie tells me that you’re working on another Nextcloud application, can you tell us more about that?

A new app is indeed on the road (#WIP). The OwnershipTransfer app will allow admins to transfer the ownership of files (or even other types of data?) from one user to another. This would be especially useful for when someone is leaving an association that uses Nextcloud, and forgot to transfer their important files to someone else! It will prevent them from losing a very important budget file, forever. However, it still doesn’t make coffee… sorry.

We’ve come to the end of this interview. Would you like to share a feeling about the work you’ve done during this internship?

#gallery-1 { margin: auto; } #gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 50%; } #gallery-1 img { border: 2px solid #cfcfcf; } #gallery-1 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */

I’m really satisfied with what I accomplished. Over and above the fact that I designed and developed a Nextcloud application for the first time from A to Z, I’ve learnt a lot of new skills. Whether it’s PHP, a language I’d only just got to grips with before my internship, or software development in general, managing releases, issues and merge requests, and so on. I’m very happy to be able to have learnt a lot during this internship.

By the way, huge thanks to Framasoft’s employee team who’s always been eager to help me and answer my questions when needed!

Last question, a recurring one in our interviews: what question would you like to have been asked, and what would your answer be?

« Tell me, what do you think of Nextcloud’s documentation? »

It’s time to rant (after all, I’m French!). It’s… lightweight, to say the least. But you can see it from a good perspective: I guess browsing the source code to understand how the APIs work is a great learning experience!

Thanks Val!

• Intros in the Nextcloud applications store: https://apps.nextcloud.com/apps/intros
• Intros code on the Framagit forge: https://framagit.org/framasoft/framaspace/custom-apps/intros
• Administrator doc (to modify/create new tutorials): https://framagit.org/framasoft/framaspace/custom-apps/intros/-/blob/master/DOCS.md

Le projet Framaspace propose, à ce jour, un espace cloud (fichiers, agendas, contacts, wiki, kanban, etc) à plus de 1 200 associations et collectifs. C’est autant d’instances du logiciel libre Nextcloud. Malheureusement, ce dernier n’est pas toujours très facile à prendre en main, malgré les documentations, les forums, etc. Framasoft a donc décidé de faire plancher un stagiaire, Val, sur le sujet de l’accompagnement des personnes utilisant Nextcloud pour la première fois. Voici son histoire.

Bonjour Val, peux-tu te présenter ?

Salut ! Je m’appelle Val, j’ai 22 ans. J’ai grandi en banlieue parisienne, et depuis 4 ans maintenant je fais mes études à l’INSA Lyon, école d’ingénieur qui se trouve à… Villeurbanne (c’est comme Lyon, mais avec les endroits jolis en moins). Je suis parisien, lyonnais, banlieusard, parfois même Suédois, selon l’humeur.
Si tout se passe bien, je serai diplômé l’an prochain comme Ingénieur en Télécommunications.

J’aime chanter et faire de la musique, aller grimper des murs en plastique, résoudre des Rubik’s cube et jouer aux jeux vidéos, quand je suis pas occupé à bidouiller du code. Ces dernières années, j’ai aussi participé à plusieurs projets associatifs, notamment dans des associations de l’INSA, ou encore avec la Croix-Rouge.

Concernant ton stage, tu as choisi Framasoft. Pourquoi ?

J’étais en Suède au moment de chercher un stage, et c’était un peu galère. Chercher à distance c’est forcément plus compliqué, surtout que je voulais si possible faire un stage qui corresponde à mes valeurs. Si vous vous posez la question, en gros, être de la main d’œuvre pas chère pour renflouer le capital de grandes entreprises c’est pas trop mon truc.

L’année précédente, j’avais participé à organiser un évènement avec l’association Exit Lyon, dans lequel une salariée de Framasoft était venue faire une conférence sur l’émancipation queer par le numérique. Étant engagé dans le milieu associatif, je connaissais déjà un peu Framasoft, je pense comme beaucoup à travers les services numériques que l’asso propose. J’avais encore son mail, donc j’ai envoyé une candidature, et voilà où j’en suis quelques mois plus tard.

C’est un peu le cas idéal pour moi : un stage dans une organisation à but non-lucratif, en rupture avec le capitalisme, et qui contribue à construire plus de justice sociale dans notre société.

Venons-en au sujet de ton stage. Quel était l’objectif général ?

Depuis 2 ans Framasoft propose Framaspace, une solution de collaboration et de stockage de fichier en ligne à destination d’associations et de collectifs militants, basée sur le logiciel libre Nextcloud. Bien qu’il réponde à la problématique posée, celui-ci est loin d’être parfait, et est notamment plus difficile d’utilisation que d’autres solutions existantes (non-libres et administrées par des GAFAM, par exemple Google Drive ou Microsoft 365).

Mon sujet de stage vient s’inscrire dans cette problématique : comment faire pour que la première fois qu’une personne se connecte à Nextcloud elle ne fuit pas en courant. Mon but est de faciliter la première utilisation de Nextcloud, en accompagnant les utilisateurices et en les aidant à s’approprier le logiciel. Si tout se passe bien, cela encourage les gens à rester sur cette solution libre et respectueuse de leur vie privée, à défaut de les voir courir vers des solutions jugées plus simples d’utilisation chez les GAFAM.

Fort heureusement, Nextcloud permet à la communauté de créer des applications qui s’intègrent au logiciel pour venir l’améliorer. La première incarnation de cette mission prend donc la forme d’une Application Nextcloud, « Intros ».

OK, donc, parlons de l’App Intros. À quoi sert-elle ? Quel est le public visé ?

Intros répond à la question la plus simple qu’une personne a en arrivant sur Nextcloud : « Il est où le bouton pour [insérer une action quelconque] ? ».

Pour y répondre, Intros met en lumière des éléments, des boutons ou même des parties de l’interface de Nextcloud et explique à quoi elles servent. Par exemple, l’application va surligner la petite icône de partage d’un fichier et afficher un texte qui explique comment partager un fichier à une autre personne. C’est valable pour plusieurs des applications de Nextcloud, des fichiers aux contacts, en passant par le calendrier.

Techniquement, comment ça marche ?

L’application est basée sur la bibliothèque intro.js, qui permet justement de réaliser des tutoriels pas à pas en surlignant les éléments d’une page web. La bibliothèque s’intègre simplement à Nextcloud comme une bibliothèque javascript classique, et on peut personnaliser des visites pour les utilisateurices.

C’est tout ? Non ! La bibliothèque gère certes la plupart des aspects de l’affichage pour nous, mais il a fallu l’adapter pour qu’elle s’intègre à Nextcloud. Par exemple, gérer quand la visite d’une application a déjà été suivie, pour ne pas la proposer une nouvelle fois à l’utilisateurice, et faire un menu pour réactiver les visites en cas de besoin. Ou encore gérer différentes langues, afficher des boutons cohérents avec le reste de Nextcloud, surligner des éléments dans des menus… Bref, de nombreuses petites améliorations qui permettent à la bibliothèque de bien s’intégrer à Nextcloud, sans que les utilisateurices ne se doutent de rien.

Tu as rencontré des soucis, qu’ils soient techniques, organisationnels, etc ?

Bien sûr, sinon c’est moins marrant. Comme toujours quand je développe quelque chose, parfois ça fonctionne et je me dis que, quand même, je suis vraiment génial, et parfois (souvent) ça fonctionne pas et je me dis que, quand même, je suis stagiaire.

Par exemple, au cours du développement je me suis rendu compte que l’application avait parfois du mal à trouver certains éléments de la page. L’un des soucis d’intro.js, c’est que la bibliothèque est prévue pour être déployée sur un site qui a été conçu par la personne qui écrit les visites guidées. Cette personne aurait donc une bonne connaissance de la structure du site, et saurait quels éléments doivent être sélectionnés pour que ça fonctionne à tous les coups… Sauf que cette personne, c’est pas moi. Je l’intègre à Nextcloud, que je n’ai évidemment pas conçu, et je dois donc m’adapter à la structure des pages existantes. Comme si c’était pas assez simple, la façon dont les pages sont construites change en fonction de l’application (Fichiers, Agenda, Contacts…) ou même de la version de Nextcloud. Bref, il a fallu rétro-ingénierer le DOM HTML au cas par cas, pour trouver quels éléments il était possible de sélectionner et éviter de sélectionner des éléments qui peuvent changer de nom, de classe, ou même disparaître totalement.

Mais même en faisant attention, parfois ça ne passait pas. L’application n’arrivait pas à trouver certains éléments, et affichait une explication sur du vide. Pas idéal. Dans intro.js, par défaut, on donne une liste d’éléments à surligner et les explications qui vont avec, et la bibliothèque se charge de les détecter dans le DOM au chargement de la page. C’est ce point qui était bloquant dans ce cas : au chargement de la page. Les éléments sont tous chargés d’un coup, et ne peuvent donc pas changer en cours de route. Ça m’a posé problème spécifiquement dans deux cas :

• d’abord, les éléments dans des menus. Parfois on veut mettre en évidence un élément qui n’est pas visible par défaut, et qui le deviendrait après un clic de l’utilisateurice sur un bouton ;
• ensuite, les éléments qui ne sont pas chargés immédiatement au chargement de la page. Certaines applications de Nextcloud mettent un peu plus de temps à charger leurs éléments, et la bibliothèque ne peut donc pas les détecter dès le chargement.

Alors comment on fait ? Ben on appuie sur les touches du clavier, dans le bon ordre si possible, et au bout d’un moment ça fait du code qui règle le problème. Ici, au lieu de détecter tous les éléments d’un coup, j’ai fait en sorte de les détecter juste avant qu’on ai besoin d’eux. A chaque fois que l’utilisateurice appuie sur « suivant », l’application détecte l’élément suivant qui doit être surligné et remplace l’élément par défaut par cet élément avant de lancer l’étape suivante. Comme ça, on n’a pas à se soucier du temps de chargement de la page, ou du fait que le bouton soit dans un menu. Reste plus qu’à simuler un clic utilisateur avec javascript pour les boutons dans les menus et paf! ça fait des chocap… bref ça fonctionne.

Maintenant que l’app est publiée, quelle est la suite des événements ?

La suite, j’allais dire que ça ne dépend presque plus de moi ! J’espère que l’application sera utilisée par les utilisateurices de Nextcloud, elle est en tout cas déjà utilisée au sein de Framaspace.

Par ailleurs, on a discuté avec Nextcloud d’une possible intégration de l’application au cœur du logiciel (non plus en tant qu’application tierce, mais directement dans Nextcloud). Cela faciliterait l’ajout de nouveaux tutoriels pour les applications tierces, mais Nextcloud émet des réserves quant à la pertinence de son intégration. Une des remarques faites est que l’appli vient expliquer l’interface, alors qu’on peut directement adapter l’interface pour la rendre plus facile d’utilisation (elle se passerait alors d’explications).

Et puis l’application peut encore être améliorée (après tout je ne suis qu’un modeste stagiaire) pour la rendre plus performante, plus facile à maintenir, etc. C’est également important puisqu’on souhaite qu’elle soit maintenue au fur et à mesure des mises à jour (fréquentes !) de Nextcloud.

Mon petit doigt me dit que tu travailles sur une autre application Nextcloud, tu peux nous en dire plus ?

Ton petit doigt m’a l’air très bien renseigné 😉

Une nouvelle application est effectivement en cours de construction (#WIP). L’application OwnershipTransfer de son petit nom permettra à l’admin d’un Nextcloud de transférer la propriété des fichiers (ou même d’autres types de données) d’un-e utilisateurice vers un-e autre. Bien pratique par exemple quand une personne quitte une association qui utilisait Nextcloud sans penser à transférer ses fichiers importants à un-e autre membre : cela évite de perdre à tout jamais le budget prévisionnel de l’asso. Par contre, ça fait toujours pas le café… désolé.

#gallery-2 { margin: auto; } #gallery-2 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 50%; } #gallery-2 img { border: 2px solid #cfcfcf; } #gallery-2 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */

On arrive à la fin de cette interview. Souhaites-tu nous partager un sentiment sur le travail effectué pendant ce stage ?

Je suis pleinement satisfait du travail que j’ai effectué. Au delà du fait d’avoir conçu et développé une application Nextcloud pour la première fois de A à Z, c’est surtout d’en tirer énormément de nouvelles compétences et apprentissages. Que ça soit en PHP, langage que je n’avais que peu apprivoisé avant mon stage, en développement logiciel de manière générale, gérer des releases, des issues et des merge request… Je suis très heureux de pouvoir sortir de ce stage en ayant beaucoup appris.

J’en profite pour remercier l’équipe salariée de Framasoft, qui a toujours su m’aider et répondre à mes questions quand j’en avais besoin !

Dernière question, récurrente dans nos interviews : quelle est la question que tu aurais aimé qu’on te pose, et quelle serait ta réponse ?

« Mais dis moi Val, tu la trouves comment la documentation de Nextcloud ? »

C’est un peu mon instant râleur (après tout je suis Français). Elle est… peu fournie, pour profiter d’une occasion d’utiliser une figure de style que j’aime beaucoup. Ça présente ses avantages d’un côté, si on veut y voir du positif : aller fouiller dans le code source pour comprendre comment utiliser les API c’est très formateur !

Merci beaucoup, Val !
Pour information, si vous êtes étudiant⋅e, que vous aimez Nextcloud, et que ce genre de sujet de stage vous intéresse (de préférence à Lyon pour faciliter l’encadrement, mais télétravail possible), n’hésitez pas à nous envoyer rapidement une candidature spontanée sur stages @ framasoft.org !

• Lien vers Intros dans le magasin d’applications Nextcloud : https://apps.nextcloud.com/apps/intros
• Lien vers le code de Intros sur la forge Framagit : https://framagit.org/framasoft/framaspace/custom-apps/intros
• Lien vers la doc administrateur (pour modifier/créer de nouveaux tutoriels) : https://framagit.org/framasoft/framaspace/custom-apps/intros/-/blob/master/DOCS.md
• Candidater et proposer votre CV à Framasoft : envoyez un mail à stages @ framasoft.org