Udostępnij za pośrednictwem

Tworzenie aplikacji bazy danych MongoDB przy użyciu platformy React i usługi Azure Cosmos DB

  • Artykuł

DOTYCZY: MongoDB

W tym wieloczęściowym samouczku wideo przedstawiono sposób tworzenia głównej aplikacji do śledzenia przy użyciu zaplecza platformy React. Aplikacja używa węzła i platformy Express dla serwera, łączy się z bazą danych usługi Azure Cosmos DB skonfigurowaną przy użyciu interfejsu API usługi Azure Cosmos DB dla bazy danych MongoDB, a następnie łączy fronton React z częścią serwera aplikacji. W samouczku przedstawiono również sposób skalowania typu „wskaż i kliknij” bazy usługi Azure Cosmos DB w witrynie Azure Portal oraz sposób wdrażania aplikacji w Internecie, tak aby wszyscy użytkownicy mogli śledzić swoje ulubione aplikacje główne.

Usługa Azure Cosmos DB obsługuje zgodność protokołu przewodowego z bazą danych MongoDB, umożliwiając klientom używanie usługi Azure Cosmos DB zamiast bazy danych MongoDB.

W tym wieloczęściowym samouczku opisano następujące zadania:

  • Wprowadzenie
  • Konfigurowanie projektu
  • Tworzenie interfejsu użytkownika na platformie React
  • Tworzenie konta usługi Azure Cosmos DB przy użyciu witryny Azure Portal
  • Łączenie z usługą Azure Cosmos DB przy użyciu wtyczki Mongoose
  • Dodawanie operacji platformy React, tworzenia, aktualizacji i usuwania do aplikacji

Chcesz skompilować tę samą aplikację przy użyciu usługi Angular? Zobacz samouczek usługi Angular w postaci serii filmów wideo.

Wymagania wstępne

  • Node.js
  • Narzędzie do testowania HTTP
    • Zalecamy bezsenność, curl, Visual Studio lub Invoke-RestMethod

Zakończony projekt

Pobierz ukończoną aplikację z serwisu GitHub.

Wprowadzenie

W tym filmie Burke Holland przedstawia wprowadzenie do usługi Azure Cosmos DB i przeprowadzi Cię przez aplikację tworzoną w tej serii filmów wideo.

Ustawienia projektu

W tym filmie wideo pokazano, jak skonfigurować usługę Express i platformę React w tym samym projekcie. Następnie Burke prezentuje przewodnik po kodzie w projekcie.

Tworzenie interfejsu użytkownika

W tym filmie wideo pokazano, jak utworzyć interfejs użytkownika aplikacji na platformie React.

Uwaga

Arkusze CSS wspomniane w filmie znajdują się w repozytorium serwisu GitHub react-cosmosdb.

Łączenie z usługą Azure Cosmos DB

W tym filmie pokazano, jak utworzyć konto usługi Azure Cosmos DB w witrynie Azure Portal, zainstalować pakiety bazy danych MongoDB i wtyczki Mongoose, a następnie połączyć aplikację z nowo utworzonym kontem przy użyciu parametrów połączenia usługi Azure Cosmos DB.

Odczytywanie i tworzenie elementów głównych w aplikacji

W tym filmie wideo pokazano, jak odczytać bohaterów i utworzyć bohaterów w bazie danych usługi Azure Cosmos DB, a także jak przetestować te metody przy użyciu narzędzia do testowania HTTP i interfejsu użytkownika React.

Usuwanie i aktualizowanie elementów głównych w aplikacji

W tym filmie wideo pokazano sposób usuwania i aktualizowania elementów głównych z poziomu aplikacji oraz wyświetlania aktualizacji w interfejsie użytkownika.

Kończenie aplikacji

W tym filmie wideo pokazano, jak ukończyć aplikację i zakończyć dołączanie interfejsu użytkownika do interfejsu API zaplecza.

Czyszczenie zasobów

Jeśli nie zamierzasz w przyszłości korzystać z tej aplikacji, wykonaj następujące czynności, aby usunąć wszystkie zasoby utworzone w witrynie Azure Portal w ramach tego samouczka.

  1. W menu znajdującym się po lewej stronie w witrynie Azure Portal kliknij pozycję Grupy zasobów, a następnie kliknij nazwę utworzonego zasobu.
  2. Na stronie grupy zasobów kliknij pozycję Usuń, wpisz w polu tekstowym nazwę zasobu do usunięcia, a następnie kliknij pozycję Usuń.

Następne kroki

W tym samouczku zawarto informacje na temat wykonywania następujących czynności:

  • Tworzenie aplikacji przy użyciu platformy React, języka Node, usługi Express oraz usługi Azure Cosmos DB
  • Tworzenie konta usługi Azure Cosmos DB
  • Łączenie aplikacji z kontem usługi Azure Cosmos DB
  • Testowanie aplikacji przy użyciu narzędzia do testowania HTTP
  • Uruchamianie aplikacji i dodawanie elementów głównych do bazy danych

Możesz przejść do następnego samouczka i dowiedzieć się, jak importować dane MongoDB do usługi Azure Cosmos DB.

Importowanie danych z bazy danych MongoDB do usługi Azure Cosmos DB

Próbujesz zaplanować pojemność migracji do usługi Azure Cosmos DB? Informacje o istniejącym klastrze bazy danych można użyć do planowania pojemności.