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
- Crea un proyecto de Google Cloud si no tienes un proyecto de Google Cloud existente que se pueda usar para este instructivo.
- Activa Cloud Shell.
- Asegúrate de que Gemini esté configurado para tu proyecto y cuenta de usuario de Google Cloud.
- 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:
En el panel lateral izquierdo del Editor de Cloud Shell, haz clic en spark Gemini.
En el panel de Gemini, ingresa un mensaje como el siguiente:
What is the command to install express and ejs packages for node.js?
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
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
.
- Abre el archivo
app.js
en el Editor de Cloud Shell. 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.
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.
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
Mueve el cursor de texto al final del comentario y presiona
Control+Enter
(en Windows y Linux) oControl+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.
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
Genera un código para cada comentario del archivo de manera similar a como generaste código antes.
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
.
- Crea un archivo
package.json
en el mismo directorio que el archivoapp.js
. 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)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
.
En la terminal, ingresa lo siguiente:
mkdir views touch views/index.ejs views/greeting.ejs
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>
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.
Ejecuta el siguiente comando para instalar las dependencias.
npm install
Ejecuta el siguiente comando para iniciar la app:
npm start
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.
En la parte inferior de tu archivo
app.js
, agrega la siguiente línea para exportar el archivo de tu app.module.exports = app;
Abre el archivo
test.js
.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
.Instala los paquetes mocha test y supertest ejecutando el siguiente comando en la terminal:
npm i mocha supertest
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" } }
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.
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.
Usa el comando de gcloud que proporcionó Gemini en la respuesta.
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.
- 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.
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.
En la lista de proyectos, elige el proyecto que deseas borrar y haz clic en Borrar.
En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
¿Qué sigue?
- Lee la descripción general de Gemini para Google Cloud.
- Comprende las cuotas y los límites de Gemini y las ubicaciones admitidas.
- Obtén más información sobre cómo realizar implementaciones desde el código fuente con Cloud Run.