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žila Node a Express, připojí 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 místo MongoDB používat Azure Cosmos DB.

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

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í nástroje Postman 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í nástroje Postman
  • 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 pro migraci do služby Azure Cosmos DB? Informace o existujícím databázovém clusteru můžete použít k plánování kapacity.