Como atualizar serviços da Web

ID da região

O REGION_ID é um código abreviado que o Google atribui com base na região que você selecionou ao criar o aplicativo. O código não corresponde a um país ou estado, ainda que alguns IDs de região sejam semelhantes aos códigos de país e estado geralmente usados. Para apps criados após fevereiro de 2020, o REGION_ID.r está incluído nos URLs do App Engine. Para apps existentes criados antes dessa data, o ID da região é opcional no URL.

Saiba mais sobre IDs de região.

Esta seção do guia mostra como escrever, testar e implantar atualizações no serviço da Web de exemplo que você implantou na seção anterior, Implantando seu serviço da Web.

Antes de começar

Se você ainda não tiver concluído as seções anteriores do guia "Como criar um aplicativo", faça o seguinte:

  1. Crie um projeto do Google Cloud com um aplicativo do App Engine.
  2. Escreva um serviço da Web Node.js simples.
  3. Implante o serviço da Web no App Engine.

Atualizando o serviço da web de exemplo

As seções a seguir atualizam o serviço da Web de exemplo com um formulário e um manipulador que responde quando um usuário envia o formulário.

Como criar um formulário para a entrada do usuário

Para permitir que um usuário envie dados ao servidor, use o formulário HTML.

  1. Na pasta my-nodejs-service, crie uma pasta chamada views para armazenar seus arquivos HTML.

  2. Na pasta views, crie um arquivo chamado form.html e adicione o seguinte 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>

TCom este formulário simples, o usuário pode inserir um nome e uma mensagem para enviar ao servidor. Ele envia os dados por meio de uma solicitação HTTP POST para /submit, conforme especificado pelos atributos method e action no elemento <form>.

Agora, você terá uma estrutura de arquivo como esta:

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

Como exibir o formulário

  1. Adicione a seguinte linha à parte superior do arquivo server.js para importar o módulo path:

    const path = require(`path`);
    
  2. Adicione o seguinte gerenciador do Express para mostrar o formulário quando um usuário navegar para /submit:

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

Como criar um gerenciador de dados enviados

Quando um usuário envia uma mensagem para o servidor, uma solicitação POST com os dados é enviada para /submit. Para ler os dados do corpo da solicitação, use o middleware urlencoded do Express e crie um novo gerenciador de solicitação.

  1. Configure seu app para usar o middleware Express urlencoded:

    // This middleware is available in Express v4.16.0 onwards
    app.use(express.urlencoded({extended: true}));
  2. Adicione um gerenciador POST ao seu arquivo server.js para ler os dados:

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

Esse gerenciador de amostra registra a mensagem e o nome do usuário no console. No entanto, também é possível executar operações nos dados ou armazená-los em um banco de dados.

Como testar o formulário no local

Teste o novo formulário no local antes de implantar as alterações.

  1. Inicie o servidor do Node.js:

    npm start
    
  2. Veja seu formulário em http://localhost:8080/submit.

    Envie uma mensagem com o formulário. Você verá o nome e mensagem no terminal.

Como implantar as alterações

Quando você implanta uma atualização, uma nova versão do serviço padrão é criada, e o tráfego é encaminhado automaticamente para a versão mais recente. Para implantar:

  1. Na sua pasta my-nodejs-service, execute o seguinte comando:

    gcloud app deploy
    

    Esse é o mesmo comando que você aprendeu em Como implantar serviços da Web.

  2. Confirme se uma nova versão está listada no console do Google Cloud:

    Ver as versões

    Você verá duas versões correspondentes às implantações anterior e atual.

Após a implantação, seu novo formulário estará acessível em https://PROJECT_ID.REGION_ID.r.appspot.com/submit. Use-o para enviar uma ou duas mensagens.

Se você não precisar mais da versão anterior, será possível excluí-la da página de versões no console do Google Cloud.

Próximas etapas

Agora que o aplicativo tem um formulário para os usuários enviarem dados, saiba como ver os registros do aplicativo no console do Google Cloud.