Compartir a través de

Creación de una aplicación de MongoDB con React y Azure Cosmos DB

  • Se aplica a: ✅ MongoDB

SE APLICA A: MongoDB

Importante

¿Desea migrar una aplicación de MongoDB existente o usar las características del lenguaje de consulta de MongoDB (MQL)? Considere la posibilidad de usar Azure DocumentDB.

¿Busca una solución de base de datos para escenarios a gran escala con un contrato de nivel de servicio (SLA) de disponibilidad de 99,999%, escalabilidad automática instantánea y conmutación automática por error en varias regiones? Considere la posibilidad de usar Azure Cosmos DB para NoSQL.

En este videotutorial de varias partes, se muestra cómo crear una aplicación de seguimiento de héroes con un front-end React. La aplicación utiliza Node y Express para el servidor, se conecta a la base de datos de Azure Cosmos DB configurada con la API de Azure Cosmos DB para MongoDB y conecta el front-end de React a la parte del servidor de la aplicación. El tutorial también muestra cómo escalar Azure Cosmos DB mediante apuntar y hacer clic en Azure Portal y cómo implementar la aplicación en Internet, de modo que todos puedan realizar un seguimiento de sus héroes favoritos.

Azure Cosmos DB admite la compatibilidad del protocolo de transferencia con MongoDB, lo que permite que los clientes usen Azure Cosmos DB en lugar de MongoDB.

En este tutorial de varias partes, se abordan las tareas siguientes:

  • Introducción
  • Configuración del proyecto
  • Creación de la interfaz de usuario con React
  • Creación de una cuenta de Azure Cosmos DB mediante Azure Portal
  • Uso de Mongoose para conectarse a Azure Cosmos DB
  • Incorporación de las operaciones React, Create, Update y Delete a la aplicación

¿Quiere crear esta misma aplicación con Angular? Consulte la serie de vídeos del tutorial de Angular.

Prerrequisitos

  • Node.js: v14.x o posterior (se recomienda LTS). Compruebe con node --version.
  • Herramienta de pruebas HTTP: Insomnio, curl, Visual Studio o PowerShell Invoke-RestMethod. Compruebe la disponibilidad mediante la ejecución de la herramienta una vez (por ejemplo, curl --version).

Proyecto terminado

Obtenga la aplicación completa desde GitHub.

Introducción

En este vídeo, Burke Holland le ofrece una introducción a Azure Cosmos DB y le guía a través de la aplicación que se crea en esta serie de vídeos.
Verificación de éxito: comprende la arquitectura general de la aplicación (React UI, Node/Express API, Azure Cosmos DB para MongoDB).

Configuración del proyecto

Este vídeo muestra cómo configurar Express y React en el mismo proyecto. Burke ofrece a continuación un tutorial del código en el proyecto.
Comprobación correcta: el proyecto se ejecuta localmente sin errores mediante npm start (o el script de inicio equivalente).

Compilación de la interfaz de usuario

Este vídeo muestra cómo crear la interfaz de usuario (UI) de la aplicación con React.
Verificación de éxito: la interfaz de usuario de React se representa en el navegador y se muestra el diseño de la lista de héroes.

Nota:

Las reglas de CSS a las que se hace referencia en este vídeo se encuentran en el repositorio de GitHub react-cosmosdb.

Conexión a Azure Cosmos DB

Este vídeo muestra cómo crear una cuenta de Azure Cosmos DB en Azure Portal, instalar los paquetes de MongoDB y Mongoose, y, a continuación, conectar la aplicación a la cuenta recién creada con la cadena de conexión de Azure Cosmos DB.

Ejemplo: conexión con 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");
});

Comprobación: inicie la aplicación y confirme que la consola registra Connected to Azure Cosmos DB for MongoDB.

Lectura y creación de héroes en la aplicación

En este vídeo se muestra cómo leer héroes y crear héroes en la base de datos de Azure Cosmos DB, así como cómo probar esos métodos mediante una utilidad de pruebas HTTP y la interfaz de usuario de React.
Comprobación correcta: la creación de un héroe devuelve HTTP 201 (o 200) y el nuevo héroe aparece en la lista de interfaz de usuario.

Eliminación y actualización de héroes en la aplicación

Este vídeo muestra cómo eliminar y actualizar héroes desde la aplicación y cómo mostrar las actualizaciones en la interfaz de usuario.
Comprobación correcta: las actualizaciones y eliminaciones se reflejan inmediatamente en la interfaz de usuario y se conservan en la base de datos.

Completar la aplicación

Este vídeo muestra cómo completar la aplicación y finalizar enlazando la interfaz de usuario con la API de back-end.
Verificación exitosa: el flujo de trabajo completo de creación, lectura, actualización y eliminación funciona de un extremo a otro.

Limpieza de recursos

Si no va a seguir usando esta aplicación, use los pasos siguientes para borrar todos los recursos que se crearon en este tutorial en Azure Portal.

  1. En el menú de la izquierda de Azure Portal, haga clic en Grupos de recursos y en el nombre del recurso que creó.
  2. En la página del grupo de recursos, haga clic en Eliminar, escriba en el cuadro de texto el nombre del recurso que quiere eliminar y haga clic en Eliminar.

Pasos siguientes

En este tutorial, ha aprendido cómo:

  • Crear una aplicación con React, Node, Express y Azure Cosmos DB
  • Creación de una cuenta de Azure Cosmos DB
  • Conectar la aplicación a la cuenta de Azure Cosmos DB
  • Prueba de la aplicación mediante una utilidad de pruebas HTTP
  • Ejecutar la aplicación y agregar héroes a la base de datos

Puede pasar al tutorial siguiente y aprender a importar datos de MongoDB en Azure Cosmos DB.

Importación de datos de MongoDB a Azure Cosmos DB

¿Está intentando la planificación de capacidad para una migración a Azure Cosmos DB? Puede usar información sobre su clúster de bases de datos existente para la planificación de capacidad.

  • Last updated on