1. Introduction
Dernière mise à jour:11/05/2022
Bienvenue dans Business Messages !
Cet atelier de programmation est une introduction à l'intégration à Business Messages, qui permet aux clients d'entrer en contact avec les établissements que vous gérez via la recherche Google et Maps. Vous souhaitez peut-être intégrer directement Business Messages, ou travailler pour un éditeur de logiciels indépendant qui développe des solutions de messagerie pour les entreprises avec lesquelles vous travaillez ? Ou peut-être venez-vous de découvrir Business Messages et souhaitez bricoler sur la plate-forme.
Quelle que soit ce qui vous a amené ici, cet atelier de programmation est un excellent moyen de vous lancer. À la fin de l'atelier, vous disposerez d'un premier agent numérique avec lequel les utilisateurs pourront interagir. Si vous êtes prêt à passer un peu plus en détail à Business Messages, vous pourrez toucher des millions de clients.
Quelles sont les qualités d'un bon agent numérique ?
Business Messages est une surface conversationnelle qui offre une expérience semblable à celle d'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 l'élément 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 répondre à l'utilisateur. Les meilleurs agents fournissent le contexte permettant de définir les attentes, de maintenir l'engagement des clients et de fournir des fonctionnalités pour répondre 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épondra à quelques questions simples telles que "À quelle heure fermez-vous ?" ou "Puis-je effectuer des achats en ligne ?".
Dans cet atelier de programmation, vos utilisateurs pourront acheter des articles via l'agent numérique, les diriger 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 un chip de suggestion
- Aidez l'utilisateur à poser des questions auxquelles votre agent numérique peut répondre
- Fournir des fonctionnalités de conversation enrichies pour maintenir l'engagement de l'utilisateur
Points abordés
- Découvrez comment déployer une application Web sur 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 des messages des utilisateurs
- Comment envoyer des fonctionnalités enrichies 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.
Ce dont vous aurez besoin
- Créez sans frais un compte de développeur Business Communications
- 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
Pour cet atelier de programmation, comme nous allons travailler avec une application Django, nous allons nous appuyer sur l'API Cloud Build pour déployer l'application sur App Engine. Si vous utilisez ngrok, il n'est pas nécessaire d'activer l'API Cloud Build.
Pour activer l'API Cloud Build, procédez comme suit:
- Ouvrez l'API Cloud Build dans la console Google Cloud.
- 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 Django Python EchoBot
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 mettre en avant certaines des fonctionnalités intéressantes disponibles dans 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 votre URL de webhook sur la page Paramètres du compte de la console pour développeurs Business Communications.
L'URL de webhook sera l'URL de l'application suivie de "/rappel/". Ce code peut ressembler à ceci: https://PROJECT_ID.appspot.com/callback/.
Accédez à la page Paramètres du compte de la console Business Communications. Le nom de votre projet GCP devrait s'afficher en haut à droite, sous la barre de navigation. Si une liste déroulante s'affiche, veillez à sélectionner votre projet GCP.
Renseignez les informations sur le contact technique, puis mettez à jour le webhook avec l'URL du webhook de votre application déployée.
Cliquez sur Enregistrer à côté de la référence de votre projet GCP.
3. Créer votre premier agent
Utiliser la console pour les développeurs Business Communications
Dans la console Business Communications, cliquez sur le logo en haut à gauche pour revenir au tableau de bord de la console, puis cliquez sur Create agent (Créer un agent). Vous créez une marque en même temps que votre agent. Sélectionnez Business Messages pour Type d'agent et assurez-vous que les 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 travaillez et les clients peuvent interagir avec l'agent. Dans le champ Nom de l'agent, indiquez ce que vous souhaitez que les utilisateurs voient dans la conversation Business Messages. Dans le cas du jeu fictif Bonjour Meal, Bonjour Rail est la compagnie ferroviaire qui gère les restaurants Bonjour Meal. Je vais donc désigner Bonjour Rail comme marque et Bonjour Meal en tant qu'agent.
L'agent est l'entité conversationnelle qui représente la marque.
Cliquez sur Create agent (Créer un agent) et laissez la console s'exécuter. 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 pour effectuer les mêmes opérations que la console.
Créer votre première conversation
Ouvrez l'agent que vous venez de créer. La page Overview (Aperçu) s'affiche. Elle vous permet de commencer à examiner les détails de votre agent. Examinez les URL de test des agents. Elles permettent d'appeler la surface de conversation sur votre appareil.
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 Launch (Lancer) pour appeler la surface de conversation de votre agent.
Interagissez avec l'agent et faites-vous une idée de ses capacités. Dans la plupart des cas, vous devriez constater que la surface de conversation ne fait que refléter vos messages. Dites par exemple "Hello, World!" et l'agent vous renverra ce 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 une "carte", vous appelez une carte enrichie
- Si vous envoyez des "chips", vous appellerez des chips de suggestion
- Si vous envoyez un "carrousel", vous appelez un carrousel de cartes enrichies
Félicitations ! Voici la conversation inaugurale de votre agent avec vous.
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 des chips de suggestion pour guider la conversation.
Modifier le message de bienvenue et utiliser des chips de conversation
Passons à la pratique avec la console développeur, et 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".
Mettez à jour le message de bienvenue (le champ de saisie jaune) comme suit:
Bienvenue dans l'agent de démarrage Bonjour Meal. Je peux écouter vos messages et vous montrer quelques-unes des fonctionnalités avancées 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 suggestions, un carrousel et une fiche. Les amorces de conversation que vous ajoutez nécessitent un composant texte et un composant postbackData. Le texte est affiché 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. 
Après la modification, les informations sur l'agent dans la console se présentent comme suit:
Sur le côté droit de la console, vous pouvez voir un aperçu de l'agent. Avez-vous remarqué que le message de bienvenue reflète le contenu que vous venez de remplacer et les chips de suggestion qui se trouvent en dessous ?
Il s'agit d'un excellent outil pour avoir 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, nous ne pourrons pas voir immédiatement ces modifications 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 réessayer demain.
En attendant, voyons comment tout fonctionne en arrière-plan.
4. Analyser le code de démarrage
Une vue d'ensemble 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 de plus près le code source afin de comprendre comment cela fonctionne. Ensuite, nous déterminerons ce que nous devrons changer.
Le code de démarrage est un projet Django. Dans la suite 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. Si vous n'avez encore jamais utilisé Django, ne vous inquiétez pas : l'opération est assez simple. À la fin de cet atelier de programmation, vous aurez découvert 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. Jetons un coup d'œil au 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, ce qui permet à Django d'exécuter la logique si ces deux URL sont reconnues. Étant donné que l'URL du projet est https://PROJECT_ID.appspot.com/, les routes que le projet connaît 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. Jetons un coup d’œil à 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 trop sophistiqué ne s'applique ici: il nous suffit de renvoyer une réponse HTTPResponse 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 ici, car cela vous ramène à cet atelier de programmation.
L'autre URL achemine 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.")
...
La logique analyse ici le corps de la requête pour rechercher un message ou une suggestionResponse, puis transmet ces informations à une fonction appelée route_message. Elle renvoie ensuite 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 pour envoyer des messages à un outil d'automatisation tel que Dialogflow pour comprendre ce qu'un utilisateur peut dire et générer une réponse à partir de cette inférence. Vous pouvez également transférer le message afin que l'utilisateur puisse contacter un agent. Consultez le schéma suivant:
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. Ce mécanisme de routage, dans notre cas ici, 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 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'
...
En d'autres termes, 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, selon vous, renvoie les messages.
Envoyer des messages
Vous devriez maintenant avoir une idée de la façon dont l'application Web reçoit les messages. Tout se fait par le webhook.
Mais comment l'application envoie-t-elle un message sortant à un utilisateur à l'aide de Business Messages ?
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 dispose de bibliothèques en Python, Node.js et Java. Nous disposons également d'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 section 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 déployé dans App Engine sur votre projet GCP, ou l'exécution locale 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 transmis à send_message avec l'ID de la 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 uniquement 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 ont postback_data pour que la logique de rappel puisse les analyser correctement.
Maintenant que nous avons vu comment envoyer un message, voyons 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 comportant certaines de ces fonctionnalités enrichies.
Lorsque vous êtes prêt, personnalisez l'agent Bonjour Meal.
5. Personnaliser votre agent
Si vous avez suivi l'atelier de programmation jusqu'à présent, vous devriez voir notre magnifique agent.
Ce n'est pas si esthétique, il a en fait l'air un peu nu et ne représente pas vraiment notre entreprise. Heureusement, nous avons une connaissance de base du code utilisé pour l'agent et nous disposons des outils dont nous avons besoin 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
- Informez l’utilisateur que l’achat d’articles en ligne sera bientôt disponible
- Utilisation de chips de suggestion de conversation pour faciliter la conversation
La console Business Communications nous aidera à mettre à jour le logo, le message de bienvenue, mais vous aurez toujours la possibilité d'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. Bonjour Meal proposera bientôt une fonctionnalité d'achat en ligne. Une fois cette opération effectuée, nous retournons dans la console Business Communications et créons des chips de suggestion de conversation pour mener la conversation vers une expérience optimale avec l'agent numérique.
Inclure un logo
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, tel qu'indiqué en jaune ci-dessous.
Cliquez sur Importer pour sélectionner l'image à importer ou à importer à partir d'une URL.
Consultez les consignes concernant la conception de logos dans la documentation afin de connaître les bonnes pratiques que nous recommandons pour utiliser vos propres logos.
Importez le logo situé 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 d'édition d'éclairage s'affiche pour vous permettre de manipuler la qualité de l'image et de la recadrer. Ajustez la résolution de l'image et recadrez-la de sorte que sa taille soit inférieure ou égale à la contrainte de 50 Ko. Lorsque vous êtes satisfait de l'image, cliquez sur la coche dans le cercle bleu pour confirmer, puis cliquez sur Select (Sélectionner) au bas de la fenêtre modale.
Enfin, cliquez sur Enregistrer en haut à droite de la page Informations sur l'agent. Cette modification peut mettre un certain temps à apparaître 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à effectué la mise à jour du message de bienvenue plus tôt dans cet atelier de programmation. Recommençons en configurant cette fois un message de bienvenue plus applicable au parcours utilisateur Bonjour Meal.
Dans la console Business Communications, sélectionnez votre agent et accédez à Informations sur l'agent. Faites défiler l'écran vers le bas jusqu'au champ de saisie Message de bienvenue, où vous pouvez mettre à jour le message.
Sachant que nous allons ajouter des amorces de conversation, nous pouvons les mentionner dans notre message de bienvenue. Dans le champ de saisie, remplaçons-le par le texte suivant:
"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 Enregistrer en haut à droite de la page Informations sur l'agent. Là encore, la prise en compte de cette modification peut prendre un certain temps, en raison de notre mécanisme de mise en cache qui permet d'accélérer le processus.
Fournir des informations sur les horaires d'ouverture
Afin de 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 commence par normaliser 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é, ajoutons une condition supplémentaire qui permet de vérifier 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 est évaluée à 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 à 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 constante:
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'
...
Nous allons maintenant 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, tout 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)
...
Notre robot doit alors être en mesure de répondre à l'utilisateur en lui indiquant ces horaires d'ouverture lorsqu'il envoie le message suivant: "demande d'horaires d'ouverture". Voici ce à quoi vous pouvez vous attendre:
Une fois le code source déployé dans GCP, les modifications seront visibles immédiatement. Le cache de l'application Web dans Google Cloud Platform n'est pas mis en cache de la même manière que les informations de l'agent. Vous pouvez donc tester cette expérience immédiatement.
Bien que nous soyons encore en train de modifier les sources, nous allons effectuer une autre modification qui permettra à l'utilisateur de se renseigner sur les achats en ligne. Votre agent numérique vous répondra et vous indiquera que la fonctionnalité n'est pas encore disponible. Il devrait revenir plus tard pour vérifier.
Informer l'utilisateur que les achats en ligne seront bientôt disponibles
Nous effectuerons une modification similaire à celle utilisée pour informer l'utilisateur des horaires d'ouverture. Cette fois, nous allons placer les informations dans une carte enrichie, accompagnée d'une image attrayante.
Analyser le message normalisé et vérifier une condition pour une constante appelée CMD_ONLINE_SHOPPING_INQUIRY dont la valeur est définie sur "online-shopping-inquiry" qui appelle send_online_shopping_info_message si la condition est "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)
...
Vous devez maintenant définir 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 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 carte enrichie pour une raison quelconque. Nous devons ensuite modifier 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 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 un achat en ligne.
Tout comme la modification que nous avons précédemment apportée 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.
Utiliser des chips pour guider la conversation
Nous avons apporté des 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-ouverture" ou "infos-achats-en ligne" pour se renseigner sur l'établissement. Mettons à jour les amorces de conversation de sorte que, lorsque la conversation est ouverte, l'utilisateur est non seulement accueilli par un bon message de bienvenue, mais également d'autres amorces de conversation.
Accédez à la console Business Communications, puis à la page Informations sur l'agent de votre agent. Nous avons déjà défini des amorces de conversation pour les "chips", les "fiches" et les "carrousels". Même s'ils continuent de fonctionner, ils ne sont plus pertinents pour nos activités commerciales. Vous pouvez les laisser en place pour continuer à présenter ces fonctionnalités enrichies ou les supprimer pour que votre agent numérique affiche les amorces de conversation spécifiquement pour l'activité Bonjour Meal.
Nous allons créer deux amorces de conversation. Pour le premier, indiquez "Quels sont vos horaires d'ouverture ?" dans le texte, puis l'option Données de postback sur "Demande d'horaires d'ouverture". Pour la deuxième amorce de conversation, définissez le texte sur "Puis-je faire des achats ici ?" et les données de postback sur "online-shopping-info".
Vous devriez obtenir la configuration illustrée dans la capture d'écran suivante:
Comme pour les autres modifications apportées dans la console Business Communications, la propagation des modifications peut prendre un certain temps avant que les modifications apportées sur votre appareil mobile ne s'affichent.
Maintenant que nous en avons terminé avec les amorces de conversation, nous voulons également trouver un moyen de guider l'utilisateur vers un bon chemin une fois la conversation commencée. Il est possible d'utiliser les chips en contexte après l'envoi d'un message pour guider l'utilisateur vers d'autres fonctionnalités dont l'agent numérique est capable. À chaque fois que l'utilisateur demande des informations sur les horaires d'ouverture ou des achats en ligne, nous envoyons un message à l'agent pour lui suggérer d'effectuer une autre action.
À la fin de la fonction, ajoutez le code suivant:
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)
...
Veuillez noter que le champ de texte d'une suggestion BusinessMessagesSuggestion est limité à 25 caractères, comme décrit dans la documentation.
Voici quelques captures d'écran montrant l'expérience utilisateur attendue, qui inclut de nouveaux amorces de conversation et une utilisation stratégique des chips de suggestion.
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 aider votre agent numérique sur Business Messages, utilisé la console Business Communications pour modifier l'agent et façonné l'expérience utilisateur avec un agent numérique en modifiant le code source.
Vous connaissez maintenant les principales étapes nécessaires pour créer une expérience Business Messages interactive et les possibilités qui s'offrent à vous à partir de maintenant sont passionnantes. Votre agent peut être étendu pour permettre la consultation d'inventaire ou introduire un panier pour suivre ce qui pourrait intéresser l'utilisateur. Vous pouvez utiliser un carrousel pour présenter des éléments sur le menu et, en utilisant les suggestions, permettre à l'utilisateur de sélectionner les éléments qui l'intéressent.
Voici un teaser de ce à quoi cela pourrait potentiellement ressembler.
Comment créer une expérience de conversation de qualité ?
Les meilleurs agents fournissent des informations contextuelles à l'utilisateur tout en lui offrant des fonctionnalités tout au long de la conversation afin qu'il puisse engager et interagir avec l'entreprise comme il le ferait habituellement par téléphone ou même en personne. Réfléchissez à la façon dont les sujets suivants pourraient s'appliquer à une conversation que vous aimeriez avoir avec une entreprise avec laquelle vous travaillez.
Fournir le contexte et définir les attentes
Fournir du contexte peut aller d'indiquer explicitement comment vous pouvez aider l'utilisateur à présenter l'agent numérique avec un persona auquel l'utilisateur peut s'identifier. Les agents performants dans Business Messages utilisent l'avatar représentatif pour montrer à l'utilisateur à qui ils s'adressent.
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é risque d'être faible avant de fournir la réponse.
Fournir des fonctionnalités à l'utilisateur
Les consommateurs interagissent en permanence avec les entreprises. Que ce soit pour vérifier l'état d'une commande ou si 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 afin d'obtenir des réponses à leurs questions, même si les réponses sont disponibles sur le site Web de l'entreprise. En conséquence, les entreprises doivent investir plus de ressources pour gérer le volume d'appels, en particulier pendant les fêtes.
Maintenir l'engagement des utilisateurs
Fournissez des points de contact conversationnels pour maintenir l'engagement de l'utilisateur. Entre les messages, vous pouvez appeler des indicateurs de saisie pour informer l'utilisateur que vous traitez une réponse pour lui.
Avec des fonctionnalités enrichies telles que des indicateurs de saisie, des chips de suggestion, des cartes enrichies et des carrousels, vous pouvez guider l'utilisateur dans des expériences positives pour l'aider à effectuer certaines tâches, comme commander à partir d'un menu d'éléments. L'objectif est de réduire le trafic vers la ligne téléphonique de l'entreprise.
Il est essentiel qu'une conversation fournisse des fonctionnalités à l'utilisateur. Les utilisateurs qui contactent une entreprise par SMS s'attendent à trouver rapidement une réponse à leurs questions. Dans une situation non idéale, l'agent numérique ne peut pas animer 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 dans Business Messages
- Vie d'un agent: création au lancement
- Exigences et consignes
- Consignes concernant le logo
- Tous les guides
Documents de référence
- SuggestedReply
- Document de référence sur les messages Business Messages
- Définition JSON de RichCard