Exercício – Criar um aplicativo 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 os pacotes NPM que permitem trabalhar programaticamente com seu banco de dados Cosmos DB Core (SQL).
  • Escreva códigos JavaScript que carreguem o conjunto de dados de produtos da Contoso em um contêiner.

Observação

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

Criar o projeto do Node.js

  1. Use um terminal em um local de pasta no qual deseja colocar o aplicativo Node.js. Digite o comando a seguir para abrir o Visual Studio Code no local.

    code .

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

  3. Na janela Terminal, execute o comando a seguir a fim de criar uma pasta chamada contoso-retail com relação ao aplicativo Node e mude para ela.

    mkdir contoso-retail && cd contoso-retail

  4. Digite os comandos a seguir para mover e inicializar um novo aplicativo Node.

    npm init -y

    O comando npm init cria um arquivo package.json e exibe o conteúdo dele. Esse arquivo contém os metadados iniciais para o aplicativo, contendo um nome padrão, uma descrição e um ponto de entrada.

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

  6. Na janela Explorer, selecione o arquivo 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 arquivo deverá ser semelhante ao mostrado abaixo. O código de exemplo usa a sintaxe ES6, portanto, é necessário 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 Arquivo, selecione Salvar.

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

  1. Ative o salvamento automático usando Arquivo > Preferências > Configurações, Ctrl + ,.
  2. Pesquise salvamento automático de arquivos.
  3. Selecione o afterDelay de 1000.

Criar o arquivo .gitignore

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

Crie um arquivo (Ctrl + N) chamado .gitignore e inclua nele os itens a seguir.

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 Arquivo, clique em Salvar 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 assinatura e o nó do Azure Cosmos DB para ver os recursos.

  5. Clique com o botão direito do mouse na 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 arquivo .env da 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 a fim de usar o arquivo .env para variáveis de ambiente. Ele lê o arquivo .env e adiciona esses valores ao objeto de runtime process.env.

    npm install dotenv

Forma do produto

Entender o JSON do documento ajudará você a entender as operações e suas respectivas 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 Descrição
id O Cosmos DB usa o identificador personalizado id para identificar exclusivamente cada item. A ID pode ser qualquer tipo de dados, como número, cadeia de caracteres etc. Se você não fornecê-la, o Cosmos DB criará uma para você.
categoryName Esta propriedade foi selecionada especificamente para este conjunto de dados como a chave de partição. O nome da categoria do produto fornece uma distribuição relativamente uniforme dos dados, o que é ideal para a chave de partição. O categoryName também não será alterado com muita frequência, o que é importante para uma chave de partição.
Marcas e inventário 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 Arquivo, clique em Salvar Como. Salve o novo arquivo com o nome 1-contoso-products-upload-data.js.

  3. Copie o seguinte JavaScript 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 arquivo chamado products.json e copie o conteúdo do arquivo de dados de exemplo products.json nele.

    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, a activityId, o statusCode e o nome do item.

O objeto de resultado da operação

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

Propriedade do resultado Descrição
activityId A ID de evento exclusiva associada à operação específica. Se sua operação falhar e for necessário entrar em contato com o suporte, essa ID, além do nome do recurso e da assinatura, será útil para localizar rapidamente o problema.
statusCode O código de status HTTP que indica o sucesso ou a falha da operação.
recurso Será 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 use o atalho de teclado Shift + Alt + A.

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

  3. Encontre e expanda o banco de dados ContosoRetail e o respectivo contêiner Produtos.

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

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

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

Verificar seu trabalho

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