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. A aplicação utilizou o Node e o Express para o servidor, liga-se à base de dados do Azure Cosmos DB configurada com a API do Azure Cosmos DB para MongoDB e, em seguida, liga o front-end do React à parte do servidor da aplicação. 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 suporta a compatibilidade de protocolos com o MongoDB, permitindo que os clientes utilizem o Azure Cosmos DB em vez 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
  • 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

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 na base de dados do Azure Cosmos DB, bem como testar esses métodos com o Postman e a IU do 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.

Limpar os 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.

Passos seguintes

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 a aplicação com o Postman
  • 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.

Import MongoDB data into Azure Cosmos DB (Importar dados do MongoDB para o Azure Cosmos DB)

Está a tentar planear a capacidade de uma migração para o Azure Cosmos DB? Pode utilizar informações sobre o cluster de bases de dados existentes para o planeamento de capacidade.