Créer une application Angular avec l’API d’Azure Cosmos DB pour MongoDB - Créer une application Express Node.js

S’APPLIQUE À : Mongodb

Ce tutoriel en plusieurs parties montre comment créer une application écrite en Node.js avec Express et Angular, puis comment la connecter à votre compte Azure Cosmos DB configuré avec l’API d’Azure Cosmos DB pour MongoDB.

La partie 2 de ce didacticiel est basée sur l’introduction et aborde les tâches suivantes :

Tutoriel vidéo

Prérequis

Avant de commencer cette partie du didacticiel, assurez-vous d’avoir bien visionné la vidéo d’introduction.

Ce didacticiel requiert les éléments suivants :

• Node.js version 8.4.0 ou supérieure.
• Outil de test HTTP
  • Nous recommandons Insomnia, curl, Visual Studio ou Invoke-RestMethod
• Visual Studio Code ou l’éditeur de code de votre choix.

Installation de l’interface CLI Angular et TypeScript

1. Ouvrez une fenêtre d’invite de commandes pour Windows ou une fenêtre Terminal pour Mac et installez l’interface CLI Angular.

   npm install -g @angular/cli
   

2. Installez TypeScript en entrant la commande suivante dans l’invite de commandes.

   npm install -g typescript
   

Utiliser l’interface CLI Angular pour créer un nouveau projet

1. Depuis l’invite de commandes, accédez au dossier où vous souhaitez créer votre projet, puis exécutez la commande suivante. Cette commande crée un dossier et un projet nommé angular-cosmosdb, puis installe les composants Angular requis pour une nouvelle application. Elle utilise le programme d’installation minimale (--minimal) et spécifie que le projet utilise Sass (une syntaxe de type CSS avec l’indicateur --style scss).

   ng new angular-cosmosdb --minimal --style scss
   

2. Une fois la commande terminée, remplacez les répertoires dans le dossier src/client.

   cd angular-cosmosdb
   

3. Ouvrez ensuite le dossier dans Visual Studio Code.

   code .
   

Générer l’application à l’aide de l’infrastructure Express

1. Dans Visual Studio Code, dans le volet Explorateur, cliquez avec le bouton droit sur le dossier src, cliquez sur Nouveau dossier et nommez-le nouveau dossier serveur.

2. Dans le volet Explorateur, cliquez avec le bouton droit sur le dossier serveur, cliquez sur Nouveau fichier et nommez-le index.js.

3. Revenez à la ligne de commande et utilisez la commande suivante pour installer le body parser. Cela aide notre application à analyser les données JSON qui sont transmises aux API.

   npm i express body-parser --save
   

4. Dans Visual Studio Code, copiez le code suivant dans le fichier index.js. Ce code :

   • Références Express
   • Intègre le body-parser pour lire des données JSON dans le corps des requêtes
   • Utilise une fonctionnalité intégrée appelée le tracé
   • Définit des variables racines pour trouver plus facilement l’emplacement du code
   • Configure un port
   • Améliore Express
   • Indique à l’application comment utiliser l’intergiciel permettant de distribuer le serveur
   • Distribue tout ce qui se trouve dans le dossier dist pour constituer le contenu statique
   • Distribue l’application et sert index.html pour toutes les requêtes GET inexistantes sur le serveur (pour faciliter les liens profonds)
   • Démarre le serveur avec app.listen
   • Utilise une fonction flèche pour journaliser que le port est actif

   const express = require('express');
   const bodyParser = require('body-parser');
   const path = require('path');
   const routes = require('./routes');
   
   const root = './';
   const port = process.env.PORT || '3000';
   const app = express();
   
   app.use(bodyParser.json());
   app.use(bodyParser.urlencoded({ extended: false }));
   app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
   app.use('/api', routes);
   app.get('*', (req, res) => {
     res.sendFile('dist/angular-cosmosdb/index.html', {root});
   });
   
   app.listen(port, () => console.log(`API running on localhost:${port}`));
   

5. Dans Visual Studio Code, dans le volet Explorateur, cliquez avec le bouton droit sur le dossier serveur, puis cliquez sur Nouveau dossier. Nommez le nouveau fichier routes.js.

6. Copiez le code suivant dans routes.js. Ce code :

   • Référence le routeur Express
   • Obtient les héros
   • Renvoie l’objet JSON pour un héros défini

   const express = require('express');
   const router = express.Router();
   
   router.get('/heroes', (req, res) => {
    res.send(200, [
       {"id": 10, "name": "Starlord", "saying": "oh yeah"}
    ])
   });
   
   module.exports=router;
   

7. Enregistre tous vos fichiers modifiés.

8. Dans Visual Studio Code, cliquez sur le bouton Déboguer, puis cliquez sur le bouton représentant un engrenage . Le fichier launch.json s’ouvre dans Visual Studio Code.

9. À la ligne 11 du fichier launch.json, remplacez "${workspaceFolder}\\server" par "program": "${workspaceRoot}/src/server/index.js" et enregistrez le fichier.

10. Cliquez sur le bouton Démarrer le débogage pour exécuter l’application.

    L’application doit s’exécuter sans erreurs.

Tester les points de terminaison HTTP de l’application

1. Utilisez maintenant un outil de test HTTP pour émettre une requête GET à http://localhost:3000/api/heroes.

2. La réponse indique que l’application est opérationnelle localement.

Étapes suivantes

Dans cette partie du didacticiel, vous avez :

Vous pouvez maintenant passer à la partie suivante du didacticiel afin de générer une interface utilisateur.

Vous tentez d’effectuer une planification de la capacité pour une migration vers Azure Cosmos DB ? Vous pouvez utiliser les informations sur votre cluster de bases de données existant pour la planification de la capacité.

• Si vous ne connaissez que le nombre de vCores et de serveurs présents dans votre cluster de bases de données existant, lisez Estimation des unités de requête à l’aide de vCores ou de processeurs virtuels
• Si vous connaissez les taux de requêtes typiques de votre charge de travail de base de données actuelle, lisez la section concernant l’estimation des unités de requête à l’aide du planificateur de capacité Azure Cosmos DB