Exercice - Créer une application Node.js dans Visual Studio Code
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 ES6Ce 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).
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 runtimeprocess.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.