Cours Node.js Cours Node.js - Séance 3 - Application Web simple

Objectifs de cette séance

Durée estimée cours + exercices: 6 heures.

Pré-requis

Pour effectuer ces exercices, assurez-vous que les pré-requis suivants sont bien installés et accessibles depuis votre terminal Bash (ou compatible):

ℹ️ À partir de cette séance, nous allons développer un programme Node.js indépendant de celui effectué lors des séances 1 et 2. Nous allons donc créer un nouveau répertoire et un nouveau dépôt pour celui-ci. Nous l’appellerons node-app.

Exercice 3.1 - Générer une application Web avec express-generator

Dans cet exercice, nous allons créer un nouveau serveur Web avec Node.js et Express. Cette fois-ci, nous allons utiliser express-generator pour générer une structure de fichiers digne d’une véritable application Web. Puis nous allons y effectuer quelques changements, pour comprendre comment fonctionne le moteur de rendu “Hogan.js” (inspiré de “Mustache”).

Critères de validation

Étapes proposées

  1. Créer un dépôt “node-app” sur l’hébergeur de dépôts git de l’école, puis le cloner localement:

     $ git clone "insérer l'URL de votre dépôt distant ici"
     $ cd node-app
    
  2. Générer une application Web dans ce répertoire à l’aide express-generator, puis pousser les changement dans le dépôt distant:

     $ npx express-generator --hogan --git
     $ git add .
     $ git commit -m "initial commit: express-generator"
     $ git push 
    

    Note: npx permet de télécharger puis d’exécuter un package npm exécutable sans l’ajouter comme dépendance d’un projet Node.js. Consulter la documentation de express-generator pour comprendre à quoi servent les paramètres fournis.

  3. Installer les dépendances puis tester le serveur en local, depuis votre navigateur Web:

     $ npm install
     $ DEBUG="node-app:server" npm start
    

    Note: DEBUG="node-app:server" est une affectation temporaire de variable d’environnement qui permet au programme Node.js d’afficher des traces utiles au débogage du serveur, grâce au package debug.

  4. Modifier le code du serveur de manière à ce que la page d’accueil de l’application Web affiche “Node App” au lieu de “Express”, sans altérer le style de la page, puis enregistrer ces modifications dans un commit git.

  5. Mettre le serveur en production sur Heroku.

  6. Compléter README.md pour expliquer comment cloner, installer, exécuter et déployer ce serveur depuis n’importe quel terminal Bash. Enregistrer ces modifications dans un commit git.

  7. Créer un git tag v3.1 puis le pousser ainsi que vos commits dans votre dépôt distant.

Exercice 3.2 - Formulaire avec page de destination

Dans cet exercice, nous allons compléter l’application Web de l’exercice précédent, de manière à ce que l’utilisateur puisse afficher une page personnalisée.

Le contenu de cette nouvelle page dépendra de ce que l’utilisateur aura tapé dans un formulaire. Nous allons donc ajouter:

Critères de validation

Étapes proposées

  1. Dans le modèle de la page index, ajouter un formulaire HTML qui permettra d’envoyer un champ nommé nom_ville via une requête HTTP GET, sur la route/chemin /ville.

  2. Créer un modèle de page ville.hjs qui affichera “Ville:” suivi du nom de la ville saisie par l’utilisateur. (paramètre du modèle)

  3. Ajouter la route GET /ville qui acceptera un paramètre GET nom_ville et rendra une page HTML à l’aide du modèle créé à l’étape précédente.

    À ce stade, l’utilisateur devrait être capable de taper le nom d’une ville depuis la page d’accueil de l’application, puis de se retrouver sur une page affichant le nom de la ville qu’il a saisi.

  4. Vérifier que l’application fonctionne aussi en production, en la déployant sur Heroku.

  5. Modifier l’application de manière à ce que le nom de la ville saisi par l’utilisateur soit transmis via HTTP POST au lieu de HTTP GET. Et s’assurer que les espaces et caractères accentués sont respectés sur la page de destination.

  6. Tester le serveur en production sur Heroku.

  7. Créer un git tag v3.2 puis le pousser ainsi que vos commits dans votre dépôt distant.

Exercice 3.3 - Enrichissement de données à l’aide d’APIs externes

Dans cet exercice, nous allons compléter l’application Web de l’exercice précédent, de manière à ce qu’elle récupère et affiche des informations supplémentaires sur la ville saisie par l’utilisateur.

Pour cela, notre application va interroger l’API geocode.xyz pour chaque ville saisie par l’utilisateur puis générer une page HTML riche à partir de la réponse.

Exemple de requête: geocode.xyz/new+york?json=1

Critères de validation

Étapes proposées

  1. Modifier la route /ville de manière à ce que le serveur obtienne les coordonnées GPS de la ville saisie par l’utilisateur en effectuant une requête vers l’API geocode.xyz, puis affiche ces coordonnées dans la page de destination.

  2. Modifier le modèle de la page de destination, afin qu’elle affiche un message d’erreur clair et esthétique dans le cas où aucune coordonnées n’auraient été trouvées pour la ville saisie.

  3. Modifier le modèle de manière à ce que la page de destination montre où se trouve la ville saisie sur une carte de type Google Maps ou OpenStreetMap, sans avoir à quitter l’application.

  4. Vérifier que l’application fonctionne aussi en production, en la déployant sur Heroku.

  5. Créer un git tag v3.3 puis le pousser ainsi que vos commits dans votre dépôt distant.

Étude: comment effectuer une requête HTTP depuis Node.js ?

Il existe plusieurs moyens d’effectuer des requêtes HTTP depuis Node.js.

Notamment:

Quelle solution préférez-vous ? Pourquoi ?

Pour aller plus loin

Modules: module.exports et require()

Fat arrow functions (=>)

Alternatives à Express

Il existe de nombreuses alternatives à Express pour créer des applications Web avec Node.js:

Par ailleurs, il est possible d’utiliser Node.js pour créer des applications “native”: Electron

Bref, les possibilités sont quasi-illimitées !

Quel framework essayerez-vous pour votre prochain projet Web ?