Поделиться через

Создание приложения MongoDB с помощью React и Azure Cosmos DB

Область применения: MongoDB

В этом руководстве с видео, состоящем из нескольких частей, показано, как создать приложение с внешним интерфейсом React, которое используется для отслеживания героев (элементов hero). Приложение, используемое node и Express для сервера, подключается к базе данных Azure Cosmos DB, настроенной с помощью API Azure Cosmos DB для MongoDB, а затем подключает интерфейс React к серверной части приложения. В этом руководстве также демонстрируется, как реализовать интерактивное масштабирование Azure Cosmos DB на портале Azure и как развернуть приложение в Интернете, чтобы любой пользователь мог отслеживать своих любимых героев (избранные элементы hero).

Azure Cosmos DB поддерживает совместимость коммуникационных протоколов с MongoDB, позволяя клиентам использовать Azure Cosmos DB вместо MongoDB.

В этом руководстве из нескольких частей рассматриваются следующие задачи:

  • Введение
  • настройка проекта;
  • создание пользовательского интерфейса с помощью React;
  • создание учетной записи Azure Cosmos DB с помощью портала Azure;
  • подключение к Azure Cosmos DB с помощью Mongoose;
  • добавление в приложение операций React: создания, обновления и удаления.

Хотите создать такое же приложение с помощью Angular? См. серию видеоруководств по Angular.

Необходимые компоненты

  • Node.js
  • Средство тестирования HTTP
    • Рекомендуется бессонница, curlVisual Studio или Invoke-RestMethod

Готовый проект

Готовое приложение можно скачать с сайта GitHub.

Введение

В этом видеоролике Берк Холланд (Burke Holland) познакомит вас с Azure Cosmos DB и расскажет о приложении, которое создается в этой серии видеоруководств.

Настройка проекта

В этом видеоролике показано, как настроить использование Express и React в одном проекте. После этого Берк подробно опишет код проекта.

Сборка пользовательского интерфейса

В этом видеоролике показано, как создать пользовательский интерфейс приложения с помощью React.

Примечание.

CSS-файл, который упоминается в этом видеоролике, можно найти в репозитории GitHub react-cosmosdb.

Подключение к Azure Cosmos DB

В этом видеоролике показано, как создать учетную запись Azure Cosmos DB на портале Azure, установить пакеты MongoDB и Mongoose и подключить приложение к новой учетной записи с помощью строки подключения Azure Cosmos DB.

Считывание и создание элементов hero в приложении

В этом видео показано, как считывать героев и создавать героев в базе данных Azure Cosmos DB, а также как протестировать эти методы с помощью программы тестирования HTTP и пользовательского интерфейса React.

Удаление и изменение элементов hero в приложении

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

Завершение создания приложения

В этом видео показано, как завершить создание приложения и подключение пользовательского интерфейса к API серверной части.

Очистка ресурсов

Если вы не собираетесь использовать это приложение дальше, удалите все ресурсы, созданные в ходе работы с этим руководством, на портале Azure, выполнив следующие действия.

  1. В меню слева на портале Azure щелкните Группы ресурсов, а затем выберите имя созданного ресурса.
  2. На странице группы ресурсов щелкните Удалить, в текстовом поле введите имя ресурса для удаления и щелкните Удалить.

Следующие шаги

Из этого руководства вы узнали, как выполнять такие задачи:

  • создание приложения с помощью React, Node, Express и Azure Cosmos DB;
  • Создание учетной записи Azure Cosmos DB
  • подключение приложения к учетной записи Azure Cosmos DB;
  • Тестирование приложения с помощью программы тестирования HTTP
  • запуск приложения и добавление элементов hero в базу данных.

Вы можете перейти к следующему руководству, из которого вы узнаете, как импортировать данные MongoDB в Azure Cosmos DB.

Перенос данных MongoDB в Azure Cosmos DB

Если вы планируете ресурсы для миграции в Azure Cosmos DB, Для планирования ресурсов можно использовать сведения об имеющемся кластере базы данных.