Übung: Erstellen einer Node.js-App in Visual Studio Code

  • 10 Minuten

In dieser Lerneinheit verwenden Sie Visual Studio Code, um eine Node.js-Anwendung zu erstellen und für die Azure-Sandbox mit Ihren Ressourcen auszuführen.

  • Installieren von npm-Paketen, die Ihnen das programmgesteuerte Arbeiten mit Ihrer Cosmos DB Core-Datenbank (SQL) ermöglichen
  • Schreiben von JavaScript-Code, mit dem das Dataset von Contoso-Produkten in einen Container hochgeladen wird

Hinweis

Bei dieser Übung wird davon ausgegangen, dass Sie Node.js und npm bereits auf Ihrem Desktopcomputer installiert sowie die Learn-Sandbox gestartet und in Visual Studio Code eine Verbindung damit hergestellt haben.

Erstellen eines Node.js-Projekts

  1. Verwenden Sie ein Terminal an einem Ordnerspeicherort, an dem sich die Node.js Anwendung befinden soll. Geben Sie den folgenden Befehl ein, um Visual Studio Code an diesem Speicherort zu öffnen.

    code .

  2. Wählen Sie im Menü Terminal die Option Neues Terminal aus, oder verwenden Sie die Tastenkombination STRG + UMSCHALT + `.

  3. Führen Sie im Fenster Terminal den folgenden Befehl aus, um einen neuen Ordner mit dem Namen contoso-retail für die Node-Anwendung zu erstellen, und wechseln Sie zu diesem Ordner.

    mkdir contoso-retail && cd contoso-retail

  4. Geben Sie die folgenden Befehle ein, um eine neue Node-Anwendung zu initialisieren.

    npm init -y

    Mit dem Befehl npm init wird die Datei package.json erstellt und ihr Inhalt angezeigt. Diese Datei enthält die anfänglichen Metadaten für die Anwendung, die einen Standardnamen, eine Beschreibung und einen Einstiegspunkt umfassen.

  5. Klicken Sie in Visual Studio Code im Menü Datei auf Ordner öffnen, und öffnen Sie den Ordner contoso-retail.

  6. Wählen Sie im Explorer-Fenster die Datei package.json aus.

  7. Ändern Sie im Editorbereich folgende Angaben für die Datei package.json:

    Eigenschaft Wert
    type module: JavaScript-Code des Moduls verwendet ES6-Syntax

    Die Datei sollte wie folgt aussehen. Der Beispielcode verwendet ES6-Syntax. Daher müssen Sie den Typ der Anwendung auf module festlegen.

    {
    "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"
}

  8. Klicken Sie im Menü Datei auf Speichern.

Konfigurieren von Visual Studio Code zum automatischen Speichern von Dateiänderungen

  1. Aktivieren Sie die automatische Speicherung über Datei > Voreinstellungen > Einstellungen, STRG + ,.
  2. Suchen Sie nach files auto save.
  3. Wählen Sie für afterDelay die Einstellung 1000 aus.

Erstellen der Datei „.gitignore“

Die Datei .gitignore verhindert, dass Sie Dateien in die Quellcodeverwaltung einchecken, die nicht hinzugefügt werden sollten.

Erstellen Sie eine Datei (STRG + N) mit dem Namen .gitignore, und fügen Sie Folgendes hinzu.

node_modules
.env

Erstellen einer Umgebungsdatei für Geheimnisse

  1. Wählen Sie in Visual Studio Code im Menü Datei die Option Neue Textdatei aus.

  2. Klicken Sie im Menü Datei auf Speichern unter. Speichern Sie die neue Datei unter dem Namen .env.

  3. Fügen Sie der Datei die folgenden Variablen hinzu:

    COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

  4. Wählen Sie im Azure-Explorer (UMSCHALT + ALT + A) Ihr Abonnement und dann den Knoten Azure Cosmos DB aus, um die Ressourcen anzuzeigen.

  5. Klicken Sie mit der rechten Maustaste auf Ihr Cosmos DB-Konto, und wählen Sie Verbindungszeichenfolge kopieren aus.

    Screenshot of the Visual Studio Code with Cosmos D B account name selected and the submenu to Copy Connection String highlighted.

  6. Fügen Sie die Verbindungszeichenfolge in die Datei .env für die Variable COSMOS_CONNECTION_STRING ein.

Installieren des Cosmos DB-Pakets

  1. Fügen Sie am integrierten Terminal das Cosmos DB SDK hinzu.

    npm install @azure/cosmos

  2. Fügen Sie am integrierten Terminal das npm-Paket hinzu, um die Datei .env für Umgebungsvariablen zu verwenden. Dieses Paket liest die Datei .env und fügt diese Werte dem Laufzeitobjekt process.env hinzu.

    npm install dotenv

Produktform

Kenntnisse über das JSON-Dokument helfen Ihnen, die Vorgänge, Eingaben und Antworten zu verstehen.

Die Produkte in diesem Dataset weisen die folgende Form auf:

{
      "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 },
        ...
      ]
    }
Eigenschaft BESCHREIBUNG
id Cosmos DB verwendet den benutzerdefinierten Bezeichner (id), um jedes Element eindeutig zu identifizieren. Bei der ID kann es sich um einen beliebigen Datentyp handeln, z. B. eine Zahl, Zeichenfolge usw. Wenn Sie die ID nicht angeben, erstellt Cosmos DB diese für Sie.
categoryName Diese Eigenschaft wurde speziell für dieses Dataset als Partitionsschlüssel ausgewählt. Der Produktkategoriename ermöglicht eine einigermaßen gleichmäßige Verteilung der Daten und eignet sich damit ideal als Partitionsschlüssel. Zudem ändert sich der Kategoriename nur selten, was für einen Partitionsschlüssel ebenfalls wichtig ist.
„tags“ und „inventory“ Diese stellen Untereigenschaften dar, mit denen die Ergebnisse von Abfragen mithilfe des JOIN-Schlüsselworts gesucht und umgestaltet werden können.

Erstellen des Skripts zum Hinzufügen von Produkten zu einem Container

  1. Wählen Sie in Visual Studio Code im Menü Datei die Option Neue Textdatei aus.

  2. Klicken Sie im Menü Datei auf Speichern unter. Speichern Sie die neue Datei unter dem Namen 1-contoso-products-upload-data.js.

  3. Kopieren Sie den folgenden JavaScript-Code in die Datei.

    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

  4. Erstellen Sie eine neue Datei mit dem Namen products.json, und kopieren Sie den Inhalt der Beispieldatendatei products.json dort hinein.

    Dies ist ein Array von JSON-Objekten.

  5. Führen Sie im Visual Studio Code-Terminal die JavaScript-Datei aus, um die Daten in den Cosmos DB-Container hochzuladen:

    node 1-contoso-products-upload-data.js

    Das Terminal zeigt die Elementanzahl, „activityId“, „statusCode“ und den Elementnamen an.

Ergebnisobjekt des Vorgangs

Das von einem Vorgang zurückgegebene Ergebnisobjekt ist in der Cosmos DB-SQL-Referenzdokumentation dokumentiert. Das Ergebnis kann zwar spezifische Informationen für den Vorgang enthalten, doch verfügt jedes Ergebnis über einige Eigenschaften, die immer zurückgegeben werden und mit denen das Geschehene ermittelt werden kann.

Ergebniseigenschaft BESCHREIBUNG
activityId Die eindeutige Ereignis-ID, die dem spezifischen Vorgang zugeordnet ist. Wenn bei dem Vorgang ein Fehler auftritt und Sie den Support kontaktieren müssen, hilft diese ID zusammen mit Ihrem Ressourcennamen und Abonnement, das Problem schnell zu finden.
statusCode Der HTTP-Statuscode, der den erfolgreichen Abschluss des Vorgangs oder einen Fehler angibt.
resource Dies ist ein JSON-Objekt des endgültigen Objekts, z. B. ein JSON-Dokument in einem Container.

Anzeigen von Cosmos DB-Dokumenten in Visual Studio Code

  1. Öffnen Sie in Visual Studio Code den Azure-Explorer, oder verwenden Sie die Tastenkombination UMSCHALT + ALT + A.

  2. Suchen und erweitern Sie den Knoten „Concierge-Abonnement“ und dann Ihren Azure Cosmos DB-Ressourcenknoten.

  3. Suchen und erweitern Sie die Datenbank ContosoRetail und den Container Products.

  4. Erweitern Sie den Knoten Dokumente, um die Produkte anzuzeigen, die das Node.js-Skript hinzugefügt hat. Der Knotenname für jedes Dokument ist die Eigenschaft name.

  5. Wählen Sie das erste Produkt aus, um den gesamten JSON-Code anzuzeigen.

    Screenshot of the Visual Studio Code showing a newly added Cosmos DB Core document.

Arbeit überprüfen

  • In Visual Studio Code werden in der Azure Databases-Erweiterung Ihr Cosmos DB-Konto, die Datenbank und der Container angezeigt.
  • Wenn Sie den Container erweitern, wird eine Vielzahl von Elementen unter dem Knoten Dokumente angezeigt.