Compartilhar via

Criar um aplicativo do MongoDB com React e Azure Cosmos DB

  • Artigo

APLICA-SE AO: MongoDB

Este tutorial em vídeo com várias partes demonstra como criar um aplicativo de acompanhamento de hero 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 fazer o dimensionamento de apontar e clicar do Azure Cosmos DB no portal do Azure e como implantar o aplicativo na Internet para que todos possam acompanhar seus heroes favoritos.

O Azure Cosmos DB é compatível com a compatibilidade de protocolo de transferência o 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 operações 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.

Pré-requisitos

  • Node.js
  • Uma ferramenta de teste HTTP
    • Recomendamos Insomnia, curl, Visual Studio ou Invoke-RestMethod

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.

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.

Criar a interface do usuário

Este vídeo mostra como criar a IU (interface do usuário) com o React.

Observação

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.

Ler e criar heroes 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.

Excluir e atualizar heroes no aplicativo

Este vídeo mostra como excluir e atualizar heroes no aplicativo e exibir as atualizações na interface do usuário.

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.

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 depois clique no nome do recurso criado.
  2. Em sua página de grupo de recursos, clique em Excluir, digite o nome do recurso para excluir na caixa de texto e depois 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 da capacidade para uma migração para o Azure Cosmos DB? Você pode usar informações sobre o cluster de banco de dados existente para fazer isso.