Questo tutorial mostra come creare un flusso di lavoro di traduzione che attende il tuo input (l'elemento umano del loop) e collega un database Firestore, due funzioni Cloud Run, l'API Cloud Translation e una pagina web che utilizza l'SDK Firebase per aggiornarsi in tempo reale.
Con Workflows, puoi supportare un endpoint di callback (o webhook) che attende l'arrivo di richieste HTTP a quell'endpoint, ripristinando l'esecuzione del flusso di lavoro in un secondo momento. In questo caso, il flusso di lavoro attende il tuo input per rifiutare o convalidare la traduzione di un testo, ma potrebbe anche attendere un processo esterno. Per ulteriori informazioni, consulta la sezione Attendere utilizzando i callback.
Architettura
Questo tutorial crea un'app web che ti consente di:
- Nella pagina web della traduzione, inserisci il testo che vuoi tradurre dall'inglese in francese. Fai clic su Traduci.
- Dalla pagina web, viene visualizzata una funzione Cloud Run che avvia l'esecuzione del flusso di lavoro. Il testo da tradurre viene passato come parametro sia alla funzione che al flusso di lavoro.
- Il testo viene salvato in un database Cloud Firestore. L'API Cloud Translation chiamato. La traduzione restituita è archiviata nel database. L'app web viene eseguita il deployment utilizzando Firebase Hosting e si aggiorna in tempo reale per visualizzare il testo tradotto.
- Il passaggio
create_callback
del flusso di lavoro crea un URL dell'endpoint di callback che viene salvato anche nel database Firestore. La pagina web ora mostra un pulsante Convalida e un pulsante Rifiuta. - Il flusso di lavoro è ora in pausa e attende una richiesta POST HTTP esplicita all'indirizzo URL dell'endpoint di callback.
- Puoi decidere se convalidare o rifiutare la traduzione. Se fai clic su un pulsante, viene chiamata una seconda funzione Cloud Run che a sua volta chiama l'endpoint di callback creato dal flusso di lavoro, passando lo stato di approvazione.
L'esecuzione del flusso di lavoro riprende e salva lo stato di approvazione
true
oppurefalse
nel database Firestore.
Questo diagramma fornisce una panoramica della procedura:
Obiettivi
- Esegui il deployment di un'app web.
- Crea un database Firestore per archiviare le richieste di traduzione.
- Eseguire il deployment delle funzioni di Cloud Run per eseguire il flusso di lavoro.
- Esegui il deployment ed esegui un flusso di lavoro per orchestrare l’intero processo.
Costi
In questo documento utilizzi i seguenti componenti fatturabili di Google Cloud:
Per generare una stima dei costi basata sull'utilizzo previsto,
utilizza il Calcolatore prezzi.
Prima di iniziare
I vincoli di sicurezza definiti dalla tua organizzazione potrebbero impedirti di completare i passaggi seguenti. Per informazioni sulla risoluzione dei problemi, vedi Sviluppare applicazioni in un ambiente Google Cloud vincolato.
- 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.
- 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.
-
-
Make sure that billing is enabled for your Google Cloud project.
-
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.
-
-
Make sure that billing is enabled for your Google Cloud project.
-
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 - Aggiorna i componenti di Google Cloud CLI:
gcloud components update
- Accedi con il tuo account:
gcloud auth login
- Imposta l'ID progetto e la località predefinita utilizzati in questo tutorial:
export GOOGLE_CLOUD_PROJECT=PROJECT_ID export REGION=REGION gcloud config set workflows/location ${REGION}
Sostituisci quanto segue:
PROJECT_ID
: il tuo ID progetto Google Cloud. Puoi cerca il tuo ID progetto Ti diamo il benvenuto della console Google Cloud.REGION
: i Workflows supportati posizione di tua scelta.
Esegui il deployment della prima funzione Cloud Run
Questa funzione Cloud Run avvia l'esecuzione del flusso di lavoro. Il testo da tradurre viene passato come parametro sia alla funzione che alla un flusso di lavoro di machine learning.
Crea una directory denominata
callback-translation
con sottodirectoryinvokeTranslationWorkflow
,translationCallbackCall
epublic
:mkdir -p ~/callback-translation/{invokeTranslationWorkflow,translationCallbackCall,public}
Passa alla directory
invokeTranslationWorkflow
:cd ~/callback-translation/invokeTranslationWorkflow
Crea un file di testo con il nome file
index.js
contenente il seguente codice Node.js:Crea un file di testo con il nome
package.json
che contenga la sezione seguenti metadatinpm
:Esegui il deployment della funzione con un trigger HTTP e consenti l'accesso non autenticato:
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
Il deployment della funzione potrebbe richiedere alcuni minuti. In alternativa, puoi Usa l'interfaccia delle funzioni di Cloud Run nella console Google Cloud per eseguire il deployment della funzione.
Una volta eseguito il deployment della funzione, puoi confermare la proprietà
httpsTrigger.url
:gcloud functions describe invokeTranslationWorkflow
Prendi nota dell'URL restituito per utilizzarlo in un passaggio successivo.
Esegui il deployment della seconda funzione Cloud Run
Questa funzione Cloud Run invia una richiesta POST HTTP all'endpoint di callback creato dal flusso di lavoro, passando uno stato di approvazione che indica se la traduzione è convalidata o rifiutata.
Passa alla directory
translationCallbackCall
:cd ../translationCallbackCall
Crea un file di testo con il nome file
index.js
contenente il seguente codice Node.js:Crea un file di testo con il nome
package.json
che contenga la sezione seguenti metadatinpm
:Esegui il deployment della funzione con un trigger HTTP e consenti l'accesso non autenticato:
gcloud functions deploy translationCallbackCall \ --region=${REGION} \ --runtime nodejs14 \ --entry-point=translationCallbackCall \ --trigger-http \ --allow-unauthenticated
Il deployment della funzione potrebbe richiedere alcuni minuti. In alternativa, puoi Usa l'interfaccia delle funzioni di Cloud Run nella console Google Cloud per eseguire il deployment della funzione.
Una volta eseguita il deployment della funzione, puoi verificare la proprietà
httpsTrigger.url
:gcloud functions describe translationCallbackCall
Prendi nota dell'URL restituito per utilizzarlo in un passaggio successivo.
Esegui il deployment del flusso di lavoro
Un flusso di lavoro è costituito da una serie di passaggi descritti utilizzando la sintassi di Workflows, che può essere scritta in formato YAML o JSON. Questa è la definizione del flusso di lavoro. Dopo aver creato un flusso di lavoro, e renderlo disponibile per l'esecuzione.
Passa alla directory
callback-translation
:cd ..
Crea un file di testo con il nome file
translation-validation.yaml
e con i seguenti contenuti:Dopo aver creato il flusso di lavoro, puoi eseguirne il deployment, ma non eseguire il flusso di lavoro personalizzato:
gcloud workflows deploy translation_validation --source=translation-validation.yaml
Crea la tua app web
Crea un'app web che chiami una Cloud Function che avvia l'esecuzione del un flusso di lavoro di machine learning. La pagina web si aggiorna in tempo reale per visualizzare il risultato di una richiesta di traduzione.
Passa alla directory
public
:cd public
Crea un file di testo con il nome file
index.html
contenente il seguente markup HTML. In un passaggio successivo, modificherai il fileindex.html
e aggiungerai il metodo script dell'SDK Firebase.Crea un file di testo con il nome file
script.js
contenente il seguente codice JavaScript:Modifica il file
script.js
sostituendo i segnapostoUPDATE_ME
con gli URL delle funzioni Cloud Run che hai annotato in precedenza.Nel metodo
translateBtn.addEventListener
, sostituisciconst fnUrl = UPDATE_ME;
con:
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/invokeTranslationWorkflow";
Nella funzione
callCallbackUrl
, sostituisciconst fnUrl = UPDATE_ME;
con:
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/translationCallbackCall";
Crea un file di testo con il nome file
style.css
contenente i seguenti stili cascading:
Aggiungi Firebase all'applicazione web
In questo tutorial, la pagina HTML, lo script JavaScript e il foglio di stile CSS vengono eseguiti il deployment come asset statici utilizzando Firebase Hosting, ma possono essere ospitati ovunque e pubblicati localmente sulla tua macchina a scopo di test.
Crea un progetto Firebase
Prima di poter aggiungere Firebase alla tua app, devi creare un progetto Firebase per connetterti all'app.
-
Nella console Firebase, fai clic su Crea un progetto, quindi seleziona la tua progetto Google Cloud dal menu a discesa per aggiungere Firebase. a quel progetto.
-
Fai clic su Continua fino a quando non viene visualizzata l'opzione per aggiungere Firebase.
-
Salta la configurazione di Google Analytics per il tuo progetto.
-
Fai clic su Aggiungi Firebase.
Firebase esegue automaticamente il provisioning delle risorse per il tuo progetto Firebase. Al termine della procedura, verrà visualizzata la pagina Panoramica del progetto nella Console Firebase.
Registra la tua app con Firebase
Una volta creato un progetto Firebase, puoi aggiungervi la tua app web.
Al centro della pagina di riepilogo del progetto, fai clic sull'icona Web (</>) per avviare il flusso di lavoro di configurazione.
Inserisci un nickname per la tua app.
Questo valore è visibile solo a te nella console Firebase.
Salta per ora la configurazione di Firebase Hosting.
Fai clic su Registra app e vai alla console.
Attiva Cloud Firestore
L'app web utilizza Cloud Firestore per ricevere e salvare i dati. Dovrai attivare Cloud Firestore.
Nella sezione Build della console Firebase, fai clic su Database Firestore.
Potrebbe essere necessario espandere prima il riquadro di navigazione a sinistra per visualizzare la sezione Crea.
Nel riquadro Cloud Firestore, fai clic su Crea database.
Seleziona Avvia in modalità di test, utilizzando una regola di sicurezza come la seguente:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } }
Fai clic su Avanti dopo aver letto il disclaimer sulle regole di sicurezza.
Imposta la località in cui sono archiviati i dati di Cloud Firestore. Puoi accettare il valore predefinito o scegliere una regione vicina a te.
Fai clic su Attiva per eseguire il provisioning di Firestore.
Aggiungi l'SDK Firebase e inizializza Firebase
Firebase fornisce librerie JavaScript per la maggior parte dei suoi prodotti. Prima di utilizzare Firebase Hosting, devi aggiungere gli SDK Firebase alla tua app web.
- Per inizializzare Firebase nella tua app, devi fornire la configurazione del progetto Firebase della tua app.
- Nella Console Firebase, vai a Impostazioni progetto .
- Nel riquadro Le tue app, seleziona la tua app.
- Nel riquadro Configurazione e installazione dell'SDK, per caricare le librerie dell'SDK Firebase dalla CDN, seleziona CDN.
- Copia lo snippet nel file
index.html
nella parte inferiore del tag<body>
, sostituendo i valori dei segnapostoXXXX
.
Installa l'SDK Firebase JavaScript.
Se non hai già un file
package.json
, creane uno eseguendo il seguente comando dalla directorycallback-translation
:npm init
Installa il pacchetto npm
firebase
e salvalo nel filepackage.json
eseguendo:npm install --save firebase
Inizializza ed esegui il deployment del progetto
Per collegare i file di progetto locali al progetto Firebase, devi per inizializzare il progetto. A questo punto puoi eseguire il deployment dell'app web.
Dalla directory
callback-translation
, esegui il seguente comando:firebase init
Seleziona l'opzione
Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
.Scegli di utilizzare un progetto esistente e inserisci il relativo ID.
Accetta
public
come directory root pubblica predefinita.Scegli di configurare un'app a pagina singola.
Salta la configurazione di build e deployment automatici con GitHub.
Al prompt
File public/index.html already exists. Overwrite?
, digita No.Passa alla directory
public
:cd public
Dalla directory
public
, esegui questo comando per eseguire il deployment del progetto al tuo sito:firebase deploy --only hosting
Testa l'app web in locale
Firebase Hosting ti consente di visualizzare e testare le modifiche localmente
e interagire con le risorse del progetto backend emulate. Quando utilizzi firebase serve
,
la tua app interagisce con un backend virtualizzato per i contenuti e la configurazione dell'hosting, ma con il tuo backend reale per tutte le altre risorse del progetto. In questo tutorial,
può utilizzare firebase serve
, ma è sconsigliato
test.
Dalla directory
public
, esegui il seguente comando:firebase serve
Apri la tua app web all'URL locale restituito (in genere
http://localhost:5000
).Inserisci del testo in inglese e fai clic su Traduci.
Dovrebbe essere visualizzata una traduzione del testo in francese.
Ora puoi fare clic su Convalida o Rifiuta.
Nel database Firestore, puoi verificare i contenuti. Dovrebbe essere simile al seguente:
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."
Lo stato
approved
ètrue
ofalse
a seconda che tu convalidi o rifiuti la traduzione.
Complimenti! Hai creato un flusso di lavoro di traduzione human-in-the-loop che utilizza i callback di Workflows.
Esegui la pulizia
Se hai creato un nuovo progetto per questo tutorial, eliminalo. Se hai utilizzato un progetto esistente e vuoi mantenerlo senza l'aggiunta delle modifiche In questo tutorial, elimina le risorse create per il tutorial.
Elimina il progetto
Il modo più semplice per eliminare la fatturazione creato per il tutorial.
Per eliminare il progetto:
- 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.
Elimina le risorse del tutorial
Rimuovi la configurazione predefinita dell'interfaccia a riga di comando gcloud che hai aggiunto durante la configurazione del tutorial:
gcloud config unset workflows/location
Elimina il flusso di lavoro creato in questo tutorial:
gcloud workflows delete WORKFLOW_NAME
Elimina le funzioni di Cloud Run che hai creato in questo tutorial:
gcloud functions delete FUNCTION_NAME
Puoi eliminare le funzioni Cloud Run anche dalla console Google Cloud.