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 présente l'intégration à Business Messages, qui permet aux clients d'interagir avec les établissements que vous gérez via la recherche Google et Maps. Il se peut que vous souhaitiez intégrer directement Business Messages, que vous travailliez chez un éditeur de logiciels indépendant qui développe des solutions de messagerie pour les entreprises avec lesquelles vous travaillez, ou que vous venez de découvrir Business Messages et que vous souhaitiez bricoler la plate-forme.

Peu importe ce qui vous a amené ici, cet atelier de programmation est un excellent moyen de vous lancer. À la fin de celui-ci, vous aurez votre premier agent numérique avec lequel les utilisateurs pourront interagir. Lorsque vous serez prêt à lancer Business Messages après avoir peaufinée un peu, vous pourrez toucher des millions de clients.

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

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 les entreprises sans avoir à installer d'application supplémentaire. Un agent numérique est un élément de logique avec lequel vos clients interagissent. La logique est gérée par une application Web déployée dans le cloud ou dans votre infrastructure. C'est à vous de décider comment vous répondez à l'utilisateur. Les meilleurs agents fournissent du contexte pour définir les attentes, maintenir l'engagement des clients et fournir des fonctionnalités pour aider les utilisateurs besoins.

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épondra à quelques questions simples, comme "À quelle heure fermez-vous ?". ou "Puis-je acheter en ligne ?".

Dans cet atelier de programmation, vos utilisateurs pourront acheter des articles via l'agent numérique, rediriger l'utilisateur vers une société de traitement des paiements pour collecter de l'argent, puis planifier l'enlèvement de leurs articles fictifs en magasin.

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

  • Répondre aux questions via une puce de suggestion
  • Guidez l'utilisateur pour lui poser des questions auxquelles votre agent numérique peut répondre.
  • Fournir des fonctionnalités de conversation enrichies pour maintenir l'intérêt de l'utilisateur dans la conversation

883b5a7f9f266276.png

Points abordés

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

Cet atelier de programmation est consacré à 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 5 ou version ultérieure OU un appareil iOS équipé de l'application Google Maps
  • Une expérience dans la programmation d'applications Web
  • Une connexion Internet

2. Configuration

Activer les API

Dans le cadre de cet atelier de programmation, comme nous allons travailler avec une application Django, nous nous appuyons sur l'API Cloud Build pour déployer l'application sur App Engine. Par ailleurs, si vous utilisez ngrok, il n'est pas nécessaire 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 décrite dans la documentation pour créer un compte de service dans la console pour les développeurs Business Communications.

Déployer le code de démarrage EchoBot Django Python

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 qui permet de recevoir des messages de Business Messages. L'application renvoie les messages à l'utilisateur et peut présenter certaines des fonctionnalités enrichies disponibles sur la surface de conversation.

Configurer votre webook

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

L'URL de webhook correspond à l'URL de l'application suivie de "/callback/". Voici un exemple: https://PROJECT_ID.appspot.com/callback/

Accédez à la page Paramètres du compte de la console Business Communications. Dans l'angle supérieur droit, sous la barre de navigation, vous devriez voir le nom de votre projet GCP. Si un menu déroulant s'affiche, assurez-vous de sélectionner votre projet GCP.

Renseignez les coordonnées du point de contact technique, puis remplacez le webhook par 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 développeur Business Communications

Dans la console Business Communications, cliquez sur le logo situé en haut à gauche pour revenir au tableau de bord de la console, puis cliquez sur Créer un agent. Vous créez une marque en même temps que votre agent. Sélectionnez Business Messages (Messages commerciaux) comme 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.La marque correspond à l'entreprise avec laquelle vous travaillez, et les consommateurs peuvent interagir de manière conversation avec l'agent. Dans le champ Agent name (Nom de l'agent), indiquez ce que vous souhaitez que les utilisateurs voient dans la conversation Business Messages. Dans le cas de Bonjour Meal fictif, Bonjour Rail est la compagnie ferroviaire qui gère les restaurants Bonjour Meal. Je vais donc spécifier Bonjour Rail en tant que marque et Bonjour Meal en tant qu'agent.

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

88a9798e6546eb4e.png

Cliquez sur Create agent (Créer un agent) et laissez la console effectuer quelques opérations. 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 découvrir à quoi ressemblerait une requête curl avec la console.

Avoir votre première conversation

Ouvrez l'agent que vous venez de créer. Une page Overview (Aperçu) s'affiche et vous permet de commencer à examiner les détails de votre agent. Examinez 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 sûr, copiez l'URL de test correspondant à l'appareil que vous avez sous la main pour effectuer le test. Envoyez ce message copié à votre appareil comme vous le souhaitez.

Une fois sur votre appareil mobile, appuyez sur le lien pour appeler le lanceur de l'agent Business Messages, avec l'URL de test de l'agent préremplie.

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

2bf9f282e09062de.png

Interagissez avec l'agent et découvrez ses capacités. Dans la plupart des cas, vous constaterez que la surface de conversation ne fait que répéter vos messages. Envoyez-lui un message du type "Hello, World!" et l'agent vous renverra le même message.

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

  • Si vous envoyez le mot "carte", vous utiliserez une carte enrichie
  • Si vous envoyez des "chips", vous appellerez des chips de suggestion
  • Si vous envoyez "carrousel", vous appellerez un carrousel de cartes enrichies

Félicitations ! Voici la conversation inaugurale de votre agent.

Chacune des fonctionnalités enrichies peut être utilisée pour fournir un meilleur contexte à la personne qui communique avec votre agent. Envoyez des assets graphiques sous forme de cartes enrichies pour mieux communiquer vos idées, ou utilisez les chips de suggestion pour orienter la conversation.

Modifier le message de bienvenue et utiliser les chips de conversation

Mettons-nous en pratique dans la Play Console, voyons comment modifier le message de bienvenue de l'agent et comment utiliser les chips de suggestion pour aider l'utilisateur à communiquer.

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

4323f988216fa054.png

Remplacez le message de bienvenue (champ de saisie jaune) par ce qui suit:

Bienvenue dans l'agent de démarrage Bonjour Meal. Je peux reprendre vos messages et vous montrer quelques-unes des fonctionnalités enrichies disponibles sur la plate-forme. Essayez ces suggestions !

Cliquez sur + Ajouter une amorce de conversation comme indiqué dans le cadre violet de l'image ci-dessus pour ajouter des amorces de conversation afin d'appeler des chips de suggestion, un carrousel et une fiche. Les amorces de conversation que vous ajoutez ont besoin d'un composant texte et d'un composant postbackData. Le texte est celui qui s'affiche pour l'utilisateur, tandis que les données postBack 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

Une fois la modification effectuée, les informations sur l'agent se présentent comme suit dans la console:

8e96b0a10edd20af.png

Sur le côté droit de la console, un aperçu de l'agent s'affiche. Comme vous pouvez le constater, le message de bienvenue reflète la valeur que vous venez de remplacer et les chips de suggestion qui se trouvent en dessous.

C'est un excellent outil pour avoir une idée de ce à quoi ressemblera 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 visibles dans la conversation, car les données précédentes sont mises en cache dans l'infrastructure Business Messages. Le cache est vidé environ toutes les deux heures. Vous devriez donc pouvoir réessayer demain.

En attendant, voyons comment tout fonctionne sous le capot.

4. Analyser le code de démarrage

Une vue à 3 000 mètres du code source

Le code de démarrage que vous avez déployé renvoie les messages aux utilisateurs et peut présenter une carte enrichie, un carrousel ou des chips de suggestion. Examinons plus en détail le code source afin de comprendre son fonctionnement. Ensuite, nous verrons ce que nous devons changer.

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, c'est assez simple. À la fin de cet atelier de programmation, vous aurez appris son fonctionnement.

De manière générale, Django achemine les URL vers les vues, et la logique d'affichage génère un modèle qui s'affiche dans le navigateur. Examinons 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, de sorte que Django puisse 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 par le projet sont les suivantes:

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

Les deux routes d'URL font référence à bopis_views, qui provient de bopis/views.py. Voyons ce qui se passe dans ce fichier. Pour commencer, analysons d'abord 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 d'extraordinaire dans ce scénario: nous renvoyons simplement une réponse HTTP (avec du code HTML) au navigateur qui a effectué la requête. Vous pouvez donc ouvrir l'URL racine du projet, mais vous n'avez pas vraiment grand-chose à faire là-bas, car cela vous ramène à cet atelier de programmation.

L'autre URL redirige vers une fonction appelée callback, également dans bopis/views.py. Examinons 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.")
...

Ici, la logique analyse le corps de la requête pour un message ou une suggestionResponse et transmet ces informations à une fonction appelée route_message, puis renvoie une réponse HTTP à l'infrastructure Business Messages pour accuser réception du message.

Il s'agit d'une fonction importante. Cet élément 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 afin d'envoyer des messages à un outil d'automatisation tel que Dialogflow afin de comprendre ce qu'un utilisateur peut dire et de produire 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. Consultez le schéma 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 réel ou 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 diminuant tous les caractères. Une fois le fichier normalisé, 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 amorces 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 l'imaginez, renverrait les messages.

Envoyer des messages

Vous devriez maintenant avoir une idée de la façon dont les messages sont reçus par l'application Web. Tout se fait 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 envoie le message à l'utilisateur.

L'API Business Messages dispose de 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 la page Envoyer des messages pour découvrir comment cURL est utilisé pour envoyer un message à un ID de conversation spécifique.

Pour les besoins de 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é dans App Engine sur votre projet GCP, ou sur l'exécution en local via ngrok.

Examinons la fonction echo_message et voyons comment interagir 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 du message transmise à la fonction echo_message. Une fois instancié, l'objet est 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 utilise les identifiants de votre compte de service pour vérifier que vous pouvez envoyer des messages à cette conversation, instancier un client Business Messages et créer une requête pour envoyer le message au conversation ID donné.

Les fonctionnalités enrichies 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 comportent des postback_data afin que la logique de rappel puisse les analyser de manière appropriée.

Maintenant que nous avons vu comment envoyer un message, examinez la manière dont l'exemple envoie les cartes enrichies, les carrousels et les chips de suggestion. Dans la section suivante, nous allons modifier le code source afin d'envoyer des messages avec certaines de ces fonctionnalités enrichies.

Lorsque vous êtes prêt, personnalisez l'agent Bonjour Meal.

5. Personnaliser votre agent

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

906bc74668a1b215.png

D'accord, pas si beau, il a en fait l'air un peu nu et ne représente pas vraiment notre entreprise. Heureusement, nous disposons de connaissances de base sur le code qui sous-tend l'agent, et nous disposons 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 réel
  • Message de bienvenue amélioré
  • Fournir des informations sur les horaires d'ouverture
  • Informer l'utilisateur que l'achat d'articles en ligne sera bientôt disponible
  • Utiliser des chips de suggestion de conversation pour faciliter la conversation

Nous utiliserons la console Business Communications pour nous aider à mettre à jour le logo, c'est-à-dire le message de bienvenue. Toutefois, vous pouvez toujours utiliser directement les API Business Communications pour faire de même. Nous devons ensuite mettre à jour le code source afin d'envoyer les messages appropriés pour fournir des informations sur les horaires d'ouverture et indiquer que Bonjour Meal proposera bientôt une fonctionnalité d'achat en ligne. Lorsque c'est fait, nous reviendrons à la console Business Communications et créerons des chips de suggestion de conversation pour guider la conversation vers le parcours heureux pris en charge par l'agent numérique.

Dans la console Business Communications, sélectionnez votre agent, puis accédez à Informations sur l'agent. Nous devons mettre à jour le logo de l'entreprise (indiqué en jaune ci-dessous).

eb6b8ac6b62387ee.png

Cliquez sur Importer pour sélectionner une image à mettre en ligne ou à importer à partir d'une URL.

Consultez les consignes de conception des logos de la documentation afin de connaître les bonnes pratiques d'utilisation de vos propres logos.

Importez 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. Il s'intitule "bonjour_meal-logo.png". Vous pouvez faire glisser le fichier dans la fenêtre modale du navigateur Web. Un outil de retouche d'image s'affichera pour modifier la qualité et le recadrage de l'image. Ajustez la résolution et recadrez l'image pour qu'elle soit inférieure ou égale à la contrainte de 50 Ko. Lorsque l'image vous convient, cliquez sur la coche dans le cercle bleu pour confirmer, puis cliquez sur Select (Sélectionner) en bas de la fenêtre modale.

1856081f59623ae2.png

Enfin, cliquez sur Save (Enregistrer) en haut à droite de la page Agent information (Informations sur l'agent). La prise en compte de cette modification sur votre appareil peut prendre un certain temps, car les informations sur l'agent sont mises en cache sur nos serveurs et devraient être visibles dans les deux heures suivant la modification.

Modifier le message de bienvenue

Nous avons déjà effectué la mise à jour du message de bienvenue dans cet atelier de programmation. Reprenons cette procédure, mais configurez cette fois un message de bienvenue davantage applicable au parcours utilisateur 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 Welcome message (Message de bienvenue), dans lequel vous pouvez modifier le message.

6598fec47021136e.png

Sachant que nous allons ajouter des amorces de conversation, nous pouvons les mentionner dans notre message de bienvenue. Remplacez-le par le texte suivant dans le champ de saisie:

"Bienvenue dans Bonjour Meal. Je suis un assistant et je peux répondre à vos questions sur Bonjour Meal. Essayez certaines des options suivantes. »

Enfin, cliquez sur Save (Enregistrer) en haut à droite de la page Agent information (Informations sur l'agent). Là encore, la prise en compte de cette modification va prendre un certain temps, car notre mécanisme de mise en cache permet d'assurer le bon déroulement du processus.

Fournir des informations sur les horaires d'ouverture

Pour fournir ces informations aux utilisateurs, nous leur envoyons 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 normalise d'abord la chaîne, puis commence à vérifier si le message normalisé correspond à l'un des paramètres codés en dur. Pour plus de simplicité, nous allons ajouter une condition dans laquelle nous vérifions si le message normalisé est égal à une nouvelle constante, que nous appellerons CMD_BUSINESS_HOURS_INQUIRY et contiendra la valeur "business-hours-queries". 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 maintenant 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, la seconde consiste à 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'
...

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

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

Ainsi, notre bot devrait être en mesure de répondre en indiquant ces horaires d'ouverture à l'utilisateur lorsque celui-ci envoie le message suivant : "business-hours-invoice". Vous pouvez vous attendre à quelque chose comme ceci:

125802166995afd5.png

Une fois que vous aurez déployé le code source 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 de l'agent. Vous pourrez donc tester cette expérience immédiatement.

Bien que nous soyons en plein essor ici avec les modifications de source, faisons une autre modification qui permettra à un utilisateur de se renseigner sur les achats en ligne. Votre agent numérique vous répondra que la fonctionnalité n'est pas encore disponible, mais n'hésitez pas à revenir plus tard.

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

Nous procéderons de la même manière que pour informer l'utilisateur des horaires d'ouverture. Cette fois, nous plaçons les informations dans une carte enrichie, avec une image attrayante.

Analyser le message normalisé et vérifier une condition pour une constante appelée CMD_ONLINE_SHOPPING_INQUIRY avec une 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)
...

À présent, définissez send_online_shopping_info_message. Nous voulons que ce message soit envoyé dans une carte enrichie avec une image. Nous allons donc copier la fonction send_rich_card pour l'utiliser comme modèle afin de définir send_online_shopping_info_message.

Nous devons d'abord mettre à jour le texte de remplacement pour qu'il comporte un message approprié. Le texte de remplacement est utilisé si l'appareil ne peut pas recevoir de carte enrichie pour une raison quelconque. Nous devons ensuite mettre à jour BusinessMessagesRichCard pour inclure un titre, une description, des suggestions et un champ multimédia pertinents. La 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 utilisateurs qui se renseignent sur les achats en ligne. Pour le moment, notre agent numérique ne prend pas encore en charge 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 demande des informations sur des achats en ligne.

5cd63c57c1b84f9a.png

Tout comme la modification que nous avions apportée précédemment pour permettre aux utilisateurs de se renseigner sur les horaires d'ouverture, cette modification est visible immédiatement si vous utilisez ngrok ou dès que vous déployez le code dans GCP App Engine.

Dans la prochaine partie, nous utiliserons des amorces de conversation et des chips de suggestion pour guider la conversation vers la voie du succès.

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 "demande-horaires d'ouverture". ou "online-shopping-info" pour se renseigner sur l'entreprise. Mettons à jour les amorces de conversation de sorte qu'une fois la conversation ouverte, l'utilisateur soit accueilli par un joli message de bienvenue, et des amorces de conversation lui soient également présentées.

Accédez à la console Business Communications, puis à la page Informations sur l'agent de votre agent. Nous avons précédemment défini des amorces de conversation pour "chips", "card" et "carrousel". Bien que celles-ci fonctionnent toujours, elles ne sont plus pertinentes pour notre fonction commerciale. Vous pouvez les laisser pour continuer à présenter ces fonctionnalités enrichies ou les supprimer afin que votre agent numérique affiche des amorces de conversation spécifiquement pour l'entreprise Bonjour Meal.

Nous allons créer deux amorces de conversation. Pour le premier, définissez le texte sur "Quels sont vos horaires d'ouverture ?". et définissez l'option Données de postback sur "demande-horaires-ouverture". Comme deuxième amorce de conversation, définissez le texte sur "Puis-je faire des achats ici ?". Définissez ensuite les données de postback sur "online-shopping-info".

Vous devriez obtenir la configuration illustrée dans la capture d'écran suivante:

ef6e6888acea93e3.png

Comme pour les autres modifications apportées à la console Business Communications, la propagation des modifications apportées sur votre appareil mobile prendra un certain temps.

Maintenant que nous en avons terminé avec les amorces de conversation, nous devons également trouver un moyen d'orienter l'utilisateur vers une voie heureuse une fois que la conversation a commencé. Il est possible d'utiliser des chips de manière contextuelle après l'envoi d'un message pour guider l'utilisateur vers d'autres fonctionnalités dont l'agent numérique est capable. Dès que l'utilisateur demande des informations sur les horaires d'ouverture ou des achats en ligne, nous lui envoyons un message pour lui suggérer de faire autre chose avec l'agent.

À 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 BusinessMessagesSuggestion est limité à 25 caractères, comme indiqué dans la documentation.

Voici quelques captures d'écran de l'expérience utilisateur attendue, une fois les nouvelles amorces de conversation et l'utilisation stratégique des chips de suggestion.

ef57695e2bacdd20.png

6. Félicitations

Félicitations, vous venez de créer votre premier agent numérique Business Messages !

Vous avez déployé une application Web pour prendre en charge votre agent numérique sur Business Messages, modifié l'agent à l'aide de la console Business Communications et façonné l'expérience utilisateur avec un agent numérique en modifiant le code source.

Vous connaissez maintenant les principales étapes à suivre pour créer une expérience Business Messages interactive et les possibilités qui s'offrent à vous à partir de maintenant. Votre agent peut être étendu pour permettre la recherche d'inventaire ou introduire un panier pour suivre ce qui pourrait 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 ce qui l'intéresse.

Voici une accroche 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 proposant des fonctionnalités tout au long de la conversation. Ils peuvent ainsi interagir et interagir avec l'entreprise comme ils le feraient habituellement 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 aimeriez avoir avec une entreprise avec laquelle vous travaillez.

Fournir un contexte et définir les attentes

Fournir un contexte peut aller d’indiquer explicitement comment vous pouvez aider l’utilisateur à présenter l’agent numérique avec un personnage auquel l’utilisateur peut s’identifier. Les agents qui réussissent sur Business Messages utilisent l'avatar de représentation pour montrer à l'utilisateur à qui il s'adresse.

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

Fournir une fonctionnalité à l'utilisateur

Les consommateurs interagissent en permanence avec les entreprises. Que ce soit pour vérifier l'état d'une commande ou la disponibilité d'un article, Business Messages est compatible avec les interactions complexes des utilisateurs. 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 leur site Web. Les entreprises doivent donc investir davantage de ressources pour gérer le volume d'appels, en particulier pendant les fêtes.

Maintenir l'engagement des utilisateurs

Proposez des points de contact conversationnels pour maintenir l'intérêt de l'utilisateur dans la conversation. Entre les messages, vous pouvez appeler des indicateurs de saisie pour informer l'utilisateur que vous traitez une réponse pour l'utilisateur.

Grâce à des fonctionnalités enrichies telles que les indicateurs de saisie, les chips de suggestion, les cartes enrichies et les carrousels, vous pouvez guider l'utilisateur tout au long de l'expérience utilisateur pour l'aider à effectuer certaines tâches, comme commander dans un menu d'éléments. L'objectif est de réduire le trafic d'appels vers la ligne téléphonique d'une entreprise.

Il est essentiel qu'une conversation fournisse des fonctionnalités à l'utilisateur. Les utilisateurs qui contactent une entreprise par message s'attendent à obtenir une réponse rapide à 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 moyens de contourner ce problème, comme transférer la conversation à un agent réel, que nous aborderons 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 que vous pouvez réaliser avec Business Messages

Documents de référence