Brancher votre API

La frontière

Tout le travail côté serveur passe par un seul module, src/js/dataservice.js. L'interface appelle des méthodes comme getCoupon(), submitLogin() et verifyCode() sans jamais savoir si la réponse vient de données de démo ou d'une vraie API. C'est donc le seul endroit à modifier pour passer en production.

Modes démo et réel

DATA_MODE=demo, le mode par défaut, renvoie des réponses fictives dans le navigateur. Avec DATA_MODE=live et une API_BASE_URL absolue, le build expose l'origine de l'API au navigateur et les méthodes du service de données peuvent l'appeler par src/js/api-client.js :

import { apiBaseUrl, get } from "./api-client.js";

async function getCoupon(code) {
  if (apiBaseUrl()) {
    return get("/v1/coupons/{code}", { params: { code }, action: "apply_coupon" });
  }
  return DEMO_COUPONS[code] ? { pct: DEMO_COUPONS[code] } : null;
}

Le client ajoute un délai de 15 secondes, accepte un AbortSignal pour annuler, envoie un nouveau jeton reCAPTCHA dans l'en-tête x-recaptcha-token, et lève des erreurs qui portent .status, ou .code pour les délais et les échecs reCAPTCHA.

Appeler un modèle d'IA

Gardez les clés de vos modèles sur votre serveur, jamais dans le navigateur. Une configuration typique :

1. Ajoutez à votre backend un point d'accès, comme POST /v1/generate, qui vérifie le jeton reCAPTCHA et la session de l'utilisateur, puis appelle votre fournisseur de modèles.
2. Ajoutez la méthode correspondante au service de données, avec une version de démo qui renvoie une réponse préparée : l'interface fonctionne hors ligne et dans les tests de captures.
3. Appelez-la depuis un module de page dans src/js/pages/, déclaré dans PAGE_MODULES, pour que son code ne se charge que sur la page qui en a besoin.

Modules de page

Un module de page exporte init(shared) et, au besoin, render() :

export function init({ state, t, render }) {
  document.querySelector("[data-prompt-form]")?.addEventListener("submit", (e) => {
    e.preventDefault();
    // appeler DataService, mettre à jour state, puis render()
  });
}

Indiquez pageModule: <nom> dans l'en-tête du gabarit. Un formulaire envoyé avant l'arrivée du module est retenu puis rejoué, et si le module ne se charge pas, l'en-tête, le pied de page et le paiement continuent de fonctionner.

Le tester

tests/fixtures.js bloque les appels réseau inattendus dans les tests navigateur. Utilisez page.route() pour renvoyer des réponses préparées de votre API : les tests restent rapides et prévisibles.