Partager via

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

  • Article

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 :

  • Installation de l’interface CLI Angular et TypeScript
  • Création d’un projet à l’aide d’Angular
  • Génération de l’application à l’aide de l’infrastructure Express
  • Tester l’application dans un outil de test HTTP

Vidéo de procédure pas à pas

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.

Conseil

Ce didacticiel vous guide à travers les étapes pour générer l’application pas à pas. Si vous souhaitez télécharger le projet terminé, vous pouvez obtenir l’application complète à partir du référentiel cosmosdb-angular sur GitHub.

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 à l’invite de commandes et utilisez la commande suivante pour installer l’analyseur de corps. 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érence Express
    • Tire l’analyseur de corps pour lire les 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 index.html pour toutes les requêtes GET introuvables sur le serveur (pour obtenir des liens profonds)
    • Démarre le serveur avec app.listen
    • Utilise une fonction arrow pour se connecter au port 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 :

  • Créé un projet Node.js à l’aide de l’interface CLI Angular
  • Testé l’application à l’aide d’un outil de test HTTP

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

Générer l’interface utilisateur avec Angular

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é.