Ejercicio: Creación de una aplicación Node.js en Visual Studio Code

10 minutos

En esta unidad, use Visual Studio Code para compilar y ejecutar una aplicación de Node.js en el espacio aislado de Azure que contiene los recursos.

Instale paquetes de npm que le permitan trabajar mediante programación con la base de datos de Cosmos DB Core (SQL).
Escriba código JavaScript que cargue el conjunto de datos de productos de Contoso en un contenedor.

Nota

En este ejercicio se supone que ya ha instalado Node.js y npm en el equipo de escritorio e iniciado el espacio aislado de Learn y lo ha conectado en Visual Studio Code.

Creación de un proyecto de Node.js

Use un terminal en una ubicación de carpeta donde quiera la aplicación de Node.js. Escriba el siguiente comando para abrir Visual Studio Code en la ubicación.
```
code .
```
En el menú Terminal, seleccione Nuevo terminal o use el método abreviado de teclado Ctrl + Mayús + `.
En la ventana Terminal, ejecute el siguiente comando para crear una carpeta nueva denominada contoso-retail para la aplicación Node y cambie a esa carpeta.
```
mkdir contoso-retail && cd contoso-retail
```
Escriba los siguientes comandos para inicializar una nueva aplicación Node.
```
npm init -y
```
El comando npm init crea un archivo package.json y muestra su contenido. Este archivo contiene los metadatos iniciales de la aplicación, compuestos por un nombre, una descripción y un punto de entrada predeterminados.
En el menú Archivo de Visual Studio Code, seleccione Abrir carpeta y luego abra la carpeta contoso-retail.
En la ventana del Explorador, seleccione el archivo package.json.

En el panel del editor, cambie lo siguiente para el archivo package.json:

Propiedad	Valor
type	`module`: el código JavaScript del módulo usa la sintaxis ES6.

El archivo debería tener este aspecto. El código de ejemplo usa la sintaxis ES6, por lo que debe establecer el tipo de la aplicación en 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"
}

En el menú Archivo, seleccione Guardar.

Configuración de Visual Studio Code para guardar automáticamente los cambios de archivo

Active el guardado automático mediante Archivo > Preferencias > Configuración, Ctrl + ,.
Busque archivos guardados automáticamente.
Seleccione un afterDelay de 1000.

Creación del archivo .gitignore

El archivo .gitignore evita que se comprueben los archivos en el control de código fuente que no se deben agregar.

Cree un archivo, Ctrl + N, denominado .gitignore y agregue lo siguiente.

node_modules
.env

Creación de un archivo de entorno de secretos

En el menú Archivo de Visual Studio Code, seleccione Nuevo archivo de texto.
En el menú Archivo, seleccione Guardar como. Guarde el nuevo archivo con el nombre .env.

Agregue las siguientes variables al archivo:

COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

En el explorador de Azure, Mayús + Alt + A, seleccione la suscripción y, a continuación, el nodo de Azure Cosmos DB para ver los recursos.
Haga clic con el botón derecho en la cuenta de Cosmos DB y seleccione Copiar cadena de conexión.
Pegue la cadena de conexión en el archivo .env para la variable COSMOS_CONNECTION_STRING.

Instalación del paquete de Cosmos DB

En el terminal integrado, agregue el SDK de Cosmos DB.
```
npm install @azure/cosmos
```
En el terminal integrado, agregue el paquete npm para usar el archivo .env para las variables de entorno. Este paquete lee el archivo .env y agrega esos valores al objeto en tiempo de ejecución process.env.
```
npm install dotenv
```

Forma del producto

Comprender el código JSON del documento le ayuda a comprender la entrada de las operaciones y las respuestas.

Los productos de este conjunto de datos tienen la siguiente 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 },
        ...
      ]
    }

Propiedad	Descripción
id	Cosmos DB usa el identificador personalizado, id, para identificar de forma única cada elemento. El identificador puede ser cualquier tipo de datos, como number, string, etc. Si no proporciona el identificador, Cosmos DB crea uno automáticamente.
categoryName	Esta propiedad se selecciona específicamente para este conjunto de datos como clave de partición. El nombre de la categoría de producto proporciona una distribución uniforme de los datos, que es ideal para la clave de partición. Además, categoryName no cambia a menudo, lo que es importante para una clave de partición.
etiquetas e inventario	Representan subpropiedades que se pueden usar para buscar y volver a dar forma a los resultados de las consultas mediante la palabra clave `JOIN`.

Creación del script para agregar productos en un contenedor

En el menú Archivo de Visual Studio Code, seleccione Nuevo archivo de texto.
En el menú Archivo, seleccione Guardar como. Guarde el archivo nuevo con el nombre 1-contoso-products-upload-data.js.

Copie el código de JavaScript siguiente y péguelo en el archivo.

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

Cree un nuevo archivo, denominado products.json, y copie el contenido del archivo de datos de ejemplo, products.json en él.

El archivo contiene una matriz de objetos JSON.
En el terminal Visual Studio Code, ejecute el archivo JavaScript para cargar los datos en el contenedor de Cosmos DB:
```
node 1-contoso-products-upload-data.js
```
El terminal muestra el recuento de elementos, activityId, statusCode y el nombre del elemento.

Objeto de resultado de la operación

El objeto de resultado devuelto desde una operación se documenta en la documentación de referencia de SQL de Cosmos DB. Aunque el resultado puede tener información específica de la operación, cada resultado tiene algunas propiedades que siempre se devuelven y son útiles para determinar lo que ha ocurrido.

Propiedad del resultado	Descripción
activityId	Identificador de evento único asociado a la operación específica. Este identificador, junto con el nombre del recurso y la suscripción, pueden ayudar a identificar el problema si se produce un error en la operación y necesita ponerse en contacto con el soporte técnico.
statusCode	Código de estado HTTP que indica el éxito o error de la operación.
resource	Se trata de un objeto JSON del objeto final, como un documento JSON en un contenedor.

Visualización de documentos de Cosmos DB en Visual Studio Code

En Visual Studio Code, abra el Explorador de Azure o use el método abreviado de teclado Mayús + Alt + A.
Busque y expanda el nodo Suscripción de Concierge y, a continuación, el nodo de recursos de Azure Cosmos DB.
Busque y expanda la base de datos ContosoRetail y su contenedor Products.
Expanda el nodo Documentos para ver los productos que ha agregado el script de Node.js. El nombre del nodo de cada documento es la propiedad name.
Seleccione el primer producto para ver todo el JSON.

Comprobar el trabajo

En Visual Studio Code, en la extensión Azure Databases, verá la cuenta, la base de datos y el contenedor de Cosmos DB.
Al expandir el contenedor, verá muchos elementos en el nodo Documentos.

Continuar