Exercice - Créer une application web de base

Effectué

Jusqu’ici, vous avez installé MongoDB et Node.js sur votre machine virtuelle Ubuntu. Il est maintenant temps de créer une application web de base pour voir les choses en action. Tout au long du processus, vous voyez comment AngularJS et Express s’intègrent.

Rien de mieux qu’un exemple pour apprendre. L’application web que vous construisez implémente une base de données de livres simple. Cette application web vous laisse afficher des informations sur les livres, ajouter de nouveaux livres et supprimer des livres existants.

L’application web que vous voyez ici illustre de nombreux concepts qui s’appliquent à la plupart des applications web de pile MEAN. En fonction de vos besoins et de vos intérêts, vous pouvez explorer les fonctionnalités dont vous avez besoin pour créer vos propres applications de pile MEAN.

Voici à quoi ressemble l’application web Livres.

Voici comment s’intègre chaque composant de la pile MEAN.

• MongoDB stocke des informations sur les livres.
• Express.js route chaque requête HTTP vers le gestionnaire approprié.
• AngularJS connecte l’interface utilisateur à la logique métier du programme.
• Node.js héberge l’application côté serveur.

Important

Pour les besoins de ce tutoriel, vous allez créer ici une application web de base. Son objectif consiste à tester votre pile MEAN et à vous donner une idée de son fonctionnement. Cette application n’est pas suffisamment sécurisée ou opérationnelle pour un environnement de production.

Qu’en est-il d’Express ?

Jusqu’ici, vous avez installé MongoDB et Node.js sur votre machine virtuelle. Qu’en est-il d’Express.js, le E dans l’acronyme MEAN ?

Express.js est un framework de serveur web conçu pour Node.js qui simplifie le processus de création d’applications web.

L’objectif principal d’Express consiste à gérer le routage des requêtes. Le terme routage fait référence à la façon dont l’application répond à une requête envoyée à un point de terminaison spécifique. Un point de terminaison se compose d’un chemin, ou URI, et d’une méthode de requête telle que GET ou POST. Par exemple, vous pourrez répondre à une requête GET envoyée au point de terminaison /book en fournissant la liste de tous les livres contenus dans la base de données. Vous pourriez répondre à une requête POST envoyée au point de terminaison /book en ajoutant une entrée dans la base de données basée sur des champs renseignés par l’utilisateur dans un formulaire web.

Dans l’application web que vous allez construire bientôt, vous utiliserez Express pour router les requêtes HTTP et retourner le contenu web à votre utilisateur. Express peut également aider vos applications web à gérer les cookies HTTP et à traiter les chaînes de requête.

Express est un package Node.js. Vous utilisez l’utilitaire npm, qui est fourni avec Node.js, pour installer et gérer les packages Node.js. Plus loin dans cette unité, vous allez créer un fichier nommé package.json pour définir Express et d’autres dépendances, puis exécuter la commande npm install pour installer ces dépendances.

Qu’en est-il d’AngularJS ?

Comme Express, AngularJS, l’acronyme A dans l’acronyme MEAN, n’est pas encore installé.

AngularJS simplifie l’écriture et le test des applications web car il vous permet de mieux séparer l’apparence de votre page web (votre code HTML) de la façon dont elle se comporte. Si vous connaissez le modèle MVC (modèle-vue-contrôleur) ou le concept de liaison de données, AngularJS devrait vous être familier.

AngularJS est un framework JavaScript front-end, ce qui signifie qu’il n’a besoin d’être disponible que sur le client qui accède à l’application. En d’autres termes, AngularJS s’exécute dans le navigateur web de vos utilisateurs, et non sur votre serveur web. De plus, AngularJS étant JavaScript, vous pouvez l’utiliser pour extraire facilement des données de votre serveur web afin de les afficher sur la page.

Vous n’installez pas vraiment AngularJS. Au lieu de cela, vous ajoutez une référence au fichier JavaScript dans votre page HTML, comme vous le feriez avec d’autres bibliothèques JavaScript. Il existe plusieurs façons d’inclure AngularJS dans vos pages web. Ici, vous allez charger AngularJS à partir d’un réseau de distribution de contenu (CDN). Un CDN est un moyen de distribuer géographiquement des images, vidéos et autre contenu afin d’améliorer la vitesse de téléchargement.

N’ajoutez pas encore ce code, mais voici un exemple qui charge AngularJS à partir d’un CDN. Vous ajoutez généralement ce code à la section <head> de votre page HTML.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

Remarque

Ne confondez pas AngularJS avec Angular. Bien que bon nombre de concepts soient similaires entre les deux, AngularJS est le prédécesseur d’Angular. AngularJS est encore couramment utilisé pour la création d’applications web. Tandis qu’AngularJS est basé sur JavaScript, Angular est basé sur TypeScript, un langage de programmation qui simplifie l’écriture des programmes JavaScript.

Comment faire pour construire l’application ?

Ici, vous utilisez un processus de base. Vous allez écrire du code d’application à partir du Cloud Shell, puis utiliser le protocole SCP (Secure Copy Protocol) pour copier les fichiers sur votre machine virtuelle. Ensuite, vous démarrer l’application Node.js et observez les résultats dans votre navigateur.

Dans la pratique, vous écrivez et testez généralement votre application web dans un environnement plus local, par exemple à partir de votre ordinateur portable ou d’une machine virtuelle exécutée localement. Vous pouvez stocker votre code dans un système de contrôle de version tel que Git. Ensuite, utilisez un système d’intégration continue et de livraison continue (CI/CD), tel qu’Azure DevOps, pour tester vos modifications et les charger sur votre machine virtuelle. Nous vous présentons davantage de ressources à la fin de ce module.

Créer l’application web Books

Ici, vous créez tous les fichiers de code, de script et HTML qui composent votre application web. Pour rester concis, nous soulignons les parties importantes de chaque fichier, mais nous n’entrons pas dans les détails.

Si vous êtes toujours connecté à votre machine virtuelle via SSH, exécutez exit pour quitter la session SSH et revenir à Cloud Shell.

exit

Vous êtes maintenant de retour dans votre session Cloud Shell.

Créer les fichiers

1. À partir de Cloud Shell, exécutez ces commandes pour créer les dossiers et les fichiers de votre application web :

   cd ~
   mkdir Books
   touch Books/server.js
   touch Books/package.json
   mkdir Books/app
   touch Books/app/model.js
   touch Books/app/routes.js
   mkdir Books/public
   touch Books/public/script.js
   touch Books/public/index.html
   

   L’application web inclut les dossiers et fichiers suivants :

   • Books est le répertoire racine du projet.
     • server.js définit le point d’entrée à l’application web. Il charge les packages Node.js nécessaires, spécifie le port où écouter et commence à écouter le trafic HTTP entrant.
     • package.json fournit des informations sur votre application, notamment son nom, sa description et les packages Node.js dont votre application a besoin pour s’exécuter.
   • Books/app : contient le code qui s’exécute sur le serveur.
     • model.js définit la connexion et le schéma de base de données. Il constitue le modèle de données pour votre application.
     • routes.js gère le routage des requêtes. Par exemple, il définit les requêtes GET envoyées au point de terminaison /book en fournissant la liste de tous les livres contenus dans la base de données.
   • Books/public : contient les fichiers présentés directement au navigateur du client.
     • index.html contient la page d’index. Il contient un formulaire web qui permet à l’utilisateur de soumettre des informations sur des livres. Il affiche aussi tous les livres de la base de données et vous permet de supprimer des entrées de la base de données.
     • script.js contient le code JavaScript qui s’exécute dans le navigateur de votre utilisateur. Il peut envoyer des requêtes au serveur pour dresser une liste des livres, ajouter des livres à la base de données et supprimer des livres de la base de données.

2. Exécutez la commande code pour ouvrir vos fichiers dans l’Éditeur Cloud Shell.

   code Books
   

Créer le modèle de données

1. Dans l’éditeur, ouvrez app/model.js et ajoutez le code suivant :

   var mongoose = require('mongoose');
   var dbHost = 'mongodb://localhost:27017/Books';
   mongoose.connect(dbHost, { useNewUrlParser: true } );
   mongoose.connection;
   mongoose.set('debug', true);
   var bookSchema = mongoose.Schema( {
       name: String,
       isbn: {type: String, index: true},
       author: String,
       pages: Number
   });
   var Book = mongoose.model('Book', bookSchema);
   module.exports = Book;
   

   Important

   Chaque fois que vous collez ou modifiez le code dans un fichier dans l’éditeur, veillez à enregistrer dans la foulée à l’aide du menu « ... » ou de la touche d’accès rapide (Ctrl+S sur Windows et Linux, Commande+S sur macOS).

   Ce code utilise Mongoose pour simplifier le processus de transfert de données vers et à partir de MongoDB. Mongoose est un système de modélisation des données basé sur les schémas. Le code définit un document de base de données nommé « Book » avec le schéma fourni. Le schéma définit quatre champs qui décrivent un même livre :

   • Le nom du livre (son titre)
   • Son numéro ISBN (International Standard Book Number), qui identifie le livre de manière unique
   • Son auteur
   • Le nombre de pages qu’il contient

   Ensuite, vous créez des gestionnaires HTTP qui mappent les requêtes GET, POST et DELETE à des opérations de base de données.

Créer les routes Express.js qui gèrent les requêtes HTTP

1. Dans l’éditeur, ouvrez app/routes.js et ajoutez le code suivant :

   var path = require('path');
   var Book = require('./model');
   var routes = function(app) {
       app.get('/book', function(req, res) {
           Book.find({}, function(err, result) {
               if ( err ) throw err;
               res.json(result);
           });
       });
       app.post('/book', function(req, res) {
           var book = new Book( {
               name:req.body.name,
               isbn:req.body.isbn,
               author:req.body.author,
               pages:req.body.pages
           });
           book.save(function(err, result) {
               if ( err ) throw err;
               res.json( {
                   message:"Successfully added book",
                   book:result
               });
           });
       });
       app.delete("/book/:isbn", function(req, res) {
           Book.findOneAndRemove(req.query, function(err, result) {
               if ( err ) throw err;
               res.json( {
                   message: "Successfully deleted the book",
                   book: result
               });
           });
       });
       app.get('*', function(req, res) {
           res.sendFile(path.join(__dirname + '/public', 'index.html'));
       });
   };
   module.exports = routes;
   

   Ce code crée quatre routes pour l’application. Voici une brève présentation de chacun d’eux.

   Verbe HTTP	Point de terminaison	Description
   GET	/book	Récupère tous les livres à partir de la base de données.
   POST	/book	Crée un objet Book basé sur les champs renseignés par l’utilisateur dans le formulaire web, et écrit cet objet dans la base de données.
   DELETE	/book/:isbn	Supprime le livre identifié par son numéro ISBN de la base de données.
   GET	*	Retourne la page d’index quand aucune autre route n’est mise en correspondance.

   Express.js peut fournir des réponses HTTP directement dans le code de gestion des routes, ou fournir du contenu statique provenant de fichiers. Ce code montre les deux. Les trois premières routes retournent des données JSON pour les requêtes d’API book. La quatrième route (le cas par défaut) retourne le contenu du fichier d’index, index.html.

Créer l’application JavaScript côté client

1. Dans l’éditeur, ouvrez public/script.js et ajoutez le code suivant :

   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $http) {
       var getData = function() {
           return $http( {
               method: 'GET',
               url: '/book'
           }).then(function successCallback(response) {
               $scope.books = response.data;
           }, function errorCallback(response) {
               console.log('Error: ' + response);
           });
       };
       getData();
       $scope.del_book = function(book) {
           $http( {
               method: 'DELETE',
               url: '/book/:isbn',
               params: {'isbn': book.isbn}
           }).then(function successCallback(response) {
               console.log(response);
               return getData();
           }, function errorCallback(response) {
               console.log('Error: ' + response);
           });
       };
       $scope.add_book = function() {
           var body = '{ "name": "' + $scope.Name +
           '", "isbn": "' + $scope.Isbn +
           '", "author": "' + $scope.Author +
           '", "pages": "' + $scope.Pages + '" }';
           $http({
               method: 'POST',
               url: '/book',
               data: body
           }).then(function successCallback(response) {
               console.log(response);
               return getData();
           }, function errorCallback(response) {
               console.log('Error: ' + response);
           });
       };
   });
   

   Notez la façon dont ce code définit un module nommé myApp et un contrôleur nommé myCtrl. Nous ne décrirons pas ici en détail le fonctionnement des contrôleurs et du module, mais vous utiliserez ces noms à l’étape suivante pour lier l’interface utilisateur (code HTML) à la logique métier de l’application.

   Précédemment, vous avez créé quatre routes qui gèrent différentes opérations GET, POST et DELETE sur le serveur. Ce code ressemble à ces mêmes opérations, mais côté client (navigateur web de l’utilisateur).

   La fonction getData, par exemple, envoie une requête GET au point de terminaison /book. Rappelez-vous que le serveur gère cette requête en récupérant des informations sur tous les livres à partir de la base de données et en retournant ces informations sous forme de données JSON dans la réponse. Notez comment les données JSON dans la réponse sont affectées à la variable $scope.books. Vous découvrez comment ce code affecte ce que voit l’utilisateur dans la page web à l’étape suivante.

   Ce code appelle la fonction getData quand la page se charge. Vous pouvez examiner les fonctions del_book et add_book pour vous faire une idée de leur fonctionnement. Il n’est pas nécessaire que le code côté client corresponde au gestionnaire par défaut du serveur, car ce dernier retourne la page d’index et non les données JSON.

Créer l’interface utilisateur

1. Dans l’éditeur, ouvrez public/index.html et ajoutez le code suivant :

   <!doctype html>
   <html ng-app="myApp" ng-controller="myCtrl">
   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
       <script src="script.js"></script>
   </head>
   <body>
       <div>
       <table>
           <tr>
           <td>Name:</td>
           <td><input type="text" ng-model="Name"></td>
           </tr>
           <tr>
           <td>Isbn:</td>
           <td><input type="text" ng-model="Isbn"></td>
           </tr>
           <tr>
           <td>Author:</td>
           <td><input type="text" ng-model="Author"></td>
           </tr>
           <tr>
           <td>Pages:</td>
           <td><input type="number" ng-model="Pages"></td>
           </tr>
       </table>
       <button ng-click="add_book()">Add</button>
       </div>
       <hr>
       <div>
       <table>
           <tr>
           <th>Name</th>
           <th>Isbn</th>
           <th>Author</th>
           <th>Pages</th>
           </tr>
           <tr ng-repeat="book in books">
           <td><input type="button" value="Delete" data-ng-click="del_book(book)"></td>
           <td>{{book.name}}</td>
           <td>{{book.isbn}}</td>
           <td>{{book.author}}</td>
           <td>{{book.pages}}</td>
           </tr>
       </table>
       </div>
   </body>
   </html>
   

   Ce code crée un formulaire HTML de base, composé de quatre champs d’envoi des données sur les nouveaux livres, et d’une table qui montre tous les livres déjà listés dans la base de données.

   Bien que ce code HTML soit standard, les attributs HTML ng- peuvent ne pas vous être familiers. Ces attributs HTML permettent d’associer le code AngularJS à l’interface utilisateur. Par exemple, quand vous sélectionnez Ajouter, AngularJS appelle la fonction add_book, qui envoie les données de formulaire au serveur.

   Vous pouvez examiner le code ici pour avoir une idée de la façon dont chaque attribut ng- est lié à la logique métier de l’application.

Créer le serveur Express.js pour l’hébergement de l’application

1. Dans l’éditeur, ouvrez server.js et ajoutez le code suivant :

   var express = require('express');
   var bodyParser = require('body-parser');
   var app = express();
   app.use(express.static(__dirname + '/public'));
   app.use(bodyParser.json());
   require('./app/routes')(app);
   app.set('port', 80);
   app.listen(app.get('port'), function() {
       console.log('Server up: http://localhost:' + app.get('port'));
   });
   

   Ce code crée l’application web proprement dite. Il fournit les fichiers statiques à partir du répertoire public et utilise les routes que vous avez définies précédemment pour gérer les requêtes.

Définir les dépendances et les informations de package

Rappelez-vous que package.json fournit des informations sur votre application, notamment son nom, sa description et les packages Node.js dont votre application a besoin pour s’exécuter.

1. Dans l’éditeur, ouvrez package.json et ajoutez le code suivant :

   {
     "name": "books",
     "description": "Sample web app that manages book information.",
     "license": "MIT",
     "repository": {
       "type": "git",
       "url": "https://github.com/MicrosoftDocs/mslearn-build-a-web-app-with-mean-on-a-linux-vm"
     },
     "main": "server.js",
     "dependencies": {
       "express": "~4.16",
       "mongoose": "~5.3",
       "body-parser": "~1.18"
     }
   }
   

Vous voyez des informations, ou métadonnées, concernant votre application, notamment son nom, sa description et sa licence.

Le champ repository spécifie où le code est stocké. Pour référence, vous pouvez ultérieurement examiner le code sur GitHub à l’URL indiquée ici.

Le champ main définit le point d’entrée de l’application. Nous le présentons ici par souci d'exhaustivité. Cependant, le point d'entrée n'est important que si vous envisagez de publier votre application en tant que package Node.js pour que d'autres puissent le télécharger et l'utiliser.

Le champ dependencies est important. Il définit les packages Node.js dont votre application a besoin. Bientôt, vous allez vous connecter à votre machine virtuelle une deuxième fois et exécuter la commande npm install pour installer ces packages.

Les packages de nœud utilisent généralement le schéma de version Gestion sémantique de version. Le numéro de version contient trois composants : version majeure, version mineure et correctif. La notation tilde ~ indique ici à npm qu’il faut installer la dernière version de correctif sous les versions majeure et mineure fournies. Les versions que vous voyez ici sont les plus récentes avec lesquelles ce module a été testé. Dans la pratique, vous pouvez incrémenter la version au fil du temps à mesure que vous mettez à jour et testez votre application pour utiliser les dernières fonctionnalités fournies par chaque package dépendant.

Copier les fichiers sur votre machine virtuelle

Avant de continuer, vérifiez que vous disposez de l’adresse IP de votre machine virtuelle. Si vous ne l’avez pas, exécutez ces commandes à partir de Cloud Shell pour la récupérer :

ipaddress=$(az vm show \
  --name MeanStack \
  --resource-group "<rgn>[sandbox resource group name]</rgn>" \
  --show-details \
  --query [publicIps] \
  --output tsv)

echo $ipaddress

1. Vous avez terminé la modification des fichiers. Vérifiez que vous avez enregistré les changements apportés à chaque fichier, puis fermez l’éditeur.

   Pour fermer l’éditeur, sélectionnez les points de suspension en haut à droite, puis sélectionnez Fermer l’éditeur.

2. Exécutez la commande scp suivante pour copier le contenu du répertoire ~/Books dans votre session Cloud Shell sous le même nom de répertoire dans votre machine virtuelle :

   scp -r ~/Books azureuser@$ipaddress:~/Books
   

Installer d’autres packages Node

Supposons que pendant le processus de développement, vous avez identifié des packages Node que vous souhaitez utiliser. Par exemple, rappelez-vous que app/model.js commence par cette ligne.

var mongoose = require('mongoose');

Rappelez-vous que l’application utilise Mongoose pour aider à transférer des données vers et à partir de votre base de données MongoDB.

L’application nécessite également Express.js et les packages body-parser. Body-parser est un plug-in qui permet à Express de travailler avec des données du formulaire web envoyé par le client.

Nous allons maintenant nous connecter la machine virtuelle et installer les packages que vous avez spécifiés dans package.json.

1. Avant de vous connecter à votre machine virtuelle, vérifiez que vous avez l’adresse IP de votre machine virtuelle a portée de main. Si vous ne l’avez pas, exécutez les commandes Cloud Shell de la section précédente pour le récupérer.

2. Créez une connexion SSH à votre machine virtuelle, comme vous l’avez fait précédemment :

   ssh azureuser@$ipaddress
   

3. Accédez au répertoire Books sous le répertoire de base :

   cd ~/Books
   

4. Exécutez npm install pour installer les packages dépendants :

   sudo apt install npm -y && npm install
   

Laissez votre connexion SSH ouverte pour la section suivante.

Tester l’application

Vous êtes maintenant prêt à tester votre application web Node.js !

1. À partir du répertoire ~/Books, exécutez cette commande pour démarrer l’application web :

   sudo nodejs server.js
   

   Cette commande démarre l’application en écoutant sur le port 80 les requêtes HTTP entrantes.

2. À partir d’un autre onglet du navigateur, accédez à l’adresse IP de votre machine virtuelle.

   La page d’index, qui inclut un formulaire web, apparaît.

   

   Essayez d’ajouter quelques livres à la base de données. Chaque fois que vous ajoutez un livre, la page met à jour la liste complète des livres.

   

   Pour supprimer un livre de la base de données, vous pouvez également sélectionner Supprimer.