Vytvoření aplikace MongoDB s React a službou Azure Cosmos DBCreate a MongoDB app with React and Azure Cosmos DB

Tento vícedílný videokurz ukazuje, jak vytvořit aplikaci pro sledování hrdinů s front-endem v React.This multi-part video tutorial demonstrates how to create a hero tracking app with a React front-end. Aplikace používá uzel a Express pro server, se připojí k databázi Cosmos nakonfigurovanou rozhraní API služby Azure Cosmos DB pro MongoDBa pak připojí k serveru část aplikace React front-endu.The app used Node and Express for the server, connects to Cosmos database configured with the Azure Cosmos DB's API for MongoDB, and then connects the React front-end to the server portion of the app. Kurz také ukazuje, jak provést ukázat a kliknout škálování služby Cosmos DB na webu Azure Portal a jak nasadit aplikaci do Internetu, aby všichni mohli sledovat své oblíbené hrdiny.The tutorial also demonstrates how to do point-and-click scaling of Cosmos DB in the Azure portal and how to deploy the app to the internet so everyone can track their favorite heroes.

Azure Cosmos DB podporuje svážete kompatibilitu protokolů s databází MongoDB, umožňuje klientům používat službu Azure Cosmos DB místo MongoDB.Azure Cosmos DB supports wire protocol compatibility with MongoDB, enabling clients to use Azure Cosmos DB in place of MongoDB.

Tento vícedílný kurz se zabývá následujícími úlohami:This multi-part tutorial covers the following tasks:

  • ÚvodIntroduction
  • Nastavení projektuSetup the project
  • Vytvoření uživatelského rozhraní pomocí ReactBuild the UI with React
  • Vytvoření účtu služby Azure Cosmos DB pomocí webu Azure PortalCreate an Azure Cosmos DB account using the Azure portal
  • Připojení ke službě Azure Cosmos DB pomocí MongooseUse Mongoose to connect to Azure Cosmos DB
  • Přidání operací React pro vytvoření, aktualizaci a odstranění do aplikaceAdd React, Create, Update, and Delete operations to the app

Chcete vytvořit stejnou aplikaci pomocí Angular?Want to do build this same app with Angular? Podívejte se na sérii videokurzů pro Angular.See the Angular tutorial video series.

PožadavkyPrerequisites

Dokončený projektFinished Project

Hotovou aplikaci můžete získat z GitHubu.Get the completed application from GitHub.

ÚvodIntroduction

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í.In this video, Burke Holland gives an introduction to Azure Cosmos DB and walks you through the app that is created in this video series.

Nastavení projektuProject setup

Toto video ukazuje, jak ve stejném projektu nastavit Express a React.This video shows how set up the Express and React in the same project. Burke pak podrobně projde kód v tomto projektu.Burke then provides a walkthrough of the code in the project.

Vytvoření uživatelského rozhraníBuild the UI

Toto video ukazuje, jak vytvořit uživatelské rozhraní aplikace pomocí React.This video shows how to create the application's user interface (UI) with React.

Poznámka

Šablony stylů CSS zmiňované v tomto videu najdete v úložišti react-cosmosdb na GitHubu.The CSS referenced in this video can be found in the react-cosmosdb GitHub repo.

Připojení ke službě Azure Cosmos DBConnect to 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.This video shows how to create an Azure Cosmos DB account in the Azure portal, install the MongoDB and Mongoose packages, and then connect the app to the newly created account using the Azure Cosmos DB connection string.

Načítání a vytváření hrdinů v aplikaciRead and create heroes in the app

Toto video ukazuje, jak načítat hrdiny a vytvářet hrdiny v databázi Cosmos DB a jak tyto metody testovat pomocí nástroje Postman a uživatelského rozhraní v React.This video shows how to read heroes and create heroes in the Cosmos DB database, as well as how to test those methods using Postman and the React UI.

Odstranění a aktualizace hrdinů v aplikaciDelete and update heroes in the app

Toto video ukazuje, jak z aplikace odstranit a aktualizovat hrdiny a jak zobrazit aktualizace v uživatelském rozhraní.This video shows how to delete and update heroes from the app and display the updates in the UI.

Dokončení aplikaceComplete the app

Toto video ukazuje, jak dokončit aplikaci a napojování uživatelského rozhraní na rozhraní API back-endu.This video shows how to complete the app and finish hooking the UI up to the backend API.

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

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.If you're not going to continue to use this app, use the following steps to delete all resources created by this tutorial in the 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.From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
  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.On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Další postupNext steps

V tomto kurzu jste se naučili:In this tutorial, you've learned how to:

  • Vytvoření aplikace s React, Node, Express a službou Azure Cosmos DBCreate an app with React, Node, Express, and Azure Cosmos DB
  • Vytvoření účtu služby Azure Cosmos DBCreate an Azure Cosmos DB account
  • Připojení aplikace k účtu služby Azure Cosmos DBConnect the app to the Azure Cosmos DB account
  • Testování aplikace pomocí nástroje PostmanTest the app using Postman
  • Spuštění aplikace a přidání hrdinů do databázeRun the application and add heroes to the database

Můžete pokračovat k dalšímu kurzu, kde zjistíte, jak importovat data MongoDB do služby Azure Cosmos DB.You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.