Processamento em segundo plano com Node.js

Noções básicas sobre a Função do Cloud

• A função inicia importando várias dependências, como Firestore e Translation. Os clientes globais do Firestore e do Translation são inicializados para que possam ser reutilizados entre invocações de função. Dessa forma, não é necessário inicializar novos clientes para cada invocação de função, o que desacelera a execução.

  background/function/translate.js

  Ver no GitHub

  const Firestore = require('@google-cloud/firestore');
  const {Translate} = require('@google-cloud/translate').v2;
  
  const firestore = new Firestore();
  const translate = new Translate();

• A API Translation traduz a string para o idioma selecionado.

  background/function/translate.js

  Ver no GitHub

  const [
    translated,
    {
      data: {translations},
    },
  ] = await translate.translate(original, language);
  const originalLanguage = translations[0].detectedSourceLanguage;
  console.log(
    `Translated ${original} in ${originalLanguage} to ${translated} in ${language}.`
  );

• A Função do Cloud analisa a mensagem do Pub/Sub para receber o texto a ser traduzido e o idioma de destino desejado.

  Em seguida, o app solicita uma tradução e armazena o resultado no Firestore.

  background/function/translate.js

  Ver no GitHub

  // translate translates the given message and stores the result in Firestore.
  // Triggered by Pub/Sub message.
  exports.translate = async (pubSubEvent) => {
    const {language, original} = JSON.parse(
      Buffer.from(pubSubEvent.data, 'base64').toString()
    );
  
    const [
      translated,
      {
        data: {translations},
      },
    ] = await translate.translate(original, language);
    const originalLanguage = translations[0].detectedSourceLanguage;
    console.log(
      `Translated ${original} in ${originalLanguage} to ${translated} in ${language}.`
    );
  
    // Store translation in firestore.
    await firestore.collection('translations').doc().set({
      language,
      original,
      translated,
      originalLanguage,
    });
  };

Como implantar o Cloud Function

• No mesmo diretório que o arquivo translate.js, implante a Função do Cloud com um gatilho do Pub/Sub:

  gcloud functions deploy translate --runtime nodejs10 --trigger-topic translate

Noções básicas sobre o app

Há dois componentes principais para o app da Web:

• Um servidor HTTP Node.js para gerenciar solicitações da Web. O servidor tem os dois endpoints a seguir:
  • /: lista todas as traduções existentes e mostra um formulário que os usuários podem enviar para solicitar novas traduções.
  • /request-translation: os envios de formulários são enviados para este endpoint, que publica a solicitação para que o Pub/Sub seja traduzido de forma assíncrona.
• Um modelo HTML que é preenchido com as traduções existentes pelo servidor Node.js.

O servidor HTTP

• No server diretório, app.js começar configurando o app e registrar gerenciadores HTTP:

  background/server/app.js

  Ver no GitHub

  
  // This app is an HTTP app that displays all previous translations
  // (stored in Firestore) and has a form to request new translations. On form
  // submission, the request is sent to Pub/Sub to be processed in the background.
  
  // TOPIC_NAME is the Pub/Sub topic to publish requests to. The Cloud Function to
  // process translation requests should be subscribed to this topic.
  const TOPIC_NAME = 'translate';
  
  const express = require('express');
  const bodyParser = require('body-parser');
  const {PubSub} = require('@google-cloud/pubsub');
  const {Firestore} = require('@google-cloud/firestore');
  
  const app = express();
  const port = process.env.PORT || 8080;
  
  const firestore = new Firestore();
  
  const pubsub = new PubSub();
  const topic = pubsub.topic(TOPIC_NAME);
  
  // Use handlebars.js for templating.
  app.set('views', __dirname);
  app.set('view engine', 'html');
  app.engine('html', require('hbs').__express);
  
  app.use(bodyParser.urlencoded({extended: true}));
  
  app.get('/', index);
  app.post('/request-translation', requestTranslation);
  app.listen(port, () => console.log(`Listening on port ${port}!`));
  

• O gerenciador de índice (/) obtém todas as traduções existentes do Firestore e preenche um modelo de HTML com a lista:

  background/server/app.js

  Ver no GitHub

  
  // index lists the current translations.
  async function index(req, res) {
    const translations = [];
    const querySnapshot = await firestore.collection('translations').get();
    querySnapshot.forEach((doc) => {
      console.log(doc.id, ' => ', doc.data());
      translations.push(doc.data());
    });
  
    res.render('index', {translations});
  }
  

• Novas traduções são solicitadas através do envio de um formulário HTML. O gerenciador de tradução de solicitação, registrado em /request-translation, analisa o envio do formulário, valida a solicitação e publica uma mensagem no Pub/Sub:

  background/server/app.js

  Ver no GitHub

  
  // requestTranslation parses the request, validates it, and sends it to Pub/Sub.
  function requestTranslation(req, res) {
    const language = req.body.lang;
    const original = req.body.v;
  
    const acceptableLanguages = ['de', 'en', 'es', 'fr', 'ja', 'sw'];
    if (!acceptableLanguages.includes(language)) {
      throw new Error(`Invalid language ${language}`);
    }
  
    console.log(`Translation requested: ${original} -> ${language}`);
  
    const buffer = Buffer.from(JSON.stringify({language, original}));
    topic.publish(buffer);
    res.sendStatus(200);
  }

Modelo HTML

O modelo HTML é a base da página HTML exibida ao usuário para que ele possa ver as traduções anteriores e solicitar novas. O modelo é preenchido pelo servidor HTTP com a lista de traduções existentes.

• O elemento <head> do modelo HTML inclui metadados, folhas de estilo e JavaScript para a página:
  background/server/index.html

  Ver no GitHub

  <html>
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Translations</title>
  
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
      <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script>
          $(document).ready(function() {
              $("#translate-form").submit(function(e) {
                  e.preventDefault();
                  // Get value, make sure it's not empty.
                  if ($("#v").val() == "") {
                      return;
                  }
                  $.ajax({
                      type: "POST",
                      url: "/request-translation",
                      data: $(this).serialize(),
                      success: function(data) {
                          // Show snackbar.
                          console.log(data);
                          var notification = document.querySelector('.mdl-js-snackbar');
                          $("#snackbar").removeClass("mdl-color--red-100");
                          $("#snackbar").addClass("mdl-color--green-100");
                          notification.MaterialSnackbar.showSnackbar({
                              message: 'Translation requested'
                          });
                      },
                      error: function(data) {
                          // Show snackbar.
                          console.log("Error requesting translation");
                          var notification = document.querySelector('.mdl-js-snackbar');
                          $("#snackbar").removeClass("mdl-color--green-100");
                          $("#snackbar").addClass("mdl-color--red-100");
                          notification.MaterialSnackbar.showSnackbar({
                              message: 'Translation request failed'
                          });
                      }
                  });
              });
          });
      </script>
      <style>
          .lang {
              width: 50px;
          }
          .translate-form {
              display: inline;
          }
      </style>
  </head>

  A página extrai recursos Material Design Lite (MDL) CSS e JavaScript. A MDL permite que você adicione uma aparência Material Design aos seus sites.

  A página usa JQuery para aguardar o carregamento do documento e definir um gerenciador de envio de formulário. Sempre que o formulário de solicitação de tradução é enviado, a página faz uma validação de formulário mínima para verificar se o valor não está vazio e envia uma solicitação assíncrona ao endpoint /request-translation.

  Por fim, um snackbar MDL aparece para indicar se a solicitação foi bem-sucedida ou se encontrou um erro.

• O corpo HTML da página usa um layout de MDL e vários componentes de MDL para exibir uma lista de traduções e um formulário para solicitar mais traduções:
  background/server/index.html

  Ver no GitHub

  <body>
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
              <div class="mdl-layout__header-row">
                  <!-- Title -->
                  <span class="mdl-layout-title">Translate with Background Processing</span>
              </div>
          </header>
          <main class="mdl-layout__content">
              <div class="page-content">
                  <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--1-col"></div>
                      <div class="mdl-cell mdl-cell--3-col">
                          <form id="translate-form" class="translate-form">
                              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                  <input class="mdl-textfield__input" type="text" id="v" name="v">
                                  <label class="mdl-textfield__label" for="v">Text to translate...</label>
                              </div>
                              <select class="mdl-textfield__input lang" name="lang">
                                  <option value="de">de</option>
                                  <option value="en">en</option>
                                  <option value="es">es</option>
                                  <option value="fr">fr</option>
                                  <option value="ja">ja</option>
                                  <option value="sw">sw</option>
                              </select>
                              <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" type="submit"
                                  name="submit">Submit</button>
                          </form>
                      </div>
                      <div class="mdl-cell mdl-cell--8-col">
                          <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                              <thead>
                                  <tr>
                                      <th class="mdl-data-table__cell--non-numeric"><strong>Original</strong></th>
                                      <th class="mdl-data-table__cell--non-numeric"><strong>Translation</strong></th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {{#each translations}}
                                  <tr>
                                      <td class="mdl-data-table__cell--non-numeric">
                                          <span class="mdl-chip mdl-color--primary">
                                              <span class="mdl-chip__text mdl-color-text--white">{{ originalLanguage }} </span>
                                          </span>
                                      {{ original }}
                                      </td>
                                      <td class="mdl-data-table__cell--non-numeric">
                                          <span class="mdl-chip mdl-color--accent">
                                              <span class="mdl-chip__text mdl-color-text--white">{{ language }} </span>
                                          </span>
                                          {{ translated }}
                                      </td>
                                  </tr>
                                  {{/each}}
                              </tbody>
                          </table>
                          <br/>
                          <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onClick="window.location.reload();">
                              Refresh
                          </button>
                      </div>
                  </div>
              </div>
              <div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar" id="snackbar">
                  <div class="mdl-snackbar__text mdl-color-text--black"></div>
                  <button type="button" class="mdl-snackbar__action"></button>
              </div>
          </main>
      </div>
  </body>
  
  </html>

Como implantar o app da Web

Use o ambiente padrão do App Engine para criar e implantar um aplicativo que será executado de maneira confiável, sob grande carga e com grandes quantidades de dados.

Este tutorial usa o ambiente padrão do App Engine para implantar o front-end HTTP.

O app.yaml configura o aplicativo do App Engine:

runtime: nodejs10

• No mesmo diretório do arquivo app.yaml, implante seu app no ambiente padrão do App Engine:

  gcloud app deploy

Como testar o app

Depois de implantar o Cloud Functions e o app do App Engine, tente solicitar uma tradução.

1. Para ver o app no navegador,digite o seguinte URL:

   https://PROJECT_ID.REGION_ID.r.appspot.com

   Substitua:

   • PROJECT_ID: é o ID do projeto do Google Cloud.
   • REGION_ID: Um código que o App Engine atribui ao seu app

   Há uma página com uma lista vazia de traduções e um formulário para solicitar novas traduções.

2. No campo Texto a ser traduzido, digite o texto a ser traduzido. Por exemplo, Hello, World.
3. Na lista suspensa, selecione o idioma para o qual você quer traduzir o texto.
4. Selecione Enviar.
5. Para atualizar a página, clique em Atualizar refresh. Há uma nova linha na lista de tradução. Se você não ver uma tradução, aguarde mais alguns segundos e tente novamente. Caso você ainda não veja uma tradução, consulte a próxima seção sobre como depurar o app.

Como depurar o aplicativo

Se você não conseguir se conectar ao aplicativo do App Engine ou não encontrar novas traduções, verifique o seguinte:

1. Verifique se os comandos de implantação gcloud foram concluídos com êxito e não geraram erros. Se houver erros, corrija-os e tente implantar o Cloud Function e o aplicativo do App Engine novamente.

2. No console do Google Cloud, acesse a página "Visualizador de registros".

   Acessar a página "Visualizador de registros"
   1. Na lista suspensa Recursos selecionados recentemente, clique em Aplicação do GAE e, em seguida, clique em Todos os module_id. Você verá uma lista de solicitações de quando visitou seu app. Caso contrário, verifique se você selecionou Todos os module_id na lista suspensa. Se você vir mensagens de erro impressas no console do Google Cloud, verifique se o código do seu aplicativo corresponde ao código na seção sobre como entender o aplicativo.
   2. Na lista suspensa Recursos selecionados recentemente, clique em Função do Cloud e, em seguida, clique em Todos os nomes de função. Você verá uma função listada para cada tradução solicitada. Caso contrário, verifique se o app da Função do Cloud e do App Engine está usando o mesmo tópico do Pub/Sub:
      • No arquivo background/server/app.js, verifique se a constante TOPIC_NAME é "translate".
      • Quando você implantar a Função do Cloud, não se esqueça de incluir a sinalização --trigger-topic=translate.