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'azienda che vuole integrarsi direttamente con Business Messages o forse stai lavorando per un fornitore di software indipendente che crea soluzioni di messaggistica per le aziende con cui lavori o magari hai appena scoperto Business Messages e vuoi giocherellare con la piattaforma.

Indipendentemente da ciò 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 tutto sarà pronto per il lancio di Business Messages dopo un po' di perfezionamento, potrai raggiungere milioni di clienti.

Cosa caratterizza un buon agente digitale?

Business Messages è una piattaforma di conversazione, che offre un'esperienza simile a un'app sui dispositivi mobili che consente ai consumatori di connettersi con le attività senza installare un'app aggiuntiva. Un agente digitale è la logica con cui i clienti interagiscono. La logica è gestita da un'applicazione web di cui è stato eseguito il deployment nel cloud o nella tua infrastruttura. La modalità di risposta all'utente spetta interamente a te. I migliori agenti forniscono il contesto per definire le aspettative, mantenere coinvolti i 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à ad alcune semplici domande come "A che ora chiude?" o "Posso effettuare acquisti online?".

In questo codelab, gli utenti potranno acquistare articoli tramite l'agente digitale, indirizzarli a un elaboratore dei pagamenti per raccogliere denaro e poi pianificare il ritiro degli articoli fittizi in negozio.

In questo codelab, la tua app

  • Rispondere alle domande tramite un chip di suggerimento
  • Aiuta l'utente a porre domande a cui il tuo agente digitale può rispondere
  • Fornisci funzionalità di conversazione avanzate per mantenere l'utente coinvolto nella conversazione

883b5a7f9f266276.png

Cosa imparerai a fare

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

Questo codelab è incentrato sulla creazione del tuo primo agente digitale.

Che cosa ti serve

  • Registrati per creare un account sviluppatore Business Communications senza costi
  • Visita il nostro sito per sviluppatori per istruzioni su come
  • Un dispositivo Android 5 o versioni successive OPPURE un dispositivo iOS con l'app Google Maps
  • Esperienza con la 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 account di servizio. Segui i passaggi nella documentazione per creare un account di servizio all'interno della Developer Console di Business Communications.

Esegui il deployment del codice di avvio Python EchoBot di Django

In un terminale, clona l'esempio di bot di Django Echo nella directory di lavoro del 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 dell'esempio 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 passaggio 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 del progetto utilizzato per la registrazione con le 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 di cui hai appena eseguito il deployment contiene un'applicazione web con un webhook per ricevere messaggi da Business Messages. L'applicazione mostra all'utente l'eco dei messaggi e può presentare alcune delle varie funzionalità disponibili nella piattaforma conversazionale.

Configura il tuo webook

Ora che il deployment del servizio è stato eseguito, puoi utilizzare l'URL dell'applicazione per impostare l'URL webhook nella pagina Impostazioni account della Console per gli sviluppatori di Business Communications.

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

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

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

ceb66c905ded40be.png

Fai clic su Salva accanto al riferimento del tuo progetto Google Cloud.

3. Creazione del tuo primo agente

Utilizzare la Developer Console di Business Communications

In 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 nello stesso momento in cui crei l'agente. Seleziona Business Messages (Messaggi aziendali) 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 conversando con l'agente. In Nome agente, specifica ciò che vuoi che gli utenti vedano nella conversazione Business Messages. Nel caso del fittizio Bonjour Meal, Bonjour Rail è l'azienda ferroviaria che gestisce i ristoranti Bonjour Meal. Allora 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 fare alla console un po' di magia. Questa richiesta richiede alcuni secondi per inviare all'API Business Communications più richieste di creazione del brand e dell'agente. Puoi utilizzare direttamente l'API Business Communications per creare un agente e un brand. Consulta la documentazione per vedere come una richiesta curl potrebbe fare le stesse cose della console.

La tua prima conversazione

Apri l'agente 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 degli agenti, che vengono utilizzati per richiamare la piattaforma conversazionale sul tuo dispositivo.

f6bd8ded561db36f.png

Puoi copiare l'URL del test facendo clic su uno dei chip. Naturalmente, copia l'URL di test del dispositivo che hai a disposizione da usare per il test. Invia il messaggio copiato al tuo dispositivo come preferisci.

Sul dispositivo mobile, se tocchi il link si attiva l'Avvio app di Business Messages Agent con l'URL di test dell'agente precompilato.

Tocca Avvia per richiamare la piattaforma conversazionale dell'agente.

2bf9f282e09062de.png

Interagisci con l'agente e fatti un'idea delle sue capacità. In gran parte, dovresti scoprire che la piattaforma conversazionale farà eco solo i tuoi messaggi. Invia qualcosa 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à richiamata una scheda informativa
  • Se invii "chip", verranno richiamati i chip di suggerimento
  • Se invii "carosello", attiverai un carosello di schede interattive.

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

Tutte le funzionalità avanzate possono essere utilizzate per fornire un contesto migliore alla persona che comunica con il tuo agente. Invia risorse grafiche in schede interattive per comunicare meglio le tue idee o utilizza i chip di suggerimenti 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 usare i chip di suggerimenti 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 immissione giallo) in modo che visualizzi:

Ti diamo il benvenuto nell'agente per principianti Bonjour. Posso fare eco ai tuoi messaggi e mostrarti alcune delle importanti funzionalità supportate dalla piattaforma. Prova questi suggerimenti.

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

Dopo la modifica, le informazioni dell'agente nella console hanno il seguente aspetto:

8e96b0a10edd20af.png

Sul lato destro della console puoi vedere un'anteprima dell'aspetto dell'agente. Hai notato come il messaggio di benvenuto riflette ciò che hai appena modificato e i chip di suggerimento che si trovano sotto di esso?

Si tratta di un ottimo strumento per farsi un'idea dell'esperienza utente. Puoi utilizzarlo mentre crei l'agente e pianifichi i percorsi degli utenti che vuoi supportare.

Purtroppo, non saremo in grado di vedere subito queste modifiche nella conversazione, poiché i dati precedenti vengono memorizzati nella cache all'interno dell'infrastruttura di Business Messages. La cache viene svuotata ogni due ore circa, quindi dovresti riuscire a provarla domani.

Nel frattempo, diamo un'occhiata a come funziona tutto.

4. Analisi del codice iniziale

Una visualizzazione di 3000 metri del codice sorgente

Il codice iniziale che hai implementato restituisce i messaggi agli utenti e può presentare una scheda informativa, un carosello o chip di suggerimenti. Analizziamo più in dettaglio il codice sorgente in modo da capire come funziona. Poi capiamo cosa dobbiamo cambiare.

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

A livello generale, Django instrada gli URL alle viste 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 vengono 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 è a conoscenza il progetto 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 succede in questo file. Per iniziare, cerchiamo di capire come funziona 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 rimanda alla directory principale del progetto. Non succede niente qui: è sufficiente restituire una HTTPResponse contenente codice HTML al browser che ha effettuato la richiesta. Quindi sì, è possibile aprire l'URL principale del progetto, ma non c'è molto da fare perché torni 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.")
...

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

Questa è una funzione importante. Questo bit di logica è il webhook dell'applicazione web, che riceve i messaggi dagli utenti che interagiscono con l'agente. Puoi estendere il webhook per inviare messaggi a uno strumento di automazione come Dialogflow per capire cosa potrebbe dire un utente e generare una risposta da tale 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 dei messaggi come payload JSON al tuo webhook, dove vengono instradati a un agente in tempo reale o a una logica per rispondere come bot. Il meccanismo di routing, nel nostro caso in questo 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)
...

Questo bit di logica inizia a esaminare il messaggio ricevuto dall'utente. Innanzitutto, il messaggio viene normalizzato abbassando tutti i caratteri. Dopo la normalizzazione, controlla se il messaggio è una delle costanti definite all'inizio 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'
...

Vale a dire che il bot analizza i messaggi che contengono nello specifico una qualsiasi delle stringhe che abbiamo inserito nella postback_data degli spunti di conversazione del passaggio precedente di questo codelab. Se non viene visualizzata nessuna di queste stringhe, trasmette semplicemente il messaggio a una funzione chiamata echo_message, che potresti immaginare... eseguisse l'eco dei messaggi.

Invio di messaggi

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

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 effettuare richieste direttamente se la tua infrastruttura non è in un linguaggio per cui abbiamo una libreria. Dai un'occhiata a Invio di messaggi per vedere come cURL viene utilizzato per inviare un messaggio a uno specifico ID conversazione.

Ai fini di questo codelab, ci concentreremo sull'utilizzo della libreria client Python già integrata nel codice iniziale Bonjour Meal di cui è stato eseguito il deployment in App Engine nel progetto Google Cloud oppure in locale mediante ngrok.

Diamo un'occhiata alla 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 un BusinessMessageMessage con la variabile messaggio passata alla funzione echo_message. Dopo aver creato 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 dell'account di servizio per verificare di poter inviare messaggi a questa conversazione, creare un'istanza di un client Business Messages e una richiesta per inviare il messaggio al conversation ID specificato.

Le funzionalità avanzate utilizzano anche questa funzione send_message, ma i messaggi che creano sono specifici per schede interattive, caroselli e chip di suggerimenti. Le schede interattive e i caroselli possono includere risorse grafiche, mentre i chip di suggerimenti hanno postback_data, in modo che la logica di callback possa analizzarli in modo appropriato.

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

Quando vuoi, personalizza l'agente dei pasti Bonjour.

5. Personalizzazione dell'agente

Se hai seguito il codelab finora, dovremmo vedere il nostro splendido agente.

906bc74668a1b215.png

Non è così bello, in realtà sembra un po' nudo e non rappresenta molto bene la nostra attività. Fortunatamente, abbiamo una conoscenza di base del codice a supporto dell'agente e abbiamo gli strumenti necessari per personalizzarlo come vogliamo.

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

  • Includi un logo reale
  • Messaggio di benvenuto migliorato
  • Fornisci informazioni sull'orario di apertura
  • Comunica all'utente che l'acquisto di articoli online sarà disponibile a breve
  • Uso di chip di suggerimenti per le conversazioni per facilitare la conversazione

Avremo la possibilità di utilizzare Business Communications Console per aggiornare il logo e il messaggio di benvenuto, ma avrai sempre la possibilità di utilizzare direttamente le API Business Communications per fare lo stesso. Successivamente, dovremo aggiornare il codice sorgente per inviare i messaggi appropriati per fornire informazioni sull'orario di apertura e che Bonjour Meal offrirà presto una funzionalità di shopping online. Al termine dell'operazione, torneremo alla Business Communications Console e creeremo chip di suggerimenti conversazionali per guidare la conversazione verso le esperienze del percorso felice supportate dall'agente digitale.

Dalla Business Communications Console, seleziona l'agente e vai a Agent information (Informazioni agente). Provvederemo ad 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 conoscere le best practice consigliate per l'utilizzo dei tuoi loghi.

Carica 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 uno strumento di modifica leggera per manipolare la qualità e il ritaglio dell'immagine. Regola la risoluzione dell'immagine e ritagliala in modo che sia inferiore o uguale al limite di 50 kB. Quando l'immagine ti soddisfa, fai clic sul segno di spunta nel cerchio blu per confermare e fai clic su Seleziona nella parte inferiore della finestra modale.

1856081f59623ae2.png

Infine, fai clic su Salva in alto a destra nella pagina Informazioni agente. Si tratta di una modifica la cui applicazione sul tuo dispositivo richiederà un po' di tempo poiché le informazioni sull'agente sono 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 questo codelab. Riproviamo, ma questa volta configura un messaggio di benvenuto più adatto al percorso dell'utente del pasto Bonjour.

In Business Communications Console, seleziona il tuo agente e vai a Informazioni agente. Scorri verso il basso fino a visualizzare il campo di immissione Messaggio di benvenuto, dove puoi aggiornare il messaggio.

6598fec47021136e.png

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

"Ti diamo il benvenuto al Bonjour Meal. Sono un assistente che può aiutarti a rispondere alle tue domande sul pasto Bonjour. Prova alcune delle seguenti opzioni."

Infine, fai clic su Salva in alto a destra nella pagina Informazioni agente. Anche in questo caso, sarà necessario un po' di tempo prima che la modifica sia visibile a causa del meccanismo di memorizzazione nella cache che garantisce che la modifica sia immediata.

Fornire informazioni sull'orario di apertura

Per fornire queste informazioni agli utenti, invieremo loro un messaggio personalizzato 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, quindi inizia a verificare se il messaggio normalizzato corrisponde a uno dei parametri hardcoded. 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 conterrà il valore "orario di apertura-richiesta". Se la condizione restituisce true, richiameremo una funzione denominata send_message_with_business_hours.

Ora la funzione route_message 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 è definire CMD_BUSINESS_HOURS_INQUIRY insieme alle altre costanti, la seconda definire la funzione send_message_with_business_hours e inviare un messaggio utilizzando l'API Business Messages.

Per prima cosa, definiamo 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'
...

E ora definiamo send_message_with_business_hours. Puoi definire questa funzione in qualsiasi punto del file, seguendo la sintassi Python appropriata. Poiché questa funzione sta semplicemente inviando 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 con questi orari di apertura all'utente quando invia il seguente messaggio: "richiesta sull'orario di apertura". Ecco cosa succederà:

125802166995afd5.png

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

Anche se abbiamo un po' di slancio con le modifiche al codice sorgente, apportiamo un'altra modifica che consentirà all'utente di richiedere informazioni sugli acquisti online. Il tuo agente digitale risponderà dicendo che la funzionalità non è ancora disponibile, ma ti invitiamo a ricontrollare in un secondo momento.

Comunicare all'utente che lo shopping online sarà presto disponibile

Apporteremo una modifica simile a quella utilizzata per informare l'utente dell'orario di apertura. Questa volta, inserisci le informazioni in una scheda informativa insieme a un'immagine accattivante.

Analizza il messaggio normalizzato e controlla una condizione per una costante denominata CMD_ONLINE_SHOPPING_INQUIRY con 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 definisci send_online_shopping_info_message. Vogliamo che questo messaggio venga inviato in una scheda informativa contenente un'immagine, quindi copiamo la funzione send_rich_card da utilizzare come modello per definire send_online_shopping_info_message.

Innanzitutto, dobbiamo aggiornare il testo di riserva in modo che abbia un messaggio appropriato. Il testo di riserva viene utilizzato se per qualche motivo il dispositivo non può ricevere una scheda interattiva. Successivamente, dobbiamo aggiornare BusinessMessagesRichCard in modo da includere un titolo, una descrizione, suggerimenti e un campo multimediale pertinenti. La nostra funzione dovrebbe avere questo aspetto:

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 può ora rispondere agli utenti che chiedono informazioni sugli acquisti online. Per il momento, il nostro agente digitale non supporta ancora lo shopping online, quindi forniamo un messaggio all'utente per informarlo che la funzionalità sarà presto disponibile. Ecco come si presenta il nostro agente digitale quando l'utente chiede informazioni sugli acquisti online.

5cd63c57c1b84f9a.png

Proprio come la modifica precedente che abbiamo apportato per consentire a un utente di richiedere informazioni sull'orario di apertura, questa modifica può essere visualizzata immediatamente se utilizzi ngrok o non appena esegui il deployment del codice in Google Cloud App Engine.

Nella parte successiva, utilizzeremo spunti di conversazione e chip di suggerimenti per guidare la conversazione verso il percorso felice.

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 "richiesta sull'orario di apertura" o "informazioni-acquisti online" per chiedere informazioni sull'attività. Aggiorniamo gli spunti di conversazione in modo che, quando la conversazione si apre, l'utente non solo riceva un bel messaggio di benvenuto, ma gli presenti anche spunti di conversazione.

Vai alla Business Communications Console e accedi alla pagina Informazioni sull'agente dell'agente. In precedenza abbiamo definito gli spunti di conversazione per "chip", "scheda" e "carosello". Sebbene funzionino ancora, non sono più pertinenti alla nostra funzione aziendale. Puoi lasciarli attivi per continuare a mostrare queste funzionalità avanzate o rimuoverle in modo che il tuo agente digitale mostri spunti di conversazione specifici per l'attività dei pasti Bonjour.

Creeremo due nuovi spunti di conversazione. Per il primo, imposta il testo su "Quali sono gli orari di apertura?" e i Dati postback su "Richiesta di informazioni sull'orario di apertura". Per il secondo spunto di conversazione, imposta text su "Posso fare acquisti qui?" e imposta Dati postback su "online-shopping-info".

Il risultato dovrebbe essere la configurazione indicata nel seguente screenshot:

ef6e6888acea93e3.png

Come per altre modifiche apportate in Business Communications Console, sarà necessario un po' di tempo per la propagazione prima di poter vedere le modifiche generate sul tuo dispositivo mobile.

Ora che abbiamo finito con gli spunti di conversazione, desideriamo anche trovare un modo per guidare l'utente verso un percorso soddisfacente dopo che la conversazione è iniziata. È possibile utilizzare i chip in base al contesto dopo l'invio di un messaggio per indirizzare l'utente verso altre funzionalità di cui l'agente digitale è in grado di eseguire. Pertanto, invieremo un messaggio con il suggerimento di svolgere un'altra operazione con l'agente ogni volta che l'utente richiede informazioni sull'orario di apertura o sugli acquisti online.

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 BusinessMessageSuggestion è limitato a 25 caratteri, come descritto nella documentazione.

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

ef57695e2bacdd20.png

6. Congratulazioni

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, utilizzato Business Communications Console per modificare l'agente e definito l'esperienza utente con un agente digitale apportando modifiche al codice sorgente.

Ora conosci i passaggi chiave necessari per creare un'esperienza Business Messages interattiva e le possibilità da qui in poi sono entusiasmanti. L'agente può essere esteso per supportare la ricerca dell'inventario o introdurre un carrello degli acquisti per monitorare ciò che potrebbe interessare all'utente. Potresti utilizzare un carosello per mostrare gli elementi del menu e, tramite i suggerimenti, consentire all'utente di selezionare gli elementi di suo interesse.

Ecco un teaser di quello che potrebbe essere.

57d2bb7b0ec38c81.png

Come posso creare un'esperienza di conversazione ottimale?

I migliori agenti forniscono informazioni contestuali all'utente, fornendogli inoltre funzionalità tramite la conversazione, in modo che possa essere coinvolto e interagire con l'attività come farebbero normalmente per telefono o anche di persona. Pensa a come i seguenti argomenti potrebbero essere applicabili a una conversazione che vorresti instaurare con un'attività con cui collabori.

Fornisci un contesto e definisci le aspettative

Fornire il contesto può essere qualsiasi cosa, ad esempio affermando esplicitamente come puoi aiutare l'utente a presentare all'agente digitale un utente tipo con cui può immedesimarsi. Gli agenti di successo su Business Messages usano l'avatar rappresentativo per mostrare all'utente con chi stanno parlando.

L'impostazione delle aspettative dipende dall'esperienza utente che stai creando. Ad esempio, se il tuo agente supporta la ricerca dell'inventario, informa l'utente che la disponibilità potrebbe essere bassa prima di fornire una risposta.

Fornire funzionalità all'utente

I consumatori entrano sempre in contatto con le attività commerciali. Business Messages può supportare interazioni complesse con gli utenti, ad esempio per verificare lo stato di un ordine o la disponibilità di un articolo. Molti utenti continuano a chiamare le attività per telefono per ottenere risposte alle loro domande, anche se le risposte sono disponibili sul loro sito web. Il risultato è che le attività devono investire più risorse per gestire il volume di chiamate, soprattutto durante le festività.

Mantieni alto 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 comunicare all'utente che stai elaborando una risposta.

Grazie a funzionalità avanzate come gli indicatori di digitazione, i chip di suggerimenti, le schede interattive e i caroselli, puoi guidare l'utente attraverso esperienze utente soddisfacenti per aiutarlo a completare determinate attività come ordinare da un menu di voci. 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 si mettono in contatto con un'attività tramite messaggi si aspettano di ricevere rapidamente una risposta alle loro domande. In una situazione non ideale, l'agente digitale non può facilitare la conversazione che potrebbe portare a un'esperienza utente negativa. Fortunatamente esistono diversi modi per risolvere questo problema, ad esempio il trasferimento della conversazione a un operatore. Ne parleremo in un codelab futuro.

Passaggi successivi

Quando è tutto pronto, dai un'occhiata ad alcuni dei seguenti argomenti per scoprire di più sulle interazioni più complesse che puoi ottenere in Business Messages

Documenti di riferimento