Compartir a través de

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

  • Artículo

SE APLICA A: MongoDB

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
  • Una herramienta de prueba HTTP
    • Se recomienda Insomnia, curl, Visual Studio o Invoke-RestMethod

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.

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.

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.

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.

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.

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.

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.

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

¿Intenta planear la capacidad de una migración a Azure Cosmos DB? Para ello, puede usar información sobre el clúster de bases de datos existente.