Desarrolla una app de Node.js con Gemini para obtener asistencia de Google Cloud

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

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

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

Objetivos

En este instructivo, aprenderás a usar Gemini 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.
  • Implementar tu app web de Node.js en Cloud Run

Productos de Google Cloud usados

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

  • Gemini: Es un colaborador siempre activo en Google Cloud que ofrece asistencia con tecnología de IA generativa a una amplia variedad de usuarios, incluidos desarrolladores y científicos de datos. Para proporcionar una experiencia de asistencia integrada, Gemini está incorporado en muchos productos de Google Cloud.
  • Complemento de Cloud Code para Cloud Shell: Es una extensión del complemento IDE que proporciona compatibilidad con el ciclo de desarrollo de apps que se ejecutarán en Google Cloud.
  • Cloud Run: Un servicio completamente administrado que te permite compilar e implementar apps alojadas 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 sobre los 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 Gemini esté configurado para tu proyecto y cuenta de usuario de Google Cloud.
  4. Para habilitar Gemini para Cloud Shell, selecciona el proyecto al que se le otorgó acceso a las funciones de Gemini.

Solicita a Gemini que genere código de Node.js

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

Antes de pedirle a Gemini 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-gemini
cd node-js-with-gemini
touch app.js test.js

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

Instalar paquetes

Sabes que deseas instalar los paquetes express y ejs para tu app de Node.js. Para pedirle ayuda a Gemini con la instalación de estos paquetes, sigue estos pasos:

  1. En el panel lateral izquierdo del Editor de Cloud Shell, haz clic en spark Gemini.

  2. En el panel de Gemini, ingresa un mensaje como el siguiente:

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

  3. Haz clic en Enviar Enviar.

    Gemini 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 Gemini y ejecútalo en tu terminal de Cloud Shell.

Archivos de aplicación de creación

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

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

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

    La respuesta de Gemini 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 los pondrás a disposición para usarlos en tu archivo app.js.

  3. Agrega el código proporcionado por Gemini a tu archivo app.js.

Cómo generar código con comentarios

El complemento de Cloud Code tiene una función que permite que Gemini 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 Gemini que genere código, como se describe en el comentario.

Para usar esta función en tu archivo app.js, asegúrate de que Gemini 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 para usar las capacidades de generación de código de Gemini para generar código.

    La respuesta de Gemini tendrá dos líneas de código debajo del comentario, de manera similar a la siguiente:

    // 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 estimes conveniente.

A continuación, agrega más comentarios para generar las capacidades básicas de tu app 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 del archivo de manera similar a como generaste código antes.

  3. Antes de aceptar las sugerencias, revisa el código generado para verificar que sea correcto.

    Los comentarios en tu 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 generar el código para la aplicación base, crea y agrégale 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 spark Gemini y, luego, ingresa un mensaje como el siguiente:

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

    La respuesta de Gemini debe sugerir la secuencia de comandos de inicio y las dependencias para 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 eys)

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

Crear plantillas eys

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 funcione. 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, pedirás a Gemini que te ayude a generar una prueba de unidades para cuando el código de respuesta HTTP es 200.

  1. En la parte inferior de tu archivo app.js, agrega la siguiente línea para exportar el archivo de tu 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 de chat de Gemini 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?

    Gemini 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 que la ruta principal muestre el código de estado 200.

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

  4. Instala los paquetes mocha test y supertest ejecutando 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
    

Si no hay errores, la prueba debería mostrarse como aprobada. Si deseas agregar pruebas adicionales para tus otras rutas, sigue solicitando sugerencias a Gemini para agregarlas a tu archivo test.js.

Implementarla 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 tienes que administrar ninguna infraestructura cuando ejecutas la app.

  1. En el chat de Gemini, pregúntale cómo realizar una implementación 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?

    Gemini debería responder con algo similar a lo siguiente:

    Puedes implementarla 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 --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 la 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 a partir del código fuente, consulta la documentación de Cloud Run.

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

  3. Sigue las indicaciones para seleccionar una región y elige la opción de permitir invocaciones no autenticadas en tu app de prueba. Una vez implementada la app 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 usados 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 se borrará 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 utilizan el ID del proyecto, como una URL de 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, la reutilización de proyectos puede ayudarte a no exceder los límites de la cuota de 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 deseas 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?