Créer une application MongoDB avec React et Azure Cosmos DBCreate a MongoDB app with React and Azure Cosmos DB

Ce didacticiel vidéo en plusieurs parties montre comment créer une application de suivi de héros avec un serveur frontal React.This multi-part video tutorial demonstrates how to create a hero tracking app with a React front-end. L’application se sert de Node et Express pour le serveur, se connecte à la base de données Cosmos configurée avec l’API d’Azure Cosmos DB pour MongoDB, puis connecte le front-end React à la partie serveur de l’application.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. Le tutoriel montre également comment effectuer une mise à l’échelle de Cosmos DB en pointant et cliquant dans le portail Azure et comment déployer l’application sur Internet pour que tout le monde puisse suivre ses héros préférés.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 prend en charge la compatibilité des protocoles filaires avec MongoDB, ce qui permet aux clients d’utiliser Azure Cosmos DB à la place de MongoDB.Azure Cosmos DB supports wire protocol compatibility with MongoDB, enabling clients to use Azure Cosmos DB in place of MongoDB.

Ce didacticiel en plusieurs parties décrit les tâches suivantes :This multi-part tutorial covers the following tasks:

  • IntroductionIntroduction
  • Configurer le projetSetup the project
  • Générer l’interface utilisateur avec ReactBuild the UI with React
  • Créer un compte Azure Cosmos DB à l’aide du portail AzureCreate an Azure Cosmos DB account using the Azure portal
  • Utiliser Mongoose pour se connecter à Azure Cosmos DBUse Mongoose to connect to Azure Cosmos DB
  • Ajouter les opérations Réagir, Créer, Mettre à jour et Supprimer à l’applicationAdd React, Create, Update, and Delete operations to the app

Vous souhaitez générer cette même application avec Angular ?Want to do build this same app with Angular? Consultez la série de didacticiels vidéo pour Angular.See the Angular tutorial video series.

PrérequisPrerequisites

Projet terminéFinished Project

Obtenez l’application finale sur GitHub.Get the completed application from GitHub.

IntroductionIntroduction

Dans cette vidéo, Burke Holland présente Azure Cosmos DB et vous fait découvrir l’application créée dans cette série de vidéos.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.

Installation du projetProject setup

Cette vidéo montre comment configurer Express et React dans le même projet.This video shows how set up the Express and React in the same project. Burke détaille ensuite le code dans le projet.Burke then provides a walkthrough of the code in the project.

Créer l’interface utilisateurBuild the UI

Cette vidéo montre comment créer l’interface utilisateur (UI) de l’application avec React.This video shows how to create the application's user interface (UI) with React.

Notes

Le code CSS présenté dans cette vidéo se trouve dans le référentiel GitHub react-cosmosdb.The CSS referenced in this video can be found in the react-cosmosdb GitHub repo.

Se connecter à Azure Cosmos DBConnect to Azure Cosmos DB

Cette vidéo montre comment créer un compte Azure Cosmos DB dans le portail Azure, comment installer les packages MongoDB et Mongoose et comment connecter l’application et le compte créé à l’aide de chaîne de connexion 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.

Afficher et créer des héros dans l’applicationRead and create heroes in the app

Cette vidéo montre comment afficher et créer des héros dans la base de données Cosmos et comment tester ces méthodes à l’aide de Postman et de l’interface utilisateur de React.This video shows how to read heroes and create heroes in the Cosmos database, as well as how to test those methods using Postman and the React UI.

Supprimer et mettre à jour des héros dans l’applicationDelete and update heroes in the app

Cette vidéo montre comment supprimer et mettre à jour des héros à partir de l’application et comment afficher les mises à jour dans l’interface utilisateur.This video shows how to delete and update heroes from the app and display the updates in the UI.

Compléter l’applicationComplete the app

Cette vidéo montre comment compléter l’application et terminer le raccordement de l’interface utilisateur à l’API principale.This video shows how to complete the app and finish hooking the UI up to the backend API.

Supprimer des ressourcesClean up resources

Si vous ne prévoyez pas de continuer à utiliser cette application, utilisez les étapes suivantes pour supprimer toutes les ressources créées par ce didacticiel dans le portail Azure.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. Dans le menu de gauche du portail Azure, cliquez sur Groupes de ressources, puis sur le nom de la ressource que vous avez créée.From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
  2. Sur la page de votre groupe de ressources, cliquez sur Supprimer, tapez le nom de la ressource à supprimer dans la zone de texte, puis cliquez sur Supprimer.On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Étapes suivantesNext steps

Dans ce tutoriel, vous avez appris à effectuer les opérations suivantes :In this tutorial, you've learned how to:

  • Création d’une application avec React, Node, Express et Azure Cosmos DBCreate an app with React, Node, Express, and Azure Cosmos DB
  • Création d’un compte Azure Cosmos DBCreate an Azure Cosmos DB account
  • Connexion de l’application au compte Azure Cosmos DBConnect the app to the Azure Cosmos DB account
  • Test de l’application à l’aide de PostmanTest the app using Postman
  • Exécution de l’application et ajout de héros à la base de donnéesRun the application and add heroes to the database

Vous pouvez passer au didacticiel suivant et découvrir comment importer des données MongoDB dans Azure Cosmos DB.You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.