Partager via

Créer une application MongoDB avec React et Azure Cosmos DB

S’APPLIQUE À : MongoDB

Ce didacticiel vidéo en plusieurs parties montre comment créer une application de suivi de héros avec un serveur frontal React. L’application se sert de Node et Express pour le serveur, se connecte à la base de données Azure Cosmos DB configurée avec l’API d’Azure Cosmos DB pour MongoDB, puis connecte le front-end React à la partie serveur de l’application. Le didacticiel montre également comment effectuer une mise à l’échelle d’Azure Cosmos DB en point-and-click 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.

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.

Ce didacticiel en plusieurs parties décrit les tâches suivantes :

  • Introduction
  • Configurer le projet
  • Générer l’interface utilisateur avec React
  • Créer un compte Azure Cosmos DB à l’aide du portail Azure
  • Utiliser Mongoose pour se connecter à Azure Cosmos DB
  • Ajouter les opérations Réagir, Créer, Mettre à jour et Supprimer à l’application

Vous souhaitez générer cette même application avec Angular ? Consultez la série de didacticiels vidéo pour Angular.

Prérequis

  • Node.JS
  • Outil de test HTTP
    • Nous recommandons Insomnia, curl, Visual Studio ou Invoke-RestMethod

Projet terminé

Obtenez l’application finale sur GitHub.

Introduction

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.

Configuration du projet

Cette vidéo montre comment configurer Express et React dans le même projet. Burke détaille ensuite le code dans le projet.

Créer l’interface utilisateur

Cette vidéo montre comment créer l’interface utilisateur (UI) de l’application avec React.

Notes

Le code CSS présenté dans cette vidéo se trouve dans le référentiel GitHub react-cosmosdb.

Se connecter à 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.

Afficher et créer des héros dans l’application

Cette vidéo montre comment lire et créer des bannières dans la base de données Azure Cosmos DB et comment tester ces méthodes à l’aide d’un utilitaire de test HTTP et de l’interface utilisateur de React.

Supprimer et mettre à jour des héros dans l’application

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.

Compléter l’application

Cette vidéo montre comment compléter l’application et terminer le raccordement de l’interface utilisateur à l’API principale.

Nettoyer les ressources

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.

  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.
  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.

Étapes suivantes

Dans ce tutoriel, vous avez appris à effectuer les opérations suivantes :

  • Création d’une application avec React, Node, Express et Azure Cosmos DB
  • Créer un compte Azure Cosmos DB
  • Connexion de l’application au compte Azure Cosmos DB
  • Tester l’application à l’aide d’un utilitaire de test HTTP
  • Exécution de l’application et ajout de héros à la base de données

Vous pouvez passer au didacticiel suivant et découvrir comment importer des données MongoDB dans Azure Cosmos DB.

Importer des données MongoDB dans Azure Cosmos DB

Vous tentez d’effectuer une planification de la capacité pour une migration vers Azure Cosmos DB ? Vous pouvez utiliser les informations sur votre cluster de bases de données existant pour la planification de la capacité.