Still more features on Framaspace ? Yes ! At the moment, we’re spoiling the users of this service, with the integration of quite a few features like the Forms and Tables applications, but also the ‘Intros’ app developed by Val, our summer intern. And because it’s Val, it’s festival (shameful rhyme !) : just before leaving us for a well-deserved holiday and a final year of studies, he delivered a new ‘Ownership Transfer’ application that will make life easier for administrators of Framaspace spaces.

Hi Val, we’re not going to ask you to introduce yourself, as you already did in the previous interview. We’ll just remind you that you’re doing an internship at Framasoft from the beginning of May to the end of August 2024, with the aim of developing tools to support Framaspace, and therefore Nextcloud free software.

Hi ! Check out my previous interview to find out more about me ! I introduce Intros, a Nextcloud app to help users get to grips with Framaspace.

At the end of the interview, I mentioned I was working on another Nextcloud app, OwnershipTransfer. Back then things were only getting started, but I cooked, and now it’s ready.

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

As mentioned in the previous article, OwnershipTransfer makes it possible to transfer data from one user to another in Nextcloud. For example, when someone leaves an association that uses Nextcloud (say, on Framaspace 😏), it can be useful to move their files to another user before deleting their account. You could avoid losing important archives, invoices… The same goes for calendars or address books.

Well worry no more, OwnershipTransfer (or « OT » from now on in this article) does all that. It allows Nextcloud admins to transfer data from whoever to whoever. Initially mostly designed for files, I extended it to calendars and contacts transfer.

OT allows a transfer of all the data, but also a more fine-grained choice. One can choose the calendar, address book or folder they want to transfer, so they don’t end up with someone’s holidays pictures in their files.

But… didn’t this feature already exist in Nextcloud ?

It did, but not the way we wanted it to.

Nextcloud already allows transferring your own files to another user, with a small graphical interface in the user settings section. You can only transfer your own files to another user, but not choose a source user : this isn’t suitable for an instance admin who would want to move files from one user to another.

An instance admin can also transfer files or calendars from one user to another, with an OCC command. OCC is Nexctloud’s CLI, via which admins can handle some server settings. You can only use it from the command line in a terminal, which to most human beings is… cryptical.

In short there are existing working solutions, but not with a simple graphical interface for admins. This is especially an issue in « Nextcloud farms » (an organization hosting Nextcloud instances for a lot of clients at once) like Framaspace, because admins don’t have access to the CLI in this case.

Technically, how does it work ?

Since it’s integrated with other Nextcloud apps, OT is heavily relying on existing Nextcloud APIs. The app also uses adapted parts of Nextcloud’s code. For example, I use the code from the existing files transfer feature, which I modified to fit with our requirements. The same goes for the calendar transfer.

However, I add to implement the contacts transfer, since it is not available in Nextcloud (not even through a cryptic CLI). It looks a lot like the calendar transfer, since both of them are based on the WebDAV protocol, so I had an example to work with.

The interface is built with Nextcloud’s Vue components, of course. They are pretty pleasant to use, and new ones are often released. It allowed me to build a complete graphical interface in no time, while staying consistent with the rest of Nextcloud’s UI.

Have you encountered any technical or organisational problems ?

Since Nextcloud’s documentation hasn’t miraculously grown since last time, I had to wander around in Nextcloud’s source code to find the functions needed. I could almost make a hobby out of that. Almost.

At least the features exist in Nextcloud already, so adapting them wasn’t the most difficult thing ever. I could also rely on tcit’s advice, co-director of Framasoft and Nextcloud contributor. In short : I write code, he looks at it, says « cool thing, but not scalable », and I correct it.

Scalability was the most common problem. It always works on my small test environment with 5 accounts and 7 folders, but it should also (and most importantly) work on big Nextcloud instances with lots of files. For example, the files transfer can take a lot of time and resources : it has to move all the files from the source to the destination folder, which takes more or less time depending on the amount of files to move and the underlying storage type. Because of that, it is handled in the background : instead of launching it upon receiving the request, it is placed in a jobs queue that the server periodically handles.

Calendar and contacts transfers do not have this issue : they only consist of a simple SQL query to change the right property on the right element. This operation is fast, so it can be handled in the foreground.

Besides the actual transfer, building the interface was also challenging. The app allows the admin to choose which element will be transferred, so they need an interface to choose it. For calendars and contacts, it’s fairly simple : with Nextcloud’s components, I could easily build a list of calendars or address books. But for files, things are getting complicated : we need a whole tree-style view to show the subfolders’ content.

Luckily, I’ve got back up. Romain, former fellow INSA Lyon student (in Telecom, just like me !) and former Framasoft intern, worked on Sorts a few years ago. The goal was to make an app to enhance Nextcloud’s file search, mostly with filters. And Sorts has something I was really interested in : a tree-style files view. Exactly what I needed.

After a few tweaks here and there in Sorts’ code, which wasn’t necessarily easy, its tree-style view perfectly integrated with OwnershipTransfer. It helped a lot and saved a lot of dev time, and I could even improve it a bit with some lines to better view the current folder and some sharing icons.

Now that your internship is coming to an end, and you’ve been « eating » some Nextcloud for the past 6 months, what are your potential takes on this software ?

It’s rant time !

Anyways, besides the rant and all the things I could blame on Nextcloud (like its lightweight documentation, its occasional slowness or its imperfect UI), its a very functional software, and it’s all that matters for pretty much everyone. It could be better (and it’s already happening !), but I find it to be working just fine for most typical usages. I’ve been using it for 2 years on a Raspberry PI to backup my files and photos, and I’ve never had any major issues with it.

However, its collaborative features can definitely get better (things like multiple people writing on the same text or calc document at the same time), especially since they are very popular among the people who use Nextcloud. These features exist, but they are typically hard to use, especially the first time, and poorly optimized. So when I see Nextcloud bragging about how they now have AI integrated (which I think most people don’t find that useful anyway), while opening a shared file sometimes still causes a mess… I think they could focus on more important things. But I guess you do need something to make it look shiny.

We’ve been very very pleased and satisfied to work with you over the last few months ! Any final words ?

I was delighted to work at Framasoft ! I’ve learned a lot through this internship, and I want to thank the association again for its welcoming and comfortable working conditions.

Right now it’s time to relax, for me at least (before going to « class » again, but don’t mention it), and then to go back to work on my final internship at the beginning of next year ! I’m just saying, of course ;)

Main links for Ownership Transfer :

• Link to Ownership Transfer in the Nextcloud application shop : https://apps.nextcloud.com/apps/ownershiptransfer
• Link to the Ownership Transfer code on the Framagit forge : https://framagit.org/framasoft/nextcloud/ownershiptransfer

Encore des nouveautés sur Framaspace ? Et oui ! En ce moment, on gâte les utilisateur⋅ices de ce service, avec l’intégration de pas mal de fonctionnalités comme les applications Forms et Tables, mais aussi l’app « Intros » qu’a développée Val, notre stagiaire estival (rime riche !). Et comme c’est Val, c’est festival (rime honteuse !) : juste avant de nous quitter pour des vacances bien méritées et une dernière année d’études, il nous a livré une nouvelle application « Ownership Transfer » qui facilitera la vie des administrateur⋅ices d’espaces Framaspace.

Bonjour Val, on ne va pas te proposer de te présenter, car tu l’as déjà fait dans la précédente interview. On rappellera juste que tu es en stage à Framasoft de début mai à fin août 2024, avec pour objectif de développer des outils d’accompagnement à Framaspace, et donc au logiciel libre Nextcloud.

Salut ! N’hésitez pas à aller lire ma précédente interview pour en savoir plus sur moi ! J’y parle d’Intros, une application pour faciliter la prise en main de Framaspace.

A la fin de l’interview, je parle d’une autre application Nextcloud sur laquelle je travaillais, OwnershipTransfer. À l’époque c’était encore en cours de préparation, mais depuis j’ai cuisiné, et maintenant c’est prêt.

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

Comme indiqué dans l’article précédent, OwnershipTransfer sert à transférer des données d’un⋅e utilisateurice à l’autre dans Nextcloud. Par exemple, lorsqu’une personne quitte une association qui utilise du Nextcloud (sur Framaspace, au hasard 😏), il peut être bien pratique de transférer ses fichiers avant de supprimer son compte. Cela permet d’éviter de perdre des archives importantes, des factures,… De même pour ses agendas, ou même ses carnets d’adresses.

Ça tombe bien, OwnershipTransfer (qu’on abrégera par la suite « OT ») fait tout ça. Elle permet aux administrateur⋅ices d’un espace Nextcloud de transférer les données de n’importe qui vers n’importe qui. À l’origine surtout destinée au transfert de fichiers, j’ai pu étendre l’application au transfert d’agendas et de contacts.

OT permet de transférer toutes les données d’une application, mais aussi de choisir plus finement ce qui devra être transféré. On peut ainsi choisir l’agenda, le carnet d’adresse ou un dossier à transférer, pour éviter de se retrouver avec les photos de vacances de quelqu’un d’autre dans ses fichiers.

Mais… cette possibilité n’existait pas déjà dans Nextcloud ?

Si, mais pas exactement comme on le voulait.

Nextcloud permet déjà de transférer ses propres fichiers à une autre personne, via une petite interface graphique dans les paramètres utilisateurs. On peut là uniquement transférer ses propres fichiers vers un autre utilisateur, mais pas choisir l’utilisateur source : ce n’est pas une solution pour les admins d’espace qui voudraient transférer des fichiers d’une personne à une autre.

Un⋅e administrateurice d’espace peut aussi transférer des fichiers ou des agendas d’un⋅e utilisateur⋅ice à un⋅e autre, via une commande « OCC ». OCC est la CLI de Nextcloud, via laquelle les admins peuvent lancer diverses opérations de maintenance ou de management. On y accède donc en ligne de commande via le terminal uniquement, ce qui a de quoi repousser la plupart des êtres vivants sur cette planète.

En bref cette solution fonctionne, mais ne propose pas d’interface graphique simple aux admins. Cela pose problème dans le cas de « fermes à Nextcloud » (une organisation qui héberge des instances Nextcloud pour beaucoup de clients d’un coup) comme Framaspace, dans lesquelles les administrateur⋅ices d’un espace n’ont pas accès à la ligne de commande.

Techniquement, comment ça marche ?

Comme elle s’intègre avec d’autres applications, OT se base essentiellement sur des APIs existantes de Nextcloud. L’application réutilise aussi des parties du code de Nextcloud que j’ai adaptées aux besoins de l’application. Par exemple, je réutilise le code de transfert de ses propres fichiers, en l’adaptant pour pouvoir choisir à la fois l’utilisateur⋅ice source et destinataire. De même pour le transfert d’agendas.

J’ai par contre dû implémenter le transfert de contacts, non disponible dans Nextcloud par défaut. Il est cependant très similaire au transfert d’agendas, dont je me suis inspiré, puisque les deux se basent sur le protocole WebDAV.

Pour l’affichage, j’utilise bien sûr les composants Vue proposés par Nextcloud. Leurs composants sont assez complets et agréables à utiliser, et ils en sortent de nouveaux régulièrement. Cela m’a permis de réaliser une interface graphique complète en peu de temps, et cohérente avec le reste du logiciel.

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

La documentation de Nextcloud n’ayant pas miraculeusement centuplé en taille depuis la dernière fois, j’ai encore dû fouiller dans le code source de Nextcloud pour aller trouver les fonctions à utiliser. Ça commencerait presque à me plaire. Presque.

Mème d’un Val (avec quelques années de plus) face à la (non) doc de Nextcloud.

Au moins, comme les fonctionnalités existaient déjà en partie dans Nextcloud, les adapter n’a pas été d’une difficulté monstre. Surtout que j’ai pu beaucoup compter sur les conseils de Tcit, codirecteur de Framasoft et contributeur bénévole de Nextcloud. En gros : j’écris du code, il le regarde, il se dit « Cool, mais ça passe pas à l’échelle ton truc », et puis je corrige.

C’était le problème la plupart du temps, le passage à l’échelle. C’est bien beau quand ça fonctionne sur mon petit environnement de test à 5 comptes et 7 dossiers, mais dans l’idéal il faut aussi que ça fonctionne sur les grosses instances Nextcloud avec beaucoup de fichiers. Par exemple, le transfert de fichiers peut prendre beaucoup de temps et de ressources : il faut déplacer tous les fichiers du dossier source vers la destination, ce qui peut être plus ou moins long en fonction de la quantité de fichiers et du type de stockage. Celui-ci est donc géré en fond : au lieu de l’exécuter au premier plan dès la réception de la requête, il est placé dans une file de « jobs » que le serveur effectue périodiquement.

Les transferts de contacts et d’agendas n’ont pas le même problème : il s’agit dans leur cas d’une simple requête SQL qui vient modifier la propriété de l’élément en question. Cette opération est rapide, et peut donc être exécutée au premier plan.

Outre le transfert en soi, réaliser l’interface a aussi été un vrai défi. L’application doit permettre à l’administrateurice de choisir quel élément doit être transféré, et doit donc lui proposer une interface pour faire son choix. Pour les agendas et les contacts, c’est plutôt simple : avec les composants de Nextcloud, j’ai pu facilement faire une liste d’agendas ou de carnets d’adresses. Pour les fichiers, ça se complexifie : il faut récréer une arborescence complète de fichiers, capable d’afficher des sous-dossiers.

Heureusement, un « insalien » n’est jamais seul. Romain, ancien étudiant INSA Lyon (du département Télécom, comme moi !) et ancien stagiaire à Framasoft, a travaillé il y a quelques années sur l’application Sorts. Le but de Sorts est d’améliorer la recherche de fichiers de Nextcloud, en proposant une recherche avec des filtres notamment. Mais Sorts a surtout quelque chose qui m’intéressait : une arborescence de fichiers en arbre. Pile ce qu’il me fallait.

Après avoir récupéré et adapté le code de Sorts, ce qui n’était pas forcément de tout repos, son arborescence s’intégrait parfaitement à OwnershipTransfer. Cela m’a permis de gagner beaucoup de temps de développement, et j’ai même pu apporter des améliorations, comme les lignes qui mettent mieux en évidence l’arborescence, ou les icônes de partage. Pas mal non ? C’est insalien 😎

Mème « Pas mal non ? C’est insalien »

Maintenant que ton stage s’achève, et après avoir « mangé » du Nextcloud pendant près de 6 mois, quels sont tes potentiels positionnements sur ce logiciel ?

Ah, c’est le moment où je râle !

Non blague à part, malgré toutes les critiques que je pourrais faire sur Nextcloud (notamment sa documentation légère, sa lenteur occasionnelle ou son interface qui laisse parfois à désirer), le logiciel est fonctionnel, et franchement c’est tout ce qui compte pour la plupart des gens. Des améliorations sont possibles (et sont en cours !), mais je le trouve déjà assez opérationnel pour la plupart des besoins que peuvent avoir ses utilisateur⋅ices. Je l’utilise personnellement depuis 2 ans sur ma Raspberry PI pour stocker mes fichiers, et je n’ai jamais eu de problème majeur avec.

Le logiciel peut par contre s’améliorer sur ses aspects collaboratifs, qui sont très demandés par les utilisateur⋅ices (écrire à plusieurs sur un fichier texte ou calc par exemple). Ces fonctionnalités existent, mais sont souvent encore difficiles à prendre en main et peu optimisées. Du coup, quand je les vois se vanter d’intégrer de l’IA au logiciel (alors que franchement, je pense que pour beaucoup ça n’a que très peu d’utilité) alors même que quand on ouvre un fichier texte en collaboratif c’est parfois encore le bordel… je me dis qu’ils pourraient mieux diriger leurs efforts. Mais bon, faut bien des annonces pour faire vendre.

Nous avons été très heureux⋅ses et satisfait⋅es de travailler avec toi pendant ces quelques mois ! Un dernier mot pour la fin ?

J’ai été très heureux de travailler à Framasoft ! Ce stage a été très enrichissant pour moi, et je remercie encore l’association pour son accueil et ses conditions de travail au top. Si les sujets que j’aborde dans cet article vous intéressent et que vous cherchez un stage dégooglisé, je vous encourage à venir à Framasoft (promis le dev Nextcloud c’est pas si terrible en vrai). Sinon, vous pouvez toujours faire un don !

Maintenant c’est l’heure des vacances pour moi (puis des « cours », mais ne le dites pas trop fort), puis de mon stage de fin d’études en début d’année prochaine. Je glisse ça là, au cas où ;)

Merci et bonne continuation, 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 Ownership Transfer dans le magasin d’applications Nextcloud : https://apps.nextcloud.com/apps/ownershiptransfer
• Lien vers le code de Ownership Transfer sur la forge Framagit : https://framagit.org/framasoft/nextcloud/ownershiptransfer
• Candidater et proposer votre CV à Framasoft : envoyez un mail à stages @ framasoft.org

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.

Photo of Val, Framasoft intern between May and August 2024

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.

Val choosing his internship at Framasoft — Allegory

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.

Val « This is fine » Mème

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.

Screenshot of Intros in the Nextcloud application store

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 ?

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.

Photo de Val, stagiaire Framasoft entre mai et août 2024

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é.

Val choisissant son stage chez Framasoft — Allégorie

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 ait 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.

Val faisant face aux disparités de gestion du DOM HTML dans Nextcloud –Allégorie

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).

Capture écran de Intros dans le magasin d’application Nextcloud

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é.

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