Creare un'app MongoDB con React e Azure Cosmos DB

  • Articolo

SI APPLICA A: Mongodb

Questa esercitazione video in più parti illustra come creare un'app di verifica hero con un front-end React. L'app usata da Node e Express per il server si connette al database di Azure Cosmos DB configurato con l'API di Azure Cosmos DB per MongoDB e quindi connette la React front-end alla parte server dell'app. L'esercitazione illustra anche come puntare e fare clic per eseguire il ridimensionamento di Azure Cosmos DB nel portale di Azure e come distribuire l'app in Internet in modo che ognuna possa tenere traccia degli elementi hero preferiti.

Azure Cosmos DB supporta la compatibilità con il protocollo di collegamento con MongoDB, consentendo ai client di usare Azure Cosmos DB invece di MongoDB.

Questa esercitazione in più parti illustra le attività seguenti:

  • Introduzione
  • Configurare il progetto
  • Compilare l'interfaccia utente con React
  • Creare un account Azure Cosmos DB mediante il portale di Azure
  • Usare Mongoose per connettersi ad Azure Cosmos DB
  • Aggiungere le operazioni React, Create, Update e Delete all'app

Per compilare questa stessa app con Angular, vedere la serie di video di esercitazione su Angular.

Prerequisiti

Progetto finito

Ottenere l'applicazione completata da GitHub.

Introduzione

In questo video Burke Holland presenta Azure Cosmos DB e illustra l'app creata in questa serie di video.

Configurazione del progetto

Questo video illustra come configurare Express e React nello stesso progetto. Burke illustra quindi una procedura dettagliata sul codice nel progetto.

Compilare l'interfaccia utente

Questo video illustra come creare l'interfaccia utente dell'applicazione con React.

Nota

Il foglio di stile CSS a cui si fa riferimento in questo video è disponibile nel repository di GitHub react-cosmosdb.

Connettersi ad Azure Cosmos DB

Questo video illustra come creare un account Azure Cosmos DB nel portale di Azure, installare i pacchetti MongoDB e Mongoose e quindi connettere l'app al nuovo account creato usando la stringa di connessione Azure Cosmos DB.

Leggere e creare hero nell'app

Questo video illustra come leggere eroi e creare eroi nel database di Azure Cosmos DB, nonché come testare tali metodi usando Postman e l'interfaccia utente di React.

Eliminare e aggiornare hero nell'app

Questo video illustra come eliminare e aggiornare hero dall'app e visualizzare gli aggiornamenti nell'interfaccia utente.

Completare l'app

Questo video illustra come completare l'app e finire di collegare l'interfaccia utente all'API back-end.

Pulire le risorse

Se non si prevede di continuare a usare questa app, seguire questa procedura per eliminare tutte le risorse create da questa esercitazione nel portale di Azure.

  1. Scegliere Gruppi di risorse dal menu a sinistra del portale di Azure e quindi fare clic sul nome della risorsa creata.
  2. Nella pagina del gruppo di risorse fare clic su Elimina, digitare il nome della risorsa da eliminare nella casella di testo e quindi fare clic su Elimina.

Passaggi successivi

In questa esercitazione si è appreso come:

  • Creare un'app con React, Node, Express e Azure Cosmos DB
  • Creare un account Azure Cosmos DB
  • Connettere l'app all'account Azure Cosmos DB
  • Testare l'app usando Postman
  • Eseguire l'applicazione e aggiungere hero al database

È possibile passare all'esercitazione successiva per ottenere informazioni su come importare i dati di MongoDB in Azure Cosmos DB.

Importare i dati di MongoDB in Azure Cosmos DB

Si sta tentando di pianificare la capacità per una migrazione ad Azure Cosmos DB? È possibile usare le informazioni del cluster di database esistente per la pianificazione della capacità.