Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Elaborazione in background con Node.js

Molte app devono eseguire l'elaborazione in background al di fuori del contesto di una richiesta web. Questo tutorial crea un'app web che consente agli utenti di inserire il testo da tradurre e poi visualizza un elenco delle traduzioni precedenti. La traduzione viene eseguita in un processo in background per evitare di bloccare la richiesta dell'utente.

Il seguente diagramma illustra il processo di richiesta di traduzione.

Di seguito è riportata la sequenza di eventi per il funzionamento dell'app del tutorial:

Visita la pagina web per visualizzare un elenco delle traduzioni precedenti, archiviate in Firestore.
Richiedi la traduzione del testo inserendo un modulo HTML.
La richiesta di traduzione viene pubblicata su Pub/Sub.
Viene attivata una funzione Cloud Run sottoscritta a quell'argomento Pub/Sub.
La funzione Cloud Run utilizza Cloud Translation per tradurre il testo.
La funzione Cloud Run archivia il risultato in Firestore.

Questo tutorial è rivolto a chiunque sia interessato a scoprire l'elaborazione in background con Google Cloud. Non è richiesta alcuna esperienza precedente con Pub/Sub, Firestore, App Engine o Cloud Run Functions. Tuttavia, per comprendere tutto il codice, è utile avere una certa esperienza con Node.js, JavaScript e HTML.

Obiettivi

Comprendere ed eseguire il deployment di una funzione Cloud Run.
Comprendere ed eseguire il deployment di un'app App Engine.
Provare l'app.

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 Google Cloud utenti potrebbero avere diritto a una prova senza costi.

Al termine delle attività descritte in questo documento, puoi evitare l'addebito di ulteriori costi eliminando le risorse che hai creato. Per saperne di più, consulta Esegui la pulizia.

Prima di iniziare

Accedi al tuo Google Cloud account. 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 senza costi per l'esecuzione, il test e il deployment dei carichi di lavoro.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Enable the Firestore, Cloud Run functions, Pub/Sub, and Cloud Translation APIs.

Roles required to enable APIs

To enable APIs, you need the serviceusage.services.enable permission. If you created the project, then you likely already have this permission through the Owner role (roles/owner). Otherwise, you can get this permission through the Service Usage Admin role (roles/serviceusage.serviceUsageAdmin). Learn how to grant roles.

Enable the APIs

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Enable the Firestore, Cloud Run functions, Pub/Sub, and Cloud Translation APIs.

Roles required to enable APIs

Enable the APIs

Nella Google Cloud console, apri l'app in Cloud Shell.

Vai a Cloud Shell

Cloud Shell fornisce l'accesso da riga di comando alle risorse cloud direttamente dal browser. Apri Cloud Shell nel browser e fai clic su Continua per scaricare il codice campione e modificarlo nella directory dell'applicazione.
In Cloud Shell, configura lo strumento gcloud in modo da utilizzare il tuo Google Cloud progetto:
```
# Configure gcloud for your project
gcloud config set project YOUR_PROJECT_ID
```

Comprendere la funzione Cloud Run

La funzione inizia importando diverse dipendenze come Firestore e Translation. I client globali Firestore e Translation vengono inizializzati in modo che possano essere riutilizzati tra le chiamate di funzione. In questo modo, non devi inizializzare nuovi client per ogni chiamata di funzione, il che rallenterebbe l'esecuzione.
```
const Firestore = require('@google-cloud/firestore');
const {Translate} = require('@google-cloud/translate').v2;

const firestore = new Firestore();
const translate = new Translate();
```

L'API Translation traduce la stringa nella lingua selezionata.

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

La funzione Cloud Run analizza il messaggio Pub/Sub per ottenere il testo da tradurre e la lingua di destinazione desiderata.

L'app richiede quindi una traduzione e archivia il risultato in Firestore.

// 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,
  });
};

Eseguire il deployment della funzione Cloud Run

Nella stessa directory del file translate.js, esegui il deployment della funzione Cloud Run con un trigger Pub/Sub:
```
gcloud functions deploy translate --runtime nodejs10 --trigger-topic translate
```

Comprendere l'app

L'app web ha due componenti principali:

Un server HTTP Node.js per gestire le richieste web. Il server ha i seguenti due endpoint:
- /: elenca tutte le traduzioni esistenti e mostra un modulo che gli utenti possono inviare per richiedere nuove traduzioni.
- /request-translation: gli invii dei moduli vengono inviati a questo endpoint, che pubblica la richiesta su Pub/Sub per la traduzione asincrona.
Un modello HTML compilato con le traduzioni esistenti dal server Node.js server.

Il server HTTP

Nella directory server, app.js inizia configurando l'app e registrando i gestori HTTP:


// 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}!`));

Il gestore dell'indice (/) recupera tutte le traduzioni esistenti da Firestore e compila un modello HTML con l'elenco:


// 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});
}

Le nuove traduzioni vengono richieste inviando un modulo HTML. Il gestore della richiesta di traduzione, registrato in /request-translation, analizza l'invio del modulo, convalida la richiesta e pubblica un messaggio su Pub/Sub:


// 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);
}

Il modello HTML

Il modello HTML è la base della pagina HTML mostrata all'utente in modo che possa visualizzare le traduzioni precedenti e richiederne di nuove. Il modello viene compilato dal server HTTP con l'elenco delle traduzioni esistenti.

L'elemento <head> del modello HTML include metadati, fogli di stile e JavaScript per la pagina:

<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>

La pagina recupera gli asset CSS e JavaScript di Material Design Lite (MDL). MDL ti consente di aggiungere un aspetto Material Design ai tuoi siti web.

La pagina utilizza JQuery per attendere il completamento del caricamento del documento e impostare un gestore di invio del modulo. Ogni volta che viene inviato il modulo di richiesta di traduzione, la pagina esegue una convalida minima del modulo per verificare che il valore non sia vuoto, quindi invia una richiesta asincrona all'endpoint /request-translation.

Infine, viene visualizzata una snackbar MDL per indicare se la richiesta è andata a buon fine o se si è verificato un errore.

Il corpo HTML della pagina utilizza un layout MDL e diversi componenti MDL per visualizzare un elenco di traduzioni e un modulo per richiedere traduzioni aggiuntive:

<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>

Eseguire il deployment dell'app web

Puoi utilizzare l' ambiente standard di App Engine per creare ed eseguire il deployment di un'app che viene eseguita in modo affidabile anche se sottoposta a un carico elevato e con grandi quantità di dati.

Questo tutorial utilizza l'ambiente standard di App Engine per eseguire il deployment del frontend HTTP.

Il file app.yaml configura l'app App Engine:

runtime: nodejs10

Dalla stessa directory del file app.yaml, esegui il deployment dell'app nell' ambiente standard di App Engine:
```
gcloud app deploy
```

Testare l'app

Dopo aver eseguito il deployment della funzione Cloud Run e dell'app App Engine, prova a richiedere una traduzione.

Per visualizzare l'app nel browser,inserisci il seguente URL:

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

Sostituisci quanto segue:
- PROJECT_ID: l'ID progetto Google Cloud
- REGION_ID: un codice assegnato da App Engine alla tua app
Viene visualizzata una pagina con un elenco vuoto di traduzioni e un modulo per richiedere nuove traduzioni.
Nel campo Testo da tradurre, inserisci del testo da tradurre, ad esempio, Hello, World.
Seleziona una lingua dall'elenco a discesa in cui vuoi tradurre il testo.
Fai clic su Invia.
Per aggiornare la pagina, fai clic su Aggiorna . Nell'elenco delle traduzioni è presente una nuova riga. Se non vedi una traduzione, attendi qualche secondo e riprova. Se ancora non vedi una traduzione, consulta la sezione successiva relativa al debug dell'app.

Eseguire il debug dell'app

Se non riesci a connetterti all'app App Engine o non vedi nuove traduzioni, controlla quanto segue:

Verifica che i comandi di deployment gcloud siano stati completati correttamente e non abbiano generato errori. Se si sono verificati errori, correggili e riprova a eseguire il deployment della funzione Cloud Run e dell'app App Engine di nuovo.
Nella Google Cloud console, vai alla pagina Visualizzatore log.
Vai alla pagina Visualizzatore log
1. Nell'elenco a discesa Risorse selezionate di recente, fai clic GAE Application, quindi su Tutti module_id. Viene visualizzato un elenco di richieste da quando hai visitato l'app. Se non vedi un elenco di richieste, verifica di aver selezionato Tutti module_id dall'elenco a discesa. Se nella Google Cloud console vengono visualizzati messaggi di errore, verifica che il codice dell'app corrisponda al codice nella sezione relativa alla comprensione dell'app.
2. Nell'elenco a discesa Risorse selezionate di recente, fai clic su funzione Cloud Functions Functions, quindi su Tutti i nomi delle funzioni. Viene visualizzata una funzione per ogni traduzione richiesta. In caso contrario, verifica che la funzione Cloud Run e l'app App Engine utilizzino lo stesso argomento Pub/Sub:
  - Nel file background/server/app.js, verifica che la TOPIC_NAME costante sia "translate".
  - Quando esegui il deployment della funzione Cloud Run, assicurati di includere il flag --trigger-topic=translate.

Libera spazio

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, elimina il progetto che contiene le risorse oppure mantieni il progetto ed elimina le singole risorse.

Elimina il Google Cloud progetto

Nella Google Cloud console, 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 progetto, quindi fai clic su Chiudi per eliminare il progetto.

Elimina l'istanza App Engine

Nella Google Cloud console, vai alla pagina Versioni di App Engine.
Vai a Versioni
Seleziona la casella di controllo per la versione dell'app non predefinita che vuoi eliminare.
Nota: l'unico modo per eliminare la versione predefinita dell'app App Engine è eliminare il progetto. Tuttavia, puoi interrompere la versione predefinita nella Google Cloud console. Questa azione arresta tutte le istanze associate alla versione. Se necessario, puoi riavviare queste istanze in un secondo momento.

Nell'ambiente standard di App Engine, puoi interrompere la versione predefinita solo se l'app ha scalabilità manuale o di base.
Per eliminare la versione dell'app, fai clic su Elimina.

Elimina la funzione Cloud Run

Elimina la funzione Cloud Run che hai creato in questo tutorial:
```
gcloud functions delete Translate
```

Passaggi successivi

Prova altri tutorial su Cloud Run Functions.
Scopri di più su App Engine.
Prova Cloud Run, che ti consente di eseguire container stateless in un ambiente completamente gestito o nel tuo cluster Google Kubernetes Engine.

Elaborazione in background con Node.js Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Obiettivi

Costi

Prima di iniziare

Comprendere la funzione Cloud Run

Eseguire il deployment della funzione Cloud Run

Comprendere l'app

Il server HTTP

Il modello HTML

Eseguire il deployment dell'app web

Testare l'app

Eseguire il debug dell'app

Libera spazio

Elimina il Google Cloud progetto

Elimina l'istanza App Engine

Elimina la funzione Cloud Run

Passaggi successivi

Elaborazione in background con Node.js