Compartir a través de

Creación de una aplicación de Angular con la API de Azure Cosmos DB para MongoDB: Creación de una aplicación de Node.js Express

  • Artículo

SE APLICA A: MongoDB

En este tutorial de varias partes se muestra cómo crear una nueva aplicación escrita en Node.js con Express y Angular y cómo conectarla a la cuenta de Azure Cosmos DB configurada con la API para MongoDB de Azure Cosmos DB.

La parte 2 del tutorial se basa en la introducción y aborda las tareas siguientes:

  • Instalación de la CLI de Angular y TypeScript
  • Creación de un nuevo proyecto mediante Angular
  • Creación de la aplicación mediante la plataforma Express
  • Prueba de la aplicación en Postman

Tutorial en vídeo

Requisitos previos

Antes de iniciar esta parte del tutorial, asegúrese de que ha visto el vídeo de introducción.

En este tutorial también se necesita:

Sugerencia

Este tutorial le guía por los pasos necesarios para crear la aplicación paso a paso. Si desea descargar el proyecto finalizado, puede obtener la aplicación completa en el repositorio de angular-cosmosdb en GitHub.

Instalación de la CLI de Angular y TypeScript

  1. Abra una ventana del símbolo del sistema de Windows o de Terminal de Mac e instale la CLI de Angular.

    npm install -g @angular/cli

  2. Instale TypeScript escribiendo el comando siguiente en el símbolo del sistema.

    npm install -g typescript

Uso de la CLI de Angular para crear un nuevo proyecto

  1. En el símbolo del sistema, cambie a la carpeta donde desea crear el proyecto nuevo, a continuación, ejecute el siguiente comando. Este comando crea una nueva carpeta y un proyecto llamado angular-cosmosdb e instala los componentes de Angular requeridos para una nueva aplicación. Utiliza la configuración mínima (--minimal) y especifica que el proyecto utiliza Sass (una sintaxis similar a CSS con la marca --style scss).

    ng new angular-cosmosdb --minimal --style scss

  2. Una vez finalizado el comando, cambie los directorios a la carpeta src/client.

    cd angular-cosmosdb

  3. A continuación, abra la carpeta en Visual Studio Code.

    code .

Creación de aplicación mediante la plataforma Express

  1. En Visual Studio Code, en el panel Explorer, haga clic con el botón derecho en la carpeta src, haga clic en Nueva carpeta y asigne el nombre server a la nueva carpeta.

  2. En el panel Explorer, haga clic con el botón derecho en la carpeta server, haga clic en Nuevo archivo y asigne el nombre index.js al nuevo archivo.

  3. En el símbolo del sistema, utilice el siguiente comando para instalar el analizador de cuerpo. Esto ayuda a la aplicación a analizar los datos JSON que se pasan a través de las API.

    npm i express body-parser --save

  4. En Visual Studio Code, copie el código siguiente en el archivo index.js. Este código:

    • Hace referencia a Express
    • Extrae el analizador de cuerpo para leer datos JSON en el cuerpo de las solicitudes
    • Usa una característica integrada llamada path
    • Establece variables raíz para facilitar la búsqueda de la ubicación del código
    • Configura un puerto
    • Inicia Express
    • Indica a la aplicación cómo utilizar el middleware que se va a usar para atender el servidor
    • Sirve todo lo que se encuentra en la carpeta dist, que será el contenido estático
    • Sirve la aplicación y sirve index.html para cualquier solicitud GET que no se encuentre en el servidor (para vínculos profundos)
    • Inicia el servidor con app.listen
    • Utiliza una función de flecha para registrar que el puerto está activo
    const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));

  5. En Visual Studio Code, en el panel Explorer, haga clic con el botón derecho en la carpeta server y, a continuación, haga clic en Nuevo archivo. Asigne el nombre routes.js al archivo nuevo.

  6. Copie el código siguiente en routes.js. Este código:

    • Hace referencia el enrutador de Express
    • Obtiene los héroes
    • Devuelve el contenido JSON para un hérore definido
    const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

  7. Guarde todos los archivos modificados.

  8. En Visual Studio Code, haga clic en el botón Depurar y haga clic en el botón de engranaje . El nuevo archivo launch.json se abre en Visual Studio Code.

  9. En la línea 11 del archivo launch.json, cambie "${workspaceFolder}\\server" por "program": "${workspaceRoot}/src/server/index.js" y guarde el archivo.

  10. Haga clic en el botón Iniciar depuración para ejecutar la aplicación.

    La aplicación se debe ejecutar sin errores.

Uso de Postman para probar la aplicación

  1. Ahora, abra Postman y escriba http://localhost:3000/api/heroes en el cuadro GET.

  2. Haga clic en el botón Enviar y obtenga la respuesta JSON de la aplicación.

    Esta respuesta muestra que la aplicación está activa y se está ejecutando localmente.

    Postman muestra la solicitud y la respuesta

Pasos siguientes

En esta parte del tutorial, ha hecho lo siguiente:

  • Ha creado un proyecto de Node.js mediante la CLI de Angular
  • Ha probado la aplicación con Postman

Puede continuar con la siguiente parte del tutorial para crear la interfaz de usuario.

Creación de la interfaz de usuario con Angular

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