Упражнение. Создание приложения Node.js в Visual Studio Code

  • 10 мин

В этом уроке используйте Visual Studio Code для создания и запуска приложения Node.js в песочнице Azure, содержащей ресурсы.

  • Установите пакеты npm, позволяющие программно работать с базой данных Cosmos DB Core (SQL).
  • Напишите код JavaScript, который отправляет набор данных продуктов Contoso в контейнер.

Примечание.

В этом упражнении предполагается, что вы уже установили Node.js и npm на классическом компьютере и запустили песочницу Learn и подключились к ней в Visual Studio Code.

Создание проекта Node.js

  1. Используйте терминал в расположении папки, где требуется приложение Node.js. Введите следующую команду, чтобы открыть Visual Studio Code в расположении.

    code .

  2. В меню "Терминал" выберите "Новый терминал" или нажмите клавиши CTRL + SHIFT + `.

  3. В окне терминала выполните следующую команду, чтобы создать новую папку с именем contoso-retail для приложения Node и перейти в нее.

    mkdir contoso-retail && cd contoso-retail

  4. Введите следующие команды, чтобы перейти к инициализации нового приложения Node.

    npm init -y

    Команда npm init создает файл package.json и отображает его содержимое. Этот файл содержит исходные метаданные для приложения с именем по умолчанию, описанием и точкой входа.

  5. В меню "Файл" в Visual Studio Code выберите "Открыть папку" и откройте папку contoso-retail.

  6. В окне Обозреватель выберите файл package.json.

  7. В области редактора измените следующее для файла package.json :

    Свойство Значение
    type module — код JavaScript модуля использует синтаксис ES6

    Файл должен выглядеть так. В примере кода используется синтаксис ES6, поэтому необходимо задать тип приложения для модуля.

    {
    "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. В меню File (Файл) выберите пункт Save (Сохранить).

Настройка Visual Studio Code для автоматического изменения файла

  1. Включите автосохранение с помощью параметров > файла > Параметры, CTRL + ,.
  2. Выполните поиск файлов автоматического сохранения.
  3. Выберите afterDelay из 1000.

Создание файла gitignore

Файл gitignore запрещает проверка в файлах для управления версиями, которые не должны быть добавлены.

Создайте файл, CTRL + N.gitignore и добавьте в него следующее.

node_modules
.env

Создание файла среды секретов

  1. В Visual Studio Code в меню "Файл " выберите новый текстовый файл.

  2. В меню Файл выберите команду Сохранить как. Сохраните новый файл с именем .env.

  3. Добавьте в файл следующие переменные:

    COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

  4. В обозревателе Azure shift + ALT + A выберите подписку, а затем узел Azure Cosmos DB, чтобы просмотреть ресурсы.

  5. Щелкните правой кнопкой мыши учетную запись Cosmos DB и выберите "Копировать строка подключения".

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

  6. Вставьте строка подключения в .env файл для переменной COSMOS_CONNECTION_STRING.

Установка пакета Cosmos DB

  1. В интегрированном терминале добавьте пакет SDK Cosmos DB.

    npm install @azure/cosmos

  2. В интегрированном терминале добавьте пакет npm для использования .env файла для переменных среды. Этот пакет считывает .env файл и добавляет эти значения в process.env объект среды выполнения.

    npm install dotenv

Форма продукта

Общие сведения о документе JSON помогут вам понять операции, их входные данные и ответы.

Продукты в этом наборе данных имеют следующую форму:

{
      "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 },
        ...
      ]
    }
Свойство Description
id Cosmos DB использует пользовательский идентификатор, идентификатор для уникальной идентификации каждого элемента. Идентификатор может быть любым типом данных, например числом, строкой и т. д. Если идентификатор не указан, Cosmos DB создает его для вас.
categoryName Это свойство было специально выбрано для этого набора данных в качестве ключа секции. Имя категории продукта обеспечивает несколько даже распределение данных, которые идеально подходят для ключа секции. Имя категории также не изменяется очень часто, что также важно для ключа секции.
теги и инвентаризация Они представляют вложенные подписки, которые можно использовать для поиска и изменения результатов запросов с помощью ключевое слово JOIN.

Создание скрипта для добавления продуктов в контейнер

  1. В Visual Studio Code в меню "Файл " выберите новый текстовый файл.

  2. В меню Файл выберите команду Сохранить как. Сохраните новый файл с именем 1-contoso-products-upload-data.js.

  3. Скопируйте следующий Код JavaScript и вставьте его в файл.

    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. Создайте файл с именем products.json и скопируйте в него содержимое примера файла данных products.json.

    Это массив объектов JSON.

  5. В терминале Visual Studio Code выполните файл JavaScript, чтобы передать данные в контейнер Cosmos DB:

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

    Терминал отображает количество элементов, activityId, statusCode и имя элемента.

Объект результата операции

Результирующий объект, возвращаемый из операции, задокументирован в справочной документации по Cosmos DB SQL. Хотя результат может иметь сведения, относящиеся к операции, каждый результат будет иметь некоторые свойства, которые всегда возвращаются и полезны для определения того, что произошло.

Свойство результата Description
activityId Уникальный идентификатор события, связанный с определенной операцией. Если операция завершается ошибкой, и вам нужно обратиться в службу поддержки, этот идентификатор, а также имя ресурса и подписка полезны для быстрого поиска проблемы.
statusCode Код состояния HTTP, указывающий на успешность или сбой операции.
resource Это объект JSON конечного объекта, например документ JSON в контейнере.

Просмотр документов Cosmos DB в Visual Studio Code

  1. В Visual Studio Code откройте обозреватель Azure или используйте сочетание клавиш SHIFT + ALT + A.

  2. Найдите и разверните узел подписки Concierge, а затем узел ресурсов Azure Cosmos DB .

  3. Найдите и разверните базу данных ContosoRetail и его контейнер Products .

  4. Разверните узел "Документы", чтобы просмотреть продукты, добавленные скриптом Node.js. Имя узла для каждого документа — это свойство имени .

  5. Выберите первый продукт, чтобы просмотреть весь json.

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

Проверьте свою работу

  • В Visual Studio Code в расширении баз данных Azure отображается учетная запись Cosmos DB, база данных и контейнер.
  • При развертывании контейнера в узле "Документы" отображается множество элементов.