Crea un flusso di lavoro human-in-the-loop utilizzando i callback

Questo tutorial mostra come creare un flusso di lavoro di traduzione in attesa del tuo input (il human-in-the-loop) e che connette un database Firestore, due funzioni Cloud Functions, l'API Cloud Translation e una pagina web che utilizza l'SDK Firebase per eseguire l'aggiornamento in tempo reale.

Con Workflows, puoi supportare un endpoint di callback (o webhook) che attende l'arrivo delle richieste HTTP a quell'endpoint, riprendendo l'esecuzione del flusso di lavoro in un secondo momento. In questo caso, il flusso di lavoro attende che l'input rifiuti o convalidi la traduzione di un testo, ma potrebbe anche attendere un processo esterno. Per ulteriori informazioni, consulta Attendi utilizzando i callback.

Architettura

Questo tutorial crea un'app web che ti consente di:

Nella pagina web di traduzione, inserisci il testo che vuoi tradurre dall'inglese al francese. Fai clic su Traduci.
Dalla pagina web, si chiama una funzione Cloud Functions 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. La traduzione restituita viene archiviata nel database. Il deployment dell'app web viene eseguito 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 sia un pulsante Convalida sia un pulsante Rifiuta.
Ora il flusso di lavoro è in pausa e attende una richiesta HTTP POST esplicita all'URL dell'endpoint di callback.
Puoi decidere se convalidare o rifiutare la traduzione. Il clic su un pulsante chiama una seconda Cloud Function che a sua volta chiama l'endpoint di callback creato dal flusso di lavoro, trasmettendo lo stato di approvazione. Il flusso di lavoro riprende la sua esecuzione e salva uno stato di approvazione true o false nel database Firestore.

Questo diagramma fornisce una panoramica della procedura:

Obiettivi

Eseguire il deployment di un'app web.
Crea un database Firestore per archiviare le richieste di traduzione.
Esegui il deployment di Cloud Functions per eseguire il flusso di lavoro.
Esegui il deployment e il flusso di lavoro per orchestrare l'intero processo.

Costi

In questo documento vengono utilizzati i seguenti componenti fatturabili di Google Cloud:

Per generare una stima dei costi in base all'utilizzo previsto, utilizza il Calcolatore prezzi. I nuovi utenti di Google Cloud possono essere idonei a una prova senza costi aggiuntivi.

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.

Accedi al tuo account Google Cloud. Se non conosci Google Cloud, crea un account per valutare le prestazioni dei nostri prodotti in scenari reali. I nuovi clienti ricevono anche 300 $di crediti gratuiti per l'esecuzione, il test e il deployment dei carichi di lavoro.

Installa Google Cloud CLI.

Per initialize gcloud CLI, esegui questo comando:

gcloud init

Crea o seleziona un progetto Google Cloud.

Crea un progetto Google Cloud:
```
gcloud projects create PROJECT_ID
```
Sostituisci PROJECT_ID con un nome per il progetto Google Cloud che stai creando.
Seleziona il progetto Google Cloud che hai creato:
```
gcloud config set project PROJECT_ID
```
Sostituisci PROJECT_ID con il nome del tuo progetto Google Cloud.

Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

Abilita le API App Engine, Cloud Build, Cloud Functions, Firestore, Translation, and Workflows .

gcloud services enable appengine.googleapis.com cloudbuild.googleapis.com cloudfunctions.googleapis.com firestore.googleapis.com translate.googleapis.com workflows.googleapis.com

Installa Google Cloud CLI.

Per initialize gcloud CLI, esegui questo comando:

gcloud init

Crea o seleziona un progetto Google Cloud.

Crea un progetto Google Cloud:
```
gcloud projects create PROJECT_ID
```
Sostituisci PROJECT_ID con un nome per il progetto Google Cloud che stai creando.
Seleziona il progetto Google Cloud che hai creato:
```
gcloud config set project PROJECT_ID
```
Sostituisci PROJECT_ID con il nome del tuo progetto Google Cloud.

Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

Abilita le API App Engine, Cloud Build, Cloud Functions, Firestore, Translation, and Workflows .

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 utilizzando 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 trovare l'ID progetto nella pagina Ti diamo il benvenuto della console Google Cloud.
- REGION: la località supportata di Workflows scelta da te.

Esegui il deployment della prima Cloud Function

Questa funzione Cloud Functions avvia l'esecuzione del flusso di lavoro. Il testo da tradurre viene passato come parametro sia alla funzione che al flusso di lavoro.

Crea una directory denominata callback-translation e con sottodirectory chiamate invokeTranslationWorkflow,translationCallbackCall e public:
```
mkdir -p ~/callback-translation/{invokeTranslationWorkflow,translationCallbackCall,public}
```

Passa alla directory invokeTranslationWorkflow:

cd ~/callback-translation/invokeTranslationWorkflow

Crea un file di testo con il nome index.js che contiene il seguente codice Node.js:

const cors = require('cors')({origin: true});
const {ExecutionsClient} = require('@google-cloud/workflows');
const client = new ExecutionsClient();

exports.invokeTranslationWorkflow = async (req, res) => {
  cors(req, res, async () => {
    const text = req.body.text;
    console.log(`Translation request for "${text}"`);

    const PROJECT_ID = process.env.PROJECT_ID;
    const CLOUD_REGION = process.env.CLOUD_REGION;
    const WORKFLOW_NAME = process.env.WORKFLOW_NAME;

    const execResponse = await client.createExecution({
      parent: client.workflowPath(PROJECT_ID, CLOUD_REGION, WORKFLOW_NAME),
      execution: {
        argument: JSON.stringify({text})
      }
    });
    console.log(`Translation workflow execution request: ${JSON.stringify(execResponse)}`);

    const execName = execResponse[0].name;
    console.log(`Created translation workflow execution: ${execName}`);

    res.set('Access-Control-Allow-Origin', '*');
    res.status(200).json({executionId: execName});
  });
};

Crea un file di testo con il nome package.json che contiene i seguenti metadati npm:

{
  "name": "launch-translation-workflow",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/workflows": "^1.2.5",
    "cors": "^2.8.5"
  }
}

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 utilizzare l'interfaccia Cloud Functions 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 che viene restituito in modo da poterlo utilizzare in un passaggio successivo.

Esegui il deployment della seconda Cloud Function

Questa funzione Cloud Functions effettua una richiesta POST HTTP all'endpoint di callback creato dal flusso di lavoro, trasmettendo uno stato di approvazione che indica se la traduzione è stata convalidata o rifiutata.

Passa alla directory translationCallbackCall:
```
cd ../translationCallbackCall
```

Crea un file di testo con il nome index.js che contiene il seguente codice Node.js:

const cors = require('cors')({origin: true});
const fetch = require('node-fetch');

exports.translationCallbackCall = async (req, res) => {
  cors(req, res, async () => {
    res.set('Access-Control-Allow-Origin', '*');

    const {url, approved} = req.body;
    console.log("Approved? ", approved);
    console.log("URL = ", url);
    const {GoogleAuth} = require('google-auth-library');
    const auth = new GoogleAuth();
    const token = await auth.getAccessToken();
    console.log("Token", token);

    try {
      const resp = await fetch(url, {
          method: 'POST',
          headers: {
              'accept': 'application/json',
              'content-type': 'application/json',
              'authorization': `Bearer ${token}`
          },
          body: JSON.stringify({ approved })
      });
      console.log("Response = ", JSON.stringify(resp));

      const result = await resp.json();
      console.log("Outcome = ", JSON.stringify(result));

      res.status(200).json({status: 'OK'});
    } catch(e) {
      console.error(e);

      res.status(200).json({status: 'error'});
    }
  });
};

Crea un file di testo con il nome package.json che contiene i seguenti metadati npm:

{
  "name": "approve-translation-workflow",
  "version": "0.0.1",
  "dependencies": {
    "cors": "^2.8.5",
    "node-fetch": "^2.6.1",
    "google-auth-library": "^7.1.1"
  }
}

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 utilizzare l'interfaccia Cloud Functions 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 translationCallbackCall
```
Prendi nota dell'URL che viene restituito in modo da poterlo utilizzare in un passaggio successivo.

Esegui il deployment del flusso di lavoro

Un flusso di lavoro è composto da una serie di passaggi descritti utilizzando la sintassi Workflows, che può essere scritta in formato YAML o JSON. Questa è la definizione del flusso di lavoro. Dopo aver creato un flusso di lavoro, devi eseguirne il deployment per renderlo disponibile per l'esecuzione.

Passa alla directory callback-translation:
```
cd ..
```

Crea un file di testo con il nome translation-validation.yaml e i seguenti contenuti:

main:
    params: [translation_request]
    steps:
        - log_request:
            call: sys.log
            args:
                text: ${translation_request}
        - vars:
            assign:
                - exec_id: ${sys.get_env("GOOGLE_CLOUD_WORKFLOW_EXECUTION_ID")}
                - text_to_translate: ${translation_request.text}
                - database_root: ${"projects/" + sys.get_env("GOOGLE_CLOUD_PROJECT_ID") + "/databases/(default)/documents/translations/"}
        - log_translation_request:
            call: sys.log
            args:
                text: ${text_to_translate}

        - store_translation_request:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['text']
                body:
                    fields:
                        text:
                            stringValue: ${text_to_translate}
            result: store_translation_request_result

        - translate:
            call: googleapis.translate.v2.translations.translate
            args:
                query:
                    q: ${text_to_translate}
                    target: "FR"
                    format: "text"
                    source: "EN"
            result: translation_result
        - assign_translation:
            assign:
                - translation: ${translation_result.data.translations[0].translatedText}
        - log_translation_result:
            call: sys.log
            args:
                text: ${translation}

        - store_translated_text:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['translation']
                body:
                    fields:
                        translation:
                            stringValue: ${translation}
            result: store_translation_request_result

        - create_callback:
            call: events.create_callback_endpoint
            args:
                http_callback_method: "POST"
            result: callback_details
        - log_callback_details:
            call: sys.log
            args:
                text: ${callback_details}

        - store_callback_details:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['callback']
                body:
                    fields:
                        callback:
                            stringValue: ${callback_details.url}
            result: store_callback_details_result

        - await_callback:
            call: events.await_callback
            args:
                callback: ${callback_details}
                timeout: 3600
            result: callback_request
        - assign_approval:
            assign:
                - approved: ${callback_request.http_request.body.approved}

        - store_approval:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['approved']
                body:
                    fields:
                        approved:
                            booleanValue: ${approved}
            result: store_approval_result

        - return_outcome:
            return:
                text: ${text_to_translate}
                translation: ${translation}
                approved: ${approved}

Dopo aver creato il flusso di lavoro, puoi eseguirne il deployment, ma non eseguirlo:

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 flusso di lavoro. La pagina web si aggiorna in tempo reale per mostrare il risultato della richiesta di traduzione.

Passa alla directory public:
```
cd public
```

Crea un file di testo con il nome index.html contenente il seguente markup HTML. In un passaggio successivo, modificherai il file index.html e aggiungerai gli script dell'SDK Firebase.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <title>Frenglish translation — Feature Workflows callbacks</title>

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.42/dist/themes/base.css">
    <script type="module"
        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.42/dist/shoelace.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <h1>Translate from English to French</h1>

    <sl-form class="form-overview">
        <sl-textarea id="text" placeholder="The quick brown fox jumps over the lazy dog."
            label="English text to translate"></sl-textarea>
        <p></p>
        <sl-button id="translateBtn" type="primary">Translate</sl-button>
        <p></p>
        <sl-alert id="translation" type="primary">
            Le rapide renard brun saute au dessus du chien paresseux.
        </sl-alert>
        <p></p>
        <div id="buttonRow" style="display: none;">
            <sl-button id="validateBtn" type="success">Validate</sl-button>
            <sl-button id="rejectBtn" type="danger">Reject</sl-button>
        </div>
        <p></p>
        <sl-alert id="validationAlert" type="success">
            <sl-icon slot="icon" name="check2-circle"></sl-icon>
            <strong>The translation has been validated</strong><br>
            Glad that you liked our translation! We'll save it in our database.
        </sl-alert>
        <sl-alert id="rejectionAlert" type="danger">
            <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
            <strong>The translation has been rejected</strong><br>
            A pity the translation isn't good! We'll do better next time!
        </sl-alert>
        <p></p>
        <sl-button id="newBtn" style="display: none;" type="primary">New translation</sl-button>
    </sl-form>

    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-firestore.js"></script>

    <script>
        var firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXX",
            projectId: "XXXX",
            storageBucket: "XXXX",
            messagingSenderId: "XXXX",
            appId: "XXXX",
            measurementId: "XXXX"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
    </script>
    <script src="./script.js" type="module"></script>
</body>

</html>

Crea un file di testo con il nome script.js contenente il seguente codice JavaScript:

document.addEventListener("DOMContentLoaded", async function (event) {
    const textArea = document.getElementById("text");
    textArea.focus();

    const newBtn = document.getElementById("newBtn");
    newBtn.addEventListener("sl-focus", event => {
        event.target.blur();
        window.location.reload();
    });

    const translationAlert = document.getElementById("translation");
    const buttonRow = document.getElementById("buttonRow");

    var callbackUrl = "";

    const validationAlert = document.getElementById("validationAlert");
    const rejectionAlert = document.getElementById("rejectionAlert");
    const validateBtn = document.getElementById("validateBtn");
    const rejectBtn = document.getElementById("rejectBtn");

    const translateBtn = document.getElementById("translateBtn");
    translateBtn.addEventListener("sl-focus", async event => {
        event.target.disabled = true;
        event.target.loading = true;
        textArea.disabled = true;

        console.log("Text to translate = ", textArea.value);

        const fnUrl = UPDATE_ME;

        try {
            console.log("Calling workflow executor function...");
            const resp = await fetch(fnUrl, {
                method: "POST",
                headers: {
                    "accept": "application/json",
                    "content-type": "application/json"
                },
                body: JSON.stringify({ text: textArea.value })
            });
            const executionResp = await resp.json();
            const executionId = executionResp.executionId.slice(-36);
            console.log("Execution ID = ", executionId);

            const db = firebase.firestore();
            const translationDoc = db.collection("translations").doc(executionId);

            var translationReceived = false;
            var callbackReceived =  false;
            var approvalReceived = false;
            translationDoc.onSnapshot((doc) => {
                console.log("Firestore update", doc.data());
                if (doc.data()) {
                    if ("translation" in doc.data()) {
                        if (!translationReceived) {
                            console.log("Translation = ", doc.data().translation);
                            translationReceived = true;
                            translationAlert.innerText = doc.data().translation;
                            translationAlert.open = true;
                        }
                    }
                    if ("callback" in doc.data()) {
                        if (!callbackReceived) {
                            console.log("Callback URL = ", doc.data().callback);
                            callbackReceived = true;
                            callbackUrl = doc.data().callback;
                            buttonRow.style.display = "block";
                        }
                    }
                    if ("approved" in doc.data()) {
                        if (!approvalReceived) {
                            const approved = doc.data().approved;
                            console.log("Approval received = ", approved);
                            if (approved) {
                                validationAlert.open = true;
                                buttonRow.style.display = "none";
                                newBtn.style.display = "inline-block";
                            } else {
                                rejectionAlert.open = true;
                                buttonRow.style.display = "none";
                                newBtn.style.display = "inline-block";
                            }
                            approvalReceived = true;
                        }
                    }
                }
            });
        } catch (e) {
            console.log(e);
        }
        event.target.loading = false;
    });

    validateBtn.addEventListener("sl-focus", async event => {
        validateBtn.disabled = true;
        rejectBtn.disabled = true;
        validateBtn.loading = true;
        validateBtn.blur();

        // call callback
        await callCallbackUrl(callbackUrl, true);
    });

    rejectBtn.addEventListener("sl-focus", async event => {
        rejectBtn.disabled = true;
        validateBtn.disabled = true;
        rejectBtn.loading = true;
        rejectBtn.blur();

        // call callback
        await callCallbackUrl(callbackUrl, false);
    });

});

async function callCallbackUrl(url, approved) {
    console.log("Calling callback URL with status = ", approved);

    const fnUrl = UPDATE_ME;
    try {
        const resp = await fetch(fnUrl, {
            method: "POST",
            headers: {
                "accept": "application/json",
                "content-type": "application/json"
            },
            body: JSON.stringify({ url, approved })
        });
        const result = await resp.json();
        console.log("Callback answer = ", result);
    } catch(e) {
        console.log(e);
    }
}

Modifica il file script.js, sostituendo i segnaposto UPDATE_ME con gli URL della funzione Cloud Functions che hai annotato in precedenza.
1. Nel metodo translateBtn.addEventListener, sostituisci const fnUrl = UPDATE_ME; con:
```
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/invokeTranslationWorkflow";
```
2. Nella funzione callCallbackUrl, sostituisci const fnUrl = UPDATE_ME; con:
```
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/translationCallbackCall";
```

Crea un file di testo con il nome style.css che contiene i seguenti stili a cascata:

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    margin: 20px;
}

h1, h2, h3, h4 {
    color: #0ea5e9;
}

Aggiungi Firebase alla tua applicazione web

In questo tutorial, la pagina HTML, lo script JavaScript e il foglio di stile CSS vengono distribuiti 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 da connettere all'app.

Nella console Firebase, fai clic su Crea un progetto e seleziona il progetto Google Cloud esistente dal menu a discesa per aggiungere risorse Firebase al progetto.
Fai clic su Continua fino a quando non viene visualizzata l'opzione per aggiungere Firebase.
Salta la configurazione di Google Analytics per il progetto.
Fai clic su Aggiungi Firebase.

Firebase esegue automaticamente il provisioning delle risorse per il tuo progetto Firebase. Al termine del processo, si aprirà la pagina della panoramica del progetto nella console Firebase.

Registra la tua app con Firebase

Dopo aver 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.

Questa informazione è visibile solo a te nella Console Firebase.
Per ora ignora 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 abilitare Cloud Firestore.

Nella sezione Crea della console Firebase, fai clic su Database Firestore.

Potrebbe essere necessario espandere prima il riquadro di navigazione a sinistra per vedere la sezione Crea.
Nel riquadro Cloud Firestore, fai clic su Crea database.
Seleziona Inizia 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;
  }
}
}
```
Nota: la modalità di test assicura che tu possa scrivere liberamente sul database durante lo sviluppo. Questa opzione non è consigliata per un'applicazione di produzione.
Fai clic su Avanti dopo aver letto il disclaimer sulle regole di sicurezza.
Imposta la località in cui sono archiviati i tuoi dati di Cloud Firestore. Puoi accettare l'impostazione predefinita o scegliere una regione vicina a te.
Fai clic su Abilita per eseguire il provisioning di Firestore.

Aggiungi l'SDK Firebase e inizializza Firebase

Firebase fornisce librerie JavaScript per la maggior parte dei prodotti Firebase. 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 dell'app.
1. Nella console Firebase, vai alle Impostazioni progetto .
2. Nel riquadro Le tue app, seleziona la tua app.
3. Nel riquadro Impostazione e configurazione SDK, seleziona CDN per caricare le librerie SDK Firebase dalla rete CDN.
4. Copia lo snippet nel file index.html in fondo al tag <body>, sostituendo i valori segnaposto XXXX.
Installa l'SDK Firebase JavaScript.
1. Se non hai ancora un file package.json, creane uno eseguendo questo comando dalla directory callback-translation:
```
npm init
```
2. Installa il pacchetto npm firebase e salvalo nel file package.json eseguendo:
```
npm install --save firebase
```

Inizializza il tuo progetto ed eseguine il deployment

Per collegare i file di progetto locali al progetto Firebase, devi inizializzare il progetto. Puoi quindi eseguire il deployment della tua app web.

Dalla directory callback-translation, esegui questo 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 tuo ID progetto.
Accetta public come directory root pubblica predefinita.
Scegli di configurare un'app con una sola pagina.
Salta la configurazione di build e deployment automatici con GitHub.
Al prompt di 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 sul tuo sito:
```
firebase deploy --only hosting
```

Testa l'app web in locale

Firebase Hosting ti consente di visualizzare e testare le modifiche in locale e di interagire con le risorse di progetto di backend emulate. Quando utilizzi firebase serve, la tua app interagisce con un backend emulato per la configurazione e l'hosting, ma con il backend reale per tutte le altre risorse del progetto. Per questo tutorial, puoi utilizzare firebase serve, ma non è consigliato quando si eseguono test più approfonditi.

Dalla directory public, esegui questo comando:
```
firebase serve
```
Apri l'app web all'URL locale restituito (di solito http://localhost:5000).
Inserisci del testo in inglese e fai clic su Traduci.

Deve 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 o false 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, elimina il progetto. Se hai utilizzato un progetto esistente e vuoi conservarlo senza le modifiche aggiunte in questo tutorial, elimina le risorse create per il tutorial.

Elimina il progetto

Il modo più semplice per eliminare la fatturazione è eliminare il progetto che hai creato per il tutorial.

Per eliminare il progetto:

Attenzione: l'eliminazione di un progetto ha i seguenti effetti:

L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per le attività in questo documento, quando lo elimini elimini anche qualsiasi altro lavoro svolto nel progetto.
Gli ID progetto personalizzati non sono più disponibili. Quando hai creato questo progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

Se intendi esplorare più architetture, tutorial o guide rapide, puoi riutilizzare i progetti ed evitare così di superare i limiti di quota.

Nella console Google Cloud, vai alla pagina Gestisci risorse.
Vai a Gestisci risorse
Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
Nella finestra di dialogo, digita l'ID del progetto e fai clic su Chiudi per eliminare il progetto.

Elimina risorse tutorial

Rimuovi la configurazione predefinita dell'interfaccia a riga di comando gcloud aggiunta 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 Cloud Functions che hai creato in questo tutorial:
```
gcloud functions delete FUNCTION_NAME
```
Puoi anche eliminare Cloud Functions dalla console Google Cloud.

Crea un flusso di lavoro human-in-the-loop utilizzando i callback

Architettura

Obiettivi

Costi

Prima di iniziare

Esegui il deployment della prima Cloud Function

Esegui il deployment della seconda Cloud Function

Esegui il deployment del flusso di lavoro

Crea la tua app web

Aggiungi Firebase alla tua applicazione web

Crea un progetto Firebase

Registra la tua app con Firebase

Attiva Cloud Firestore

Aggiungi l'SDK Firebase e inizializza Firebase

Inizializza il tuo progetto ed eseguine il deployment

Testa l'app web in locale

Esegui la pulizia

Elimina il progetto

Elimina risorse tutorial

Passaggi successivi