Para muitos apps, é necessário fazer o processamento em segundo plano fora do contexto de uma solicitação da Web. Este tutorial cria um app da Web que permite aos usuários inserir texto para traduzir e, em seguida, exibe uma lista de traduções anteriores. A tradução é feita em um processo em segundo plano para evitar o bloqueio da solicitação do usuário.
O diagrama a seguir ilustra o processo de solicitação da tradução.
Aqui está a sequência de eventos sobre como o tutorial do app funciona:
- Acesse a página da Web para ver uma lista de traduções anteriores armazenadas no Firestore.
- Solicite uma tradução de texto inserindo um formulário HTML.
- A solicitação de tradução é publicada no Pub/Sub.
- Uma Função do Cloud inscrita nesse tópico do Pub/Sub é acionada.
- A Função do Cloud usa o Cloud Translation para traduzir o texto.
- A Função do Cloud armazena o resultado no Firestore.
Este tutorial se destina a qualquer pessoa interessada em aprender sobre o processamento em segundo plano com o Google Cloud. Nenhuma experiência anterior é necessária com Pub/Sub, Firestore, App Engine ou Cloud Functions. No entanto, para entender todo o código, é útil ter experiência com Node.js, JavaScript e HTML.
Objetivos
- Entenda e implante uma Função do Cloud.
- Entenda e implante um aplicativo do App Engine.
- Testar o app.
Custos
Neste documento, você usará os seguintes componentes faturáveis do Google Cloud:
Para gerar uma estimativa de custo baseada na projeção de uso deste tutorial, use a calculadora de preços.
Ao concluir as tarefas descritas neste documento, é possível evitar o faturamento contínuo excluindo os recursos criados. Saiba mais em Limpeza.
Antes de começar
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Verifique se a cobrança está ativada para o seu projeto do Google Cloud.
-
Enable the Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Verifique se a cobrança está ativada para o seu projeto do Google Cloud.
-
Enable the Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs.
-
No console do Google Cloud, abra o app no Cloud Shell.
O Cloud Shell oferece acesso por linha de comando aos seus recursos de nuvem diretamente no navegador. Abra o Cloud Shell no navegador e clique em Continuar para fazer o download do código de amostra e carregá-lo no diretório de app.
-
No Cloud Shell, configure a ferramenta
gcloud
para usar seu projeto do Google Cloud:# Configure gcloud for your project gcloud config set project YOUR_PROJECT_ID
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.
A API Translation traduz a string para o idioma selecionado.
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.
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:O gerenciador de índice (
/
) obtém todas as traduções existentes do Firestore e preenche um modelo de HTML com a lista: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:
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: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:
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:
-
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.
-
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.
-
No campo Texto a ser traduzido, digite o texto a ser traduzido. Por exemplo,
Hello, World
. - Na lista suspensa, selecione o idioma para o qual você quer traduzir o texto.
- Selecione Enviar.
- 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:
-
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. -
No console do Google Cloud, acesse a página "Visualizador de registros".
Acessar a página "Visualizador de registros"- 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.
-
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 constanteTOPIC_NAME
é"translate"
. - Quando você
implantar a Função do Cloud,
não se esqueça de incluir a sinalização
--trigger-topic=translate
.
- No arquivo
Limpar
Para evitar cobranças na sua conta do Google Cloud pelos recursos usados no tutorial, exclua o projeto que os contém ou mantenha o projeto e exclua os recursos individuais.
Excluir o projeto do Cloud
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
Excluir a instância do App Engine
- In the Google Cloud console, go to the Versions page for App Engine.
- Select the checkbox for the non-default app version that you want to delete.
- Para excluir a versão do app, clique em Excluir.
Excluir a Função do Cloud
-
Exclua a função do Cloud criada neste tutorial:
gcloud functions delete Translate
A seguir
- Veja outros tutoriais do Cloud Functions.
- Saiba mais sobre o App Engine.
- Teste o Cloud Run, que permite executar contêineres sem estado em um ambiente totalmente gerenciado ou em seu próprio cluster do Google Kubernetes Engine.