LIFWEB TP5b

Partie 2 : client

Il s’agit dans cette partie de créer un client de type Single Page Application (MDN) qui va utiliser l’API de la Partie 1 et faire le rendu complètement côté client. Vous pouvez utiliser votre propre serveur d’API sur localhost ou à défaut celui fourni ici (accessible depuis le réseau de l’université ou via le VPN). Un exemple d’interface de client mis-en-forme avec https://bulma.io/ est proposé ci-dessous.

Capture d'écran du client JS

Exercice 1 : client AJAX de l’API

1.O Familiarisation avec le code fournit

Le fichier HTML public/client.html et le fichier public/javascripts/app.js sont servis statiquement par hapi via le module inert. Les échanges entre le navigateur et le serveur se font en JSON sur l’API HTTP avec des fetch dans l’unique page client.html.

Chargez la page http://localhost:3000/client.html dans votre navigateur (si votre serveur local est lancé sur une autre url ou un autre port corrigez en fonction). Vous devriez voir apparaître la page HTML, mais le code JavaScript ne fonctionne pas encore.

Dans votre code corrigez la constant apiServer avec l’url de votre serveur local dans le fichier public/client.html.

En regardant l’onglet “Réseau” de la console de développement de votre navigateur, vérifiez que les requêtes vers les routes /api et /health son bien résolue (réponse 200). Le footer de votre page devrait être complété avec les informations sur le serveur.

1.1 Requêtage de l’API

Modifier le client de départ pour que la soumission du formulaire #create-link soit remplacée par une requête sur la route POST /api. Le code fourni utilise la variable apiServer qui doit être positionné (en haut du fichier app.js) sur votre serveur (ou éventuellement sur http://192.168.74.144/ si vous voulez tester votre client en passant par le corrigé enseignant du serveur). La page sera mise à jour selon le résultat du fetch :

  • En cas d’erreur (e.g., 400 si uri n’est pas une URL valide).
  • En cas de succès, afficher le lien raccourci.
  • Pour faciliter l’utilisation, quand un lien est généré avec succès, on proposera un bouton Copier l’URL qui copie le lien dans le presse-papier grâce à la Clipboard.writeText() de la Clipboard API.

Pour éviter une manipulation fastidieuse du DOM, la librairie lit-html standalone est installée et un exemple est donné. Cette bibliothèque propose un moteur de template qui permet de créer des éléments dont on utilisera surtout les expressions. Cette bibliothèque dispose d’une extension VSCode.

L’alternative est d’utiliser des éléments HTML <templates> et de les cloner en JavaScript, comme vu dans dans les TP2 et TP4.

⚠️ La page index.html pourrait être servie par un autre serveur que celui de l’API, par exemple avec Live Server. ⚠️

Exercice 2 : rendu CSS

Utiliser un framework CSS comme https://bulma.io/ ou https://purecss.io/ pour avoir un rendu graphique correct. A minima, utiliser https://simplecss.org/ ou un autre framework léger qui ne demande pas d’adaptation. Ces bibliothèques CSS peuvent être chargées dans le fichier HTML comme ci-après.

<head>
  <!-- Pour https://bulma.io/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" />

  <!-- Pour purecss -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
    integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
    crossorigin="anonymous"
  />

  <!-- pour https://simplecss.org/ -->
  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
</head>

Exercice 3 (BONUS) : support des extensions par le client

Étendre le client pour gérer la fonctionnalité de suppression de lien et celle d’expiration lors de la saisie.