Erstellen einer MongoDB-App mit React und Azure Cosmos DB

  • Artikel

GILT FÜR: MongoDB

Dieses mehrteilige Videotutorial veranschaulicht, wie Sie eine Heldenverfolgungs-App mit einem React-Front-End erstellen. Die App verwendet Node und Express für den Server, stellt eine Verbindung mit der Azure Cosmos DB-Datenbank her, die mit der Azure Cosmos DB-API für MongoDB konfiguriert ist, und stellt dann eine Verbindung zwischen dem React-Front-End und dem Serverteil der App her. Das Tutorial vermittelt auch, wie Sie im Azure-Portal eine Point-and-Click-Skalierung von Azure Cosmos DB durchführen und wie Sie die App im Internet bereitstellen, damit alle ihre Lieblingshelden nachverfolgen können.

Azure Cosmos DB unterstützt die Wire Protocol-Kompatibilität mit MongoDB, sodass Clients Azure Cosmos DB anstelle von MongoDB verwenden können.

Dieses mehrteilige Tutorial umfasst folgende Aufgaben:

  • Einführung
  • Einrichten des Projekts
  • Erstellen der Benutzeroberfläche mit React
  • Erstellen eines Azure Cosmos DB-Kontos über das Azure-Portal
  • Herstellen einer Verbindung mit Azure Cosmos DB mithilfe von Mongoose
  • Hinzufügen von React-, Erstellungs-, Aktualisierungs- und Löschvorgängen zur App

Diese App kann auch mit Angular erstellt werden. Die Tutorialvideoreihe für Angular finden Sie hier.

Voraussetzungen

Fertiges Projekt

Die fertige Anwendung steht auf GitHub zur Verfügung.

Einführung

In diesem Video stellt Burke Holland Azure Cosmos DB vor und führt Sie schrittweise durch die App, die in dieser Videoreihe erstellt wird.

Projekteinrichtung

In diesem Video erfahren Sie, wie Sie Express und React im gleichen Projekt einrichten. Anschließend folgt eine Erläuterung des im Projekt enthaltenen Codes.

Erstellen der Benutzeroberfläche

In diesem Video erfahren Sie, wie Sie mithilfe von React die Benutzeroberfläche der Anwendung erstellen.

Hinweis

Das CSS, von dem in diesem Video die Rede ist, finden Sie im GitHub-Repository „react-cosmosdb“.

Herstellen der Verbindung mit Azure Cosmos DB

In diesem Video erfahren Sie, wie Sie über das Azure-Portal ein Azure Cosmos DB-Konto erstellen, das MongoDB- und das Mongoose-Paket erstellen und dann die App mithilfe der Azure Cosmos DB-Verbindungszeichenfolge mit dem neu erstellten Konto verbinden.

Lesen und Erstellen von Helden in der App

In diesem Video erfahren Sie, wie Sie Helden in der Azure Cosmos DB-Datenbank lesen und erstellen und wie Sie die entsprechenden Methoden mit Postman und der React-Benutzeroberfläche testen.

Löschen und Aktualisieren von Helden in der App

In diesem Video erfahren Sie, wie Sie Helden über die App löschen und aktualisieren und wie Sie die Aktualisierungen auf der Benutzeroberfläche anzeigen.

Vervollständigen der App

In diesem Video erfahren Sie, wie Sie die App vervollständigen und die Integration der Benutzeroberfläche in die Back-End-API abschließen.

Bereinigen von Ressourcen

Wenn Sie diese App nicht weiterhin verwenden, löschen Sie mit den folgenden Schritten im Azure-Portal sämtliche Ressourcen, die mit diesem Tutorial erstellt wurden.

  1. Klicken Sie im Azure-Portal im Menü auf der linken Seite auf Ressourcengruppen, und klicken Sie auf den Namen der erstellten Ressource.
  2. Klicken Sie auf der Seite mit Ihrer Ressourcengruppe auf Löschen, geben Sie im Textfeld den Namen der zu löschenden Ressource ein, und klicken Sie dann auf Löschen.

Nächste Schritte

In diesem Tutorial wurde Folgendes vermittelt:

  • Erstellen einer App mit React, Node, Express und Azure Cosmos DB
  • Erstellen eines Azure Cosmos DB-Kontos
  • Verbinden der App mit dem Azure Cosmos DB-Konto
  • Testen der App mithilfe von Postman
  • Ausführen der Anwendung und Hinzufügen von Helden zur Datenbank

Im nächsten Tutorial erfahren Sie, wie Sie MongoDB-Daten in Azure Cosmos DB importieren.

Import MongoDB data into Azure Cosmos DB (Importieren von Daten aus MongoDB in Azure Cosmos DB)

Versuchen Sie, die Kapazitätsplanung für eine Migration zu Azure Cosmos DB durchzuführen? Sie können Informationen zu Ihrem vorhandenen Datenbankcluster für die Kapazitätsplanung verwenden.