Creare app per Google Chat con Gemini

1. Prima di iniziare

Cosa sono le app Google Chat con Gemini?

Le app Google Chat con Gemini:

  • Porta i tuoi servizi e le tue risorse in Google Chat, in modo che gli utenti possano ricevere informazioni e intervenire senza abbandonare la conversazione.
  • Eseguire l'integrazione con il modello di IA generativa Gemini in modo che possa creare o cercare dati come testo o immagini in momenti specifici per semplificare i flussi di lavoro.

Perché integrare le app di Google Chat con Gemini?

I casi d'uso tipici di modelli di IA generativa come Gemini rientrano nelle seguenti categorie:

  • Creazione e miglioramento dei contenuti. Genera testi di marketing, realizza post sui social media, crea immagini realistiche, componi musica o aiuta la creazione di contenuti video.
  • Ricerca di dati: Estrai insight chiave da una knowledge base non strutturata, riassumi testi lunghi, classifica contenuti o traduci lingue con maggiore precisione e velocità.
  • Conversazione. Partecipa a conversazioni naturali, informative e creative.

La possibilità di integrare queste funzionalità direttamente nell'interfaccia familiare di Google Chat è un'enorme opportunità per chiunque voglia migliorare l'esperienza e la produttività dei propri utenti.

Prerequisiti

Cosa crei

In questo codelab, creerai tre app di Google Chat con Gemini per trattare i tre casi d'uso presentati nella sezione precedente.

App di gestione dei problemi (creazione e miglioramento dei contenuti)

Questa app:

  • Gestisce i problemi dalla creazione alla chiusura con le interazioni di base, la home page delle app e l'autenticazione delle app.
  • Monitora i messaggi e aiuta l'inclusività con widget di eventi e accessori.

Usa Gemini per:

  • Genera report sui problemi in base alla cronologia dei messaggi e ai dettagli del problema.
  • Classificare le parole non inclusive nei messaggi con prompt ad accesso riservato.

Le principali tecnologie utilizzate sono Vertex AI, Gemini, Apps Script e le API Google Workspace (amministrazione, chat, Documenti, eventi).

22efdecff4601417.png

2d127c63518673b2.png

9aea694937f2f3ed.png

Questa app si basa su Gemini per comprendere e rispondere alle domande nel linguaggio naturale e per restituire riferimenti alle origini da dati non strutturati.

Le principali tecnologie utilizzate sono l'agente del datastore Dialogflow CX, il webhook Dialogflow CX, Google Cloud Functions e Gemini.

9468866bfe848bb8.png

App di feedback (conversazione)

Questa app si basa su Gemini per raccogliere e archiviare recensioni con conversazioni in linguaggio naturale.

Le principali tecnologie utilizzate sono l'agente Dialogflow CX, lo strumento Dialogflow CX, OpenAPI, Google Cloud Functions e Gemini.

99a7a0295f122f31.png

Cosa imparerai

  • Come integrare le app di Google Chat con Gemini tramite Vertex AI.
  • Come integrare le app Google Chat con gli agenti Dialogflow CX.
  • Come utilizzare le funzionalità più recenti di Google Chat: home page dell'app, eventi di Google Chat e widget accessori.

Che cosa ti serve

2. Configurazione

Inizializzare le risorse

In questa sezione accedi e configurerai le seguenti risorse dal tuo browser web preferito.

Progetto Apps Script

Nella console di Apps Script, procedi nel seguente modo:

  1. Fai clic su Impostazioni e attiva l'API Google Apps Script.

ea06c593b347b9d1.png

  1. Seleziona il progetto.
  2. Fai clic su Impostazioni progetto.
  3. Seleziona la casella di controllo Mostra file manifest "appsscript.json" nell'editor.
  4. Rinomina il progetto come Chat Apps Gemini.

12c1485bd248b766.png

Progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Seleziona il progetto.
  2. Fai clic su Menu ᐧ > API e servizi > Schermata consenso OAuth > Modifica app, quindi imposta Nome app su Chat Apps Gemini.

  1. Vai alla configurazione dell'API Google Chat, quindi imposta Nome app e Descrizione su Chat Apps Gemini.

a71f040755da3b8b.png

Google Chat

In Google Chat, segui questi passaggi:

  1. Se necessario, avvia una chat con l'app Google Chat.
  2. Invia un messaggio, ad esempio Hello, per assicurarti che funzioni.

9625418251528ae9.png

Scaricare codice sorgente e risorse a livello locale

  1. Scarica questo repository GitHub.

  1. Nell'ambiente di sviluppo che preferisci, apri la directory apps-script/chat-apps-gemini, quindi passa alla stessa directory nel terminale.

da9478df97c99194.png

Installare e configurare clasp

Utilizziamo clasp per modificare ed eseguire facilmente il push di versioni del codice sorgente dall'ambiente locale al progetto Apps Script.

  1. Nel tuo ambiente locale, installa le versioni più recenti di node, npm e clasp.
npm install -g @google/clasp
  1. Accedi con il tuo account:
clasp login

8bc2434e6dc6f22a.png

In caso di esito positivo, verrà visualizzata una schermata di conferma di base nel browser web e il file .clasprc.json con le tue credenziali client viene aggiornato. Puoi scoprire dove si trova nel tuo terminale.

e1d833eb4d5b3a8f.png

3. App 1: Creazione

Approfondimento dei concetti

Vertex AI

Vertex AI offre tutto ciò di cui hai bisogno per creare e utilizzare l'IA generativa, comprese soluzioni di IA, agent builder, oltre 130 modelli di base e una piattaforma di IA unificata.

c9e9c7a1945b22ac.png

Gemini

Gemini è un LLM multimodale di Google accessibile tramite Vertex AI. Aiuta le persone a liberare il proprio potenziale umano in modo che possano aumentare l'immaginazione, stimolare la curiosità e aumentare la produttività.

Servizio Chat avanzato

Il servizio Chat avanzato ti consente di utilizzare l'API Google Chat in Apps Script. In questo modo gli script possono trovare, creare e modificare gli spazi di Chat, aggiungere o rimuovere membri negli spazi e leggere o pubblicare messaggi con testo, schede, allegati e reazioni.

Architettura delle recensioni

8c9c7b7328a69ea6.png

Questa app Google Chat è stata creata con Apps Script. L'operazione funziona nel seguente modo:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, che è implementata in un progetto Apps Script ed è associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con le API di Documenti Google e Google Chat.
  4. L'app utilizza il servizio proprietà per mantenere i dati nelle proprietà dello script.
  5. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Esamina i flussi

Crea problema

7ca0e8ba3c8255bb.png

Risolvere i problemi dallo spazio dedicato

51b47714c378a24b.png

Chiudi il problema dallo spazio dedicato

89e50228deeab0f9.png

Esamina il codice sorgente

Il progetto Apps Script contiene i seguenti script:

  • Configuration: costanti da modificare in base all'ambiente.
  • ChatApp: gestisce gli eventi di interazione di Google Chat, tra cui messaggi, clic sulle schede, comandi slash e finestre di dialogo.
  • Storage: funzioni di utilità che si basano sui Servizi per le proprietà.
  • ChatAppAuth: funzioni di utilità che si basano sull'autenticazione dell'app Google Chat.
  • Docs: funzioni di utilità che si basano su Documenti Google.
  • VertexAi: funzioni di utilità che si basano su Vertex AI.

Di seguito sono riportate le parti utilizzate attivamente per generare documenti dei report con le cronologie Gemini e Chat Space:

appsscript.json

// Enables the Admin SDK Directory and Chat services, which you need to retrieve
// messages and usernames.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "AdminDirectory",
    "version": "directory_v1",
    "serviceId": "admin"
  },
  {
    "userSymbol": "Chat",
    "version": "v1",
    "serviceId": "chat"
  }
  ...
]
// Includes the OAuth scopes to request the Admin SDK Directory, Google Chat,
// Google Docs, and Vertex AI APIs.

"oauthScopes": [
  ...
  "https://www.googleapis.com/auth/admin.directory.user.readonly",
  "https://www.googleapis.com/auth/chat.messages.readonly",
  "https://www.googleapis.com/auth/documents",
  "https://www.googleapis.com/auth/cloud-platform",
  ...
]

Configuration.js

// Relies on two constants: the first one is the Google Cloud project ID and the
// second one is the Vertex AI location to be used.

...
const PROJECT_ID = 'replace-with-gcp-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
...

ChatApp.js

// The slash command process function retrieves history, generates content, and passes
// it to the report generator.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    const history = exportSpaceHistory(spaceId);
    const summary = summarizeSpace(history);
    const docUrl = createReport(
      issue.title, issue.description, resolution, history, summary
    );
    ...
  }
  ...
}
/**
 * Fetches and concatenates the 100 first space messages by using the Google Chat API.
 *
 * Messages with slash commands are filtered (app command invocations).
 *
 * @return {string} concatenate space messages in the format "Sender's name: Message"
 */
function exportSpaceHistory(spaceName) {
  const messages = Chat.Spaces.Messages.list(spaceName, { 'pageSize': 100 }).messages;
  // Returns results after fetching message sender display names.
  let users = new Map();
  return messages
    .filter(message => message.slashCommand === undefined)
    .map(message =>
      `${getUserDisplayName(users, message.sender.name)}: ${message.text}`
    ).join('\n');
}
/**
 * Fetches a user's display name by using the Admin Directory API.
 *
 * A cache is used to only call the API once per user.
 *
 * @param {Map} cache the map containing users previously fetched
 * @param {string} userId the user ID to fetch
 * @return {string} the user's display name
 */
function getUserDisplayName(cache, userId) {
  if (cache.has(userId)) {
    return cache.get(userId);
  }
  let displayName = 'Unknown User';
  try {
    const user = AdminDirectory.Users.get(
      userId.replace("users/", ""),
      { projection: 'BASIC', viewType: 'domain_public' });
    displayName = user.name.displayName ? user.name.displayName : user.name.fullName;
  } catch (e) {
    // Ignores errors, uses 'Unknown User' by default.
  }
  cache.set(userId, displayName);
  return displayName;
}

VertexAi.js

/**
 * Summarizes a Google Chat space history with the Gemini Pro model using
 * Vertex AI API.
 *
 * @param {string} history the history
 * @return {string} the summary
 */
function summarizeSpace(history) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options = {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Summarize the following conversation between engineers resolving"
              + " an issue in a few sentences.\n\n" + history
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Docs.js

// The report generator function adds two sections: the first one is for the summary and the second one is for history.
function createReport(..., history, summary) {
  ...
  body.appendParagraph("Summary").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(summary);
  body.appendParagraph("History").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(history);
  ...
}

Aggiorna il progetto Google Cloud

Abilita le API

  1. Nella console Google Cloud, abilita le API Documenti Google, SDK della Console di amministrazione Google e Vertex AI:

  1. Fai clic su Menu ᐧ > API e servizi > API e servizi abilitati e verifica che le API siano abilitate.

Avvia account di servizio

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu 🎮 > IAM e amministratore > Account di servizio > + Crea account di servizio.

74cf57426419f39.png

  1. Imposta Nome account di servizio su chat-app.
  2. Imposta Descrizione account di servizio su Chat app auth.
  3. Fai clic su Crea e continua.
  4. Fai clic su Fine. Verrai reindirizzato alla pagina Account di servizio, dove potrai vedere l'account di servizio che hai creato.

ca0468f1f93990f9.png

  1. Seleziona l'account di servizio appena creato.
  2. Seleziona la scheda Chiavi.
  3. Fai clic su Aggiungi chiave.
  4. Fai clic su Crea nuova chiave.
  5. Seleziona JSON.
  6. Fai clic su Crea.

9f7e6ea020978ab0.png

La finestra di dialogo si chiude e la coppia di chiavi pubblica/privata appena creata viene scaricata automaticamente nel tuo ambiente locale come file JSON. Potrai utilizzarli in seguito, quando modifichi il codice sorgente del progetto Apps Script.

Aggiornare la configurazione dell'API Google Chat

Nella console Google Cloud, segui questi passaggi:

  1. Aggiungi un comando slash.
  2. Imposta Nome su /create.
  3. Imposta ID comando su 1.
  4. Imposta Descrizione su Create a new issue.
  5. Seleziona la casella di controllo Apre una finestra di dialogo.
  6. Aggiungi un altro comando slash.
  7. Imposta Nome su /close.
  8. Imposta ID comando su 2.
  9. Imposta Descrizione su Close an issue.
  10. Fai clic su Salva.

bee2e7b63659ab33.png

Aggiorna progetto Apps Script

  • Cambia la directory corrente nel terminale locale impostandola su issue-management/1-baseline. Contiene il codice sorgente. Prima di eseguire il push del codice sorgente nel progetto Apps Script, devi configurare alcune cose.

Configura il codice sorgente

  1. Imposta la costante JSON denominata CHAT_CREDENTIALS nel file Configuration.js sui contenuti del file della chiave privata che hai scaricato in precedenza.

d721f6bff73c5304.png

  1. Nella console Google Cloud, fai clic su Menu ᐧ > IAM e amministrazione > Impostazioni.

  1. Copia l'ID progetto.

82592fa0bd113469.png

  1. Imposta la costante stringa denominata PROJECT_ID nel file Configuration.js sull'ID progetto.

383cee561130ceba.png

Configura le impostazioni di clasp

Per inizializzare le impostazioni di clasp ed eseguire il push del codice sorgente nel progetto Apps Script corretto, segui questi passaggi:

  1. Nella console di Apps Script, seleziona il tuo progetto.
  2. Seleziona Impostazioni progetto.
  3. In ID, fai clic su Copia.

20ea033b6de882c6.png

  1. Nella directory attuale, crea un file .clasp.json.
  2. Sostituisci <your-script-id> con l'ID copiato.
  3. Copia il risultato nel file .clasp.json.
  4. Salva il file .clasp.json.
{
  "scriptId": "<your-script-id>"
}

Esegui il push del codice sorgente

  • Esegui questo comando:
$clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ ChatApp.js
└─ ChatAppAuth.js
└─ Configuration.js
└─ Docs.js
└─ Storage.js
└─ VertexAi.js
Pushed 7 files.

Prova

  1. In Google Chat, invia Hello! con un messaggio diretto all'app. L'app non risponde, ma viene visualizzato un messaggio che richiede la configurazione.

4c1fc68121dcffed.png

  1. Fai clic su Configura.
  2. Seleziona il tuo Account Google.
  3. Autentica.
  4. Controlla e consenti l'accesso all'app.

4a2fd7ac5918bf1a.png

In caso di esito positivo, verrà visualizzata una schermata di conferma di base sulla pagina web e una risposta effettiva dall'app al messaggio originale.

acb9065568fe47d2.png

2d6ef9c62f47e082.png

  1. Invia un altro messaggio diretto all'app, ma con il comando slash /create.

be3f3c6eb0f929c1.png

  1. Nella finestra di dialogo, imposta Titolo su Issue Title 1.
  2. Imposta Descrizione sul problema Description 1.
  3. Fai clic su Crea.

22efdecff4601417.png

L'app svolge le seguenti operazioni:

  1. Chiude la finestra di dialogo.
  2. Crea uno spazio con lo stesso titolo dedicato al problema appena creato.
  3. Entra nello spazio appena creato.
  4. Invia un messaggio contenente la descrizione del problema nello spazio appena creato.
  5. Ti invia un messaggio diretto con un link allo spazio appena creato.

3253cec2392e281f.png

  1. Nello spazio appena creato, invia un messaggio con il comando slash /close e una risoluzione come Not reproducible.

132cc4acfc10b98c.png

L'app svolge le seguenti operazioni:

  1. Crea un documento di report in Documenti Google.
  2. Invia un messaggio allo spazio dedicato al problema con un link al documento del report appena creato.

2d127c63518673b2.png

  1. Apri il documento del report. Contiene informazioni di base, la cronologia e un riepilogo.

9aea694937f2f3ed.png

4. (Facoltativo) App 1: aggiungi la home page dell'app

Approfondimento dei concetti

Home page dell'app è un messaggio di scheda personalizzabile che un'app di Chat invia a un utente quando quest'ultimo accede alla scheda Home da un messaggio diretto con l'app Chat. In genere viene utilizzata per mostrare la documentazione dell'app o una panoramica. Tecnicamente, c'è un evento dedicato da gestire e si basa sugli stessi principi fondamentali dei messaggi delle schede.

65f56f70f67a32e4.png

Esamina i flussi

Gestire i problemi

10663f5fc107fb3f.png

Esamina il codice sorgente

Il progetto Apps Script deve essere modificato.

ChatApp.js

/**
 * Handles app home requests in Google Chat.
 * 
 * Displays the latest status of all issues.
 */
function onAppHome() {
  // Generates one card section per issue.
  var sections = [];
  for (var issueKey in appProperties.getProperties()) {
    const issue = JSON.parse(appProperties.getProperty(issueKey));
    if (issue.spaceId) {
      sections.push({
        header: `${issue.status} - ${issue.title}`,
        widgets: [{ textParagraph: {
            text: `Description: ${issue.description}`
          }}, { textParagraph: {
            text: `Resolution: ${issue.resolution}`
          }}, { buttonList: { buttons: [{
              text: "Open space",
              onClick: { openLink: {
                url: `https://mail.google.com/mail/u/0/#chat/space/${issue.spaceId}`
              }}
            }, {
              text: "Open report",
              onClick: { openLink: {
                url: issue.reportUrl !== "" ? issue.reportUrl : "docs.new"
              }},
              disabled: issue.reportUrl === ""
          }]}
        }]
      });
    }
  }

  return { action: { navigations: [{ push_card: {
    sections: sections
  }}]}};
}

Aggiorna il progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Nella sezione Funzionalità interattive, seleziona la casella di controllo Home page dell'app di assistenza.

97159c1c69ca8303.png

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale con issue-management/2-app-home. Contiene il codice sorgente che devi utilizzare.
  2. Copia il file issue-management/1-baseline/.clasp.json nella directory attuale.
  3. Copia il file issue-management/1-baseline/Configuration.js nella directory attuale in modo che sostituisca quella esistente.
  4. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto all'app con il comando slash /create. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 2.
  3. Imposta Descrizione sul problema Description 2.
  4. Fai clic su Crea.

3b2a8690e758f965.png

  1. Seleziona la scheda Home dal tuo spazio con l'app Google Chat. Puoi visualizzare i dettagli dei problemi che hai creato.

ed8e32da0e6f2ac6.png

5. (Facoltativo) App 1: aggiungere il monitoraggio dello spazio

Esamina i concetti

Pub/Sub

Pub/Sub è un servizio di messaggistica asincrono e scalabile che disaccoppia i servizi che generano messaggi dai servizi che li elaborano. Pub/Sub consente di creare sistemi di produttori e consumatori di eventi, chiamati publisher e sottoscritti. I publisher comunicano con gli abbonati in modo asincrono trasmettendo eventi, anziché tramite chiamate di procedura remota sincrone (RPC).

I publisher inviano eventi al servizio Pub/Sub indipendentemente da come o quando devono essere elaborati. Pub/Sub recapita quindi gli eventi a tutti i servizi che li generano. Nei sistemi che comunicano tramite RPC, i publisher devono attendere che gli abbonati ricevano i dati. Tuttavia, l'integrazione asincrona in Pub/Sub aumenta la flessibilità e la robustezza dell'intero sistema.

Argomento: una risorsa denominata che rappresenta un feed di messaggi. Devi creare un argomento prima di poterlo pubblicare o sottoscrivere.

Sottoscrizione: per ricevere i messaggi pubblicati in un argomento, devi creare una sottoscrizione per quell'argomento. Il client sottoscrittore riceve ed elabora i messaggi pubblicati nell'argomento. Un argomento può avere più sottoscrizioni, ma una determinata sottoscrizione appartiene a un singolo argomento.

Eventi Google Workspace

Gli eventi di Google Workspace rappresentano le modifiche alle risorse di Google Workspace, ad esempio quando vengono create, aggiornate o eliminate. Le app possono iscriversi alle risorse di Google Workspace per ricevere ed elaborare eventi pertinenti in modo asincrono.

7816e477b112bfb6.png

Ecco come l'API Google Workspace Eventi invia eventi a un'app tramite un abbonamento:

  1. L'app si abbona a una risorsa in un'app di Google Workspace, ad esempio uno spazio.
  2. La risorsa a cui l'app ha sottoscritto la sottoscrizione cambia.
  3. L'app Google Workspace fornisce un evento in un argomento in Pub/Sub, che funge da endpoint di notifica per l'abbonamento a Google Workspace dell'app. L'evento contiene dati su cosa è cambiato nella risorsa.
  4. L'app elabora il messaggio Pub/Sub che contiene l'evento e, se necessario, interviene.

Esamina i flussi

Crea problema (aggiornamento)

6d7a9d7a68666a80.png

Risolvere il problema dallo spazio dedicato (aggiornamento)

17e60f052f222456.png

Chiudi il problema da uno spazio dedicato (aggiornamento)

742d490ea0b6fe3a.png

Elaborare gli abbonamenti

de3017100dec6401.png

Esamina il codice sorgente

Il progetto Apps Script deve essere modificato.

appsscript.json

// Enables the Workspace Events service.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "WorkspaceEvents",
    "version": "v1",
    "serviceId": "workspaceevents"
  }
  ...
]

Configuration.js

// Adds two constants: the first one is the Pub/Sub topic ID and the second one
// is the Pub/Sub subscription ID to be used to retrieve Google Workspace events.

...
const GWS_PUBSUB_TOPIC_ID = `projects/${PROJECT_ID}/topics/workspace-events`;
const GWS_PUBSUB_SUBSCRIPTION_ID =
  `projects/${PROJECT_ID}/subscriptions/workspace-events-sub`;
...

ChatApp.js

// Edits the function to delete the subscription at issue closure.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    deleteSubscription(issue.subscriptionId);
    ...
  }
  ...
}
// Edits the function to create the subscription.

function createIssue(event) {
  ...
  const subscriptionId = createSpaceSubscription(spaceUrl);
  const createdIssue = saveCreatedIssue(..., subscriptionId);
  ...
}
// Edits the function to delete the subscription.

function onRemoveFromSpace(event) {
  ...
  deleteSubscription(issue.subscriptionId);
  ...
}

Storage.js

// Edits the function to keep track of the subscription ID.

function saveCreatedIssue(..., spaceId, subscriptionId) {
  ...
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    subscriptionId: subscriptionId,
    ...
  }));
  ...
}

WorkspaceEvent.js

/**
 * Creates a new subscription to Google Workspace Events associated to a
 * Google Chat space.
 * 
 * The subscription scope includes message creation events and resources.
 * 
 * @param {string} spaceId the space ID to create a subscription for
 * @return the ID of the newly created subscription
 */
function createSpaceSubscription(spaceId) {
  const operation = WorkspaceEvents.Subscriptions.create({
    targetResource: `//chat.googleapis.com/${spaceId}`,
    eventTypes: ["google.workspace.chat.message.v1.created"],
    notificationEndpoint: { pubsubTopic: GWS_PUBSUB_TOPIC_ID },
    payloadOptions: { includeResource: true },
  });

  return operation.response.name;
}
/**
 * Processes events from subscription by using the Google Cloud PubSub API.
 * 
 * It pulls and acknowledges each event.
 */
function processSubscription() {
  const response = UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:pull`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({ maxMessages: 10 })
    }
  );

  const messages = JSON.parse(response.getContentText()).receivedMessages;
  for (var messageIndex in messages) {
    const message = messages[messageIndex];
    const ceType = message.message.attributes["ce-type"];
    const dataStr = Utilities.newBlob(Utilities.base64Decode(message.message.data))
      .getDataAsString();
    if (ceType === "google.workspace.events.subscription.v1.expirationReminder") {
      // Renews subscription.
      renewSubscription(JSON.parse(dataStr).subscription.name);
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      // Processes the message text when it's sent in a space.
      const chatMessage = JSON.parse(dataStr).message;
      if (chatMessage.sender.type !== "BOT") {
        console.log("Message was processed.");
      }
    }
    // Acknowledges successful processing to avoid getting it again next time.
    ackSubscription(message.ackId);
  }
}
/**
 * Acknowledges a subscription event by using the Google Cloud PubSub API.
 * 
 * @param {string} ackId the ID of the event acknowledgment to send
 */
function ackSubscription(ackId) {
  UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:acknowledge`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({
        ackIds: [ackId]
      })
    }
  );
}
/**
 * Renews a subscription to Google Workspace Events.
 * 
 * The default time to live option is used.
 * 
 * @param {string} subscriptionId the ID of the subscription to renew
 */
function renewSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.patch({ttl: '0s'}, subscriptionId);
}
/**
 * Deletes a subscription to Google Workspace Events.
 * 
 * @param {string} subscriptionId the ID of the subscription to delete
 */
function deleteSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.remove(subscriptionId);
}

Aggiorna il progetto Google Cloud

Abilita le API

  1. Nella console Google Cloud, abilita Eventi Google Workspace e Pub/Sub.

  1. Fai clic su Menu ᐧ > API e servizi > API e servizi abilitati e verifica che entrambi siano abilitati.

Attiva abbonamento

Devi creare e sottoscrivere un argomento Pub/Sub per pubblicare tutti gli eventi dell'area di lavoro.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ᐧ > Pub/Sub > Argomenti.

  1. Fai clic su Crea argomento.
  2. Imposta l'ID argomento su workspace-events.
  3. Seleziona la casella di controllo Aggiungi un abbonamento predefinito.
  4. Fai clic su Crea.

b39f9a0aec7c9939.png

Per concedere l'accesso per pubblicare messaggi Pub/Sub nell'argomento che hai appena creato da Google Chat, segui questi passaggi:

  1. Seleziona l'argomento dall'elenco.
  2. Seleziona la scheda Autorizzazioni.
  3. Aggiungi chat-api-push@system.gserviceaccount.com a Nuove entità.
  4. Seleziona Publisher Pub/Sub come Ruolo.
  5. Fai clic su Salva.

8d4016c37532503.png

Aggiorna progetto Apps Script

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ᐧ > IAM e amministrazione > Impostazioni.

  1. Copia l'ID progetto.

82592fa0bd113469.png

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale con issue-management/3-message-monitoring. Contiene il codice sorgente necessario.
  2. Imposta la costante stringa denominata PROJECT_ID nel file Configuration.js sull'ID progetto copiato.
  3. Imposta la costante JSON denominata CHAT_CREDENTIALS nel file Configuration.js sui contenuti del file della chiave privata che hai scaricato in precedenza.
  4. Copia il file issue-management/2-app-home/.clasp.json nella directory attuale.
  5. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto all'app con il comando slash /create. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 3.
  3. Imposta Descrizione sul problema Description 3.
  4. Fai clic su Crea.
  5. Nello spazio appena creato, invia alcuni messaggi per discutere del problema.
  6. Invia un messaggio con il comando slash /close e una risoluzione come Fixed.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ᐧ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella mostra i messaggi relativi a ciò che hai inviato allo spazio appena creato.

82631c9792d83889.png

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Run.Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati.

c612e8fa2bd0a163.png

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ᐧ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella non mostra più i messaggi relativi a ciò che hai inviato allo spazio appena creato.

e185454cac862a7b.png

  • In Google Chat, nello spazio dedicato al terzo problema creato con il comando slash /create, invia qualche altro messaggio relativo al problema.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ᐧ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella non mostra i messaggi relativi a ciò che hai inviato allo spazio appena creato.

6. Facoltativo: App 1: aggiungere assistenza per l'inclusività

Esamina i concetti

I Prompt dell'IA generativa sono l'arte di creare istruzioni o domande per guidare un modello di IA generativa verso il tipo specifico di output desiderato. Una prassi comune è limitare le risposte aggiungendo regole e condizioni nei prompt. Ciò può contribuire a rendere l'output sicuro, pertinente, coerente e in linea con le aspettative.

Esamina i flussi

Elabora abbonamenti (aggiornamento)

780d0802f77dd180.png

Esamina il codice sorgente

Il progetto Apps Script deve essere modificato.

WorkspaceEvent.js

// Edits the function to replace logging by an actual card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      const inclusivityCheck = getInclusivityFeedback(chatMessage.text);
      if (inclusivityCheck !== "It's inclusive!") {
        createAppMessageUsingChatService({
          cardsV2: [{ cardId: "1", card: { header: {
              title: "Inclusivity",
              subtitle: `The following words are not inclusive: ${inclusivityCheck}`
          }}}]
        },
        chatMessage.space.name);
      }
      ...
    }
    ...
  }
  ...
}

VertexAi.js

/**
 * Gets feedback on inclusivity for a text with the Gemini Pro model using
 * Vertex AI API.
 * 
 * Returns "It's inclusive!" when it is otherwise a list of word(s) that might not
 * be optimal.
 *
 * @param {string} text the text
 * @return {string} the feedback
 */
function getInclusivityFeedback(text) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options =  {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Are there any words that obviously go against inclusivity "
            + "in this text:"
            + `\n\n----------\n${text}\n----------\n\n`
            + "If there are not, answer \"It's inclusive!\" "
            + "otherwise answer by listing them separated by commas. "
            + "Do not answer with any explanation."
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Aggiorna progetto Apps Script

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale con issue-management/4-inclusivity-help. Contiene il codice sorgente necessario.
  2. Copia il file issue-management/3-message-monitoring/.clasp.json nella directory attuale.
  3. Copia il file issue-management/3-message-monitoring/Configuration.js nella directory attuale in modo che sostituisca quella esistente.
  4. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto all'app con il comando slash /create. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 4.
  3. Imposta Descrizione sul problema Description 4.
  4. Fai clic su Crea.
  5. Nello spazio appena creato, invia It happened to me last week as well.

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log dell'esecuzione puoi vedere che i messaggi sono stati elaborati.

In Google Chat, segui questi passaggi:

  1. Tieni presente che l'app non ha inviato alcun aiuto per l'inclusività nello spazio appena creato.
  2. Nello spazio appena creato, invia il messaggio I had to add myself from the master to fix it.

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log dell'esecuzione puoi vedere che i messaggi sono stati elaborati. In Google Chat, l'app ha inviato un messaggio di aiuto per l'inclusività nello spazio appena creato.

7936342847acbe2d.png

7. (Facoltativo) App 1: aggiungi preferenze

.

Esamina i concetti

Un widget accessorio è un widget senza bordo collegato alla parte inferiore di un messaggio inviato da un'app. In genere viene utilizzato per attivare reazioni rapide da parte dell'utente nel contesto specifico dei messaggi. Tecnicamente, si basa sugli stessi principi fondamentali dei pulsanti delle schede.

eebe88238f6b13f.png

Esamina i flussi

Guida alla disattivazione dell'inclusività

1bb7a8592ee6221e.png

Esamina il codice sorgente

Il progetto Apps Script deve essere modificato.

ChatApp.js

// Edits the function to handle the inclusivity help disablement action for a
// given space.

function onCardClick(event) {
  ...
  if (event.action.actionMethodName === "disableInclusivityHelp") {
    disableInclusivityHelp(event.common.parameters.spaceId);
  }
}

Storage.js

// Edits the function to keep track of the inclusivity help setting.

function saveCreatedIssue(title, description, spaceId, subscriptionId) {
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    inclusivityHelp: true,
    ...
  }));
  ...
}
/**
 * Disables inclusivity help in a space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 */
function disableInclusivityHelp(spaceId) {
  var issue = JSON.parse(appProperties.getProperty(spaceId));
  issue.inclusivityHelp = false;
  appProperties.setProperty(spaceId, JSON.stringify(issue));
}
/**
 * Checks whether the app should help with inclusivity in a given space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 * @return whether the app should help with inclusivity
 */
function shouldHelpWithInclusivity(spaceId) {
  return JSON.parse(appProperties.getProperty(spaceId)).inclusivityHelp;
}

WorkspaceEvent.js

// Edits the function to display the accessory widget to the existing card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      if (... && shouldHelpWithInclusivity(chatMessage.space.name)) {
        createAppMessageUsingChatService({
          ...
          accessoryWidgets: [{ buttonList: { buttons: [{
            altText: "Disable inclusivity help",
            icon: {
              iconUrl: "https://upload.wikimedia.org/.../Stop_hand_rugen.png"
            },
            onClick: { action: {
              function: "disableInclusivityHelp",
              parameters: [{
                key: "spaceId",
                value: chatMessage.space.name
              }]
            }}
          }]}}]
        }, ...);
        ...
      }
      ...
    }
    ...
  }
  ...
}

Aggiorna progetto Apps Script

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale con issue-management/5-disable-help. Contiene il codice sorgente necessario.
  2. Copia il file issue-management/4-inclusivity-help/.clasp.json nella directory attuale.
  3. Copia il file issue-management/4-inclusivity-help/Configuration.js nella directory attuale in modo che sostituisca quella esistente.
  4. Esegui questo comando:
clasp push

Prova

Disattivare la guida

  • In Google Chat, nello spazio dedicato al quarto problema che hai creato con il comando slash /create, invia il messaggio I had to add myself from the master to fix.

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log dell'esecuzione puoi vedere che i messaggi sono stati elaborati.

In Google Chat, segui questi passaggi:

  1. Tieni presente che l'app ha inviato un messaggio contenente aiuto per l'inclusività nello spazio dedicato al problema relativo al widget accessorio.
  2. Fai clic sul widget degli accessori per disattivare la guida all'inclusività.

de722cff1928dec9.png

Controlla la disattivazione

  • In Google Chat, nello spazio dedicato al quarto problema che hai creato con il comando slash /create, invia il messaggio I had to add myself from the master to fix.

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log dell'esecuzione puoi vedere che i messaggi sono stati elaborati. In Google Chat, l'app non ha inviato un messaggio con aiuto di inclusività nello spazio dedicato al problema perché è stata disattivata.

347d659db53b73e9.png

8. App 2: Creazione

Approfondimento dei concetti

Base dell'IA generativa

Si tratta di rendere i modelli di AI più oggettivi e affidabili collegandoli a fonti di conoscenza verificabili. Questa tecnica aiuta a impedire all'IA di inventare informazioni e può aiutare a rendere le risposte contestualmente pertinenti e meno faziose.

Linguaggio naturale

Qualsiasi lingua parlata o scritta da persone per la comunicazione quotidiana, in contrasto con le lingue artificiali o basate su computer.

Cloud Storage

Cloud Storage permette di archiviare e recuperare qualsiasi volume di dati in qualsiasi momento a livello globale. Può essere utilizzato per scenari diversi, tra cui pubblicazione di contenuti di siti web, archiviazione di dati e ripristino di emergenza o distribuzione agli utenti di oggetti di dati di grandi dimensioni tramite download diretto.

Datastore Dialogflow CX

Dialogflow CX si integra con i datastore, ovvero raccolte di siti web e documenti utilizzati dagli agenti dei datastore per trovare risposte alle domande degli utenti finali a partire da dati specifici. Per una determinata domanda, l'agente del datastore cerca una risposta dai contenuti di origine dati e riassume i risultati in una risposta coerente. Fornisce inoltre link di supporto alle fonti della risposta per consentire all'utente finale di saperne di più.

Architettura delle recensioni

9d3342d12f3b4dda.png

Questa app Google Chat è stata creata con Dialogflow CX e funziona come segue:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, che è un agente Dialogflow CX ed è associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con un datastore situato in Cloud Storage.
  4. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Rivedi i flussi

Rispondi alla domanda

aad9fb5a7ca48956.png

Esamina il codice sorgente

L'unica origine di cui hai bisogno non è il codice, ma piuttosto i dati che utilizzi per il grounding.

google-chat-overview.pdf

Contiene le informazioni non strutturate delle app Google Chat, una versione stampata di una pagina del sito web per gli sviluppatori di Google Workspace.

e9b91c4587b1a3a0.png

Aggiorna progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Abilita le API Dialogflow e Cloud Storage.

  1. Abilita l'API Vertex AI Agent Builder.

  1. Fai clic su Menu ᐧ > API e servizi > API e servizi abilitati e verifica che tutte le API siano abilitate.

.

Crea un agente del datastore Dialogflow CX

Avvia i dati di conoscenza

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Cloud Storage > Bucket.

4f15978ae9f1b687.png

  1. Fai clic su Crea.
  2. Imposta nome su gchat-knowledge.
  3. Fai clic su Crea.

6b38c6d4d2c41bba.png

  1. Seleziona il bucket gchat-knowledge.
  2. Fai clic su Carica file.
  3. Seleziona il file knowledge-app/grounding/google-chat-overview.pdf dal tuo ambiente locale.

df89acb22e1762af.png

Crea app

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Generatore di agenti > App.

  1. Fai clic su Nuova app.
  2. Seleziona il tipo di chat.

44276003074bcf14.png

  1. Imposta Company name sul nome della tua azienda.
  2. Impostare Agent name su knowledge.
  3. Fai clic su Continua.

c4fedfd7556f723b.png

  1. Fai clic su Crea nuovo datastore.
  2. Seleziona Cloud Storage come origine dati.

6e2440ecf0f8f9bd.png

  1. Seleziona File.
  2. Fai clic su Sfoglia.
  3. Seleziona il file google-chat-overview.pdf.
  4. Fai clic su Continua.
  5. Imposta il nome del datastore su gchat-knowledge-ds.
  6. Fai clic su Crea.

a675df7490b83900.png

  1. Seleziona il datastore gchat-knowledge-ds nella tabella.
  2. Fai clic su Crea.

f121d580771ed96.png

  1. Dopo un paio di minuti, fai clic su Menu ᐧ > Generatore di agenti > App e noti che puoi visualizzare l'app.

d929a7431dd84968.png

  1. Fai clic su Menu ᐧ > Generatore di agenti > Datastore.

  1. Fai clic sul datastore gchat-knowledge-ds. Il numero di documenti è 1, il che indica che è pronto.

558319790a0accf2.png

App completa e di prova

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.

ca9b2fb4be92e8e4.png

  1. Seleziona Impostazioni agente > IA generativa > Agente generativo.
  2. Cambia il modello da Text Bison a Gemini Pro.
  3. Fai clic su Salva.

68cc4713ec9b25a0.png

  1. Fai clic su Agente di test.
  2. Invia What is Google Chat?. L'agente risponde con qualcosa di significativo.

8e3a2cb02469041a.png

Integrare l'app Google Chat

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Nella riga dell'agente knowledge base, fai clic su 1e7ede7abae4aa3c.png > Copia nome.

e19f61185158110d.png

Nella console Google Cloud, segui questi passaggi:

  1. Vai alla configurazione dell'API Google Chat.

  1. In Impostazioni connessione, seleziona Dialogflow.
  2. In Impostazioni Dialogflow, seleziona Dialogflow CX.
  3. Imposta Nome agente o risorsa ambiente sul nome agente che hai copiato.
  4. Rimuovi i due comandi slash.

505ff39a50880904.png

  1. In Google Chat, invia What is Google Chat? con un messaggio diretto all'app Google Chat. L'agente risponde con qualcosa di significativo.

abda9e43b81fb0ea.png

9. (Facoltativo) App 2: aggiungi origini

Approfondimento dei concetti

Webhook Dialogflow CX

Un servizio che ospita la logica di business o chiama altri servizi. Durante una sessione Dialogflow CX, i webhook possono basarsi sui dati estratti dall'elaborazione del linguaggio naturale per generare risposte dinamiche, convalidare i dati raccolti o attivare azioni sul backend.

Cloud Functions

Cloud Functions è ideale per la creazione di backend serverless, l'elaborazione dei dati in tempo reale e la creazione di app intelligenti. Non richiede server di cui eseguire il provisioning, la gestione, la patch o l'aggiornamento. Scalano automaticamente, sono a disponibilità elevata e sono a tolleranza di errore.

Rivedi i flussi

Rispondi alla domanda (aggiornamento)

92767c07c7b252aa.png

Esamina il codice sorgente

L'unico codice sorgente necessario è la funzione che consente di adattare le risposte degli agenti ai messaggi di Google Chat. Viene utilizzato come webhook.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "agent-response-adapter",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 *
 * It takes a Dialogflow CX agent response as input and returns a
 * valid Google Chat card message with both the text and source links
 */
functions.http('agent-response-adapter', (request, response) => {
  // Creates Google Chat buttons based on the data store agent response
  // grounding details.
  var linkTitles = [];
  var linkButtons = [];
  const grounding = request.body.messages[1].payload.richContent[0][0];
  if (grounding.type === "match_citations") {
    // Supports citation match type.
    grounding.citations.forEach((citation) => {
      // Avoid duplications.
      if (linkTitles.indexOf(citation.title) < 0) {
        linkButtons.push({
          text: citation.title,
          onClick: { openLink: {
            url: citation.actionLink
          }}
        });
        linkTitles.push(citation.title);
      }
    });
  } else if (grounding.type === "info") {
    // Supports info type.
    if (linkTitles.indexOf(grounding.title) < 0) {
      linkButtons.push({
        text: grounding.title,
        onClick: { openLink: {
          url: grounding.actionLink
        }}
      });
      linkTitles.push(grounding.title);
    }
  }

  // Sends the Dialogflow CX fulfillment response to replace the agent response
  // with the Chat message with text and source buttons.
  response.send({ fulfillment_response: {
    merge_behavior: "REPLACE",
    messages: [{ payload: {
      // Reuses the original data store agent response text.
      text: request.body.messages[0].text.text[0],
      cardsV2: [{
        cardId: "sourcesCard",
        card: { sections: [{
          header: "Sources",
          widgets: [{ buttonList: {
            buttons: linkButtons
          }}]
        }]}
      }]
    }}]
  }});
});

Aggiorna il progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Abilita le API Cloud Build, Cloud Functions, Cloud Logging, Artifact Registry e Cloud Run.

  1. Fai clic su Menu ᐧ > API e servizi > API e servizi abilitati e verifica che le API siano abilitate.

Aggiornare l'agente del datastore Dialogflow CX

Devi eseguire il deployment di una funzione Cloud Functions e aggiornare il webhook Dialogflow CX per attivarlo con più origini, se possibile.

Restituire più origini

Per impostazione predefinita, un nuovo agente del datastore restituisce solo un'origine al massimo, ma puoi modificarne altre.

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.
  3. Seleziona Pagina iniziale.
  4. Seleziona Modifica datastore.
  5. Nella sezione Risposte dell'agente, imposta Opzioni di risposta del datastore su 5.
  6. Fai clic su Salva.

f5932d03057df645.png

Avvia funzione Cloud Functions

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Cloud Functions.

  1. Fai clic su Crea funzione.
  2. In Impostazioni di base, imposta name su function-1.
  3. In Autenticazione, seleziona il pulsante di opzione Consenti chiamate non autenticate.
  4. In Impostazioni di runtime, build, connessioni e sicurezza imposta Numero massimo di istanze su 3.
  5. Tocca Avanti.

bd3790a9285f9c07.png

  1. Imposta Punto di ingresso su agent-response-adapter.
  2. Sostituisci i contenuti predefiniti con i file che si trovano nella directory knowledge-app/agent-response-adapter.
  3. Fai clic su Esegui il deployment.

b379bb8ca0fc1079.png

  1. Copia l'URL mentre attendi un paio di minuti per il deployment della funzione.

eaae08cf048b9b1c.png

Avvia webhook

Devi configurare l'agente Dialogflow CX in modo che utilizzi un webhook che attivi la funzione di cui è stato appena eseguito il deployment.

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.
  3. Seleziona Gestisci > Webhook > Crea.
  4. Imposta Nome visualizzato su Google Chat Response Adapter.
  5. Imposta URL webhook sull'URL copiato in precedenza.
  6. Fai clic su Salva.

5f3c6804d52b87c1.png

  1. Fai clic su Crea.
  2. Seleziona Pagina iniziale.
  3. Seleziona Modifica datastore.
  4. In Impostazioni webhook, fai clic sul pulsante di attivazione/disattivazione Abilita webhook.
  5. Seleziona Adattatore di risposta di Google Chat per webhook.
  6. Imposta tag su arbitrary_tag.
  7. Fai clic su Salva.

442fcaaec9b8f2e3.png

App di prova

  • In Google Chat, invia What is Google Chat? con un messaggio diretto all'app Google Chat. L'agente risponde con qualcosa di significativo e una scheda con fonti, se presenti.

9468866bfe848bb8.png

10. App 3: Creazione

Approfondimento dei concetti

Interazioni conversazionali

Sono gli scambi di informazioni o idee tra due o più persone tramite il linguaggio naturale. Ciò è in contrasto con le interfacce tecniche che spesso si basano su scambi stateless, altamente strutturati e intolleranti.

Specifica OpenAPI

Offre un mezzo coerente per trasferire le informazioni in ogni fase del ciclo di vita dell'API. È un linguaggio di specifica per le API HTTP che definisce la struttura e la sintassi in modo diverso dal linguaggio di programmazione in cui è creata l'API. Le specifiche dell'API sono generalmente scritte in YAML o JSON, per consentire una facile condivisione e un uso semplice.

Agente Dialogflow CX

Il componente di base di base delle app degli agenti. In genere, un'app agente ha molti agenti, in cui ogni agente è definito per gestire attività specifiche. I dati dell'agente vengono forniti all'LLM in modo che abbia le informazioni necessarie per rispondere alle domande ed eseguire attività. Ogni agente può fornire informazioni, inviare query a servizi esterni o posticipare la gestione delle conversazioni a un flusso Dialogflow CX o a un altro agente per gestire le attività secondarie.

Strumento Dialogflow CX

Gli strumenti vengono utilizzati per connettere le app degli agenti a sistemi esterni. Questi sistemi possono aumentare la conoscenza delle app degli agenti e consentire loro di eseguire in modo efficiente attività complesse.

Architettura delle recensioni

9d3342d12f3b4dda.png

Questa app Google Chat è stata creata con Dialogflow CX e funziona come segue:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, che è un agente Dialogflow CX ed è associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con un agente.
  4. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Rivedi i flussi

Raccogliere recensioni

a67a5b8b513bfc2c.png

Esamina il codice sorgente

L'unico codice sorgente necessario è la funzione per simulare il servizio di backend che l'agente utilizza come strumento.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "feedback-app-backend",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 * 
 * It always returns OK in plain text.
 */
functions.http('feedback-app-backend', (request, response) => {
    response.send('OK');
});

service-openapi.yaml

// Defines the backend service structure and how to request it.

openapi: 3.1.0
info:
  title: Review Store
  license:
    name: Apache 2.0
    identifier: Apache-2.0
  version: 0.0.1
servers:
  - url: https://us-central1-project-0.cloudfunctions.net
paths:
  /store-review:
    post:
      operationId: storeReview
      summary: Store a new review
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                stars:
                  type: integer
                  format: int64
      responses:
        '200':
          description: success
          content:
            application/json:
              schema:
                type: string

Avvia simulazione del servizio di backend

Esegui il deployment di una funzione Cloud Functions per simulare un servizio di backend che l'app dell'agente Dialogflow CX deve integrare e chiamare come strumento.

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Cloud Functions.

  1. Fai clic su Crea funzione.
  2. In Impostazioni di base, imposta name su function-2.
  3. In Autenticazione, seleziona il pulsante di opzione Consenti chiamate non autenticate.
  4. In Impostazioni di runtime, build, connessioni e sicurezza imposta Numero massimo di istanze su 3.
  5. Tocca Avanti.

e8cf0ee7441bf634.png

  1. Imposta Punto di ingresso su feedback-app-backend.
  2. Sostituisci i contenuti predefiniti con i file che si trovano nella directory feedback-app.
  3. Fai clic su Esegui il deployment.

bdb5cf9f503aa7f6.png

  1. Copia l'URL mentre attendi un paio di minuti per il deployment della funzione.

Crea app agente Dialogflow CX

Crea app

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Generatore di agenti > App.

  1. Fai clic su Nuova app.
  2. Seleziona Agente.
  3. Imposta Nome visualizzato su Feedback App.
  4. Fai clic su Crea.

7ef3dbacee96c5aa.png

Avvia strumento

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Generatore di agenti > App.

  1. Seleziona l'agente Feedback App.
  2. Fai clic su Strumenti > + Crea.
  3. Imposta Nome su review.
  4. Seleziona OpenAPI.
  5. Imposta description sul seguente valore:
The tool takes the number of stars as a parameter of the store review method and saves it in a database for later use.
  1. Sostituisci $URL nel file feedback-app/service-openapi.yaml con l'URL copiato in precedenza.
  2. Imposta YAML Schema sui contenuti modificati del file feedback-app/service-openapi.yaml.
  3. Fai clic su Salva.

58085d6d56b603f7.png

Avvia agente

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Generatore di agenti > App.

  1. Seleziona l'agente Feedback App.
  2. Seleziona Agenti > Agente generativo predefinito.
  3. Imposta Nome agente su Feedback collector.
  4. Imposta goal sul seguente valore:
You are an agent that collects reviews from Google Chat app developers.
A review may be between 0 and 5 stars. The more stars, the more positive the review.
  1. Imposta le instructions sul seguente valore:
If the developer didn't provide the number of stars, ask for the number of stars.
After the developer provides the number of stars of the review, confirm the number with the developer and use ${TOOL: review} to store the review with the number of stars.
If ${TOOL: review} fails, apologize and ask to try again later. Otherwise, thank the developer for the review.
  1. Fai clic su Salva.

ebee7fdfa826b487.png

App di prova

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Generatore di agenti > App.

  1. Seleziona l'agente Feedback App.
  2. Vai ad Agente anteprima.
  3. In Agente, seleziona Raccoglitore di feedback.
  4. In Seleziona modello generativo, seleziona gemini-pro.
  5. Invia il messaggio Hello! per iniziare.

90ca8cb7b2c1cb4b.png

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > Cloud Functions.

  1. Seleziona function-2 > Logs. Alcuni log mostrano Google-Dialogflow come chiamante.

48bfdf1788004d18.png

Integra l'app Google Chat

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Fai clic sul menu delle azioni dell'agente Feedback App.
  3. Fai clic su Copia nome.

Nella console Google Cloud, segui questi passaggi:

  1. Vai alla configurazione dell'API Google Chat.

  1. Imposta Nome agente o risorsa ambiente sul nome dell'agente copiato in precedenza.

df16619a1cb85cf8.png

  • In Google Chat, per iniziare invia Hello! con un messaggio diretto all'app Google Chat. L'agente risponde in modo simile al test dalla console Dialogflow CX.

99a7a0295f122f31.png

11. Esegui la pulizia

Elimina progetto Google Cloud

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, ti consigliamo di eliminare il progetto Google Cloud.

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ᐧ > IAM e amministratore > Impostazioni.

  1. Fai clic su Chiudi.
  2. Inserisci l'ID progetto.
  3. Fai clic su Chiudi comunque.

407699a4e03afea6.png

Elimina progetto Apps Script

Ti consigliamo di eliminare anche il tuo progetto Apps Script.

Nella console di Apps Script, procedi nel seguente modo:

  1. Seleziona il progetto.
  2. Fai clic sul menu delle azioni.
  3. Fai clic su Rimuovi.

fa3a42d7d2201eb9.png

12. Complimenti

Complimenti! Hai creato app di Google Chat con Gemini.

Passaggi successivi

In questo codelab abbiamo presentato solo casi d'uso semplici, ma ci sono molte aree di espansione che potresti prendere in considerazione per le tue app Google Chat, come le seguenti:

  • Eseguire l'integrazione con altri modelli di IA generativa, inclusi i modelli doganali.
  • Supportano altri tipi di contenuti multimediali, ad esempio audio, immagini e video.
  • Usa la multimodalità.
  • Affidati a finestre di contesto più lunghe e cicli di feedback.
  • Pubblicare app Google Chat pronte per la produzione sul marketplace. Sono disponibili molte risorse per gli sviluppatori, ad esempio video di YouTube, siti web con documentazione, esempi di codice e tutorial.
  • Attivare Google Chat per la tua organizzazione. La funzionalità modalità di importazione semplifica l'avvio.

Scopri di più