Nexi, un nouveau logi­ciel de gestion de listes

Le besoin

Je cher­chais un logi­ciel me permet­tant de gérer la liste des bandes dessi­nées que je souhaite ache­ter.

Le cahier des charges des éléments des listes était rela­ti­ve­ment simples :

  • un nom ;
  • éven­tuel­le­ment un numéro, pour indiquer le tome de la série à ache­ter, incré­men­table en un clic (une fois que j’ai acheté un tome, je vais logique­ment avoir envie d’ache­ter le suivant) ;
  • un état publié / pas encore publié, pour garder trace des livres dont j’at­tends la publi­ca­tion.

Voilà qui est rela­ti­ve­ment simple… mais pas moyen de trou­ver exac­te­ment ce que je voulais ! Le plus proche était Carnet qui en plus avait l’avan­tage d’être synchro­ni­sable avec un serveur Next­cloud et d’avoir une appli­ca­tion Next­cloud, mais il ne faisait pas les numé­ros, et le passage d’une liste à l’autre est un peu lent (reve­nir à l’écran des listes, retrou­ver l’autre liste, cliquer dessus).

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

Le déve­lop­pe­ment

N’ayant pas envie d’ap­prendre à déve­lop­per une appli­ca­tion Android (Java ? Non, merci, ça ira), j’ai commencé à coder un site web simple (HTML/CSS/JavaS­cript) en me disant que je pour­rais toujours la trans­for­mer en progres­sive web app (PWA) par la suite.

Une PWA est une page web qui s’ins­talle sur votre télé­phone comme une appli­ca­tion native. Les éven­tuelles données sont stockées de façon locale si vous êtes hors ligne et synchro­ni­sées lors du retour en ligne.

J’ai donc déve­loppé mon appli­ca­tion, que j’ai commencé par appe­ler « Next Book », puisque le but était de garder la trace de mes livres à ache­ter.
Cepen­dant, après discus­sion avec quelques amis, je me suis rendu compte que je pouvais utili­ser cette appli­ca­tion pour n’im­porte quel type de liste : une liste de courses, avec le nombre d’ar­ticles à ache­ter par exemple.
Je l’ai donc renom­mée en Nexi (pour NEXt Item, « élément suivant » en français).

Au menu, donc :

  • appli­ca­tion en javas­cript avec Alpi­neJS ;
  • CSS généré avec Tail­windCSS ;
  • données stockées en local via IndexedDB grâce à JsStore ;
  • utili­sa­tion de l’ex­ten­sion de navi­ga­teur WAVE pour m’as­su­rer de l’ac­ces­si­bi­lité de Nexi.

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

  • gestion des thèmes clairs et sombres grâce à la fonc­tion­na­lité CSS prefers-color-scheme ;
  • multi-langue avec détec­tion du langage du navi­ga­teur mais avec possi­bi­lité de choi­sir la langue que l’on souhaite (code large­ment repris de celui de WemaWema) ;
  • possi­bi­lité de décré­men­ter le nombre (pour une liste de course, ne pouvoir qu’in­cré­men­ter le nombre n’est pas très pratique) ;
  • export et import des données.

L’ap­pli­ca­tion

Une application de gestion de liste, avec une liste remplie de différents éléments
Voici à quoi ressemble Nexi

Aucune donnée n’est envoyée à un quel­conque serveur, tout reste dans le navi­ga­teur. J’avoue que j’avais envie d’al­ler vite et pas du tout envie de devoir déve­lop­per un serveur en plus.

Vous pouvez utili­ser Nexi sur https://nexi.fiat-tux.fr/ (qui est une Gitlab Page sur Frama­git, j’avais la flemme de rajou­ter un site sur mon serveur).

S’il y en a qui ont utilisé l’adresse que j’ai diffusé sur Masto­don ces derniers jours, https://fiat-tux.fr/nexi, je vous conseille d’ex­por­ter vos données et d’al­ler sur la nouvelle adresse pour les y impor­ter : je ne sais pas pendant combien de temps je garde­rais l’an­cienne adresse active.

Pour ceux qui se demandent quel est l’ori­gine de logo, c’est fort simple : Nexi me permet de passer rapi­de­ment un élément de la sous-liste « En cours » du dessus à la sous-liste « Suivant » du dessous. Le logo est donc une repré­sen­ta­tion de cette fonc­tion­na­lité : ce sont deux flèches, l’une poin­tant vers le haut et l’autre vert le bas 🙂

Une flèche verte pointant vers le haut, sur une flèche mauve claire pointant vers le bas, sur un fond mauve foncé
Le logo de Nexi

Pour instal­ler Nexi sur votre smart­phone, allez sur le site puis regar­dez dans le menu de votre navi­ga­teur : Fire­fox me propose un simple mais effi­cace « Instal­ler » (j’ignore comment font les autres navi­ga­teurs).

Le code

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

Le dépôt git de Nexi est sur Frama­git : https://frama­git.org/fiat-tux/hat-soft­wares/nexi, n’hé­si­tez pas à créer des tickets et à contri­buer, ou à instal­ler Nexi chez vous : c’est aussi simple que de dépo­ser les fichiers du dépôt sur le serveur web 🙂
Il est aussi possible de contri­buer en tradui­sant Nexi sur https://weblate.frama­soft.org/projects/nexi/fron­tend/.

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

Crédit : Photo par David Ballew sur Unsplash

7 réflexions au sujet de “Nexi, un nouveau logi­ciel de gestion de listes”

  1. Juste une petite remarque en regardant la capture d’ecran

    La liste semble surchargé avec 5 boutons pour chaque lignes et avec mes gros doigts j’aurais tendance à appuyer sur un bouton à coté.

    Ce serait peut-être mieux avec une barre « global » qui agirait sur l’élément sélectionné ou faire apparaitre les boutons que quand on sélectionne un élément?

    Par contre ce serait moins efficace dans l’utilisation 2 cliques au lieux d’un pour effectuer une action

    Répondre
    • J’ai modifié le design hier, les boutons sont en colonne à droite, le texte restant à gauche, donc ça fait moins surchargé/fouilli et il y a moins de risques de se louper.

      Utilisant Nexi principalement sur mon téléphone, je trouve que ça fonctionne plutôt bien comme ça.

      Et oui, 2 clics, ça serait sans doute de trop 🤔

      Répondre

Répondre à Thibaut Annuler la réponse