Desarrolla una app de Node.js con la asistencia de Duet AI

En este instructivo, se muestra cómo usar Duet AI, un colaborador potenciado por IA en Google Cloud, para explorar, crear, modificar, probar e implementar una app de muestra de Node.js.

En los siguientes pasos, considera que eres desarrollador de Node.js y deseas escribir una aplicación web simple en JavaScript que use un formato básico. En esta situación, usarás el framework de Express para la app y las plantillas de EJS para el formulario HTML.

Esta guía está dirigida a los desarrolladores de Node.js que quieran usar Duet AI para acelerar el proceso de desarrollo. Se supone que estás familiarizado con los conceptos básicos de la nube, aunque no necesariamente con Google Cloud.

Objetivos

Con este instructivo, aprenderás a usar Duet AI para hacer lo siguiente:

  • Desarrolla una app web de Node.js en Cloud Shell.
  • Crea pruebas de unidades para tu app web de Node.js.
  • Implementa tu app web de Node.js en Cloud Run.

Productos de Google Cloud utilizados

En este instructivo, se usan los siguientes productos de Google Cloud.

  • Duet AI: Es un colaborador siempre activo de Google Cloud que ofrece asistencia potenciada por IA generativa a una amplia variedad de usuarios, incluidos desarrolladores y científicos de datos. Para proporcionar una experiencia de asistencia integrada, Duet AI está incorporada en muchos productos de Google Cloud.
  • Complemento de Cloud Code para Cloud Shell: Es una extensión de complemento de IDE que proporciona compatibilidad con el ciclo de desarrollo de apps que se ejecutarán en Google Cloud.
  • Cloud Run: Es un servicio completamente administrado que te permite implementar y compilar apps en contenedores. Google Cloud controla el escalamiento y otras tareas de infraestructura para que puedas enfocarte en la lógica empresarial de tu código. Si quieres obtener información sobre los precios, consulta la página de precios de Cloud Run y usa la calculadora de precios para generar una estimación de los costos según el uso previsto.

Antes de comenzar

  1. Crea un proyecto de Google Cloud si no tienes un proyecto de Google Cloud existente que se pueda usar para este instructivo.
  2. Activa Cloud Shell.
  3. Asegúrate de que Duet AI esté configurado para tu cuenta de usuario y proyecto de Google Cloud.
  4. Habilita Duet AI para Cloud Shell. Para ello, selecciona el proyecto al que se le otorgó acceso a las funciones de Duet AI.

Solicita a Duet AI que genere código de Node.js

Duet AI te puede ayudar a generar código de Node.js en función de las instrucciones que definas en el chat y las descripciones que escribas en los comentarios del código. Cuanto más código escribas y más contexto le proporciones a Duet AI, mejor podrá ayudarte a desarrollar tu app. Ten en cuenta que las respuestas de Duet AI pueden variar según cómo hagas las preguntas o describas el contexto, por lo que es una buena práctica revisar las respuestas de Duet AI antes de aceptar las sugerencias durante el proceso de desarrollo.

Antes de pedirle a Duet AI que te ayude a generar un código de partida, usa la terminal de Cloud Shell para crear un directorio vacío y agrega dos archivos vacíos.

mkdir node-js-with-duet
cd node-js-with-duet
touch app.js test.js

En el editor de Cloud Shell, selecciona content_copy Explorador y abre la carpeta que acabas de crear en la terminal de Cloud Shell.

Instalar paquetes

Ya sabes que quieres instalar los paquetes express y ejs para tu app de Node.js. Sigue estos pasos a fin de pedirle a Duet AI que te ayude a instalar estos paquetes:

  1. En el panel lateral izquierdo del editor de Cloud Shell, haz clic en chat_spark Duet AI.

  2. En el panel de Duet AI, ingresa una instrucción como la siguiente:

    What is the command to install express and ejs packages for node.js?

  3. Haz clic en Enviar Enviar.

    Duet AI muestra una respuesta similar a la siguiente:

    Si quieres instalar los paquetes Express y eys para Node.js, puedes usar el siguiente comando:

    npm install express ejs
    
  4. Copia el comando que proporciona Duet AI y ejecútalo en tu terminal de Cloud Shell.

Crear archivos de aplicación

Después de instalar los paquetes, usa Duet AI para obtener orientación sobre cómo agregar los paquetes instalados en tu archivo app.js.

  1. Abre el archivo app.js en el Editor de Cloud Shell.
  2. En el chat de Duet AI, ingresa un mensaje como el siguiente:

    How do I add these packages to my app.js file?

    La respuesta de Duet AI será similar a la siguiente:

    Para agregar los paquetes Express y eys a tu archivo app.js, puedes usar el siguiente código:

    const express = require('express');
    const ejs = require('ejs');
    

    Esto requerirá los paquetes Express y eys, y estará disponibles para usarlos en tu archivo app.js.

  3. Agrega el código que te proporcionó Duet AI a tu archivo app.js.

Cómo generar código con comentarios

El complemento de Cloud Code tiene una función que permite que Duet AI use comentarios de archivos para generar código. Por ejemplo, cuando agregas un comentario como marcador de posición en tu archivo, puedes pedirle a Duet AI que genere el código como se describe en el comentario.

Para usar esta función en tu archivo app.js, asegúrate de que Duet AI esté habilitado en el Editor de Cloud Shell.

  1. Al final del archivo, agrega un marcador de posición de comentario para inicializar la app web. Por ejemplo:

    // Initialize express web app using ejs templating engine
    
  2. Mueve el cursor de texto al final del comentario y presiona Control+Enter (en Windows y Linux) o Control+Return (en macOS), luego presiona Tab a fin de usar las capacidades de generación de código de Duet AI para generar código.

    La respuesta de Duet AI tendrá dos líneas de código debajo del comentario, similar a esta:

    // Initialize express web app using ejs templating engine
    
    const app = express();
    app.set('view engine', 'ejs');
    

    Si el resultado de la generación de código es diferente del que esperabas, modifica o borra el contenido adicional como creas conveniente.

A continuación, agrega más comentarios a fin de generar las capacidades base para tu aplicación web de Express.

  1. Ve a la parte inferior del archivo app.js y agrega los siguientes comentarios:

    // add urlencoded middleware to parse form data
    
    // define the home route
    
    // create a /greeting POST route with a `name` parameter
    
    // create a /greeting route that accepts a name parameter
    
    // start the server on port 8080
    
  2. Genera un código para cada comentario de archivo de manera similar a como generaste código antes.

  3. Revisa el código generado y determina si la respuesta de Duet es correcta antes de aceptar las sugerencias.

    Los comentarios del archivo app.js ahora deberían ir acompañados del código correspondiente, similar al siguiente:

    // add urlencoded middleware to parse form data
    app.use(express.urlencoded({ extended: true }));
    
    // define the home route
    app.get('/', (req, res) => {
      res.render('index');
    });
    
    // create a /greeting POST route with a `name` parameter
    app.post('/greeting', (req, res) => {
      const name = req.body.name || 'World';
      res.render('greeting', { name });
    });
    
    // start the server
    const port = process.env.PORT || 8080;
    app.listen(port, () => {
      console.log(`App listening on port ${port}`);
      console.log('Press Ctrl+C to quit.');
    });
    
    // create a /greeting route that accepts a name parameter
    app.get('/greeting/:name', (req, res) => {
      res.render('greeting', { name: req.params.name });
    });
    

Crea un archivo package.json

Después de que se genere el código para tu aplicación de base, crea y agrega contenido al archivo package.json.

  1. Crea un archivo package.json en el mismo directorio que el archivo app.js.
  2. En el editor de Cloud Shell, selecciona chat_spark Duet AI y, luego, ingresa un mensaje como el siguiente:

    Based on my app.js file, can you create a package.json file?

    La respuesta de Duet AI debe sugerir la secuencia de comandos de inicio y las dependencias que se deben especificar, y será similar a lo siguiente:

    Por supuesto. Este es un archivo package.json que puedes usar con tu archivo app.js:

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js"
      },
    
      "dependencies": {
        "express": "^4.17.1",
        "ejs": "^3.1.6"
      }
    }
    

    Este archivo package.json incluye la siguiente información:

    El nombre de la app (mi-app)
    La versión de la app (1.0.0)
    Una descripción de la app (una app web simple de Node.js que usa Express y EJS)
    El archivo principal de la app (app.js)
    Las secuencias de comandos que se pueden ejecutar en la app (inicio)
    Las dependencias de la app (Express y ejs)

  3. Copia y pega solo el contenido proporcionado por Duet AI en tu archivo package.json.

Crear plantillas de ejs

Para finalizar la app web, crea un directorio views para las plantillas ejs en el mismo directorio que los archivos app.js y package.json.

  1. En la terminal, ingresa lo siguiente:

    mkdir views
    touch views/index.ejs views/greeting.ejs
    
  2. Abre el archivo index.ejs en el editor y pega lo siguiente:

    <html>
    <body>
        <form action="/greeting" method="post">
        <label for="name">What's your name?</label>
        <input type="text" id="name" name="name" autofocus />
        <button type="submit">Submit</button>
        </form>
    </body>
    </html>
    
  3. Abre el archivo greeting.ejs en el editor y pega lo siguiente:

    <html>
    <body>
        <a href="/">Home</a>
        <p>Hello <%= name %>~</p>
    </body>
    </html>
    

Obtén una vista previa de tu app en un navegador

Una vez que completes el código, las plantillas y los requisitos de tu app, podrás confirmar si funciona.

  1. Ejecuta el siguiente comando para instalar las dependencias.

    npm install
    
  2. Ejecuta el siguiente comando para iniciar la app:

    npm start
    
  3. Confirma que la app funciona. Selecciona el botón Vista previa en la Web ubicado en la parte superior derecha de la barra de tareas de Cloud Shell. Luego, selecciona el número de puerto del menú que se muestra. Cloud Shell abre la URL de vista previa en una ventana nueva del navegador.

Cómo escribir pruebas de unidades

Después de confirmar que la app de Node.js funciona, puedes escribir pruebas de unidades en el archivo test.js antes de implementar la app en Cloud Run. En el siguiente ejemplo, le pedirás a Duet AI que te ayude a generar una prueba de unidades para cuando el código de respuesta HTTP es 200.

  1. En la parte inferior del archivo app.js, agrega la siguiente línea para exportar el archivo de la app.

    module.exports = app;
    
  2. Abre el archivo test.js.

  3. Para probar cuándo la respuesta muestra un código de estado HTTP 200, abre el panel del chat de Duet AI y, luego, ingresa un mensaje como el siguiente:

    Can you generate a unit test for my home route in app.js to assert that the response code is 200?

    Duet AI debería responder con algo similar a lo siguiente:

    Por supuesto. A continuación, se muestra una prueba de unidades para la ruta principal en app.js que garantiza que el código de respuesta sea 200:

    const assert = require('assert');
    const request = require('supertest');
    
    const app = require('./app.js');
    describe('GET /', () => {
      it('should return a 200 response code', async () => {
        const response = await request(app).get('/');
        assert.equal(response.status, 200);
      });
    });
    

    Esta prueba verifica si la ruta principal muestra un código de estado de 200.

    Agrega el bloque de código sugerido a tu archivo test.js.

  4. Instala los paquetes mocha test y supertest; para ello, ejecuta el siguiente comando en la terminal:

    npm i mocha supertest
    
  5. Actualiza el archivo package.json para incluir la secuencia de comandos de prueba nueva y sus paquetes. Por ejemplo:

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js",
        "test": "mocha"
      },
      "dependencies": {
      "express": "^4.17.1",
      "ejs": "^3.1.6",
      "mocha": "^10.2.0",
      "supertest": "^6.3.3"
      }
    }
    
  6. Ejecuta el siguiente comando para ejecutar las pruebas:

    npm test
    

La prueba debería aparecer como aprobada si no hay errores. Si quieres agregar pruebas adicionales para tus otras rutas, sigue solicitándole sugerencias a Duet AI para agregar a tu archivo test.js.

Realiza la implementación en Cloud Run

Ahora que tu app se ejecuta de forma local, puedes continuar con la implementación en Google Cloud. Cloud Run funciona bien para esta situación porque puedes implementar desde el código fuente y no tener que administrar ninguna infraestructura cuando ejecutas tu app.

  1. En el chat de Duet AI, pídele a Duet AI cómo implementar en Cloud Run directamente desde tu código fuente con gcloud:

    What is the gcloud command for deploying a Cloud Run service from source code?

    Duet AI debería responder con algo similar a lo siguiente:

    Puedes implementar directamente en Cloud Run desde el código fuente en el directorio actual con gcloud. Para ello, puedes usar el comando gcloud run deploy con el --source flag. Esta marca le indica a gcloud que use el código fuente para compilar una imagen de contenedor y, luego, implementarla en Cloud Run.

    Por ejemplo, para implementar el código de tu archivo app.js en Cloud Run, debes usar el siguiente comando:

    gcloud run deploy app --source .
    

    Con este comando, se compilará una imagen de contenedor a partir del archivo app.js y se implementará en Cloud Run.

    También puedes usar la marca --region para especificar la región en la que deseas implementar tu aplicación. Por ejemplo, para implementar tu aplicación en la región us-central1, debes usar el siguiente comando:

    gcloud run deploy app --source . --region us-central1
    

    Para obtener más información sobre la implementación en Cloud Run desde el código fuente, puedes consultar la documentación de Cloud Run.

  2. Usa el comando de gcloud que Duet AI proporcionó en la respuesta.

  3. Sigue las instrucciones para seleccionar una región y selecciona la opción que permita invocaciones no autenticadas en tu app de prueba. Una vez que la app se implemente con éxito, el resultado mostrará una URL de servicio.

Limpia

Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este instructivo, puedes borrar el proyecto de Google Cloud que creaste para este instructivo. Como alternativa, puedes borrar los recursos individuales.

  1. Precaución: Borrar un proyecto tiene las siguientes consecuencias:
    • Se borra todo en el proyecto. Si usaste un proyecto existente para las tareas de este documento, cuando lo borres, también borrarás cualquier otro trabajo que hayas realizado en el proyecto.
    • Se pierden los ID personalizados de proyectos. Cuando creaste este proyecto, es posible que hayas creado un ID del proyecto personalizado que desees usar en el futuro. Para conservar las URL que usan el ID del proyecto, como una URL appspot.com, borra los recursos seleccionados dentro del proyecto en lugar de borrar todo el proyecto.
  2. Si planeas explorar varias arquitecturas, instructivos o guías de inicio rápido, reutilizar proyectos puede ayudarte a evitar exceder los límites de la cuota de los proyectos.En la consola de Google Cloud, ve a la página Administrar recursos.

    Ir a Administrar recursos

  3. En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.

  4. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.

¿Qué sigue?