Intros, a Nextcloud app to help you get to grips with Framaspace

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 ?

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