Delen via

Een MongoDB-app maken met React en Azure Cosmos DB

  • Van toepassing op: ✅ MongoDB

VAN TOEPASSING OP: MongoDB

In deze meerdelige zelfstudie op video wordt gedemonstreerd hoe u een app voor het volgen van hero's maakt met een React-frontend. De app heeft Node en Express voor de server gebruikt, maakt verbinding met de Azure Cosmos DB-database die is geconfigureerd met de API van Azure Cosmos DB voor MongoDB en verbindt vervolgens de React-front-end met het servergedeelte van de app. In deze zelfstudie wordt ook gedemonstreerd hoe u met aanwijzen en klikken schaling uitvoert van Azure Cosmos DB in Azure Portal en hoe u de app implementeert met internet, zodat gebruikers hun favoriete hero's kunnen volgen.

Azure Cosmos DB biedt ondersteuning voor compatibiliteit van wire-protocol met MongoDB, wat clients in staat stelt om Azure Cosmos DB te gebruiken in plaats van MongoDB.

Deze meerdelige zelfstudie behandelt de volgende taken:

  • Inleiding
  • Het project instellen
  • De gebruikersinterface bouwen met React
  • Een Azure Cosmos DB-account maken in Azure Portal
  • Mongoose gebruiken om verbinding te maken met Azure Cosmos DB
  • De bewerkingen React, Create, Update en Delete aan de app toevoegen

Wilt u dezelfde app bouwen met Angular? Zie de videoserie met zelfstudies van Angular.

Vereisten

  • Node.js: v14.x of hoger (LTS aanbevolen). Verifieer met node --version.
  • HTTP-testprogramma: Slapeloosheid, curlVisual Studio of PowerShell Invoke-RestMethod. Controleer de beschikbaarheid door het hulpprogramma eenmaal uit te voeren (bijvoorbeeld curl --version).

Voltooid project

Download de voltooide app op GitHub.

Inleiding

In deze video geeft Burke Holland een inleiding tot Azure Cosmos DB en wordt u door de app begeleid die in deze videoserie wordt gemaakt.
Geslaagde controle: u begrijpt de algehele app-architectuur (React UI, Node/Express API, Azure Cosmos DB voor MongoDB).

Projectinstellingen

In deze video ziet u hoe u Express en React in hetzelfde project instelt. Burke geeft u vervolgens een kijkje in de code van het project.
Geslaagde controle: het project wordt lokaal uitgevoerd zonder fouten met behulp van npm start (of het equivalente startscript).

De gebruikersinterface bouwen

In deze video ziet u hoe u de gebruikersinterface van de app maakt met React.
Succescontrole: De React-UI wordt weergegeven in de browser en toont de lay-out van de hero-lijst.

Notitie

De CSS waarnaar in deze video wordt verwezen, kunt u vinden in de react-cosmosdb GitHub-opslagplaats.

Verbinding maken met Azure Cosmos DB

In deze video ziet u hoe u een Azure Cosmos DB-account maakt in Azure Portal, de MongoDB- en Mongoose-pakketten installeert, en vervolgens de app verbinding laat maken met het nieuwe account met behulp van de Azure Cosmos DB-verbindingsreeks.

Voorbeeld: verbinding maken met 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");
});

Verificatie: start de app en bevestig dat de consolelogboeken Connected to Azure Cosmos DB for MongoDBzijn.

Hero's in de app lezen en maken

In deze video ziet u hoe u hero's kunt lezen en hero's kunt maken in de Azure Cosmos DB-database, en hoe u deze methoden kunt testen met behulp van een HTTP-testhulpprogramma en de React UI.
Succescontrole: Het maken van een hero retourneert HTTP 201 (of 200) en de nieuwe hero wordt weergegeven in de UI-lijst.

Hero's in de app bijwerken en uit de app verwijderen

In deze video ziet u hoe u hero's uit de app verwijdert en in de app bijwerkt en de updates in de gebruikersinterface kunt weergeven.
Geslaagde controle: updates en verwijderingen worden onmiddellijk doorgevoerd in de gebruikersinterface en blijven behouden in de database.

De app voltooien

In deze video ziet u hoe u de app voltooit en de gebruikersinterface ten slotte verbindt met de backend-API.
Controle op succes: de volledige werkstroom voor maken, lezen, bijwerken en verwijderen werkt end-to-end.

Resources opschonen

Als u deze app verder niet gaat gebruiken, kunt u met de volgende stappen alle resources verwijderen die met deze zelfstudies in Azure Portal zijn gemaakt.

  1. Klik in het menu aan de linkerkant in Azure Portal op Resourcegroepen en klik vervolgens op de resource die u hebt gemaakt.
  2. Klik op de pagina van uw resourcegroep op Verwijderen, typ de naam van de resource die u wilt verwijderen in het tekstvak en klik vervolgens op Verwijderen.

Volgende stappen

In deze zelfstudie hebt u het volgende geleerd:

  • Een app maken met React, Node, Express en Azure Cosmos DB
  • Een Azure Cosmos DB-account maken
  • De app verbinding laten maken met het Azure Cosmos DB-account
  • De app testen met behulp van een HTTP-testhulpprogramma
  • De app uitvoeren en hero's toevoegen aan de database

U kunt doorgaan met de volgende zelfstudie om te leren hoe u MongoDB-gegevens in Azure Cosmos DB importeert.

MongoDB-gegevens importeren in Azure Cosmos DB

Wilt u capaciteitsplanning uitvoeren voor een migratie naar Azure Cosmos DB? U kunt informatie over uw bestaande databasecluster gebruiken voor capaciteitsplanning.

  • Last updated on