Exercice - Créer une application Node.js dans Visual Studio Code - Training

10 minutes

Dans cette unité, utilisez Visual Studio Code pour générer et exécuter une application Node.js dans le bac à sable Azure contenant vos ressources.

Installer des packages npm qui vous permettent d’utiliser programmatiquement votre base de données Cosmos DB Core (SQL).
Écrire du code JavaScript qui charge le jeu de données des produits Contoso dans un conteneur.

Notes

Cet exercice suppose que vous avez déjà installé Node.js et npm sur votre ordinateur de bureau, et que vous avez démarré votre bac à sable Learn et vous y êtes connecté dans Visual Studio Code.

Créer le projet Node.js

Utilisez un terminal dans l’emplacement de dossier où vous créez votre application Node.js. Entrez la commande suivante pour ouvrir Visual Studio Code sur cet emplacement.
```
code .
```
Dans le menu Terminal, sélectionnez Nouveau terminal ou utilisez le raccourci clavier, Ctrl + Maj + `.
Dans la fenêtre Terminal, exécutez la commande suivante afin de créer un dossier nommé contoso-retail pour l’application Node, et basculez sur ce dossier.
```
mkdir contoso-retail && cd contoso-retail
```
Entrez les commandes suivantes pour initialiser une nouvelle application Node.
```
npm init -y
```
La commande npm init crée un fichier package.json et affiche son contenu. Ce fichier contient les métadonnées initiales de l’application, avec un nom, une description et un point d’entrée par défaut.
Dans le menu Fichier de Visual Studio Code, sélectionnez Ouvrir un dossier, puis ouvrez le dossier contoso-retail.
Dans la fenêtre Explorateur, sélectionnez le fichier package.json.
Dans le volet de l’éditeur, changez les éléments suivants dans le fichier package.json :

Propriété Valeur

type module : le code JavaScript du module utilise la syntaxe ES6

Ce fichier doit se présenter comme suit. Comme l’exemple de code utilise la syntaxe ES6, vous devez définir le type de l’application sur module.
```
{
    "name": "contoso-retail",
    "version": "1.0.0",
    "description": "Student and course grades maintenance",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "MIT"
}
```
Dans le menu File (Fichier), sélectionnez Save (Enregistrer).

Propriété	Valeur
type	`module` : le code JavaScript du module utilise la syntaxe ES6

Configurer Visual Studio Code pour enregistrer automatiquement les changements du fichier

Activez l’enregistrement automatique en utilisant Fichier > Préférences > Paramètres , Ctrl + ,.
Recherchez enregistrement automatique des fichiers.
Sélectionnez un afterDelay de 1000.

Créer le fichier .gitignore

Le fichier .gitignore vous empêche d’archiver dans le contrôle de code source des fichiers qui ne doivent pas être ajoutés.

Créez un fichier, Ctrl + N, nommé .gitignore et ajoutez-y ce qui suit.

node_modules
.env

Créer un fichier d’environnement de secrets

Dans Visual Studio Code, dans le menu Fichier, sélectionnez Nouveau fichier texte.
Dans le menu Fichier, sélectionnez Enregistrer sous. Enregistrez le nouveau fichier sous le nom .env.

Ajoutez les variables suivantes au fichier :

COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

Dans l’Explorateur Azure, Maj + Alt + A, sélectionnez votre abonnement, puis le nœud Azure Cosmos DB pour voir les ressources.
Cliquez avec le bouton droit sur votre compte Cosmos DB, puis sélectionnez Copier la chaîne de connexion.
Collez la chaîne de connexion dans le fichier .env pour la variable COSMOS_CONNECTION_STRING.

Installer le package Azure Cosmos DB

Dans le terminal intégré, ajoutez le SDK Cosmos DB.
```
npm install @azure/cosmos
```
Dans le terminal intégré, ajoutez le package npm afin d’utiliser le fichier .env pour les variables d’environnement. Ce package lit le fichier .env et ajoute ces valeurs dans l’objet de runtime process.env.
```
npm install dotenv
```

Forme des produits

Comprendre le JSON dans le document vous aide à comprendre l’entrée des opérations et les réponses.

Les produits de ce jeu de données ont la forme suivante :

{
      "id": "FEEFEE3B-6CB9-4A75-B896-5182531F661B",
      "categoryId": "AE48F0AA-4F65-4734-A4CF-D48B8F82267F",
      "categoryName": "Bikes, Road Bikes",
      "sku": "BK-R19B-52",
      "name": "Road-750 Black, 52",
      "description": "The product called \"Road-750 Black, 52\"",
      "price": 539.99,
      "tags": [
        { "id": "461ADE06-0903-4BAF-97AB-CC713E5B1DD4", "name": "Tag-174" },
        ...
      ],
      "inventory": [
        { "location": "Dallas", "inventory": 91 },
        ...
      ]
    }

Propriété	Description
id	Cosmos DB utilise l’identificateur personnalisé, id, pour identifier de manière unique chaque élément. L’ID peut représenter n’importe quel type de données, par exemple, un nombre, une chaîne, etc. Si vous ne fournissez pas l’ID, Cosmos DB en crée un pour vous.
categoryName	Cette propriété est sélectionnée spécifiquement pour ce jeu de données en tant que clé de partition. Le nom de catégorie de produit fournit une distribution à peu près uniforme des données, idéale pour la clé de partition. De plus, le categoryName ne change pas souvent, ce qui est important pour une clé de partition.
tags et inventory	Ce sont des sous-propriétés qui peuvent être utilisées pour rechercher et reformer les résultats de requête en utilisant le mot clé `JOIN`.

Créer le script pour ajouter des produits à un conteneur

Dans Visual Studio Code, dans le menu Fichier, sélectionnez Nouveau fichier texte.
Dans le menu Fichier, sélectionnez Enregistrer sous. Enregistrez le nouveau fichier avec le nom 1-contoso-products-upload-data.js.

Copiez le code JavaScript suivant et collez-le dans le fichier.

import * as path from "path";
import { promises as fs } from "fs";
import { fileURLToPath } from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

// Get environment variables from .env
import * as dotenv from "dotenv";
dotenv.config();

// Get Cosmos Client
import { CosmosClient } from "@azure/cosmos";

// Provide required connection from environment variables
const cosmosSecret = process.env.COSMOS_CONNECTION_STRING;

// Authenticate to Azure Cosmos DB
const cosmosClient = new CosmosClient(cosmosSecret);

// Set Database name and container name
const databaseName = process.env.COSMOS_DATABASE_NAME;
const containerName = process.env.COSMOS_CONTAINER_NAME;
const partitionKeyPath = [`/${process.env.COSMOS_CONTAINER_PARTITION_KEY}`];

// Create DB if it doesn't exist
const { database } = await cosmosClient.databases.createIfNotExists({
  id: databaseName,
});

// Create container if it doesn't exist
const { container } = await database.containers.createIfNotExists({
  id: containerName,
  partitionKey: {
    paths: partitionKeyPath,
  },
});

// Get product data
const fileAndPathToJson = "products.json";
const items = JSON.parse(await fs.readFile(path.join(__dirname, fileAndPathToJson), "utf-8"));

let i = 0;

// Insert products into container
for (const item of items) {
  const { resource, activityId, statusCode } = await container.items.create(item);
  console.log(`[${i++}] activityId: ${activityId}, statusCode: ${statusCode}, ${resource.name} inserted`);
}

// Show container name - copy/paste into .env
console.log(`\n\ncontainerName: ${containerName}`);// 

// Run script with 
// node 1-contoso-products-upload-data.js

Créez un fichier nommé products.json et copiez-y le contenu de l’exemple de fichier de données, products.json.

Le fichier contient un tableau d’objets JSON.
Dans le terminal Visual Studio Code, exécutez le fichier JavaScript pour charger les données dans le conteneur Cosmos DB :
```
node 1-contoso-products-upload-data.js
```
Le terminal affiche le nombre d’éléments, activityId, statusCode et le nom de l’élément.

Objet de résultat de l’opération

L’objet de résultat renvoyé par une opération est documenté dans la documentation de référence SQL Cosmos DB. Même si le résultat peut avoir des informations propres à l’opération, chaque résultat a des propriétés qui sont toujours renvoyées et qui sont utiles pour déterminer ce qui s’est passé.

Propriété du résultat	Description
activityId	ID d’événement unique associé à l’opération spécifique. Cet identifiant, ainsi que le nom de votre ressource et votre abonnement, peut vous aider à identifier le problème si votre opération échoue et que vous devez contacter l’assistance.
statusCode	Code d’état HTTP indiquant la réussite ou l’échec de l’opération.
resource	Il s’agit d’un objet JSON de l’objet final, comme un document JSON dans un conteneur.

Voir les documents Cosmos DB dans Visual Studio Code

Dans Visual Studio Code, ouvrez l’Explorateur Azure ou utilisez le raccourci clavier, Maj + Alt + A.
Recherchez et développez le nœud Abonnement Concierge, puis votre nœud de ressources Azure Cosmos DB.
Recherchez et développez votre base de données ContosoRetail et son conteneur Products.
Développez le nœud Documents pour voir les produits ajoutés par le script Node.js. Le nom du nœud de chaque document est la propriété name.
Sélectionnez le premier produit pour voir l’intégralité du JSON.

Vérifier votre travail

Dans Visual Studio Code, dans l’extension Azure Databases, vous voyez votre compte Cosmos DB, votre base de données et votre conteneur.
Quand vous développez votre conteneur, vous voyez de nombreux éléments sous le nœud Documents.

Continuer

Exercice - Créer une application Node.js dans Visual Studio Code