Nexi, un nouveau logiciel de gestion de listes

Le besoin

Je cherchais un logiciel me permettant de gérer la liste des bandes dessinées que je souhaite acheter.

Le cahier des charges des éléments des listes était relativement simples :

• un nom ;
• éventuellement un numéro, pour indiquer le tome de la série à acheter, incrémentable en un clic (une fois que j’ai acheté un tome, je vais logiquement avoir envie d’acheter le suivant) ;
• un état publié / pas encore publié, pour garder trace des livres dont j’attends la publication.

Voilà qui est relativement simple… mais pas moyen de trouver exactement ce que je voulais ! Le plus proche était Carnet qui en plus avait l’avantage d’être synchronisable avec un serveur Nextcloud et d’avoir une application Nextcloud, mais il ne faisait pas les numéros, et le passage d’une liste à l’autre est un peu lent (revenir à l’écran des listes, retrouver l’autre liste, cliquer dessus).

Bref, ça me démangeait. Et quand ça démange un libriste, le libriste se gratte.

Le développement

N’ayant pas envie d’apprendre à développer une application Android (Java ? Non, merci, ça ira), j’ai commencé à coder un site web simple (HTML/CSS/JavaScript) en me disant que je pourrais toujours la transformer en progressive web app (PWA) par la suite.

Une PWA est une page web qui s’installe sur votre téléphone comme une application native. Les éventuelles données sont stockées de façon locale si vous êtes hors ligne et synchronisées lors du retour en ligne.

J’ai donc développé mon application, que j’ai commencé par appeler « Next Book », puisque le but était de garder la trace de mes livres à acheter.
Cependant, après discussion avec quelques amis, je me suis rendu compte que je pouvais utiliser cette application pour n’importe quel type de liste : une liste de courses, avec le nombre d’articles à acheter par exemple.
Je l’ai donc renommée en Nexi (pour NEXt Item, « élément suivant » en français).

Au menu, donc :

• application en javascript avec AlpineJS ;
• CSS généré avec TailwindCSS ;
• données stockées en local via IndexedDB grâce à JsStore ;
• utilisation de l’extension de navigateur WAVE pour m’assurer de l’accessibilité de Nexi.

À mon cahier des charges, j’ai ajouté quelques petites choses :

• gestion des thèmes clairs et sombres grâce à la fonctionnalité CSS prefers-color-scheme ;
• multi-langue avec détection du langage du navigateur mais avec possibilité de choisir la langue que l’on souhaite (code largement repris de celui de WemaWema) ;
• possibilité de décrémenter le nombre (pour une liste de course, ne pouvoir qu’incrémenter le nombre n’est pas très pratique) ;
• export et import des données.

L’application

Aucune donnée n’est envoyée à un quelconque serveur, tout reste dans le navigateur. J’avoue que j’avais envie d’aller vite et pas du tout envie de devoir développer un serveur en plus.

Vous pouvez utiliser Nexi sur https://nexi.fiat-tux.fr/ (qui est une Gitlab Page sur Framagit, j’avais la flemme de rajouter un site sur mon serveur).

S’il y en a qui ont utilisé l’adresse que j’ai diffusé sur Mastodon ces derniers jours, https://fiat-tux.fr/nexi, je vous conseille d’exporter vos données et d’aller sur la nouvelle adresse pour les y importer : je ne sais pas pendant combien de temps je garderais l’ancienne adresse active.

Pour ceux qui se demandent quel est l’origine de logo, c’est fort simple : Nexi me permet de passer rapidement un élément de la sous-liste « En cours » du dessus à la sous-liste « Suivant » du dessous. Le logo est donc une représentation de cette fonctionnalité : ce sont deux flèches, l’une pointant vers le haut et l’autre vert le bas 🙂

Pour installer Nexi sur votre smartphone, allez sur le site puis regardez dans le menu de votre navigateur : Firefox me propose un simple mais efficace « Installer » (j’ignore comment font les autres navigateurs).

Le code

Nexi est publiée sous les termes de la GNU Affero General Public License v3.0.

Le dépôt git de Nexi est sur Framagit : https://framagit.org/fiat-tux/hat-softwares/nexi, n’hésitez pas à créer des tickets et à contribuer, ou à installer Nexi chez vous : c’est aussi simple que de déposer les fichiers du dépôt sur le serveur web 🙂
Il est aussi possible de contribuer en traduisant Nexi sur https://weblate.framasoft.org/projects/nexi/frontend/.

EDIT 10/09/2020 : ajout de la licence.

Crédit : Photo par David Ballew sur Unsplash