Questo tutorial mostra come creare un'app Google Chat che aiuti gli utenti di Google Chat a gestire i propri contatti personali e aziendali. Per raccogliere informazioni, l'app Chat chiede agli utenti di compilare un modulo di contatto nei messaggi e nelle finestre di dialogo delle schede.
Guarda l'app Chat in azione:
-
Figura 1. L'app di chat risponde al comando slash /about
con un messaggio di testo e un pulsante che apre un modulo di contatto. -
Figura 2. L'app Chat apre una finestra di dialogo in cui gli utenti possono inserire informazioni su un contatto. -
Figura 3. L'app Chat restituisce una finestra di dialogo di conferma in modo che gli utenti possano esaminare e confermare le informazioni prima dell'invio. -
Figura 4. Dopo l'invio del modulo, l'app Chat invia un messaggio di testo privato per confermare l'invio. -
Figura 5. L'app Chat chiede anche agli utenti di aggiungere un contatto da una scheda in un messaggio.
Prerequisiti
- Un account Google Workspace Business o Enterprise con accesso a Google Chat.
Obiettivi
- Progetta e crea interfacce utente (UI)
come oggetti
card
e visualizza le UI in messaggi e finestre di dialogo. - Ricevere ed elaborare le informazioni inviate dagli utenti utilizzando i widget di input dei moduli.
- Rispondi ai comandi con messaggi contenenti testo, schede e widget per accessori.
Architettura
L'app Chat è integrata in Google Apps Script e utilizza eventi di interazione per elaborare e rispondere agli utenti di Chat.
Di seguito viene mostrato come un utente potrebbe interagire in genere con l'app Chat:
Un utente apre un messaggio diretto con l'app Chat o aggiunge l'app Chat a uno spazio esistente.
L'app Chat chiede all'utente di aggiungere un contatto creando e visualizzando un modulo di contatto come oggetto
card
. Per presentare il modulo di contatto, l'app Chat risponde agli utenti nei seguenti modi:- Risponde alle @menzioni e ai messaggi diretti con un messaggio scheda che contiene il modulo di contatto.
- Risponde al comando slash
/addContact
aprendo una finestra di dialogo con il modulo di contatto. - Risponde al comando slash
/about
con un messaggio di testo che include un pulsante Aggiungi un contatto su cui gli utenti possono fare clic per aprire una finestra di dialogo con il modulo di contatto.
Quando viene visualizzato il modulo di contatto, l'utente inserisce i dati di contatto nei seguenti campi e widget:
- Nome e cognome: un
textInput
widget che accetta stringhe. - Data di nascita: un
dateTimePicker
widget che accetta solo date. - Tipo di contatto: un
selectionInput
widget di pulsanti di opzione che consente agli utenti di selezionare e inviare un singolo valore stringa (Personal
oWork
). - Pulsante Rivedi e invia: un
buttonList
array con il widgetbutton
su cui l'utente fa clic per inviare i valori che inserisce.
- Nome e cognome: un
L'app Google Chat gestisce un evento di interazione
CARD_CLICKED
per elaborare i valori inseriti dall'utente e li visualizza in una scheda di conferma.L'utente esamina la scheda di conferma e fa clic sul pulsante Invia per finalizzare i dati di contatto.
L'app Google Chat invia un messaggio privato che conferma l'invio.
Prepara l'ambiente
Questa sezione mostra come creare e configurare un progetto Google Cloud per l'app di chat.
Crea un progetto Google Cloud
Console Google Cloud
- Nella console Google Cloud, vai a Menu > IAM e amministrazione > Crea un progetto.
-
Nel campo Nome progetto, inserisci un nome descrittivo per il progetto.
(Facoltativo) Per modificare l'ID progetto, fai clic su Modifica. L'ID progetto non può essere modificato dopo la creazione del progetto, quindi scegli un ID che soddisfi le tue esigenze per l'intera durata del progetto.
- Nel campo Posizione, fai clic su Sfoglia per visualizzare le potenziali posizioni per il tuo progetto. Quindi, fai clic su Seleziona.
- Fai clic su Crea. La console Google Cloud passa alla pagina Dashboard e il progetto viene creato entro pochi minuti.
Interfaccia a riga di comando gcloud
In uno dei seguenti ambienti di sviluppo, accedi a Google Cloud
CLI (gcloud
):
-
Cloud Shell: per utilizzare un terminale online con gcloud CLI
già configurato, attiva Cloud Shell.
Attiva Cloud Shell -
Shell locale: per utilizzare un ambiente di sviluppo locale,
installa e
inizializza
gcloud CLI.
Per creare un progetto Cloud, utilizza il comandogcloud projects create
: Sostituisci PROJECT_ID impostando l'ID del progetto che vuoi creare.gcloud projects create PROJECT_ID
Configurare l'autenticazione e l'autorizzazione
Le app Google Chat richiedono la configurazione di una schermata per il consenso OAuth in modo che gli utenti possano autorizzare la tua app nelle applicazioni Google Workspace, tra cui Google Chat.
In questo tutorial, esegui il deployment di un'app Chat solo per test e uso interno, quindi puoi utilizzare informazioni segnaposto per la schermata di consenso. Prima di pubblicare l'app Chat, sostituisci le informazioni segnaposto con informazioni reali.
Nella console Google Cloud, vai a Menu > > Branding.
Se hai già configurato , puoi configurare le seguenti impostazioni della schermata per il consenso OAuth in Branding, Pubblico e Accesso ai dati. Se viene visualizzato un messaggio che indica non ancora configurata, fai clic su Inizia:
- In Informazioni sull'app, nella sezione Nome app, digita
Contact Manager
. - In Email di assistenza utenti, seleziona il tuo indirizzo email o un gruppo Google appropriato.
- Fai clic su Avanti.
- Nella sezione Pubblico, seleziona Interno. Se non riesci a selezionare Interno, seleziona Esterno.
- Fai clic su Avanti.
- Nella sezione Informazioni di contatto, inserisci un indirizzo email a cui ricevere notifiche relative a eventuali modifiche al tuo progetto.
- Fai clic su Avanti.
- In Fine, esamina le Norme relative ai dati utente dei servizi API di Google e, se le accetti, seleziona Accetto le Norme relative ai dati utente dei servizi API di Google.
- Fai clic su Continua.
- Fai clic su Crea.
- Se hai selezionato Esterno per il tipo di utente, aggiungi utenti di test:
- Fai clic su Segmento di pubblico.
- Nella sezione Utenti di test, fai clic su Aggiungi utenti.
- Inserisci il tuo indirizzo email e gli altri utenti di test autorizzati, quindi fai clic su Salva.
- In Informazioni sull'app, nella sezione Nome app, digita
Creare e distribuire l'app di chat
Nella sezione seguente, copierai e aggiornerai un intero progetto Apps Script che contiene tutto il codice dell'applicazione richiesto per la tua app di chat, quindi non è necessario copiare e incollare ogni file.
Se vuoi, puoi visualizzare l'intero progetto su GitHub.
Ecco una panoramica di ogni file:
main.gs
Gestisce tutta la logica dell'app, inclusi gli eventi di interazione relativi al momento in cui gli utenti inviano messaggi all'app Chat, fanno clic sui pulsanti di un messaggio dell'app Chat o aprono e chiudono le finestre di dialogo.
Visualizza il codice
main.gs
contactForm.gs
Contiene i widget che ricevono i dati del modulo dagli utenti. Questi widget di input del modulo vengono visualizzati nelle schede che compaiono nei messaggi e nelle finestre di dialogo.
Visualizza il codice
contactForm.gs
appsscript.json
Il manifesto Apps Script che definisce e configura il progetto Apps Script per l'app Chat.
Visualizza il codice
appsscript.json
Trovare il numero e l'ID del progetto Cloud
Nella console Google Cloud, vai al tuo progetto Cloud.
Fai clic su Impostazioni e utilità > Impostazioni progetto.
Prendi nota dei valori nei campi Numero progetto e ID progetto. Li utilizzerai nelle sezioni seguenti.
Crea il progetto Apps Script
Per creare un progetto Apps Script e connetterlo al tuo progetto Cloud:
- Fai clic sul seguente pulsante per aprire il progetto Apps Script Gestisci contatti in Google Chat.
Apri il progetto - Fai clic su Panoramica.
- Nella pagina di panoramica, fai clic su
Crea una copia.
Assegna un nome alla tua copia del progetto Apps Script:
Fai clic su Copia di Gestisci i contatti in Google Chat.
In Titolo del progetto, digita
Contact Manager - Google Chat app
Fai clic su Rinomina.
Imposta il progetto cloud del progetto Apps Script
- Nel tuo progetto Apps Script,
fai clic su
Impostazioni progetto.
- In Progetto Google Cloud (GCP), fai clic su Cambia progetto.
- In Numero di progetto Google Cloud, incolla il numero di progetto del tuo progetto Cloud.
- Fai clic su Imposta progetto. Il progetto Cloud e il progetto Apps Script sono ora connessi.
Crea un deployment Apps Script
Ora che tutto il codice è a posto, esegui il deployment del progetto Apps Script. Utilizzi l'ID deployment quando configuri l'app Chat in Google Cloud.
In Apps Script, apri il progetto dell'app Chat.
Fai clic su Esegui il deployment > Nuovo deployment.
Se Componente aggiuntivo non è già selezionato, accanto a Seleziona tipo, fai clic sui tipi di deployment
e seleziona Componente aggiuntivo.
In Descrizione, inserisci una descrizione per questa versione, ad esempio
Test of Contact Manager
.Fai clic su Esegui il deployment. Apps Script segnala la riuscita del deployment e fornisce un ID deployment.
Fai clic su
Copia per copiare l'ID deployment, quindi fai clic su Fine.
Configurare l'app Chat nella console Google Cloud
Questa sezione mostra come configurare l'API Google Chat nella console Google Cloud con informazioni sulla tua app di chat, incluso l'ID del deployment che hai appena creato dal tuo progetto Apps Script.
Nella console Google Cloud, fai clic su Menu > Altri prodotti > Google Workspace > Libreria di prodotti > API Google Chat > Gestisci > Configurazione.
In Nome app, digita
Contact Manager
.In URL avatar, digita
https://developers.google.com/chat/images/contact-icon.png
.In Descrizione, digita
Manage your personal and business contacts
.Fai clic sul pulsante di attivazione/disattivazione Abilita funzionalità interattive in modo che sia impostato su On.
In Funzionalità, seleziona Partecipa a spazi e conversazioni di gruppo.
Nella sezione Impostazioni di connessione, seleziona Apps Script.
In ID deployment, incolla l'ID deployment di Apps Script che hai copiato nella sezione precedente quando hai creato il deployment di Apps Script.
Nella sezione Comandi, configura i comandi slash
/about
e/addContact
:- Fai clic su Aggiungi un comando slash per configurare il primo comando slash.
- In Nome, digita
About
. - In ID comando, digita
1
. - In Descrizione, digita
Learn how to use this Chat app to manage your contacts
. - In Tipo di comando, seleziona
Slash command
. - In Nome comando slash, digita
/about
. - Seleziona Apre una finestra di dialogo.
- Fai clic su Fine.
- Fai clic su Aggiungi un comando per configurare un altro comando slash.
- In Nome, digita
Add a contact
. - In ID comando, digita
2
. - In Descrizione, digita
Submit information about a contact
. - In Tipo di comando, seleziona
Slash command
. - In Nome comando slash, digita
/addContact
. - Seleziona Apre una finestra di dialogo.
- Fai clic su Fine.
In Visibilità, seleziona la casella di controllo Rendi disponibile l'app di chat a utenti e gruppi specifici in YOUR DOMAIN e inserisci il tuo indirizzo email.
In Log, seleziona Errori di log in Logging.
Fai clic su Salva. Viene visualizzato un messaggio di conferma del salvataggio della configurazione.
L'app Chat è pronta per l'installazione e il test in Chat.
Testare l'app Chat
Per testare l'app Chat, apri uno spazio di messaggi diretti con l'app Chat e invia un messaggio:
Apri Google Chat utilizzando l'account Google Workspace che hai fornito quando ti sei aggiunto come tester attendibile.
- Fai clic su Nuova chat.
- Nel campo Aggiungi una o più persone, digita il nome della tua app Chat.
Seleziona l'app di chat dai risultati. Si apre un messaggio diretto.
Nel nuovo messaggio diretto con l'app Chat, digita
/addContact
e premi Invio.Nella finestra di dialogo che si apre, inserisci i dati di contatto:
- Nel campo di testo Nome e cognome, inserisci un nome.
- Nel selettore della data Data di nascita, seleziona una data.
- In Tipo di contatto, seleziona il pulsante di opzione Lavoro o Personale.
Fai clic su Rivedi e invia.
Nella finestra di dialogo di conferma, rivedi le informazioni che hai inviato e fai clic su Invia. L'app Chat risponde con un messaggio di testo che dice
✅ CONTACT NAME has been added to your contacts.
.In alternativa, puoi testare e inviare il modulo di contatto nei seguenti modi:
- Utilizza il comando slash
/about
. L'app di chat risponde con un messaggio di testo e un pulsante del widget accessorio con il testoAdd a contact
. Puoi fare clic sul pulsante per aprire una finestra di dialogo con il modulo di contatto. - Invia all'app Chat un messaggio diretto senza un comando slash, ad esempio
Hello
. L'app Chat risponde con un testo e una scheda che contiene il modulo di contatto.
- Utilizza il comando slash
Esegui la pulizia
Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, ti consigliamo di eliminare il progetto Cloud.
- Nella console Google Cloud, vai alla pagina Gestisci risorse. Fai clic su Menu > IAM e amministrazione > Gestisci risorse.
- Nell'elenco dei progetti, seleziona quello 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.
Argomenti correlati
- Rispondere ai comandi
- Raccogliere ed elaborare le informazioni degli utenti di Google Chat
- Aprire finestre di dialogo interattive
- Esplorare altri esempi di app Google Chat