Criar um aplicativo do MongoDB com React e Azure Cosmos DB

  • Aplica-se a: ✅ MongoDB

APLICA-SE AO: Mongodb

Importante

Você deseja migrar um aplicativo MongoDB existente ou usar recursos da Linguagem de Consulta do MongoDB (MQL)? Considere o Azure DocumentDB.

Você está procurando uma solução de banco de dados para cenários de alta escala com um SLA (contrato de nível de serviço de disponibilidade) de 99,999%, dimensionamento automático instantâneo e failover automático em várias regiões? Considere Azure Cosmos DB para NoSQL.

Este tutorial em vídeo em várias partes demonstra como criar um aplicativo de acompanhamento de heróis com um front-end em React. O aplicativo usa o Node e o Express para o servidor, conecta-se ao banco de dados do Azure Cosmos DB configurado com a API do Azure Cosmos DB for MongoDB e conecta o front-end do React à parte de servidor do aplicativo. O tutorial também demonstra como realizar o dimensionamento por apontar e clicar do Azure Cosmos DB no portal do Azure e como implantar o aplicativo na internet para que todos possam acompanhar seus heróis favoritos.

O Azure Cosmos DB oferece compatibilidade com o protocolo wire do MongoDB, permitindo que os clientes usem o Azure Cosmos DB no lugar do MongoDB.

Este tutorial com várias partes aborda as seguintes tarefas:

  • Introdução
  • Configurar o projeto
  • Criar a interface do usuário com o React
  • Criar uma conta do Azure Cosmos DB usando o portal do Azure
  • Usar o Mongoose para se conectar ao Azure Cosmos DB
  • Adicionar as operações de React, Criar, Atualizar e Excluir ao aplicativo

Deseja criar esse mesmo aplicativo com Angular? Confira a série de tutoriais em vídeo do Angular.

Prerequisites

  • Node.js: v14.x ou posterior (LTS recomendado). Verifique com node --version.
  • Ferramenta de teste HTTP: Insomnia, curl, Visual Studio ou PowerShell Invoke-RestMethod. Verifique a disponibilidade executando a ferramenta uma vez (por exemplo, curl --version).

Projeto concluído

Obter o aplicativo completo do GitHub.

Introdução

Neste vídeo, Burke Holland oferece uma introdução ao Azure Cosmos DB e orienta você por meio do aplicativo que é criado nesta série de vídeos.
Verificação de êxito: você entende a arquitetura geral do aplicativo (interface do usuário do React, API node/Express, Azure Cosmos DB para MongoDB).

Configuração do projeto

Este vídeo mostra como configurar o Express e o React no mesmo projeto. Burke, em seguida, fornece um passo a passo do código no projeto.
Verificação de êxito: o projeto é executado localmente sem erros usando npm start (ou o script inicial equivalente).

Criar a interface do usuário

Este vídeo mostra como criar a IU (interface do usuário) com o React.
Verificação de êxito: a interface do usuário do React é renderizada no navegador e exibe o layout da lista de heróis.

Note

O CSS referenciado neste vídeo pode ser encontrado no repositório GitHub react-cosmosdb.

Conectar-se ao Azure Cosmos DB

Este vídeo mostra como criar uma conta do Azure Cosmos DB no portal do Azure, instalar os pacotes do MongoDB e do Mongoose e conectar o aplicativo à conta recém-criada usando a cadeia de conexão do Azure Cosmos DB.

Exemplo: conectar-se ao Mongoose

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Verificação: inicie o aplicativo e confirme se o console registra Connected to Azure Cosmos DB for MongoDB.

Leia e crie heróis no aplicativo

Este vídeo mostra como ler heróis e criar heróis no banco de dados do Azure Cosmos DB, bem como testar esses métodos usando um utilitário de teste HTTP e a interface do usuário do React.
Verificação de sucesso: Criar um herói retorna HTTP 201 (ou 200) e o novo herói aparece na lista de interface do usuário.

Atualizar e excluir heróis no aplicativo

Este vídeo mostra como excluir e atualizar heroes no aplicativo e exibir as atualizações na interface do usuário.
Verificação de êxito: as atualizações e exclusões são refletidas imediatamente na interface do usuário e persistidas no banco de dados.

Concluir o aplicativo

Este vídeo mostra como concluir o aplicativo e concluir a conexão da interface do usuário com a API de back-end.
Verificação de êxito: o fluxo de trabalho de criação, leitura, atualização e exclusão completo funciona de ponta a ponta.

Limpar os recursos

Se você não continuar usando este aplicativo, siga as seguintes etapas para excluir todos os recursos criados neste tutorial no portal do Azure.

  1. No menu à esquerda no portal do Azure, clique em Grupos de recursos e, em seguida, clique no nome do recurso que você criou.
  2. Na página do grupo de recursos, clique em Excluir, digite o nome do recurso a ser excluído na caixa de texto e clique em Excluir.

Próximas Etapas 

Neste tutorial, você aprendeu a:

  • Criar um aplicativo com React, Node, Express e Azure Cosmos DB
  • Criar uma conta do Azure Cosmos DB
  • Conectar o aplicativo à conta do Azure Cosmos DB
  • Testar o aplicativo usando um utilitário de teste HTTP
  • Executar o aplicativo e adicionar heroes ao banco de dados

Agora, você pode seguir para o próximo tutorial e saber como importar dados do MongoDB para o Azure Cosmos DB.

Importar dados do MongoDB no Azure Cosmos DB

Tentando fazer o planejamento de capacidade para uma migração para Azure Cosmos DB? Você pode usar informações sobre o seu cluster de banco de dados existente para planejamento de capacidade.

  • Last updated on