En este instructivo, se muestra cómo crear un flujo de trabajo de traducción que espera su de entrada (con interacción humana) y que conecta una base de datos de Firestore, dos funciones de Cloud Run, la API de Cloud Translation y una página web que usa El SDK de Firebase se actualizará en tiempo real.
Con Workflows, puedes admitir un extremo de devolución de llamada (o webhook). que espera a que las solicitudes HTTP lleguen a ese extremo y reanuda la ejecución del flujo de trabajo en un momento posterior. En este caso, el flujo de trabajo espera tu entrada para rechazar o validar la traducción de algún texto, pero también podría un proceso externo. Para obtener más información, consulta Espera a usar devoluciones de llamada.
Arquitectura
En este instructivo, crearás una app web que te permitirá hacer lo siguiente:
- En la página web de la traducción, ingresa el texto que quieres traducir del inglés al francés. Haz clic en Traducir.
- Desde la página web, se llama a una función de Cloud Run que inicia la ejecución del flujo de trabajo. El texto que se traducirá se pasa como parámetro a la función y al flujo de trabajo.
- El texto se guarda en una base de datos de Cloud Firestore. Se llama a la API de Cloud Translation. La traducción que se muestra se almacena en la base de datos. La app web se implementa con Firebase Hosting y se actualiza en tiempo real para mostrar el texto traducido.
- El paso
create_callback
del flujo de trabajo crea una URL de extremo de devolución de llamada que también se guarda en la base de datos de Firestore. La página web ahora muestra los botones Validar y Rechazar. - Ahora, el flujo de trabajo está detenido y espera una solicitud POST HTTP explícita al de extremo de devolución de llamada.
- Puedes decidir si validar o rechazar la traducción. Al hacer clic en un
llama a una segunda función de Cloud Run que, a su vez, llama al
extremo de devolución de llamada creado por el flujo de trabajo, que pasa el estado de aprobación.
El flujo de trabajo reanuda su ejecución y guarda un estado de aprobación de
true
ofalse
en la base de datos de Firestore.
En este diagrama, se proporciona una descripción general del proceso:
Objetivos
- Implementar una app web
- Crea una base de datos de Firestore para almacenar las solicitudes de traducción.
- Implementa funciones de Cloud Run para ejecutar el flujo de trabajo.
- Implementar y ejecutar un flujo de trabajo para organizar todo el proceso
Costos
En este documento, usarás los siguientes componentes facturables de Google Cloud:
Para generar una estimación de costos en función del uso previsto, usa la calculadora de precios.
Antes de comenzar
Es posible que las restricciones de seguridad que define tu organización no te permitan completar los siguientes pasos. Para obtener información sobre la solución de problemas, consulta Desarrolla aplicaciones en un entorno de Google Cloud restringido.
- Accede a tu cuenta de Google Cloud. Si eres nuevo en Google Cloud, crea una cuenta para evaluar el rendimiento de nuestros productos en situaciones reales. Los clientes nuevos también obtienen $300 en créditos gratuitos para ejecutar, probar y, además, implementar cargas de trabajo.
- Install the Google Cloud CLI.
-
To initialize the gcloud CLI, run the following command:
gcloud init
-
Create or select a Google Cloud project.
-
Create a Google Cloud project:
gcloud projects create PROJECT_ID
Replace
PROJECT_ID
with a name for the Google Cloud project you are creating. -
Select the Google Cloud project that you created:
gcloud config set project PROJECT_ID
Replace
PROJECT_ID
with your Google Cloud project name.
-
-
Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.
-
Enable the App Engine, Cloud Build, Cloud Run functions, Firestore, Translation, and Workflows APIs:
gcloud services enable appengine.googleapis.com
cloudbuild.googleapis.com cloudfunctions.googleapis.com firestore.googleapis.com translate.googleapis.com workflows.googleapis.com - Install the Google Cloud CLI.
-
To initialize the gcloud CLI, run the following command:
gcloud init
-
Create or select a Google Cloud project.
-
Create a Google Cloud project:
gcloud projects create PROJECT_ID
Replace
PROJECT_ID
with a name for the Google Cloud project you are creating. -
Select the Google Cloud project that you created:
gcloud config set project PROJECT_ID
Replace
PROJECT_ID
with your Google Cloud project name.
-
-
Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.
-
Enable the App Engine, Cloud Build, Cloud Run functions, Firestore, Translation, and Workflows APIs:
gcloud services enable appengine.googleapis.com
cloudbuild.googleapis.com cloudfunctions.googleapis.com firestore.googleapis.com translate.googleapis.com workflows.googleapis.com - Actualiza los componentes de Google Cloud CLI:
gcloud components update
- Accede con tu cuenta:
gcloud auth login
- Establece el ID del proyecto y la ubicación predeterminada que se usan en este instructivo:
export GOOGLE_CLOUD_PROJECT=PROJECT_ID export REGION=REGION gcloud config set workflows/location ${REGION}
Reemplaza lo siguiente:
PROJECT_ID
: Es el ID de tu proyecto de Google Cloud. Puedes encuentra el ID del proyecto en la Te damos la bienvenida de la consola de Google Cloud.REGION
: Es la ubicación de Workflows compatible que elijas.
Implementa la primera función de Cloud Run
Esta función de Cloud Run inicia la ejecución del flujo de trabajo. El texto que se va a traducir se pasa como parámetro a la función y al flujo de trabajo.
Crea un directorio llamado
callback-translation
y con subdirectorios llamadosinvokeTranslationWorkflow
,translationCallbackCall
ypublic
:mkdir -p ~/callback-translation/{invokeTranslationWorkflow,translationCallbackCall,public}
Cambia al directorio
invokeTranslationWorkflow
:cd ~/callback-translation/invokeTranslationWorkflow
Crea un archivo de texto con el nombre de archivo
index.js
que contenga lo siguiente: Código de Node.js:Crea un archivo de texto con el nombre
package.json
que contenga la los siguientes metadatos denpm
:Implementa la función con un activador de HTTP y permite el acceso no autenticado:
gcloud functions deploy invokeTranslationWorkflow \ --region=${REGION} \ --runtime nodejs14 \ --entry-point=invokeTranslationWorkflow \ --set-env-vars PROJECT_ID=${GOOGLE_CLOUD_PROJECT},CLOUD_REGION=${REGION},WORKFLOW_NAME=translation_validation \ --trigger-http \ --allow-unauthenticated
La función puede tardar unos minutos en implementarse. También puedes usar la interfaz de Cloud Run Functions en la consola de Google Cloud para implementar la función.
Una vez que se implementa la función, puedes confirmar la propiedad
httpsTrigger.url
:gcloud functions describe invokeTranslationWorkflow
Toma nota de la URL que se muestra para poder usarla en un paso posterior.
Implementa la segunda función de Cloud Run
Esta función de Cloud Run realiza una solicitud HTTP POST a la devolución de llamada extremo creado por el flujo de trabajo, y pasa un estado de aprobación que refleja si la traducción se valida o se rechaza.
Cambia al directorio
translationCallbackCall
:cd ../translationCallbackCall
Crea un archivo de texto con el nombre de archivo
index.js
que contenga lo siguiente: Código de Node.js:Crea un archivo de texto con el nombre
package.json
que contenga la los siguientes metadatos denpm
:Implementa la función con un activador de HTTP y permite el acceso no autenticado:
gcloud functions deploy translationCallbackCall \ --region=${REGION} \ --runtime nodejs14 \ --entry-point=translationCallbackCall \ --trigger-http \ --allow-unauthenticated
La función puede tardar unos minutos en implementarse. También puedes usar la interfaz de Cloud Run Functions en la consola de Google Cloud para implementar la función.
Una vez que se implementa la función, puedes confirmar la propiedad
httpsTrigger.url
:gcloud functions describe translationCallbackCall
Anota la URL que se muestra para poder usarla en un paso posterior.
Implementa el flujo de trabajo
Un flujo de trabajo está compuesto por una serie de pasos descritos con la sintaxis de Workflows, que se pueden escribir en formato YAML o JSON. Esta es la definición del flujo de trabajo. Después de crear un flujo de trabajo, debes implementarlo para que esté disponible para su ejecución.
Cambia al directorio
callback-translation
:cd ..
Crea un archivo de texto con el nombre
translation-validation.yaml
y con el siguiente contenido:Después de crear el flujo de trabajo, puedes implementarlo, pero no ejecutes el flujo de trabajo:
gcloud workflows deploy translation_validation --source=translation-validation.yaml
Crea tu app web
Crea una app web que llame a una Cloud Function que inicie la ejecución de la en el flujo de trabajo. La página web se actualiza en tiempo real para mostrar el resultado de la solicitud de traducción de Google.
Cambia al directorio
public
:cd public
Crea un archivo de texto con el nombre de archivo
index.html
que contenga el siguiente marcado HTML. (En un paso posterior, modificarás el archivoindex.html
y agregarás las secuencias de comandos del SDK de Firebase).Crea un archivo de texto con el nombre de archivo
script.js
que contenga lo siguiente: Código JavaScript:Edita el archivo
script.js
y reemplaza los marcadores de posiciónUPDATE_ME
por el las URLs de las funciones de Cloud Run que anotaste antes.En el método
translateBtn.addEventListener
, reemplazaconst fnUrl = UPDATE_ME;
por:
.const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/invokeTranslationWorkflow";
En la función
callCallbackUrl
, reemplazaconst fnUrl = UPDATE_ME;
por lo siguiente:
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/translationCallbackCall";
Crea un archivo de texto con el nombre de archivo
style.css
que contenga los siguientes estilos de cascada:
Agrega Firebase a tu aplicación web
En este instructivo, la página HTML, la secuencia de comandos de JavaScript y la hoja de estilo CSS se Se implementan como elementos estáticos con Firebase Hosting, pero se pueden alojar en cualquier lugar y se entregan de manera local en tu máquina para realizar pruebas.
Crea un proyecto de Firebase
Antes de que puedas agregar Firebase a tu app, debes crear un proyecto de Firebase y conectarlo a ella.
-
En Firebase console, haz lo siguiente: Haz clic en Crear un proyecto y, luego, selecciona proyecto de Google Cloud en el menú desplegable para agregar Firebase recursos a ese proyecto.
-
Haz clic en Continuar hasta que veas la opción para agregar Firebase.
-
Omite la configuración de Google Analytics para tu proyecto.
-
Haz clic en Agregar Firebase:
Firebase aprovisiona los recursos para tu proyecto de forma automática. Cuando finalice, verás la página de descripción general del proyecto en Firebase console.
Registra tu app en Firebase
Cuando tengas un proyecto de Firebase, podrás agregarle tu app web.
En el centro de la página de descripción general del proyecto, haz clic en el ícono de Web (</>) para iniciar el flujo de trabajo de configuración.
Ingresa un sobrenombre para tu app.
Solo tú puedes ver esto en Firebase console.
Omite la configuración de Firebase Hosting por ahora.
Haz clic en Registrar app y ve a la consola.
Habilita Cloud Firestore
La app web usa Cloud Firestore para recibir y guardar datos. Deberás habilitar Cloud Firestore.
En la sección Compilación de Firebase console, haz clic en Base de datos de Firestore.
(Es posible que primero debas expandir el panel de navegación izquierdo para ver la sección Build).
En el panel de Cloud Firestore, haz clic en Crear base de datos.
Selecciona Comenzar en modo de prueba con una regla de seguridad como la siguiente:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } }
Haz clic en Siguiente después de leer la renuncia de responsabilidad sobre las reglas de seguridad.
Configura la ubicación en la que se almacenan tus datos de Cloud Firestore. Puedes aceptar la predeterminada o elegir una región cercana a ti.
Haz clic en Habilitar para aprovisionar Firestore.
Agrega el SDK de Firebase y, luego, inicializa Firebase
Firebase proporciona bibliotecas de JavaScript para la mayoría de los productos de Firebase. Antes de usarlo Firebase Hosting, debes agregar los SDK de Firebase a tu app web.
- Para inicializar Firebase en tu app, debes proporcionar la configuración del proyecto de Firebase de tu app.
- En Firebase console, ve a la configuración del proyecto .
- En el panel Tus apps, selecciona tu app.
- En el panel SDK setup and configuration, selecciona CDN para cargar bibliotecas del SDK de Firebase desde la CDN.
- Copia el fragmento en tu archivo
index.html
, que se encuentra en la parte inferior de<body>
. reemplaza los valores del marcador de posiciónXXXX
.
Instala el SDK de Firebase JavaScript.
Si aún no tienes un archivo
package.json
, ejecuta el siguiente comando para crear uno desde el directoriocallback-translation
:npm init
Instala el paquete npm de
firebase
y guárdalo en el archivopackage.json
. Para ello, ejecuta el siguiente comando:npm install --save firebase
Inicializa y, luego, implementa tu proyecto
Para conectar los archivos de tu proyecto local al proyecto de Firebase, debes inicializarlo. Luego, puedes implementar tu app web.
Desde el directorio
callback-translation
, ejecuta el siguiente comando:firebase init
Selecciona la opción
Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
.Elige usar un proyecto existente y, luego, ingresa el ID del proyecto.
Acepta
public
como el directorio raíz público predeterminado.Elige configurar una app de una sola página.
Omite la configuración de implementaciones y compilaciones automáticas con GitHub.
En el mensaje
File public/index.html already exists. Overwrite?
, escribe No.Cambia al directorio
public
:cd public
Desde el directorio
public
, ejecuta el siguiente comando para implementar tu proyecto a tu sitio:firebase deploy --only hosting
Prueba la app web de forma local
Firebase Hosting te permite consultar y probar los cambios de forma local
y, además, interactuar con los recursos del proyecto de backend emulado. Cuando uses firebase serve
,
Tu app interactúa con un backend emulado para el contenido y la configuración de hosting.
sino también al backend real
para todos los demás recursos del proyecto. Para este instructivo,
puedes usar firebase serve
, pero no se recomienda cuando se hacen más extensas
y pruebas.
Desde el directorio
public
, ejecuta el siguiente comando:firebase serve
Abre la aplicación web en la URL local que se muestra (en general,
http://localhost:5000
).Ingresa texto en inglés y, luego, haz clic en Traducir.
Se debe mostrar una traducción del texto en francés.
Ahora puedes hacer clic en Validar o Rechazar.
En la base de datos de Firestore, puedes verificar el contenido. Debería parecerse a lo siguiente:
approved: true callback: "https://workflowexecutions.googleapis.com/v1/projects/26811016474/locations/us-central1/workflows/translation_validation/executions/68bfce75-5f62-445f-9cd5-eda23e6fa693/callbacks/72851c97-6bb2-45e3-9816-1e3dcc610662_1a16697f-6d90-478d-9736-33190bbe222b" text: "The quick brown fox jumps over the lazy dog." translation: "Le renard brun rapide saute par-dessus le chien paresseux."
El estado de
approved
estrue
ofalse
, dependiendo de si validar o rechazar la traducción.
¡Felicitaciones! Creaste un flujo de trabajo de traducción con interacción humana que usa devoluciones de llamada de Workflows.
Limpia
Si creaste un proyecto nuevo para este instructivo, bórralo. Si usaste un proyecto existente y deseas conservarlo sin los cambios que se agregaron en este instructivo, borra los recursos creados para el instructivo.
Borra el proyecto
La manera más fácil de eliminar la facturación es borrar el proyecto que creaste para el instructivo.
Para borrar el proyecto, sigue estos pasos:
- En la consola de Google Cloud, ve a la página Administrar recursos.
- En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.
- En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrar el proyecto.
Elimina recursos de instructivos
Quita la configuración predeterminada de gcloud CLI que agregaste durante la configuración del instructivo:
gcloud config unset workflows/location
Borra el flujo de trabajo que se creó en este instructivo:
gcloud workflows delete WORKFLOW_NAME
Borra las funciones de Cloud Run que creaste en este instructivo:
gcloud functions delete FUNCTION_NAME
También puedes borrar funciones de Cloud Run en la consola de Google Cloud.