Achat en ligne, retrait en magasin: Bonjour Meal - Partie 1 - Mise en route

1. Introduction

637766505206e0a1.png c604dca3ca211399.png

Dernière mise à jour:11/05/2022

Bienvenue dans Business Messages !

Cet atelier de programmation vous présente l'intégration de Messages pour les entreprises, qui permet aux clients de contacter les entreprises que vous gérez via la recherche Google et Maps. Vous êtes peut-être une entreprise qui souhaite intégrer directement Business Messages, ou vous travaillez pour un fournisseur de logiciels indépendant qui crée des solutions de messagerie pour les entreprises avec lesquelles vous collaborez. Vous avez peut-être simplement découvert Business Messages et souhaitez l'utiliser.

Peu importe ce qui vous a amené ici, cet atelier de programmation est un excellent point de départ. À la fin, vous aurez votre premier agent numérique avec lequel les utilisateurs pourront interagir. Lorsque vous serez prêt à vous lancer sur Business Messages, vous pourrez toucher des millions de clients.

Quelles sont les qualités d'un bon agent digital ?

Business Messages est une surface de conversation qui offre une expérience semblable à une application sur les appareils mobiles. Elle permet aux consommateurs de contacter des entreprises sans avoir à installer d'application supplémentaire. Un agent numérique est la partie de logique avec laquelle vos clients interagissent. La logique est gérée par une application Web déployée dans le cloud ou dans votre infrastructure. La réponse que vous allez donner à l'utilisateur vous appartient entièrement. Les meilleurs agents fournissent du contexte pour définir les attentes, maintenir l'engagement des clients et proposer des fonctionnalités répondant aux besoins des utilisateurs.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer un agent numérique sur Business Messages pour une entreprise fictive appelée Bonjour Meal. Cet agent numérique répond à quelques questions simples, comme "À quelle heure fermez-vous ?" ou "Puis-je effectuer un achat en ligne ?".

Dans cet atelier de programmation, vos utilisateurs pourront acheter des articles via l'agent numérique, être redirigés vers un système de traitement des paiements pour effectuer un paiement, puis planifier la récupération de leurs articles fictifs en magasin.

À l'issue de cet atelier de programmation, votre application offrira ces fonctionnalités :

  • Répondre aux questions à l'aide d'un chip de suggestion
  • Incitez l'utilisateur à poser des questions auxquelles votre agent numérique peut répondre.
  • Proposer des fonctionnalités de conversation enrichies pour maintenir l'engagement des utilisateurs

883b5a7f9f266276.png

Points abordés

  • Déployer une application Web sur App Engine sur Google Cloud Platform Vous pouvez également utiliser ngrok pour tester votre application locale publiquement.
  • Configurer votre compte Business Messages avec un webhook d'application Web pour recevoir des messages des utilisateurs
  • Envoyer des fonctionnalités avancées telles que des fiches, des carrousels et des suggestions de conversation avec l'API Business Messages
  • Comment Business Messages envoie vos messages

Cet atelier de programmation porte sur la création de votre premier agent numérique.

Prérequis

  • Créer un compte de développeur Business Communications sans frais
  • Consultez notre site pour les développeurs pour connaître la procédure à suivre
  • Un appareil Android équipé d'Android 5 ou version ultérieure OU un appareil iOS avec l'application Google Maps
  • Une expérience dans la programmation d'applications Web
  • Une connexion Internet

2. Configuration

Activer les API

Pour cet atelier de programmation, étant donné que nous allons travailler avec une application Django, nous allons utiliser l'API Cloud Build pour déployer l'application sur App Engine. Si vous utilisez ngrok, vous n'avez pas besoin d'activer l'API Cloud Build.

Pour activer l'API Cloud Build:

  1. Ouvrez l'API Cloud Build dans la console Google Cloud.
  2. Cliquez sur Activer.

Créer un compte de service

Vous devez créer un compte de service pour accéder aux API Business Communications et Business Messages. Suivez la procédure de création d'un compte de service dans la Business Communications Developer Console.

Déploiement du code de démarrage EchoBot Python Django

Dans un terminal, clonez le bot exemple Django Echo vers le répertoire de travail de votre projet à l'aide de la commande suivante :

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

Copiez le fichier d'identifiants JSON créé pour le compte de service dans le dossier des ressources de l'exemple et renommez les identifiants "bm-agent-service-account-credentials.json".

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

Dans un terminal, accédez au répertoire de l'étape 1 de l'exemple.

Exécutez les commandes suivantes dans un terminal pour déployer l'exemple :

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
  • "PROJECT_ID" est l'ID du projet que vous avez utilisé pour vous inscrire auprès des API.

Notez l'URL de l'application déployée dans le résultat de la dernière commande :

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

Le code de démarrage que vous venez de déployer contient une application Web avec un webhook permettant de recevoir des messages de Business Messages. L'application renvoie les messages à l'utilisateur et peut présenter certaines des fonctionnalités avancées disponibles dans la surface de conversation.

Configurer votre agenda Web

Maintenant que votre service est déployé, vous allez utiliser l'URL de l'application pour définir l'URL de votre webhook sur la page Paramètres du compte de la console de développement Business Communications.

L'URL du webhook correspond à l'URL de l'application, suivie de "/callback/". Par exemple, il peut s'agir de https://PROJECT_ID.appspot.com/callback/.

Accédez à la page des paramètres de compte de la Business Communications Console. En haut à droite, sous la barre de navigation, le nom de votre projet GCP doit s'afficher. Si une liste déroulante s'affiche, veillez à sélectionner votre projet GCP.

Indiquez les coordonnées du contact technique, puis mettez à jour Webhook avec l'URL du webhook de votre application déployée.

ceb66c905ded40be.png

Cliquez sur Enregistrer à côté de la référence de votre projet GCP.

3. Créer votre premier agent

Utiliser la console de développement Business Communications

Dans la console Business Communications, cliquez sur le logo en haut à gauche pour revenir au tableau de bord de la console, puis sur Créer un agent. Vous créez une marque en même temps que votre agent. Sélectionnez Business Messages (Messages d'entreprise) pour Agent type (Type d'agent) et assurez-vous que les Partner information (Informations sur le partenaire) sont correctes.

Dans Marque, saisissez le nom de la marque que vous créez.Il s'agit de l'entreprise avec laquelle vous collaborez, et les consommateurs peuvent interagir avec l'agent par le biais de conversations. Dans Nom de l'agent, indiquez ce que vous souhaitez que les utilisateurs voient dans la conversation Business Messages. Dans le cas de la société fictive Bonjour Meal, Bonjour Rail est la compagnie ferroviaire qui gère les restaurants Bonjour Meal. Je vais donc spécifier "Bonjour Rail" comme marque et "Bonjour Meal" comme agent.

L'agent est l'entité conversationnelle qui représente la marque.

88a9798e6546eb4e.png

Cliquez sur Créer un agent et laissez la console faire son travail. Cette requête prend quelques secondes pour envoyer plusieurs requêtes à l'API Business Communications afin de créer la marque et l'agent. Vous pouvez utiliser directement l'API Business Communications pour créer un agent et une marque. Consultez la documentation pour voir à quoi ressemble une requête curl pour effectuer les mêmes tâches que la console.

Avoir votre première conversation

Ouvrez l'agent que vous venez de créer. La page Vue d'ensemble s'affiche et vous permet de commencer à consulter les informations de votre agent. Consultez les URL de test de l'agent. Ces URL permettent d'appeler la surface de conversation sur votre appareil.

f6bd8ded561db36f.png

Vous pouvez copier l'URL de test en cliquant sur l'un des chips. Bien entendu, copiez l'URL de test pour l'appareil que vous avez sous la main. Envoyez ce message copié sur votre appareil de la manière de votre choix.

Sur votre appareil mobile, appuyez sur le lien pour lancer le lanceur d'agents Business Messages avec l'URL de test de votre agent préremplie.

Appuyez sur Lancer pour appeler la surface de conversation de votre agent.

2bf9f282e09062de.png

Interagissez avec l'agent pour vous faire une idée de ses capacités. Dans la plupart des cas, la surface de conversation ne devrait refléter que vos messages. Envoyez-lui un message comme "Hello, World!". Vous verrez que l'agent vous renverra le même message.

L'application déployée contient également une logique permettant de présenter les fonctionnalités avancées disponibles dans Business Messages.

  • Si vous envoyez "card", vous appelez une carte enrichie.
  • Si vous envoyez des chips, vous appelez des chips de suggestion.
  • Si vous envoyez "carousel", vous appelez un carrousel de cartes enrichies.

Félicitations ! Il s'agit de la première conversation de votre agent, avec vous !

Chacune de ces fonctionnalités peut être utilisée pour fournir un meilleur contexte à la personne qui communique avec votre agent. Envoyez des éléments graphiques dans des fiches enrichies pour mieux communiquer vos idées ou utilisez des chips de suggestion pour guider la conversation.

Modifier le message de bienvenue et utiliser les chips de conversation

Apprenons à utiliser la Developer Console, à modifier le message de bienvenue de l'agent et à exploiter les chips de suggestion pour aider l'utilisateur à communiquer.

Accédez à la page Vue d'ensemble de l'agent, puis sélectionnez Informations sur l'agent. Faites défiler la page jusqu'à la section "Message de bienvenue et sujets de conversation".

4323f988216fa054.png

Modifiez le message de bienvenue (champ de saisie jaune) pour qu'il indique:

Bienvenue dans l'agent de déclencheur de repas Bonjour. Je peux vous faire part de vos messages et vous montrer certaines des fonctionnalités avancées compatibles avec la plate-forme. Essayez ces suggestions !

Cliquez sur + Ajouter une suggestion de conversation, comme indiqué dans le cadre violet de l'image ci-dessus, pour ajouter des suggestions de conversation afin d'appeler des chips de suggestion, un carrousel et une fiche. Les déclencheurs de conversation que vous ajoutez nécessitent un composant de texte et un composant postbackData. Le texte est ce qui s'affiche pour l'utilisateur, tandis que les données postBack sont celles qui sont envoyées au webhook de votre agent. Le webhook analyse les données de postback et envoie la réponse appropriée à l'utilisateur. 906bc74668a1b215.png

Après la modification, les informations sur l'agent dans la console se présentent comme suit:

8e96b0a10edd20af.png

Sur la droite de la console, vous pouvez voir un aperçu de l'agent. Notez que le message d'accueil reflète ce que vous venez de modifier et les chips de suggestion qui se trouvent en dessous.

C'est un excellent outil pour vous faire une idée de l'expérience utilisateur. Vous pouvez l'utiliser lorsque vous créez votre agent et planifiez les parcours utilisateur que vous souhaitez prendre en charge.

Malheureusement, ces modifications ne seront pas immédiatement répercutées dans la conversation, car les données précédentes sont mises en cache dans l'infrastructure Business Messages. Le cache est vidé toutes les deux heures environ. Vous devriez donc pouvoir essayer cela demain.

En attendant, voyons comment tout fonctionne en interne.

4. Analyser le code de démarrage

Vue d'ensemble du code source

Le code de démarrage que vous avez déployé renvoie des messages aux utilisateurs et peut présenter une fiche enrichie, un carrousel ou des chips de suggestion. Examinons plus en détail le code source pour comprendre comment cela fonctionne. Nous déterminerons ensuite ce que nous devons modifier.

Le code de démarrage est un projet Django. Dans une prochaine partie de cette série d'ateliers de programmation, nous utiliserons Google Datastore pour conserver des données telles que les paniers et les conversations associées. Ne vous inquiétez pas si vous n'avez jamais utilisé Django auparavant. Il est assez simple à utiliser, et vous apprendrez à le faire à la fin de cet atelier de programmation.

De manière générale, Django redirige les URL vers les vues, et la logique de vue produit un modèle qui s'affiche dans le navigateur. Voyons le fichier urls.py du projet.

bm-django-echo-bot/bmcodelab/urls.py [Lignes 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),
]

Deux routes sont définies ici. Django peut donc exécuter une logique si ces deux URL sont reconnues. Étant donné que l'URL du projet est https://PROJECT_ID.appspot.com/, les routes connues du projet sont les suivantes:

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

Les deux chemins d'URL font référence à bopis_views, qui provient de bopis/views.py. Voyons ce qui se passe dans ce fichier. Pour commencer, commençons par comprendre bopis_views.landing_placeholder.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Lignes 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>.")
...

Ce bit de logique est exécuté par votre serveur Web lorsqu'il reçoit une requête Web pointant vers la racine du projet. Rien de bien compliqué ici: nous renvoyons simplement une réponse HTTP contenant du code HTML au navigateur à l'origine de la requête. Vous pouvez donc ouvrir l'URL racine du projet, mais il n'y a pas grand-chose à faire, car vous êtes redirigé vers cet atelier de programmation.

L'autre URL redirige vers une fonction appelée callback, également dans bopis/views.py. Voyons cette fonction.

bm-django-echo-bot/bopis/views.py [Lignes 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 logique ici analyse le corps de la requête pour un message ou une suggestionResponse, puis transmet ces informations à une fonction appelée route_message, puis renvoie une HttpResponse à l'infrastructure Business Messages pour confirmer la réception du message.

Il s'agit d'une fonction importante. Ce bit de logique correspond au webhook de votre application Web, qui reçoit les messages des utilisateurs qui interagissent avec votre agent. Vous pouvez étendre le webhook pour envoyer des messages à un outil d'automatisation tel que Dialogflow afin de comprendre ce qu'un utilisateur peut dire et de générer une réponse à partir de cette inférence. Vous pouvez également transférer le message afin que l'utilisateur puisse être mis en relation avec un agent en direct. Consultez le diagramme suivant:

b10113f9d037e6a5.png

Business Messages envoie le contenu du message sous forme de charge utile JSON à votre webhook, où il est acheminé vers un agent en direct ou vers une logique pour répondre en tant que bot. Dans notre cas, ce mécanisme de routage est route_message. Voyons cela.

bm-django-echo-bot/bopis/views.py [Lignes 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)
...

Ce bit de logique commence à examiner le message reçu par l'utilisateur. Tout d'abord, le message est normalisé en mettant tous les caractères en minuscules. Une fois la normalisation effectuée, il vérifie si le message correspond à l'une des constantes définies en haut du fichier.

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

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

Autrement dit, le bot analyse les messages qui contiennent spécifiquement l'une des chaînes que nous avons placées dans le postback_data des déclencheurs de conversation de l'étape précédente de cet atelier de programmation. Si aucune de ces chaînes ne s'affiche, le message est simplement transmis à une fonction appelée echo_message, qui, comme vous pouvez l'imaginer, renvoie les messages.

Envoyer des messages

Vous devriez donc avoir une idée de la façon dont les messages sont reçus par l'application Web. Tout est géré par le webhook.

Mais comment l'application envoie-t-elle un message sortant à un utilisateur à l'aide de Business Messages ?

a9475b1da93a83e8.png

Lorsque votre infrastructure répond à l'utilisateur, vous envoyez la réponse à l'API Business Messages, qui transmet le message à l'utilisateur.

L'API Business Messages propose des bibliothèques en Python, Node.js et Java. Nous proposons également une API REST à laquelle vous pouvez envoyer des requêtes directement si votre infrastructure n'est pas dans un langage pour lequel nous disposons d'une bibliothèque. Consultez Envoyer des messages pour découvrir comment utiliser cURL pour envoyer un message à un ID de conversation spécifique.

Pour cet atelier de programmation, nous allons nous concentrer sur l'utilisation de la bibliothèque cliente Python déjà intégrée au code de démarrage Bonjour Meal qui a été déployé sur App Engine dans votre projet GCP ou exécuté localement via ngrok.

Examinons la fonction echo_message et voyons comment nous interagissons avec l'API pour envoyer le message à Business Messages.

bm-django-echo-bot/bopis/views.py [Lignes 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)
...

Dans cette fonction, un BusinessMessagesMessage est instancié avec la variable de message transmise à la fonction echo_message. Une fois instancié, l'objet est ensuite transmis à send_message avec l'ID de conversation.

bm-django-echo-bot/bopis/views.py [Lignes 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 fonction send_message n'utilise que les identifiants de votre compte de service pour vérifier que vous pouvez envoyer des messages à cette conversation, instancie un client Business Messages et crée une requête pour envoyer le message à l'conversation ID donné.

Les fonctionnalités avancées utilisent également cette fonction send_message, mais les messages qu'elles créent sont spécifiques aux cartes enrichies, aux carrousels et aux chips de suggestion. Les cartes enrichies et les carrousels peuvent inclure des éléments graphiques, tandis que les chips de suggestion contiennent postback_data afin que la logique de rappel puisse les analyser de manière appropriée.

Maintenant que vous savez envoyer un message, découvrez comment l'exemple envoie des cartes enrichies, des carrousels et des chips de suggestion. Dans la section suivante, nous allons modifier le code source pour envoyer des messages avec certaines de ces fonctionnalités avancées.

Lorsque vous êtes prêt, personnalisons l'agent Bonjour Repas.

5. Personnaliser votre agent

Si vous avez suivi l'atelier de programmation jusqu'à présent, vous devriez voir notre bel agent.

906bc74668a1b215.png

Elle n'est pas très belle. Elle semble un peu vide et ne représente pas vraiment notre entreprise. Heureusement, nous disposons de connaissances de base sur le code qui sous-tend l'agent et des outils nécessaires pour le personnaliser comme nous le souhaitons.

Dans la suite de cet atelier de programmation, nous allons étendre l'agent avec les éléments suivants:

  • Inclure un logo
  • Message de bienvenue amélioré
  • Fournir des informations sur les horaires d'ouverture
  • Indiquer à l'utilisateur que les achats en ligne seront bientôt disponibles
  • Utilisation de chips de suggestion de conversation pour faciliter la conversation

Nous utiliserons la console Business Communications pour mettre à jour le logo et le message d'accueil. Vous pouvez toutefois toujours utiliser directement les API Business Communications pour ce faire. Nous devrons ensuite mettre à jour le code source pour envoyer des messages appropriés pour fournir des informations sur les horaires d'ouverture et que Bonjour Meal proposera bientôt une fonctionnalité d'achat en ligne. Une fois cette étape terminée, nous reviendrons dans la console Business Communications et créerons des chips de suggestion de conversation pour guider la conversation vers les expériences de parcours réussis compatibles avec l'agent numérique.

Dans la console Business Communications, sélectionnez votre agent, puis accédez à Informations sur l'agent. Nous allons modifier le logo de l'entreprise, comme indiqué en jaune ci-dessous.

eb6b8ac6b62387ee.png

Cliquez sur Importer. Vous pouvez alors sélectionner une image à importer ou à importer à partir d'une URL.

Consultez les consignes de conception de logo dans la documentation pour découvrir les bonnes pratiques que nous recommandons pour utiliser vos propres logos.

Importons le logo qui se trouve dans le code source que vous avez cloné au début de cet atelier de programmation. Vous le trouverez dans le répertoire ./assets/ du dépôt. Le fichier s'appelle "bonjour_meal-logo.png". Vous pouvez faire glisser le fichier dans la fenêtre modale du navigateur Web. Un outil de retouche léger s'affiche pour vous permettre de modifier la qualité et le recadrage de l'image. Ajustez la résolution et le recadrage de l'image afin qu'elle soit inférieure ou égale à la limite de 50 Ko. Lorsque vous êtes satisfait de l'image, cliquez sur la coche dans le cercle bleu pour confirmer, puis sur Sélectionner en bas de la fenêtre modale.

1856081f59623ae2.png

Enfin, cliquez sur Enregistrer en haut à droite de la page Informations sur l'agent. Cette modification prendra un certain temps à être reflétée sur votre appareil, car les informations sur l'agent sont mises en cache sur nos serveurs et devraient être visibles dans les deux heures suivant la modification.

Mettre à jour le message de bienvenue

Nous avons déjà modifié le message de bienvenue plus tôt dans cet atelier de programmation. Réessayons, mais cette fois, configurez un message de bienvenue plus adapté au parcours utilisateur de Bonjour Meal.

Dans la console Business Communications, sélectionnez votre agent, puis accédez à Informations sur l'agent. Faites défiler la page vers le bas jusqu'au champ de saisie Message de bienvenue, dans lequel vous pouvez modifier le message.

6598fec47021136e.png

Sachant que nous allons ajouter des sujets de conversation, nous pouvons les mentionner dans notre message de bienvenue. Dans le champ de saisie, remplaçons-le par le texte suivant:

"Bienvenue sur Bonjour Meal. Je suis un assistant et je peux répondre à vos questions sur Bonjour Meal. Essayez l'une des options suivantes."

Enfin, cliquez sur Enregistrer en haut à droite de la page Informations sur l'agent. Encore une fois, ce changement prendra un certain temps à être pris en compte en raison de notre mécanisme de mise en cache, qui permet de garantir la rapidité des opérations.

Fournir des informations sur les horaires d'ouverture

Pour fournir ces informations aux utilisateurs, nous leur enverrons un message personnalisé à l'aide de l'API Business Messages.

Vous vous souvenez peut-être que les messages sont analysés dans la fonction route_message de views.py. La fonction commence par normaliser la chaîne, puis vérifie si le message normalisé correspond à l'un des paramètres codés en dur. Pour simplifier, ajoutons une condition supplémentaire dans laquelle nous vérifierons si le message normalisé est égal à une nouvelle constante que nous appellerons CMD_BUSINESS_HOURS_INQUIRY et qui contiendra la valeur "business-hours-inquiry". Si la condition renvoie la valeur "true", nous appelons une fonction appelée send_message_with_business_hours.

La fonction route_message se présente désormais comme suit:

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

Pour que le code fonctionne, nous devons apporter deux autres modifications : la première consiste à définir CMD_BUSINESS_HOURS_INQUIRY avec les autres constantes, et la seconde à définir la fonction send_message_with_business_hours et à envoyer un message à l'aide de l'API Business Messages.

Commençons par définir la constante en haut du fichier avec les autres déclarations de constantes:

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

Définissez maintenant send_message_with_business_hours. Vous pouvez définir cette fonction n'importe où dans le fichier, en respectant la syntaxe Python appropriée. Comme cette fonction envoie simplement un message, comme echo_message, vous pouvez l'utiliser comme modèle pour définir cette fonction.

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

Notre bot devrait ainsi pouvoir répondre à l'utilisateur avec ces horaires d'ouverture lorsqu'il envoie le message suivant: "business-hours-inquiry". Vous pouvez vous attendre à un résultat semblable au suivant:

125802166995afd5.png

Une fois le code source déployé sur GCP, les modifications seront immédiatement visibles. Nous ne mettons pas en cache l'application Web dans Google Cloud Platform de la même manière que les informations sur les agents. Vous pourrez donc tester cette expérience immédiatement.

Profitons de l'élan créé par les modifications apportées à la source pour apporter une dernière modification qui permettra à un utilisateur de s'informer sur les achats en ligne. Votre agent numérique vous répondra que cette fonctionnalité n'est pas encore disponible, mais qu'il vous invite à revenir plus tard.

Indiquer à l'utilisateur que les achats en ligne seront bientôt disponibles

Nous allons apporter une modification similaire à celle que nous avons effectuée pour informer l'utilisateur des horaires d'ouverture. Cette fois, nous allons placer les informations dans une fiche enrichie avec une image attrayante.

Analysez le message normalisé et vérifiez une condition pour une constante appelée CMD_ONLINE_SHOPPING_INQUIRY avec la valeur définie sur "online-shopping-inquiry", qui appelle send_online_shopping_info_message si la condition est vraie.

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

Définissez maintenant send_online_shopping_info_message. Nous souhaitons que ce message soit envoyé dans une fiche enrichie avec une image. Copions donc la fonction send_rich_card pour l'utiliser comme modèle pour définir send_online_shopping_info_message.

Nous devons d'abord mettre à jour le texte de remplacement pour qu'il contienne un message approprié. Le texte de remplacement est utilisé si l'appareil ne peut pas recevoir de fiche enrichi pour une raison quelconque. Nous devons ensuite mettre à jour BusinessMessagesRichCard pour inclure un titre, une description, des suggestions et un champ multimédia pertinents. Notre fonction devrait se présenter comme suit:

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

Excellent ! Notre agent numérique peut désormais répondre aux questions des utilisateurs concernant les achats en ligne. Pour le moment, notre agent numérique n'est pas encore compatible avec les achats en ligne. Nous envoyons donc un message à l'utilisateur pour l'informer que cette fonctionnalité sera bientôt disponible. Voici à quoi ressemble notre agent numérique lorsque l'utilisateur s'interroge sur les achats en ligne.

5cd63c57c1b84f9a.png

Tout comme la modification précédente que nous avons apportée pour permettre à un utilisateur de s'informer sur les horaires d'ouverture, cette modification est visible immédiatement si vous utilisez ngrok ou dès que vous déployez le code sur GCP App Engine.

Dans la partie suivante, nous utiliserons des amorces de conversation et des chips de suggestion pour guider la conversation vers le parcours idéal.

Utiliser des chips pour orienter la conversation

Nous avons apporté quelques modifications au code source et déployé l'agent numérique mis à jour, mais nous ne nous attendons pas à ce que les utilisateurs saisissent "business-hours-inquiry" ou "online-shopping-info" pour en savoir plus sur l'établissement. Modifions les déclencheurs de conversation afin que, lorsque la conversation est ouverte, l'utilisateur ne soit pas seulement accueilli par un message d'accueil, mais également par des déclencheurs de conversation.

Accédez à la console Business Communications, puis à la page Informations sur l'agent de votre agent. Nous avons précédemment défini des sujets de conversation pour les chips, les fiches et les carrousels. Bien que ces fonctionnalités fonctionnent toujours, elles ne sont plus pertinentes pour notre activité. Vous pouvez les conserver pour continuer à mettre en avant ces fonctionnalités enrichies ou les supprimer pour que votre agent numérique affiche des sujets de conversation spécifiques à l'établissement Bonjour Meal.

Nous allons créer deux nouveaux amorces de conversation. Pour le premier, définissez le texte sur "Quels sont vos horaires d'ouverture ?" et les données de postback sur "business-hours-inquiry". Pour le deuxième déclencheur de conversation, définissez le texte sur "Puis-je effectuer des achats ici ?" et les données de postback sur "online-shopping-info".

La configuration doit se présenter comme suit:

ef6e6888acea93e3.png

Comme pour les autres modifications apportées à la Business Communications Console, la propagation de ces modifications prendra un certain temps avant que vous puissiez les voir sur votre appareil mobile.

Maintenant que nous avons terminé avec les amorces de conversation, nous devons également trouver un moyen de guider l'utilisateur vers un parcours réussi une fois la conversation commencée. Vous pouvez utiliser des chips de manière contextuelle après l'envoi d'un message pour guider l'utilisateur vers d'autres fonctionnalités de l'agent numérique. Nous allons donc envoyer un message avec une suggestion pour que l'utilisateur effectue une autre action avec l'agent chaque fois qu'il s'interroge sur les horaires d'ouverture ou les achats en ligne.

À la fin de la fonction, ajoutez ce qui suit:

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

Notez que le champ de texte d'une suggestion BusinessMessages est limité à 25 caractères, comme indiqué dans la documentation.

Voici quelques captures d'écran de l'expérience utilisateur attendue, avec des amorces de conversation mises à jour et une utilisation stratégique des chips de suggestion.

ef57695e2bacdd20.png

6. Félicitations

Félicitations, vous avez créé votre premier agent numérique Business Messages.

Vous avez déployé une application Web pour prendre en charge votre agent numérique dans Business Messages, utilisé la console Business Communications pour modifier l'agent et façonné l'expérience utilisateur avec un agent numérique en apportant des modifications au code source.

Vous connaissez désormais les étapes clés requises pour créer une expérience interactive dans Business Messages. Les possibilités qui s'offrent à vous sont nombreuses. Vous pouvez étendre votre agent pour qu'il prenne en charge la recherche d'inventaire ou ajouter un panier pour suivre les articles susceptibles d'intéresser l'utilisateur. Vous pouvez utiliser un carrousel pour présenter les éléments du menu et, à l'aide de suggestions, permettre à l'utilisateur de sélectionner les éléments qui l'intéressent.

Voici un aperçu de ce à quoi cela pourrait ressembler.

57d2bb7b0ec38c81.png

Comment créer une expérience de conversation de qualité ?

Les meilleurs agents fournissent des informations contextuelles à l'utilisateur tout en lui permettant d'utiliser des fonctionnalités pendant la conversation. Ils peuvent ainsi interagir avec l'entreprise comme ils le feraient normalement par téléphone ou même en personne. Réfléchissez à la façon dont les sujets suivants peuvent s'appliquer à une conversation que vous souhaitez avoir avec une entreprise avec laquelle vous collaborez.

Fournir du contexte et définir les attentes

Fournir du contexte peut aller de l'explication explicite de la façon dont vous pouvez aider l'utilisateur à la présentation de l'agent numérique avec un persona auquel l'utilisateur peut s'identifier. Les agents efficaces sur Business Messages utilisent l'avatar représentatif pour montrer à l'utilisateur avec qui il parle.

La définition des attentes dépend de l'expérience utilisateur que vous créez. Par exemple, si votre agent peut effectuer une recherche d'inventaire, informez d'abord l'utilisateur que la disponibilité peut être faible avant de lui donner la réponse.

Fournir des fonctionnalités à l'utilisateur

Les consommateurs interagissent constamment avec les entreprises. Que ce soit pour vérifier l'état d'une commande ou s'assurer qu'un article est en stock, Business Messages peut prendre en charge des interactions utilisateur complexes. De nombreux utilisateurs continuent d'appeler les entreprises par téléphone pour obtenir des réponses à leurs questions, même si les réponses sont disponibles sur le site Web de l'entreprise. Par conséquent, les entreprises doivent investir davantage de ressources pour gérer le volume d'appels, en particulier pendant les fêtes.

Maintenir l'engagement de l'utilisateur

Fournissez des points de contact conversationnels pour maintenir l'engagement de l'utilisateur dans la conversation. Entre les messages, vous pouvez appeler des indicateurs de frappe pour indiquer à l'utilisateur que vous traitez une réponse.

Grâce à des fonctionnalités avancées telles que les indicateurs de saisie, les chips de suggestion, les fiches enrichies et les carrousels, vous pouvez guider l'utilisateur dans des parcours heureux pour l'aider à accomplir certaines tâches, comme commander à partir d'un menu d'articles. L'objectif est de réduire le trafic d'appels sur la ligne téléphonique d'une entreprise.

Il est essentiel qu'une conversation fournisse une fonctionnalité à l'utilisateur. Les utilisateurs qui contactent une entreprise par messagerie s'attendent à obtenir rapidement des réponses à leurs questions. Dans une situation non idéale, l'agent numérique ne peut pas faciliter la conversation, ce qui peut nuire à l'expérience utilisateur. Heureusement, il existe des solutions, comme transférer la conversation à un agent en direct, que nous verrons dans un prochain atelier de programmation.

Et ensuite ?

Lorsque vous êtes prêt, consultez certains des sujets suivants pour en savoir plus sur les interactions plus complexes disponibles avec Business Messages

Documents de référence