Acquista online Ritiro in negozio: pasto Bonjour - Parte 1 - Per iniziare

1. Introduzione

637766505206e0a1.png c604dca3ca211399.png

Ultimo aggiornamento: 11/05/2022

Ti diamo il benvenuto in Business Messages.

Questo codelab è un'introduzione all'integrazione con Business Messages, che consente ai clienti di entrare in contatto con le attività che gestisci tramite la Ricerca Google e Maps. Potresti essere un'attività che vuole integrarsi direttamente con Business Messages, oppure potresti lavorare presso un fornitore di software indipendente che crea soluzioni di messaggistica per le attività con cui collabori o magari hai appena scoperto Business Messages e vuoi sperimentare la piattaforma.

A prescindere dal motivo che ti ha portato qui, questo codelab è un ottimo modo per iniziare. Al termine, avrai il tuo primo agente digitale con cui gli utenti potranno interagire. Quando sarai pronto per il lancio su Business Messages dopo un ulteriore perfezionamento, avrai il potenziale per raggiungere milioni di clienti.

Quali sono le caratteristiche di un buon agente digitale?

Business Messages è una piattaforma conversazionale che offre un'esperienza simile a quella di un'app sui dispositivi mobili e consente ai consumatori di entrare in contatto con le attività senza installare un'app aggiuntiva. Un agente digitale è la parte di logica con cui interagiscono i tuoi clienti. La logica è gestita da un'applicazione web di cui è stato eseguito il deployment nel cloud o nella tua infrastruttura. Dipende interamente da te come rispondere all'utente. I migliori agenti forniscono il contesto per definire le aspettative, mantenere il coinvolgimento dei clienti e fornire funzionalità per soddisfare le esigenze degli utenti.

Cosa creerai

In questo codelab, creerai un agente digitale su Business Messages per un'azienda fittizia chiamata Bonjour Meal. Questo agente digitale risponderà a semplici domande come "A che ora chiudete?" o "Posso acquistare online?".

In questo codelab, gli utenti potranno acquistare articoli tramite l'agente digitale, indirizzare l'utente a un elaboratore di pagamenti per riscuotere denaro e quindi programmare il ritiro in negozio dei loro articoli fittizi.

In questo codelab, la tua app:

  • Rispondere alle domande tramite un chip di suggerimento
  • Guida l'utente a porre domande a cui il tuo agente virtuale può rispondere
  • Fornire funzionalità conversazionali avanzate per mantenere alto il coinvolgimento dell'utente nella conversazione

883b5a7f9f266276.png

Cosa imparerai a fare

  • Come eseguire il deployment di un'applicazione web su App Engine su Google Cloud. In alternativa, puoi utilizzare ngrok per testare pubblicamente la tua applicazione locale.
  • Come configurare l'account Business Messages con un webhook dell'applicazione web per ricevere messaggi dagli utenti
  • Come inviare funzionalità avanzate come schede, caroselli e suggerimenti conversazionali con l'API Business Messages
  • In che modo Business Messages invia i tuoi messaggi

Questo codelab si concentra sulla creazione del tuo primo agente digitale.

Che cosa ti serve

  • Registrarsi per un account sviluppatore Business Communications senza costi
  • Visitate il nostro sito per sviluppatori per istruzioni su come
  • Un dispositivo Android con la versione 5 o successive OPPURE un dispositivo iOS con l'app Google Maps
  • Esperienza di programmazione di applicazioni web
  • Una connessione a internet.

2. Preparazione

Abilita le API

Per questo codelab, poiché lavoreremo con un'applicazione Django, ci affideremo all'API Cloud Build per eseguire il deployment dell'applicazione in App Engine. In alternativa, se utilizzi ngrok, non è necessario abilitare l'API Cloud Build.

Per abilitare l'API Cloud Build:

  1. Apri l'API Cloud Build nella console Google Cloud.
  2. Fai clic su Abilita.

Creare un account di servizio

Per accedere alle API Business Communications e Business Messages, devi creare un service account. Segui i passaggi descritti nella documentazione per creare un service account nella Business Communications Developer Console.

Esegui il deployment del codice iniziale di Django Python EchoBot

In un terminale, clona l'esempio di bot di eco Django nella directory di lavoro del tuo progetto con il seguente comando:

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

Copia il file delle credenziali JSON creato per l'account di servizio nella cartella delle risorse del campione e rinomina le credenziali in "bm-agent-service-account-credentials.json".

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

In un terminale, vai alla directory step-1 dell'esempio.

Esegui questi comandi in un terminale per eseguire il deployment dell'esempio:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
  • PROJECT_ID è l'ID progetto del progetto che hai utilizzato per registrarti alle API.

Prendi nota dell'URL dell'applicazione di cui è stato eseguito il deployment nell'output dell'ultimo comando:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Il codice iniziale che hai appena implementato contiene un'applicazione web con un webhook per ricevere messaggi da Business Messages. L'applicazione ripete i messaggi all'utente e può mostrare alcune delle funzionalità avanzate disponibili nell'interfaccia conversazionale.

Configura il webhook

Ora che il servizio è stato implementato, utilizzerai l'URL dell'applicazione per impostare l'URL del webhook nella pagina Impostazioni account della Business Communications Developer Console.

L'URL webhook sarà l'URL dell'applicazione + "/callback/". Ad esempio, potrebbe essere simile a questo: https://PROJECT_ID.appspot.com/callback/

Vai alla pagina Impostazioni account della Business Communications Console. Nell'angolo in alto a destra, sotto la barra di navigazione, dovresti vedere il nome del progetto GCP. Se vedi un menu a discesa, assicurati di selezionare il tuo progetto Google Cloud.

Compila i dettagli del punto di contatto tecnico, quindi aggiorna Webhook con l'URL webhook per l'applicazione di cui è stato eseguito il deployment.

ceb66c905ded40be.png

Fai clic su Salva accanto al riferimento del tuo progetto GCP.

3. Creazione del tuo primo agente

Utilizzo di Business Communications Developer Console

Nella Business Communications Console, fai clic sul logo in alto a sinistra per tornare alla dashboard della console, quindi fai clic su Crea agente. Crei un brand contemporaneamente alla creazione dell'agente. Seleziona Messaggi per le attività per Tipo di agente e assicurati che le Informazioni sul partner siano corrette.

In Brand, digita il nome del brand che stai creando.Il brand è l'attività con cui collabori e i consumatori possono interagire in modo conversazionale con l'agente. In Nome agente, specifica cosa vuoi che gli utenti vedano nella conversazione di Business Messages. Nel caso del pasto fittizio Bonjour, Bonjour Rail è la compagnia ferroviaria che gestisce i ristoranti Bonjour Meal. Quindi, specificherò Bonjour Rail come brand e Bonjour Meal come agente.

L'agente è l'entità conversazionale che rappresenta il brand.

88a9798e6546eb4e.png

Fai clic su Crea agente e lascia che la console faccia un po' di magia. Questa richiesta richiede alcuni secondi per effettuare diverse richieste all'API Business Communications per creare il brand e l'agente. Puoi utilizzare l'API Business Communications direttamente per creare un agente e un brand. Consulta la documentazione per vedere come apparirebbe una richiesta curl per fare le stesse cose che fa la console.

Avere la tua prima conversazione

Apri l'agente che hai appena creato. Verrà visualizzata una pagina Panoramica che ti consente di iniziare a esaminare i dettagli dell'agente. Dai un'occhiata agli URL di test dell'agente. Questi URL vengono utilizzati per richiamare la superficie conversazionale sul tuo dispositivo.

f6bd8ded561db36f.png

Puoi copiare l'URL di test facendo clic su uno dei chip. Naturalmente, copia l'URL di test per il dispositivo che hai a portata di mano per eseguire il test. Invia questo messaggio copiato al tuo dispositivo nel modo che preferisci.

Una volta sul dispositivo mobile, toccando il link viene richiamato il launcher dell'agente Business Messages con l'URL di test dell'agente precompilato.

Tocca Avvia per richiamare la superficie conversazionale del tuo agente.

2bf9f282e09062de.png

Interagisci con l'agente e scopri cosa può fare. Nella maggior parte dei casi, la superficie conversazionale ripeterà solo i tuoi messaggi. Invia un messaggio come "Hello, World!" e vedrai che l'agente ti invierà lo stesso messaggio.

L'applicazione di cui è stato eseguito il deployment contiene anche una logica per mostrare le funzionalità avanzate disponibili in Business Messages.

  • Se invii "scheda", verrà visualizzata una scheda interattiva
  • Se invii "chip", verranno visualizzati i chip di suggerimento
  • Se invii "carosello", verrà visualizzato un carosello di schede interattive

Complimenti! Questa è la prima conversazione del tuo agente, con te.

Ciascuna delle funzionalità avanzate può essere utilizzata per fornire un contesto migliore alla persona che comunica con il tuo agente. Invia asset grafici nelle schede avanzate per comunicare meglio le idee o utilizza i chip di suggerimento per guidare la conversazione.

Aggiornare il messaggio di benvenuto e utilizzare i chip di conversazione

Facciamo un po' di pratica con la Developer Console, vediamo come modificare il messaggio di benvenuto dell'agente e come utilizzare i chip di suggerimento per aiutare l'utente a comunicare.

Vai alla pagina Panoramica dell'agente e seleziona Informazioni agente. Scorri verso il basso fino alla sezione del messaggio di benvenuto e degli spunti di conversazione.

4323f988216fa054.png

Aggiorna il messaggio di benvenuto (il campo di input giallo) in modo che reciti:

Ti diamo il benvenuto nell'agente iniziale Bonjour Meal. Posso ripetere i tuoi messaggi e mostrarti alcune delle funzionalità avanzate supportate sulla piattaforma. Prova questi suggerimenti.

Fai clic su + Aggiungi spunto di conversazione, come indicato nella casella viola dell'immagine sopra, per aggiungere spunti di conversazione per richiamare chip di suggerimento, carosello e scheda. Gli spunti di conversazione che aggiungi devono avere un componente di testo e un componente postbackData. Il testo è ciò che viene mostrato all'utente, mentre i dati di postback sono ciò che viene inviato al webhook dell'agente. Il webhook analizza i dati di postback e invia la risposta appropriata all'utente. 906bc74668a1b215.png

Dopo la modifica, la sezione Informazioni agente nella console avrà questo aspetto:

8e96b0a10edd20af.png

Sul lato destro della console, viene visualizzata un'anteprima dell'aspetto dell'agente. Hai notato come il messaggio di benvenuto riflette la modifica appena apportata e i chip di suggerimento sottostanti?

È un ottimo strumento per farsi un'idea di come sarà l'esperienza utente. Puoi utilizzarlo mentre crei l'agente e pianifichi i percorsi utente che vuoi supportare.

Purtroppo, non potremo vedere immediatamente queste modifiche nella conversazione, poiché i dati precedenti vengono memorizzati nella cache all'interno dell'infrastruttura di Business Messages. La cache viene cancellata circa ogni due ore, quindi dovresti essere in grado di provare questa funzionalità domani.

Nel frattempo, vediamo come funziona tutto.

4. Analisi del codice di avvio

Una panoramica del codice sorgente

Il codice iniziale che hai implementato ripete i messaggi agli utenti e può presentare una scheda avanzata, un carosello o chip di suggerimenti. Analizziamo più nel dettaglio il codice sorgente per capire come funziona. Poi capiremo cosa dovremo cambiare.

Il codice iniziale è un progetto Django. In una parte successiva di questa serie di codelab, utilizzeremo Google Datastore per rendere persistenti i dati come i carrelli e le conversazioni associate. Non preoccuparti se non hai mai utilizzato Django prima, è piuttosto semplice e alla fine di questo codelab avrai imparato come funziona.

A livello generale, Django indirizza gli URL alle visualizzazioni e la logica di visualizzazione produce un modello che viene visualizzato nel browser. Diamo un'occhiata al file urls.py del progetto.

bm-django-echo-bot/bmcodelab/urls.py [righe 31-37]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

Qui sono definite due route, quindi Django può eseguire la logica se questi due URL vengono riconosciuti. Dato che l'URL del progetto è https://PROJECT_ID.appspot.com/, le route di cui il progetto è a conoscenza sono:

  • https://PROJECT_ID.appspot.com/
  • https://PROJECT_ID.appspot.com/callback/

Entrambi i percorsi URL fanno riferimento a bopis_views, che proviene da bopis/views.py. Diamo un'occhiata a cosa sta succedendo in questo file. Per iniziare, cerchiamo di capire cos'è bopis_views.landing_placeholder.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [righe 302-309]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

Questo bit di logica viene eseguito dal server web quando riceve una richiesta web che punta alla radice del progetto. Qui non succede nulla di troppo elaborato: restituiamo semplicemente una HTTPResponse contenente un po' di HTML al browser che ha effettuato la richiesta. Quindi sì, puoi aprire l'URL principale del progetto, ma non c'è molto da fare perché ti riporta a questo codelab.

L'altro URL indirizza a una funzione chiamata callback, anch'essa in bopis/views.py. Diamo un'occhiata a questa funzione.

bm-django-echo-bot/bopis/views.py [righe 60-101]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

La logica qui analizza il corpo della richiesta per un messaggio o una suggestionResponse e passa queste informazioni a una funzione chiamata route_message, quindi restituisce un HttpResponse all'infrastruttura di Business Messages per confermare la ricezione del messaggio.

Questa è una funzione importante. Questo bit di logica è il webhook della tua applicazione web, che riceve i messaggi degli utenti che interagiscono con il tuo agente. Puoi estendere il webhook per inviare messaggi a uno strumento di automazione come Dialogflow per comprendere ciò che un utente potrebbe dire e produrre una risposta da questa inferenza. Puoi anche inoltrare il messaggio in modo che l'utente possa contattare un operatore. Vedi il seguente diagramma:

b10113f9d037e6a5.png

Business Messages invia i contenuti del messaggio come payload JSON al webhook, dove vengono indirizzati a un operatore o a una logica per rispondere come bot. Questo meccanismo di routing, nel nostro caso, è route_message. Diamo un'occhiata.

bm-django-echo-bot/bopis/views.py [righe 105-122]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Questa logica inizia a esaminare il messaggio ricevuto dall'utente. Innanzitutto, il messaggio viene normalizzato convertendo tutti i caratteri in minuscolo. Una volta normalizzato, controlla se il messaggio corrisponde a una delle costanti definite nella parte superiore del file.

bm-django-echo-bot/bopis/views.py [righe 40-42]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

Ciò significa che il bot analizza i messaggi che contengono specificamente una delle stringhe inserite in postback_data degli spunti di conversazione del passaggio precedente di questo codelab. Se nessuna di queste stringhe viene visualizzata, il messaggio viene semplicemente passato a una funzione chiamata echo_message, che, come puoi immaginare, ripete i messaggi.

Invio di messaggi

A questo punto dovresti avere un'idea di come vengono ricevuti i messaggi dall'applicazione web. Tutto viene gestito dal webhook.

Ma in che modo l'applicazione invia un messaggio in uscita a un utente utilizzando Business Messages?

a9475b1da93a83e8.png

Quando la tua infrastruttura risponde all'utente, invii la risposta all'API Business Messages, che consegna il messaggio all'utente.

L'API Business Messages ha librerie in Python, Node.js e Java. Abbiamo anche un'API REST a cui puoi inviare richieste direttamente se la tua infrastruttura non è in una lingua per cui abbiamo una libreria. Consulta Invio di messaggi per scoprire come viene utilizzato cURL per inviare un messaggio a un ID conversazione specifico.

Ai fini di questo codelab, ci concentreremo sull'utilizzo della libreria client Python già integrata nel codice iniziale di Bonjour Meal, che è stato implementato in App Engine nel tuo progetto GCP o eseguito localmente tramite ngrok.

Esaminiamo la funzione echo_message e vediamo come interagiamo con l'API per inviare il messaggio a Business Messages.

bm-django-echo-bot/bopis/views.py [righe 199-212]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

In questa funzione, viene creata un'istanza di BusinessMessagesMessage con la variabile message passata alla funzione echo_message. Una volta creata un'istanza, l'oggetto viene passato a send_message insieme all'ID conversazione.

bm-django-echo-bot/bopis/views.py [righe 214-236]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

La funzione send_message utilizza le credenziali del tuo service account per verificare che tu possa inviare messaggi a questa conversazione, istanziare un client Business Messages e creare una richiesta per inviare il messaggio al conversation ID specificato.

Anche le funzionalità avanzate utilizzano questa funzione send_message, ma i messaggi che creano sono specifici per le schede avanzate, i caroselli e i chip di suggerimento. Le schede avanzate e i caroselli possono includere asset grafici, mentre i chip di suggerimento hanno postback_data in modo che la logica di callback possa analizzarli in modo appropriato.

Ora che abbiamo visto come inviare un messaggio, esaminiamo come l'esempio invia schede interattive, caroselli e chip di suggerimento. Nella sezione seguente modificheremo il codice sorgente per inviare messaggi con alcune di queste funzionalità avanzate.

Quando è tutto pronto, personalizziamo l'agente Bonjour Meal.

5. Personalizzare l'agente

Se hai seguito il codelab finora, dovresti vedere il nostro bellissimo agente.

906bc74668a1b215.png

Ok, non è così bello, in realtà sembra un po' spoglio e non rappresenta molto bene la nostra attività. Fortunatamente, abbiamo una conoscenza di base del codice che supporta l'agente e gli strumenti necessari per personalizzarlo nel modo che preferiamo.

Nella parte restante di questo codelab, estenderemo l'agente con quanto segue:

  • Includere un logo effettivo
  • Messaggio di benvenuto migliorato
  • Fornisci informazioni sull'orario di apertura
  • Fai sapere all'utente che l'acquisto di articoli online sarà disponibile a breve
  • Utilizzo di chip di suggerimenti conversazionali per facilitare la conversazione

Sfrutteremo la Business Communications Console per aggiornare il logo e il messaggio di benvenuto, ma hai sempre la possibilità di utilizzare direttamente le API Business Communications per fare la stessa cosa. Dovremo quindi aggiornare il codice sorgente per inviare messaggi appropriati per fornire informazioni sull'orario di apertura e sul fatto che Bonjour Meal offrirà presto una funzionalità di acquisto online. Al termine, torneremo alla Business Communications Console e creeremo chip di suggerimenti conversazionali per guidare la conversazione verso le esperienze di percorso felice supportate dall'agente digitale.

Nella console Business Communications, seleziona il tuo agente e vai a Informazioni sull'agente. Dovremo aggiornare il logo dell'attività, come indicato in giallo di seguito.

eb6b8ac6b62387ee.png

Fai clic su Carica e potrai selezionare un'immagine da caricare o importare da un URL.

Consulta le linee guida per la progettazione dei loghi nella documentazione per scoprire le best practice che consigliamo per l'utilizzo dei tuoi loghi.

Carichiamo il logo che si trova nel codice sorgente che hai clonato all'inizio di questo codelab. Puoi trovarlo nella directory ./assets/ del repository e il file si chiama "bonjour_meal-logo.png". Puoi trascinare il file nella finestra modale del browser web. Verrà visualizzato un semplice strumento di modifica per manipolare la qualità e il ritaglio dell'immagine. Regola la risoluzione e il ritaglio dell'immagine in modo che non superi il limite di 50 KB. Quando l'immagine ti soddisfa, fai clic sul segno di spunta nel cerchio blu per confermare e poi su Seleziona nella parte inferiore della finestra modale.

1856081f59623ae2.png

Infine, fai clic su Salva in alto a destra nella pagina Informazioni sull'agente. Questa modifica richiederà un po' di tempo per essere visualizzata sul tuo dispositivo, poiché le informazioni dell'agente vengono memorizzate nella cache dei nostri server e dovrebbero essere visibili entro due ore dalla modifica.

Aggiornare il messaggio di benvenuto

L'aggiornamento del messaggio di benvenuto è un'operazione che abbiamo già eseguito in precedenza in questo codelab. Facciamolo di nuovo, ma questa volta configuriamo un messaggio di benvenuto più adatto al percorso dell'utente di Bonjour Meal.

Nella console Business Communications, seleziona l'agente e vai a Informazioni sull'agente. Scorri verso il basso fino al campo di input Messaggio di benvenuto, dove puoi aggiornare il messaggio.

6598fec47021136e.png

Sapendo che aggiungeremo degli spunti di conversazione, possiamo farvi riferimento nel nostro messaggio di benvenuto. Nel campo di input, sostituiscilo con il seguente testo:

"Benvenuto in Bonjour Meal. Sono un assistente che può aiutarti a rispondere alle tue domande su Bonjour Meal. Prova alcune delle seguenti opzioni."

Infine, fai clic su Salva in alto a destra nella pagina Informazioni sull'agente. Anche questa modifica richiederà un po' di tempo per essere applicata a causa del nostro meccanismo di memorizzazione nella cache, che garantisce la velocità di caricamento.

Fornire informazioni sull'orario di apertura

Per fornire queste informazioni agli utenti, invieremo un messaggio personalizzato all'utente utilizzando l'API Business Messages.

Potresti ricordare che i messaggi vengono analizzati nella funzione route_message di views.py. La funzione normalizza prima la stringa e poi inizia a verificare se il messaggio normalizzato corrisponde a uno dei parametri codificati. Per semplicità, aggiungiamo una condizione aggiuntiva in cui verifichiamo se il messaggio normalizzato è uguale a una nuova costante che chiameremo CMD_BUSINESS_HOURS_INQUIRY e che conterrà il valore "business-hours-inquiry". Se la condizione restituisce il valore true, richiameremo una funzione denominata send_message_with_business_hours.

La funzione route_message ora avrà il seguente aspetto:

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Affinché il codice funzioni, dobbiamo apportare altre due modifiche: la prima consiste nel definire CMD_BUSINESS_HOURS_INQUIRY insieme alle altre costanti, la seconda nel definire effettivamente la funzione send_message_with_business_hours e inviare un messaggio utilizzando l'API Business Messages.

Definiamo innanzitutto la costante nella parte superiore del file con le altre dichiarazioni di costanti:

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

Ora, per definire send_message_with_business_hours. Puoi definire questa funzione in qualsiasi punto del file, seguendo la sintassi Python appropriata. Poiché questa funzione invia semplicemente un messaggio, proprio come echo_message, puoi utilizzarla come modello per definirla.

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

In questo modo, il nostro bot dovrebbe essere in grado di rispondere all'utente con questi orari di apertura quando invia il messaggio "business-hours-inquiry". Puoi aspettarti qualcosa di simile:

125802166995afd5.png

Una volta eseguito il deployment del codice sorgente su GCP, le modifiche saranno immediatamente visibili. Non memorizziamo nella cache l'applicazione web in Google Cloud Platform nello stesso modo in cui vengono memorizzate nella cache le informazioni dell'agente, quindi potrai testare subito questa esperienza.

Anche se abbiamo fatto progressi con le modifiche alle origini, apportiamo un'altra modifica che consentirà a un utente di chiedere informazioni sugli acquisti online. L'agente digitale risponderà dicendo che la funzionalità non è ancora disponibile, ma di tornare a controllare più tardi.

Comunicare all'utente che gli acquisti online saranno presto disponibili

Apporteremo una modifica simile a quella che abbiamo apportato per informare l'utente dell'orario di apertura. Questa volta, inseriamo le informazioni in una scheda avanzata insieme a un'immagine coinvolgente.

Analizza il messaggio normalizzato e controlla una condizione per una costante denominata CMD_ONLINE_SHOPPING_INQUIRY con il valore impostato su "online-shopping-inquiry", che richiama send_online_shopping_info_message se la condizione è true.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Ora definiamo send_online_shopping_info_message. Vogliamo che questo messaggio venga inviato in una scheda avanzata con un'immagine, quindi copiamo la funzione send_rich_card da utilizzare come modello per definire send_online_shopping_info_message.

Per prima cosa, aggiorniamo il testo di riserva con un messaggio appropriato. Il testo di riserva viene utilizzato se il dispositivo non può ricevere una scheda avanzata per qualche motivo. A questo punto, aggiorniamo BusinessMessagesRichCard in modo che includa un titolo, una descrizione, suggerimenti e un campo multimediale pertinenti. La funzione dovrebbe essere simile alla seguente:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

Bene! Il nostro agente digitale ora può rispondere agli utenti che chiedono informazioni sugli acquisti online. Per il momento, il nostro agente digitale non supporta ancora gli acquisti online, quindi forniamo all'utente un messaggio che lo informa che la funzionalità sarà disponibile a breve. Ecco come appare il nostro agente digitale quando l'utente chiede informazioni sugli acquisti online.

5cd63c57c1b84f9a.png

Proprio come la precedente modifica che abbiamo apportato per consentire a un utente di chiedere informazioni sugli orari di apertura, questa modifica può essere visualizzata immediatamente se utilizzi ngrok o non appena implementi il codice in GCP App Engine.

Nella parte successiva, utilizzeremo gli spunti di conversazione e i chip di suggerimento per guidare la conversazione verso il percorso ottimale.

Utilizzare i chip per guidare la conversazione

Abbiamo apportato alcune modifiche al codice sorgente e abbiamo implementato l'agente digitale aggiornato, ma non ci aspetteremmo mai che gli utenti digitino "business-hours-inquiry" o "online-shopping-info" per chiedere informazioni sull'attività. Aggiorniamo gli spunti di conversazione in modo che, quando la conversazione viene aperta, l'utente non solo riceva un bel messaggio di benvenuto, ma anche degli spunti di conversazione.

Vai alla console Business Communications e accedi alla pagina Informazioni agente del tuo agente. In precedenza, abbiamo definito gli spunti di conversazione per "chip", "scheda" e "carosello". Sebbene funzionino ancora, non sono più pertinenti per la nostra funzione aziendale. Puoi lasciarli per continuare a mostrare queste funzionalità avanzate o rimuoverli in modo che l'agente digitale mostri suggerimenti per avviare conversazioni specifici per l'attività Bonjour Meal.

Creeremo due nuovi spunti di conversazione. Per il primo, imposta il testo su "Qual è il vostro orario di apertura?" e i dati di postback su "business-hours-inquiry". Per il secondo prompt, imposta il testo su "Posso fare acquisti qui?" e i dati di postback su "online-shopping-info".

Il risultato dovrebbe essere la configurazione come nello screenshot seguente:

ef6e6888acea93e3.png

Come per le altre modifiche apportate alla Business Communications Console, sarà necessario un po' di tempo prima che vengano propagate e che tu possa visualizzarle sul tuo dispositivo mobile.

Ora che abbiamo terminato con gli spunti di conversazione, vogliamo anche un modo per guidare l'utente verso un percorso felice una volta iniziata la conversazione. È possibile utilizzare i chip in modo contestuale dopo l'invio di un messaggio per guidare l'utente verso altre funzionalità di cui è in grado l'agente digitale. Pertanto, quando l'utente chiede informazioni sull'orario di apertura o sugli acquisti online, invieremo un messaggio con un suggerimento per fare qualcos'altro con l'agente.

Alla fine della funzione, aggiungi quanto segue:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

Tieni presente che il campo di testo all'interno di un oggetto BusinessMessagesSuggestion è limitato a 25 caratteri, come descritto nella documentazione.

Con spunti di conversazione aggiornati e l'uso strategico dei chip di suggerimento, ecco alcuni screenshot dell'esperienza utente prevista.

ef57695e2bacdd20.png

6. Complimenti

Congratulazioni, hai creato il tuo primo agente digitale Business Messages.

Hai eseguito il deployment di un'applicazione web per supportare il tuo agente digitale su Business Messages, hai utilizzato la console Business Communications per modificare l'agente e hai modellato l'esperienza utente con un agente digitale apportando modifiche al codice sorgente.

Ora conosci i passaggi chiave necessari per creare un'esperienza interattiva di Business Messages e le possibilità che si aprono sono entusiasmanti. L'agente può essere esteso per supportare la ricerca nell'inventario o introdurre un carrello per monitorare ciò che potrebbe interessare all'utente. Potresti utilizzare un carosello per mostrare gli articoli del menu e, utilizzando i suggerimenti, consentire all'utente di selezionare gli articoli che gli interessano.

Ecco un'anteprima di come potrebbe apparire.

57d2bb7b0ec38c81.png

Come faccio a creare un'esperienza conversazionale ottimale?

I migliori agenti forniscono informazioni contestuali all'utente e funzionalità durante la conversazione, in modo che possa interagire con l'attività come farebbe normalmente per telefono o di persona. Pensa a come i seguenti argomenti potrebbero essere applicati a una conversazione che vorresti avere con un'attività con cui collabori.

Fornire il contesto e definire le aspettative

Fornire il contesto può significare dichiarare esplicitamente in che modo puoi aiutare l'utente o presentare l'agente digitale con una personalità con cui l'utente può identificarsi. Gli agenti di successo su Business Messages utilizzano l'avatar rappresentativo per mostrare all'utente con chi sta parlando.

La definizione delle aspettative dipende dall'esperienza utente che stai creando. Ad esempio, se l'agente supporta la ricerca nell'inventario, comunica prima all'utente che la disponibilità potrebbe essere limitata prima di fornire la risposta.

Fornire funzionalità all'utente

I consumatori interagiscono continuamente con le attività. Dalle richieste come il controllo dello stato di un ordine alla verifica della disponibilità di un articolo, Business Messages può supportare interazioni complesse con gli utenti. Molti utenti continuano a chiamare le attività per telefono per ricevere risposte alle loro domande, anche se le risposte sono disponibili sul sito web delle attività. Di conseguenza, le attività devono investire più risorse per gestire il volume di chiamate, soprattutto durante le festività.

Mantenere il coinvolgimento dell'utente

Fornisci punti di contatto conversazionali per mantenere l'utente coinvolto nella conversazione. Tra un messaggio e l'altro, puoi richiamare gli indicatori di digitazione per far sapere all'utente che stai elaborando una risposta.

Grazie a funzionalità avanzate come indicatori di digitazione, chip di suggerimenti, schede avanzate e caroselli, puoi guidare l'utente attraverso esperienze utente positive per aiutarlo a completare determinate attività, ad esempio ordinare da un menu di elementi. L'obiettivo è ridurre il traffico di chiamate verso la linea telefonica di un'attività.

È fondamentale che una conversazione fornisca funzionalità all'utente. Gli utenti che contattano un'attività tramite messaggistica si aspettano di ricevere risposte rapide alle loro domande. In una situazione non ideale, l'agente digitale non può facilitare la conversazione, il che potrebbe portare a un'esperienza utente negativa. Fortunatamente, esistono modi per aggirare questo problema, ad esempio trasferendo la conversazione a un operatore in carne e ossa, argomento che tratteremo in un futuro codelab.

Passaggi successivi

Quando è tutto pronto, consulta alcuni degli argomenti seguenti per scoprire interazioni più complesse che puoi ottenere in Business Messages

Documentazione di riferimento