home.social
Sign in Create account

#jsstore — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #jsstore, aggregated by home.social.

  1. Luc @[email protected] ·
    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 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 🙂

    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

    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/.

    Crédit : Photo par David Ballew sur Unsplash

    #alpine #indexeddb #jsstore #liste #nexi #pwa #tailwindcss #wave

    https://fiat-tux.fr/2020/09/09/nexi-un-nouveau-logiciel-de-gestion-de-listes/

    #alpine #indexeddb #jsstore #liste #nexi #pwa