Actualiza tu servicio web

ID de región

REGION_ID es un código abreviado que Google asigna en función de la región que eliges cuando creas la app. El código no corresponde a un país ni a una provincia, aunque algunos ID de región puedan parecer similares a los códigos de país y provincia que se suelen usar. En el caso de las apps creadas después de febrero de 2020, REGION_ID.r se incluye en las URL de App Engine. En el caso de las apps existentes creadas antes de esta fecha, el ID de región es opcional en la URL.

Obtén más información acerca de los ID de región.

En esta sección de la guía, aprenderás a escribir, probar y, luego, implementar actualizaciones en el servicio web de ejemplo que implementaste en la sección anterior, Implementa tu servicio web.

Antes de comenzar

Si aún no completaste las secciones anteriores de la guía “Compila una app”, haz lo siguiente:

  1. Crea un proyecto de Google Cloud con una app de App Engine.
  2. Escribe un servicio web con Node.js simple.
  3. Implementa el servicio web en App Engine.

Actualiza el servicio web de ejemplo

En las siguientes secciones, se actualiza el servicio web de ejemplo con un formulario y un controlador que responden cuando un usuario envía dicho formulario.

Crea un formulario para la entrada del usuario

Para permitir que un usuario envíe datos a tu servidor, utiliza un formulario HTML.

  1. En la carpeta my-nodejs-service, crea una carpeta llamada views para almacenar tus archivos HTML.

  2. En la carpeta views, crea un archivo llamado form.html y agrega el siguiente código:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My App Engine App</title>
      </head>
      <body>
        <h2>Create a new post</h2>
        <form method="POST" action="/submit">
          <div>
            <input type="text" name="name" placeholder="Name">
          </div>
          <div>
            <textarea name="message" placeholder="Message"></textarea>
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </body>
    </html>

Este formulario sencillo permite al usuario ingresar un nombre y un mensaje para enviarlos al servidor. Envía los datos a través de una solicitud HTTP POST a /submit, según lo especifican los atributos method y action en el elemento <form>.

En este punto, debes tener una estructura de archivos como la que se muestra a continuación:

my-nodejs-service/
  views/
    form.html
  app.yaml
  package.json
  server.js

Cómo mostrar el formulario

  1. Agrega la siguiente línea a la parte superior de tu archivo server.js para importar el módulo path:

    const path = require(`path`);
    
  2. Agrega el siguiente controlador de Express para que se muestre el formulario cuando un usuario navegue a /submit:

    app.get('/submit', (req, res) => {
      res.sendFile(path.join(__dirname, '/views/form.html'));
    });

Crea un controlador para los datos enviados

Cuando un usuario envía un mensaje al servidor, se envía una solicitud POST con los datos a /submit. Para leer los datos del cuerpo de la solicitud, usa el middleware urlencoded de Express y crea un controlador de solicitudes nuevo.

  1. Configura tu app para usar el middleware urlencoded de Express:

    // This middleware is available in Express v4.16.0 onwards
    app.use(express.urlencoded({extended: true}));
  2. Agrega un controlador POST a tu archivo server.js para leer los datos:

    app.post('/submit', (req, res) => {
      console.log({
        name: req.body.name,
        message: req.body.message,
      });
      res.send('Thanks for your message!');
    });

Este controlador de muestra registra el nombre y el mensaje del usuario en la consola, pero también puede realizar operaciones en los datos o almacenarlos en una base de datos.

Prueba el formulario de forma local

Prueba tu formulario nuevo de manera local antes de implementar cambios.

  1. Inicia tu servidor Node.js:

    npm start
    
  2. Consulta tu formulario en http://localhost:8080/submit.

    Envía un mensaje con el formulario. Debes ver que tu nombre y el mensaje aparezcan en la terminal.

Implementa los cambios

Cuando implementas una actualización, se crea una versión nueva del servicio predeterminado y el tráfico se enruta automáticamente a la última versión. Para implementar, sigue estos pasos:

  1. Desde tu carpeta my-nodejs-service, ejecuta el siguiente comando:

    gcloud app deploy
    

    Este es el mismo comando que aprendiste en Implementa tu servicio web.

  2. Confirma que aparece una versión nueva en la lista en la consola de Google Cloud:

    Ver versiones

    Debes ver dos versiones correspondientes a la implementación anterior y a la actual.

Después de la implementación, puedes acceder a tu formulario nuevo en https://PROJECT_ID.REGION_ID.r.appspot.com/submit. Úsalo para enviar un mensaje o dos.

Si ya no necesitas la versión anterior, puedes borrarla desde la página Versiones en la consola de Google Cloud.

Próximos pasos

Ahora que la app tiene un formulario para que los usuarios envíen datos, obtén información sobre cómo ver los registros de tu aplicación en la consola de Google Cloud.