Exercício – Criar uma aplicação Node.js no Visual Studio Code

  • 10 minutos

Nesta unidade, use o Visual Studio Code para criar e executar um aplicativo Node.js na área restrita do Azure que contém seus recursos.

  • Instale pacotes npm que permitem que você trabalhe programaticamente com seu banco de dados Cosmos DB Core (SQL).
  • Escreva o código JavaScript que carrega o conjunto de dados dos produtos Contoso em um contêiner.

Nota

Este exercício pressupõe que você já tenha instalado o Node.js e o npm em seu computador desktop e iniciado a área restrita do Learn e conectado a ela no Visual Studio Code.

Criar projeto .js nó

  1. Use um terminal em um local de pasta onde você deseja que seu aplicativo .js nó. Digite o seguinte comando para abrir o Visual Studio Code no local.

    code .

  2. No menu Terminal, selecione Novo Terminal ou use o atalho de teclado, Ctrl + Shift + `.

  3. Na janela Terminal, execute o seguinte comando para criar uma nova pasta chamada contoso-retail para o aplicativo Node e altere para essa pasta.

    mkdir contoso-retail && cd contoso-retail

  4. Insira os seguintes comandos para mover para inicializar um novo aplicativo Node.

    npm init -y

    O comando npm init cria um ficheiro package.json e apresenta os conteúdos. Este ficheiro contém os metadados iniciais da aplicação, que contêm um nome, uma descrição e um ponto de entrada de predefinição.

  5. No menu Arquivo no Visual Studio Code, selecione Abrir pasta e abra a pasta contoso-retail.

  6. Na janela Explorer (Explorador), selecione o ficheiro package.json.

  7. No painel do editor, altere o seguinte para o arquivo package.json :

    Propriedade valor
    tipo module - o código JavaScript do módulo usa a sintaxe ES6

    O ficheiro deverá ter o seguinte aspeto: O código de exemplo usa a sintaxe ES6, portanto, você precisa definir o tipo do aplicativo como módulo.

    {
    "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. No menu File (Ficheiro), selecione Save (Guardar).

Configurar o Visual Studio Code para salvar automaticamente as alterações de arquivo

  1. Ative o salvamento automático usando as Configurações de preferências > de arquivo>, Ctrl + ,.
  2. Procure ficheiros guardados automaticamente.
  3. Selecione afterDelay de 1000.

Criar arquivo .gitignore

O arquivo .gitignore impede que você faça check-in de arquivos no controle do código-fonte que não devem ser adicionados.

Crie um arquivo, Ctrl + N, nomeado .gitignore e adicione o seguinte a ele.

node_modules
.env

Criar arquivo de ambiente de segredos

  1. No Visual Studio Code, no menu Arquivo , selecione Novo arquivo de texto.

  2. No menu File (Ficheiro), selecione Save As (Guardar Como). Salve o novo arquivo com o nome .env.

  3. Adicione as seguintes variáveis ao arquivo:

    COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

  4. No explorador do Azure, Shift + Alt + A, selecione a sua subscrição e, em seguida, o nó Azure Cosmos DB para ver os recursos.

  5. Clique com o botão direito do mouse em sua conta do Cosmos DB e selecione Copiar cadeia de conexão.

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

  6. Cole a cadeia de conexão no .env arquivo para a variável COSMOS_CONNECTION_STRING .

Instalar o pacote do Cosmos DB

  1. No terminal integrado, adicione o SDK do Cosmos DB.

    npm install @azure/cosmos

  2. No terminal integrado, adicione o pacote npm para usar o .env arquivo para variáveis de ambiente. Este pacote lê o .env arquivo e adiciona esses valores ao process.env objeto runtime.

    npm install dotenv

Forma do produto

Compreender o documento JSON irá ajudá-lo a entender as operações, suas entradas e respostas.

Os produtos neste conjunto de dados têm a seguinte forma:

{
      "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 },
        ...
      ]
    }
Propriedade Description
ID O Cosmos DB usa o identificador personalizado, id, para identificar exclusivamente cada item. O ID pode ser qualquer tipo de dados, como número, string, etc. Se você não fornecer o ID, o Cosmos DB criará um para você.
categoryName Esta propriedade foi especificamente selecionada para este conjunto de dados como a chave de partição. O nome da categoria do produto fornece uma distribuição um pouco uniforme dos dados, o que é ideal para a chave de partição. O categoryName também não muda com muita frequência, o que também é importante para uma chave de partição.
tags e inventário Eles representam subpropriedades que podem ser usadas para localizar e remodelar os resultados de consultas usando a palavra-chave JOIN.

Criar o script para adicionar produtos a um contêiner

  1. No Visual Studio Code, no menu Arquivo , selecione Novo arquivo de texto.

  2. No menu File (Ficheiro), selecione Save As (Guardar Como). Salve o novo arquivo com o nome 1-contoso-products-upload-data.js.

  3. Copie o JavaScript a seguir e cole-o no arquivo.

    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. Crie um novo arquivo, chamado products.json, e copie o conteúdo do arquivo de dados de exemplo, products.json para ele.

    Esta é uma matriz de objetos JSON.

  5. No terminal do Visual Studio Code, execute o arquivo JavaScript para carregar os dados no contêiner do Cosmos DB:

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

    O terminal exibe a contagem de itens, activityId, statusCode e o nome do item.

O objeto de resultado da operação

O objeto de resultado retornado de uma operação está documentado na documentação de referência SQL do Cosmos DB. Embora o resultado possa ter informações específicas para a operação, cada resultado terá algumas propriedades que são sempre retornadas e são úteis para determinar o que aconteceu.

Propriedade Result Description
activityId O ID de evento exclusivo associado à operação específica. Se a sua operação falhar e precisar de contactar o suporte, este ID, juntamente com o nome do recurso e a subscrição, é útil para encontrar rapidamente o problema.
statusCode O código de status HTTP que indica o sucesso ou falha da operação.
recurso Este é um objeto JSON do objeto final, como um documento JSON em um contêiner.

Exibir documentos do Cosmos DB no Visual Studio Code

  1. No Visual Studio Code, abra o explorador do Azure ou utilize o atalho de teclado, Shift + Alt + A.

  2. Localize e expanda o nó Assinatura do Concierge e, em seguida, o nó de recursos do Azure Cosmos DB .

  3. Localize e expanda seu banco de dados ContosoRetail e seu contêiner Products.

  4. Expanda o nó Documentos para ver os produtos que o script Node.js adicionou. O nome do nó para cada documento é a propriedade name .

  5. Selecione o primeiro produto para ver o JSON inteiro.

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

Verifique o seu trabalho

  • No Visual Studio Code, na extensão Bancos de Dados do Azure, você vê sua conta, banco de dados e contêiner do Cosmos DB.
  • Quando você expande seu contêiner, vê muitos itens no nó Documentos .