Connexion
Intros, une app Nextcloud pour faciliter la prise en main de Framaspace
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
