Sdílet prostřednictvím

Vytvoření aplikace MongoDB s React a službou Azure Cosmos DB

  • Článek

PLATÍ PRO: MongoDB

Tento vícedílný videokurz ukazuje, jak vytvořit aplikaci pro sledování hrdinů s front-endem v React. Aplikace pro server používala Node a Express, připojuje se k databázi Azure Cosmos DB nakonfigurované pomocí rozhraní API služby Azure Cosmos DB pro MongoDB a pak připojí front-end React k serverové části aplikace. Kurz také ukazuje, jak škálovat službu Azure Cosmos DB ukázáním a kliknutím na webu Azure Portal a jak nasadit aplikaci na internet, aby všichni mohli sledovat své oblíbené hrdiny.

Azure Cosmos DB podporuje kompatibilitu přenosového protokolu s MongoDB a umožňuje klientům používat službu Azure Cosmos DB místo MongoDB.

Tento vícedílný kurz se zabývá následujícími úlohami:

  • Úvod
  • Nastavení projektu
  • Vytvoření uživatelského rozhraní pomocí React
  • Vytvoření účtu služby Azure Cosmos DB pomocí webu Azure Portal
  • Připojení ke službě Azure Cosmos DB pomocí Mongoose
  • Přidání operací React pro vytvoření, aktualizaci a odstranění do aplikace

Chcete vytvořit stejnou aplikaci pomocí Angular? Podívejte se na sérii videokurzů pro Angular.

Požadavky

  • Node.js
  • Testovací nástroj HTTP
    • Doporučujeme režimu spánku, curlvisual studio nebo Invoke-RestMethod

Dokončený projekt

Hotovou aplikaci můžete získat z GitHubu.

Úvod

V tomto videu Burke Holland představí službu Azure Cosmos DB a provede vás aplikací, která se vytváří v této sérií videí.

Nastavení projektu

Toto video ukazuje, jak ve stejném projektu nastavit Express a React. Burke pak podrobně projde kód v tomto projektu.

Vytvoření uživatelského rozhraní

Toto video ukazuje, jak vytvořit uživatelské rozhraní aplikace pomocí React.

Poznámka:

Šablony stylů CSS zmiňované v tomto videu najdete v úložišti react-cosmosdb na GitHubu.

Připojení ke službě Azure Cosmos DB

Toto video ukazuje, jak vytvořit účet služby Azure Cosmos DB na webu Azure Portal, nainstalovat balíčky MongoDB a Mongoose a pak aplikaci připojit k nově vytvořenému účtu pomocí připojovacího řetězce služby Azure Cosmos DB.

Načítání a vytváření hrdinů v aplikaci

Toto video ukazuje, jak číst hrdiny a vytvářet hrdiny v databázi Azure Cosmos DB a jak tyto metody otestovat pomocí testovacího nástroje HTTP a uživatelského rozhraní React.

Odstranění a aktualizace hrdinů v aplikaci

Toto video ukazuje, jak z aplikace odstranit a aktualizovat hrdiny a jak zobrazit aktualizace v uživatelském rozhraní.

Dokončení aplikace

Toto video ukazuje, jak dokončit aplikaci a napojování uživatelského rozhraní na rozhraní API back-endu.

Vyčištění prostředků

Pokud nebudete tuto aplikaci nadále používat, pomocí následujícího postupu odstraňte všechny prostředky vytvořené tímto rychlým startem na webu Azure Portal.

  1. V nabídce vlevo na portálu Azure Portal klikněte na Skupiny prostředků a pak klikněte na název vytvořeného prostředku.
  2. Na stránce skupiny prostředků klikněte na Odstranit, do textového pole zadejte prostředek, který chcete odstranit, a pak klikněte na Odstranit.

Další kroky

V tomto kurzu jste se naučili:

  • Vytvoření aplikace s React, Node, Express a službou Azure Cosmos DB
  • Vytvoření účtu služby Azure Cosmos DB
  • Připojení aplikace k účtu služby Azure Cosmos DB
  • Testování aplikace pomocí testovacího nástroje HTTP
  • Spuštění aplikace a přidání hrdinů do databáze

Můžete pokračovat k dalšímu kurzu, kde zjistíte, jak importovat data MongoDB do služby Azure Cosmos DB.

Importování dat MongoDB do databáze Azure Cosmos

Pokoušíte se naplánovat kapacitu migrace do služby Azure Cosmos DB? Informace o stávajícím databázovém clusteru můžete použít k plánování kapacity.