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
@luc Un simple fichier Calc, au besoin sur Nextcloud ?
@ThibautBof, pas pratique sur mobile, et pas d'incrémentation du n° de tome en un clic : aller dans la case, supprimer, écrire, c'est loin d'être optimal.@luc
@framasky @luc Bon point malheureusement…
Je suis déçu que le logo ne soit pas un chapeau… 😛
Depuis quelques années, j’utilise une application dédiée à la gestion de bibliothèque en poche : https://f-droid.org/fr/packages/com.eleybourn.bookcatalogue/ C’est bien plus que le cachier de charges défini ici tout en étant assez facile d’utilisation.
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
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 🤔