Partager via

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

  • S’applique à: ✅ MongoDB

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: v14.x ou version ultérieure (recommandé par LTS). Vérifiez auprès de node --version.
  • Outil de test HTTP : Insomnie, curlVisual Studio ou PowerShell Invoke-RestMethod. Vérifiez la disponibilité en exécutant l’outil une seule fois (par exemple). curl --version

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.
Vérification de la réussite : vous comprenez l’architecture globale de l’application (interface utilisateur React, API Node/Express, Azure Cosmos DB pour MongoDB).

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.
Vérification de la réussite : le projet s’exécute localement sans erreurs ( npm start ou le script de démarrage équivalent).

Créer l’interface utilisateur

Cette vidéo montre comment créer l’interface utilisateur (UI) de l’application avec React.
Vérification de la réussite : l’interface utilisateur React s’affiche dans le navigateur et affiche la disposition de liste de héros.

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.

Exemple : se connecter avec Mongoose

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Vérification : démarrez l’application et vérifiez que la console journalise Connected to Azure Cosmos DB for MongoDB.

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.
Vérification de la réussite : la création d’un héros renvoie HTTP 201 (ou 200) et le nouveau héros apparaît dans la liste de l’interface utilisateur.

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.
Vérification de la réussite : les mises à jour et les suppressions sont immédiatement reflétées dans l’interface utilisateur et conservées dans la base de données.

Compléter l’application

Cette vidéo montre comment compléter l’application et terminer le raccordement de l’interface utilisateur à l’API principale.
Vérification de la réussite : la création, la lecture, la mise à jour et la suppression complètes du flux de travail fonctionne de bout en bout.

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

  • Last updated on