Projet : la Librairie interactive

Chapitre après chapitre, la Librairie du Campus a appris à se servir de JavaScript : un menu qui se replie (chapitre 7), un catalogue fabriqué à partir de données et filtré à la frappe (chapitre 8), un chargement qui ne gèle pas la page (chapitre 9), des livres venus d'un serveur (chapitre 10), un panier conservé dans le navigateur (chapitre 11). Il reste à en faire un site que l'on peut utiliser de bout en bout : choisir un livre, le mettre au panier, ajuster les quantités, commander, recevoir un numéro de commande. Et à le faire proprement : un code organisé, testé, accessible, qui résiste aux pannes.

Ce dernier chapitre est un projet. Il ne présente presque aucune notion nouvelle ; il montre comment les assembler, et comment vérifier le résultat. Le site complet est dans le dossier code/ch12/librairie/ du livre ; on l'ouvre, comme aux deux chapitres précédents, avec le serveur du livre :

$ node outils/serveur.mjs

puis l'adresse http://localhost:8000/code/ch12/librairie/ dans le navigateur.

12.1 Le cahier des charges

Avant d'écrire du code, on écrit ce que le site doit permettre, du point de vue du client, puis les exigences de qualité.

• Le catalogue montre les livres du serveur ; on peut les chercher (titre, auteur, rayon, sans souci des accents) et les trier (titre, auteur, prix croissant ou décroissant). Une recherche se garde en favori et se partage par son adresse.
• Chaque livre disponible s'ajoute au panier, depuis le catalogue ou depuis sa fiche ; un livre épuisé ne le peut pas ; on ne dépasse ni le stock, ni vingt exemplaires.
• L'en-tête de toutes les pages indique le nombre d'articles du panier, à jour même si l'on a ajouté un livre dans un autre onglet.
• La page Panier liste les livres, avec prix, quantité modifiable, sous-total et bouton « Retirer », puis le total selon le mode de retrait (livraison sur le campus : 2 €).
• Le client donne son nom et son adresse électronique, guidé par des messages clairs, puis envoie la commande. Il reçoit un numéro de commande, et le panier se vide. Si le serveur refuse (stock insuffisant…), le client lit pourquoi ; si le serveur est injoignable, le panier est conservé.

Exigences de qualité : chaque page affiche ses états (chargement, erreur avec possibilité de réessayer) ; tout se fait au clavier ; les messages sont annoncés aux lecteurs d'écran ; aucune page ne déborde horizontalement sur un téléphone ; les règles (panier, tri, filtre) sont couvertes par des tests ; le code passe ESLint et le HTML le validateur.

12.2 L'architecture

Le site compte douze modules JavaScript, un peu plus de six cents lignes en tout, commentaires compris. Pour qu'un tel ensemble reste compréhensible, chaque module a une seule responsabilité, et les dépendances vont toujours dans le même sens : les modules d'affichage utilisent les règles et l'accès aux données, jamais l'inverse.

(La figure omet quelques flèches, comme celles de script.js, qui importe tous les modules d'affichage, ou de compteur.js vers panier.js.)

Toutes les pages chargent le même script.js. Il regarde ce que contient la page et n'active que ce qui la concerne : le catalogue s'il trouve la liste des livres, la page Panier s'il trouve son conteneur, et ainsi de suite. Le chargement des livres, commun au catalogue et au panier, est écrit une seule fois, avec ses trois états :

// Charge les livres en affichant les trois états (chargement, erreur avec
// « Réessayer », données), puis passe les livres à la page.
async function chargerAvecEtats(etat, texteChargement, utiliser) {
  const alerte = document.querySelector("#alerte");
  alerte.hidden = true;
  etat.textContent = texteChargement;
  try {
    utiliser(await chargerLivres());
  } catch (e) {
    console.error(e); // le détail technique, pour le développeur
    etat.textContent = "";
    alerte.querySelector(".message").textContent = messageUtilisateur(e);
    alerte.hidden = false;
    alerte.querySelector("#reessayer")?.addEventListener(
      "click",
      () => chargerAvecEtats(etat, texteChargement, utiliser),
      { once: true },
    );
  }
}