Partilhar via

Criar uma aplicação MongoDB com o React e o Azure Cosmos DB

  • Artigo

APLICA-SE A: MongoDB

Este tutorial de vídeo com várias parte demonstra como criar uma aplicação de acompanhamento de heroes com um front-end do React. O aplicativo usou Node e Express para o servidor, se conecta ao banco de dados do Azure Cosmos DB configurado com a API do Azure Cosmos DB para MongoDB e, em seguida, conecta o front-end React à parte do servidor do aplicativo. O tutorial também mostra como fazer o dimensionamento de tipo apontar e clicar do Azure Cosmos DB no portal do Azure, bem como implementar a aplicação na Internet, para que todos os utilizadores possam fazer o acompanhamento dos heroes preferidos.

O Azure Cosmos DB dá suporte à compatibilidade de protocolo wire com o MongoDB, permitindo que os clientes usem o Azure Cosmos DB no lugar do MongoDB.

Este tutorial com várias parte abrange as seguintes tarefas:

  • Introdução
  • Configurar o projeto
  • Criar a IU com o React
  • Criar uma conta do Azure Cosmos DB com o portal do Azure
  • Use Mongoose to connect to Azure Cosmos DB (Utilizar o Mongoose para ligar ao Azure Cosmos DB)
  • Adicionar operações React, Create, Update e Delete à aplicação

Quer criar esta mesma aplicação com o Angular? Veja a série de vídeos de tutorial sobre o Angular.

Pré-requisitos

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

Projeto concluído

Obtenha a aplicação concluída no GitHub.

Introdução

Neste vídeo, Burke Holland faz uma introdução ao Azure Cosmos DB e orienta-o ao longo da aplicação que é criada nesta série de vídeos.

Configuração do projeto

Este vídeo mostra como configurar o Express e o React no mesmo projeto. Depois, Burke faz a explicação passo a passo do código no projeto.

Criar a IU

Este vídeo mostra como criar a interface de utilizador (IU) da aplicação com o React.

Nota

O CSS referenciado neste vídeo está disponível no repositório do GitHub react-cosmosdb.

Ligar ao Azure Cosmos DB

Este vídeo mostra como criar uma conta do Azure Cosmos DB no portal do Azure, instalar os pacotes MongoDB e Mongoose e, em seguida, ligar a aplicação à conta criada recentemente com a cadeia de ligação do Azure Cosmos DB.

Ler e criar heroes na aplicação

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 React.

Eliminar e atualizar heroes na aplicação

Este vídeo mostra como eliminar e atualizar heroes na aplicação e apresentar as atualizações na IU.

Concluir a aplicação

Este vídeo mostra como concluir a aplicação e terminar a ligação da IU à API de back-end.

Clean up resources (Limpar recursos)

Se não pretender continuar a utilizar esta aplicação, siga os passos abaixo para eliminar todos os recursos criados por este tutorial no portal do Azure.

  1. No menu do lado esquerdo do portal do Azure, clique em Grupos de recursos e, em seguida, clique no nome de recurso que criou.
  2. Na página do grupo de recursos, clique em Eliminar, escreva o nome do recurso a eliminar na caixa de texto e, em seguida, clique em Eliminar.

Próximos passos

Neste tutorial, ficou a saber como:

  • Criar uma aplicação com o React, o Node, o Express e o Azure Cosmos DB
  • Criar uma conta do Azure Cosmos DB
  • Ligar a aplicação à conta do Azure Cosmos DB
  • Testar o aplicativo usando um utilitário de teste HTTP
  • Executar a aplicação e adicionar heroes à base de dados

Pode avançar para o próximo tutorial para ficar a saber como importar dados do MongoDB para o Azure Cosmos DB.

Importar dados da MongoDB para o Azure Cosmos DB

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