Esercizio - Creare un'app Node.js in Visual Studio Code

  • 10 minuti

In questa unità usare Visual Studio Code per compilare ed eseguire un'applicazione Node.js nella sandbox di Azure contenente le risorse.

  • Installare pacchetti npm che consentono di usare a livello di codice il database Core (SQL) di Cosmos DB.
  • Scrivere codice JavaScript che carichi il set di dati dei prodotti Contoso in un contenitore.

Nota

Questo esercizio presuppone che siano già stati installati Node.js e npm sul computer desktop e che sia stata avviata la sandbox di Learn, alla quale ci si è connessi in Visual Studio Code.

Creare un progetto Node.js

  1. Usare un terminale nella posizione della cartella in cui si vuole installare l'applicazione Node.js. Immettere il comando seguente per aprire Visual Studio Code nella posizione.

    code .

  2. Nel menu Terminale selezionare Nuovo terminale oppure usare i tasti di scelta rapida CTRL + MAIUSC + `.

  3. Nella finestra Terminale eseguire il comando seguente per creare una nuova cartella denominata contoso-retail per l'applicazione Node e passare a tale cartella.

    mkdir contoso-retail && cd contoso-retail

  4. Immettere i comandi seguenti per passare all'inizializzazione di una nuova applicazione Node.

    npm init -y

    Il comando npm init crea un file package.json e ne visualizza il contenuto. Questo file contiene i metadati iniziali per l'applicazione, con un nome predefinito, una descrizione e un punto di ingresso.

  5. Nel menu File in Visual Studio Code scegliere Apri cartella e quindi aprire la cartella contoso-retail.

  6. Nella finestra Esplora risorse selezionare il file package.json.

  7. Nel riquadro dell'editor modificare quanto segue per il file package.json:

    Proprietà Valore
    type module - Il codice JavaScript del modulo usa la sintassi ES6

    Il file avrà un aspetto simile al seguente. Il codice di esempio usa la sintassi ES6, quindi è necessario impostare il tipo di applicazione sul modulo.

    {
    "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. Scegliere Save (Salva) dal menu File.

Configurare Visual Studio Code per il salvataggio automatico delle modifiche ai file

  1. Attivare il salvataggio automatico usando Impostazioni > preferenze > file , CTRL + ,.
  2. Cercare i file salvati automaticamente.
  3. Selezionare afterDelay di 1000.

Creare un file con estensione .gitignore

Il file con estensione .gitignore impedisce di archiviare nel controllo del codice sorgente i file che non devono essere aggiunti.

Creare un file, CTRL + N, denominato .gitignore e aggiungervi quanto segue.

node_modules
.env

Creare un file di ambiente dei segreti

  1. In Visual Studio Code scegliere Nuovo filedal menu File.

  2. Scegliere Salva con nome dal menu File. Salvare il nuovo file con il nome .env.

  3. Aggiungere al file le variabili seguenti:

    COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

  4. In Azure Explorer, MAIUSC + ALT + A, selezionare la sottoscrizione e quindi il nodo Azure Cosmos DB per visualizzare le risorse.

  5. Fare clic con il pulsante destro del mouse sull'account Cosmos DB e scegliere Copia stringa di connessione.

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

  6. Incollare la stringa di connessione nel .env file per la variabile COSMOS_CONNECTION_STRING.

Installare il pacchetto Cosmos DB

  1. Nel terminale integrato aggiungere Cosmos DB SDK.

    npm install @azure/cosmos

  2. Nel terminale integrato aggiungere il pacchetto npm per usare il file .env per le variabili di ambiente. Questo pacchetto legge il file .env e aggiunge tali valori process.envall'oggetto runtime.

    npm install dotenv

Forma del prodotto

La comprensione del documento JSON consente di comprendere le operazioni, i relativi input e le risposte.

I prodotti in questo set di dati hanno la forma seguente:

{
      "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 },
        ...
      ]
    }
Proprietà Descrizione
ID Cosmos DB usa l'identificatore personalizzato, ID, per identificare in modo univoco ogni elemento. L'ID può essere qualsiasi tipo di dati, ad esempio numero, stringa e così via. Se non si specifica l'ID, Cosmos DB ne crea uno automaticamente.
categoryName Questa proprietà è stata selezionata in modo specifico per questo set di dati come chiave di partizione. Il nome della categoria di prodotto fornisce una distribuzione piuttosto uniforme dei dati, ideale per la chiave di partizione. Anche categoryName non cambierà molto spesso, il che è importante anche per una chiave di partizione.
tag e inventario Si tratta di sottoproprietà che possono essere usate per trovare e rimodellare i risultati delle query tramite la parola chiave JOIN.

Creare lo script per aggiungere prodotti a un contenitore

  1. In Visual Studio Code scegliere Nuovo file di testo dal menu File.

  2. Scegliere Salva con nome dal menu File. Salvare il nuovo file con il nome 1-contoso-products-upload-data.js.

  3. Copiare il codice JavaScript seguente e incollarlo nel file.

    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. Creare un nuovo file denominato products.json e copiarvi il contenuto del file di dati di esempio, products.json.

    Si tratta di una matrice di oggetti JSON.

  5. Nel terminale di Visual Studio Code eseguire il file JavaScript per caricare i dati nel contenitore Cosmos DB:

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

    Il terminale visualizza il numero di elementi, activityId, statusCode e il nome dell'elemento.

Oggetto risultato dell'operazione

L'oggetto risultato restituito da un'operazione è descritto nella documentazione di riferimento di Cosmos DB SQL. Anche se il risultato può contenere informazioni specifiche per l'operazione, ogni risultato avrà alcune proprietà che verranno sempre restituite e saranno utili per determinare cosa è accaduto.

Proprietà risultato Descrizione
activityId ID evento univoco associato all'operazione specifica. Se l'operazione non riesce ed è necessario contattare il supporto tecnico, questo ID, insieme al nome della risorsa e alla sottoscrizione, è utile per individuare rapidamente il problema.
statusCode Codice di stato HTTP che indica l'esito positivo o negativo dell'operazione.
resource Si tratta di un oggetto JSON dell'oggetto finale, ad esempio un documento JSON in un contenitore.

Visualizzare i documenti di Cosmos DB in Visual Studio Code

  1. In Visual Studio Code aprire Esplora risorse di Azure oppure usare i tasti di scelta rapida MAIUSC + ALT + A.

  2. Trovare ed espandere il nodo Sottoscrizione Concierge, quindi il nodo risorse di Azure Cosmos DB.

  3. Trovare ed espandere il database ContosoRetail e il relativo contenitore Prodotti.

  4. Espandere il nodo Documenti per visualizzare i prodotti aggiunti dallo script Node.js. Il nome del nodo per ogni documento è la proprietà name.

  5. Selezionare il primo prodotto per visualizzare l'intero JSON.

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

Controlla il tuo lavoro

  • In Visual Studio Code, nell'estensione Database di Azure vengono visualizzati l'account, il database e il contenitore Cosmos DB.
  • Quando si espande il contenitore, vengono visualizzati molti elementi nel nodo Documenti.