1. Introducción
Última actualización: 11/05/2022
Te damos la bienvenida a Business Messages
Este codelab es una introducción a la integración con Business Messages, que permite que los clientes se conecten con empresas que administras a través de la Búsqueda de Google y Maps. Tal vez seas una empresa que desea integrarse directamente a Business Messages, o quizás estés trabajando en un proveedor de software independiente que está creando soluciones de mensajería para las empresas con las que trabajas, o tal vez acabas de descubrir con Business Messages y quieres hacer modificaciones en la plataforma.
Más allá de lo que te trajo aquí, este codelab es una manera fantástica de comenzar. Al final, tendrás tu primer agente digital con el que los usuarios pueden interactuar. Cuando estés listo para lanzar Business Messages después de un poco más de perfeccionamiento, tendrás el potencial de llegar a millones de clientes.
¿Qué características debe tener un buen agente digital?
Business Messages es una plataforma de conversación que proporciona una experiencia similar a las apps en dispositivos móviles que les permite a los consumidores conectarse con las empresas sin instalar una app adicional. Un agente digital es la pieza de lógica con la que interactúan los clientes. Una aplicación web implementada en la nube o en tu infraestructura administra la lógica. Depende completamente de ti cómo le respondes al usuario. Los mejores agentes proporcionan contexto para establecer expectativas, mantener a sus clientes comprometidos y brindar funcionalidades que satisfacen las necesidades de los usuarios.
Qué compilarás
En este codelab, compilarás un agente digital en Business Messages para una empresa ficticia llamada Bonjour Meal. Este agente digital responderá unas preguntas simples, como "¿A qué hora cierras?" o "¿Puedo comprar en línea?".
En este codelab, los usuarios podrán comprar artículos a través del agente digital, dirigirlos a un procesador de pagos para cobrar dinero y, luego, programar el retiro de sus artículos ficticios en la tienda.
En este codelab, tu app hará lo siguiente:
- Responde preguntas con un chip de sugerencias
- Guía al usuario para que haga preguntas que tu agente digital pueda responder
- Proporciona funciones de conversación interesantes para mantener al usuario involucrado en la conversación.
Qué aprenderás
- Cómo implementar una aplicación web en App Engine en Google Cloud Platform. También puedes usar ngrok para probar tu aplicación local de forma pública.
- Cómo configurar tu cuenta de Business Messages con un webhook de aplicación web para recibir mensajes de los usuarios
- Cómo enviar funciones enriquecidas, como tarjetas, carruseles y sugerencias de conversación, con la API de Business Messages
- Cómo envía tus mensajes Business Messages
Este codelab se enfoca en la creación de tu primer agente digital.
Requisitos
- Regístrate para obtener una cuenta de desarrollador gratuita de Business Communications
- Consulta nuestro sitio para desarrolladores a fin de obtener instrucciones sobre cómo hacerlo
- Un dispositivo Android con la versión 5 o una posterior, O un dispositivo iOS con la app de Google Maps
- Tener experiencia en programación de aplicaciones web
- Una conexión a Internet
2. Cómo prepararte
Habilita las APIs
En este codelab, como trabajaremos con una aplicación de Django, usaremos la API de Cloud Build para implementar la aplicación en App Engine. Como alternativa, si usas ngrok, no es necesario habilitar la API de Cloud Build.
Para habilitar la API de Cloud Build, haz lo siguiente:
- Abre la API de Cloud Build en la consola de Google Cloud.
- Haz clic en Habilitar.
Crear una cuenta de servicio
Debes crear una cuenta de servicio para acceder a las APIs de Business Communications y Business Messages. Sigue los pasos de la documentación para crear una cuenta de servicio en la Consola para desarrolladores de Business Communications.
Implementa el código de inicio de EchoBot de Python de Django
En una terminal, clona la Muestra de Django Echo Bot en el directorio de trabajo de tu proyecto con el siguiente comando:
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
Copia el archivo de credenciales JSON que creaste para la cuenta de servicio en la carpeta de recursos de la muestra y cambia el nombre de las credenciales a “bm-agent-service-account-credentials.json”.
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json
En una terminal, navega al directorio del paso 1 de la muestra.
Ejecuta los siguientes comandos en una terminal para implementar la muestra:
$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
- PROJECT_ID es el ID del proyecto que usaste para registrarte en las API.
Observa la URL de la aplicación implementada en el resultado del último comando:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
El código de partida que acabas de implementar contiene una aplicación web con un webhook para recibir mensajes de Business Messages. La aplicación repite los mensajes al usuario y puede mostrar algunas de las funciones completas disponibles en la superficie de conversación.
Configurar tu Webook
Ahora que se implementó el servicio, usarás la URL de la aplicación para establecer la URL de webhook en la página Configuración de la cuenta de la Consola para desarrolladores de Business Communications.
La URL de webhook será la URL de la aplicación + “/callback/”. Por ejemplo, podría ser algo como lo siguiente: https://PROJECT_ID.appspot.com/callback/
Ve a la página Configuración de la cuenta de la Business Communications Console. En la esquina superior derecha, debajo de la barra de navegación, debería ver el nombre de su proyecto de GCP. Si ves un menú desplegable, asegúrate de seleccionar tu proyecto de GCP.
Completa los detalles del Punto de contacto técnico y, luego, actualiza Webhook con la URL de webhook para la aplicación implementada.
Haz clic en Guardar junto a la referencia de tu proyecto de GCP.
3. Crea tu primer agente
Cómo usar la Consola para desarrolladores de Business Communications
En Business Communications Console, haz clic en el logotipo de la parte superior izquierda para volver al panel de la consola y, luego, haz clic en Crear agente. Creas una marca al mismo tiempo que creas tu agente. En Tipo de agente, selecciona Business Messages y asegúrate de que la Información del socio sea correcta.
En Marca, escribe el nombre de la marca que estás creando.Esta es la empresa con la que trabajas, y los consumidores pueden interactuar por conversación con el agente. En Nombre del agente, especifica qué quieres que vean los usuarios en la conversación de Business Messages. En el caso de la ficticia Bonjour Meal, Bonjour Rail es la empresa ferroviaria que administra los restaurantes Bonjour Meal. Así que especificaré Bonjour Rail como la marca y Bonjour Meal como el agente.
El agente es la entidad conversacional que representa a la marca.
Haz clic en Crear agente y deja que la consola haga algo mágico. Esta solicitud tarda unos segundos en realizar varias solicitudes a la API de Business Communications para crear la marca y el agente. Puedes usar la API de Business Communications directamente para crear un agente y una marca. Consulta la documentación para saber cómo se vería una solicitud curl para realizar las mismas acciones que realiza la consola.
Cómo tener la primera conversación
Abre el agente que acabas de crear. Verás la página Descripción general (Overview) que te permite comenzar a revisar los detalles del agente. Consulta las URLs de prueba del agente, que se usan para invocar la plataforma de conversación en tu dispositivo.
Para copiar la URL de prueba, haz clic en cualquiera de los chips. Por supuesto, debes copiar la URL de prueba del dispositivo que tienes a mano para realizar la prueba. Envía este mensaje copiado a tu dispositivo como quieras.
Una vez que estés en el dispositivo móvil, si presionas el vínculo, se invoca el Launcher de agentes de Business Messages con la URL de prueba del agente prepropagada.
Presiona Iniciar para invocar la superficie de conversación de tu agente.
Interactuar con el agente y hacerte una idea de lo que es capaz de hacer En su mayor parte, la superficie conversacional solo repetirá tus mensajes. Envíale un mensaje como "Hello, World!" y verás que el agente te enviará el mismo mensaje de vuelta.
La aplicación implementada también contiene cierta lógica para mostrar las funciones enriquecidas disponibles en Business Messages.
- Si envías "tarjeta", invocarás una tarjeta enriquecida.
- Si envías “chips”, invocarás chips de sugerencias.
- Si envías "carrusel", invocarás el carrusel de tarjetas enriquecidas.
¡Felicitaciones! Esta es la conversación inaugural de tu agente contigo.
Cada una de las funciones enriquecidas se puede usar para proporcionar un mejor contexto a la persona que se comunica con tu agente. Envía recursos gráficos en tarjetas enriquecidas para comunicar mejor las ideas o usa chips de sugerencias para guiar la conversación.
Actualiza el mensaje de bienvenida y usa chips de conversación
Practiquemos un poco con Play Console, veamos cómo editar el mensaje de bienvenida del agente y aprovechar los chips de sugerencias para ayudar al usuario a comunicarse.
Dirígete a la página Descripción general del agente y selecciona Información del agente. Desplázate hacia abajo hasta la sección del mensaje de bienvenida y los temas de conversación.
Actualiza el mensaje de bienvenida (el campo de entrada amarillo) para que lea:
Te damos la bienvenida al agente inicial de Bonjour Meal. Puedo reproducir tus mensajes y mostrarte algunas de las funciones enriquecidas compatibles con la plataforma. Prueba estas sugerencias.
Haz clic en + Agregar activador de conversación como se indica en el cuadro púrpura de la imagen anterior para agregar temas de conversación a fin de invocar chips de sugerencias, carrusel y tarjetas. Los temas de conversación que agregas necesitan un componente de texto y un componente de notificación de conversión. El texto es lo que se muestra al usuario, mientras que los datos postBack son los que se envían al webhook de tu agente. El webhook analiza los datos de notificación de conversión y enviará la respuesta adecuada al usuario. 
En la consola, la Información del agente se verá de la siguiente manera después de la modificación:
En el lado derecho de la consola, verás una vista previa de cómo se verá el agente. ¿Notas que el mensaje de bienvenida refleja lo que acabas de cambiar y los chips de sugerencias que están debajo?
Esta es una gran herramienta para tener una idea de cómo será la experiencia del usuario. Puedes usarla mientras creas tu agente y planificas los recorridos de los usuarios que quieres respaldar.
Lamentablemente, no podremos ver estos cambios reflejados de inmediato en la conversación, ya que los datos anteriores se almacenan en caché en la infraestructura de Business Messages. La caché se borra aproximadamente cada 2 horas, por lo que deberías poder probarla mañana.
Mientras tanto, analicemos cómo todo funciona en niveles más profundos.
4. Cómo analizar el código de partida
Una vista de 3,000 metros del código fuente
El código de partida que implementaste repite los mensajes a los usuarios y puede presentar una tarjeta enriquecida, un carrusel o chips de sugerencias. Profundicemos en el código fuente para que podamos entender cómo funciona. Luego, descubriremos qué deberíamos cambiar.
El código de partida es un proyecto de Django. En una parte posterior de esta serie de codelabs, usaremos Google Datastore para conservar datos como carritos de compras y conversaciones asociadas. No te preocupes si es la primera vez que usas Django, es bastante sencillo y, al final de este codelab, habrás aprendido cómo funciona.
En un nivel alto, Django enruta las URLs a las vistas y la lógica de vistas produce una plantilla que se procesa en el navegador. Veamos el archivo urls.py del proyecto.
bm-django-echo-bot/bmcodelab/urls.py [líneas 31 a 37]
from django.urls import include, path
import bopis.views as bopis_views
urlpatterns = [
path('', bopis_views.landing_placeholder),
path('callback/', bopis_views.callback),
]
Aquí se definen dos rutas, por lo que Django puede ejecutar una lógica si se reconocen esas dos URLs. Dado que la URL del proyecto es https://PROJECT_ID.appspot.com/, las rutas que el proyecto conoce son las siguientes:
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
Ambas rutas de URL hacen referencia a bopis_views, que es de bopis/views.py. Veamos lo que sucede en este archivo. Para comenzar, en primer lugar, comprendamos bopis_views.landing_placeholder.
bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [líneas 302 a 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>.")
...
Tu servidor web ejecuta esta lógica cuando recibe una solicitud web que apunta a la raíz del proyecto. No es algo demasiado complicado aquí: simplemente devolvemos una HTTPResponse que contiene algo de HTML al navegador que realizó la solicitud. Sí, puedes abrir la URL raíz del proyecto, pero no hay mucho que hacer allí, ya que te lleva de vuelta a este codelab.
La otra URL se enruta a una función llamada callback, también en bopis/views.py. Veamos esa función.
bm-django-echo-bot/bopis/views.py [Líneas 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 lógica aquí analiza el cuerpo de la solicitud para un mensaje o suggestionResponse, y pasa esa información a una función llamada route_message y, luego, devuelve una HttpResponse a la infraestructura de Business Messages para confirmar la recepción del mensaje.
Esta es una función importante. Esta lógica es el webhook de tu aplicación web, que recibe mensajes de usuarios que interactúan con tu agente. Puedes extender el webhook para enviar mensajes a una herramienta de automatización como Dialogflow a fin de entender lo que dice un usuario y generar una respuesta a partir de esa inferencia. También puedes reenviar el mensaje para que el usuario pueda comunicarse con un agente humano. Observa el siguiente diagrama:
Business Messages envía el contenido del mensaje como una carga útil de JSON a tu webhook, en el que se enruta a un agente humano o a alguna lógica para responder como un bot. Ese mecanismo de enrutamiento, en nuestro caso, es route_message. Veamos.
bm-django-echo-bot/bopis/views.py [Líneas 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)
...
Esta lógica comienza a examinar el mensaje que recibió el usuario. En primer lugar, se normaliza el mensaje reduciendo todos los caracteres. Una vez normalizada, comprueba si el mensaje es alguna de las constantes definidas en la parte superior del archivo.
bm-django-echo-bot/bopis/views.py [Líneas 40-42]
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...
Es decir, el bot analiza los mensajes que contienen específicamente cualquiera de las cadenas que colocamos en el postback_data de los temas de conversación del paso anterior de este codelab. Si no aparece ninguna de esas strings, simplemente pasa el mensaje a una función llamada echo_message, que puedes imaginar que replicaría los mensajes.
Envía mensajes.
A esta altura, ya deberías tener una idea de cómo recibe los mensajes la aplicación web. Todo lo hace el webhook.
Pero ¿cómo envía la aplicación un mensaje saliente a un usuario con Business Messages?
Cuando tu infraestructura responde al usuario, envías la respuesta a la API de Business Messages, que entrega el mensaje al usuario.
La API de Business Messages tiene bibliotecas en Python, Node.js y Java. También tenemos una API de REST a la que puede realizar solicitudes directamente si su infraestructura no está en un lenguaje para el que tengamos una biblioteca. Consulta Enviar mensajes para ver cómo se usa cURL para enviar un mensaje a un ID de conversación específico.
Para los fines de este codelab, nos enfocaremos en usar la biblioteca cliente de Python que ya está integrada en el código de partida de Bonjour Meal que se implementó en App Engine en tu proyecto de GCP o que se ejecuta de manera local a través de ngrok.
Veamos la función echo_message y cómo interactuamos con la API para enviar el mensaje a Business Messages.
bm-django-echo-bot/bopis/views.py [Líneas 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)
...
En esta función, se crea una instancia de BusinessMessagesMessage con la variable de mensaje que se pasa a la función echo_message. Una vez creada la instancia, el objeto se pasa a send_message junto con el ID de la conversación.
bm-django-echo-bot/bopis/views.py [Líneas 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)
...
Todo lo que hace la función send_message es usar las credenciales de tu cuenta de servicio para verificar que puedas enviar mensajes a esta conversación, crear una instancia de cliente de Business Messages y crear una solicitud para enviar el mensaje al conversation ID determinado.
Las funciones enriquecidas también usan esta función send_message, pero los mensajes que crean son específicos de las tarjetas enriquecidas, los carruseles y los chips de sugerencias. Las tarjetas enriquecidas y los carruseles pueden incluir recursos gráficos, mientras que los chips de sugerencias tienen postback_data para que la lógica de devolución de llamada pueda analizarlos correctamente.
Ahora que vimos cómo enviar un mensaje, investiga cómo la muestra envía tarjetas enriquecidas, carruseles y chips de sugerencias. En la siguiente sección, modificaremos el código fuente para enviar mensajes con algunas de estas funciones enriquecidas.
Cuando esté todo listo, personalicemos el agente de Bonjour Meal.
5. Personaliza tu agente
Si seguiste el codelab hasta ahora, deberíamos ver nuestro agente atractivo.
No es tan bonito. En realidad, se ve un poco desnudo y no representa muy bien a nuestro negocio. Por suerte, tenemos un conocimiento fundamental del código que respalda al agente y tenemos las herramientas que necesitamos para personalizar nuestro agente de la forma que queramos.
En el resto de este codelab, extenderemos el agente con lo siguiente:
- Incluir un logotipo real
- Mensaje de bienvenida mejorado
- Proporciona información sobre el horario de atención
- Infórmale al usuario que pronto se realizarán compras en línea.
- Uso de chips de sugerencias conversacionales para facilitar la conversación
Aprovecharemos la consola de Business Communications para ayudarnos a actualizar el logotipo y el mensaje de bienvenida, pero siempre tendrás la opción de usar directamente las APIs de Business Communications para hacer lo mismo. Luego, tendremos que actualizar el código fuente para enviar los mensajes apropiados para proporcionar información sobre el horario de atención y que Bonjour Meal pronto ofrecerá una función de compras en línea. Una vez hecho esto, volveremos a Business Communications Console y crearemos chips de sugerencias de conversación para guiar la conversación hacia las experiencias de camino ideal que admita el agente digital.
Incluye un logotipo
En Business Communications Console, selecciona tu agente y ve a Información del agente. Queremos actualizar el logotipo de la empresa, como se indica en amarillo a continuación.
Haz clic en Cargar y podrás seleccionar una imagen para cargar o importar desde una URL.
Consulta los lineamientos de diseño de logotipos en la documentación para obtener información sobre las prácticas recomendadas para usar tus propios logotipos.
Subamos el logotipo ubicado en el código fuente que clonaste al comienzo de este codelab. Puedes encontrarlo en el directorio ./assets/ del repositorio. El archivo se llama "bonjour_meal-logo.png". Puedes arrastrar el archivo a la ventana modal del navegador web y se mostrará una herramienta de edición liviana para manipular la calidad de la imagen y recortarla. Ajusta la resolución de la imagen y recorta la imagen para que sea menor o igual que la restricción de 50 KB. Cuando estés conforme con la imagen, haz clic en la marca de verificación del círculo azul para confirmar y, luego, en Seleccionar en la parte inferior de la ventana modal.
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Este es un cambio que tardará un tiempo en reflejarse en tu dispositivo, ya que la información del agente se almacena en caché en nuestros servidores y debería verse en un plazo de dos horas a partir del cambio.
Actualiza el mensaje de bienvenida
Actualizar el mensaje de bienvenida es algo que ya hicimos antes en este codelab. Volvamos a hacerlo, pero esta vez configuramos un mensaje de bienvenida que sea más aplicable al recorrido del usuario de Bonjour Meal.
En Business Communications Console, selecciona tu agente y ve a Información del agente. Desplázate hacia abajo hasta ver el campo de entrada Mensaje de bienvenida, donde puedes actualizar el mensaje.
Si sabemos que agregaremos temas de conversación, podemos mencionarlos en nuestro mensaje de bienvenida. En el campo de entrada, vamos a reemplazarlo por el siguiente texto:
"Te damos la bienvenida a Bonjour Meal. Soy un asistente que puede ayudarte con las preguntas que tengas sobre Bonjour Meal. Prueba alguna de las siguientes opciones".
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Recuerda que este cambio tardará un tiempo en reflejarse debido a que nuestro mecanismo de almacenamiento en caché garantiza que todo sea ágil.
Proporcionar información sobre el horario de atención
Para proporcionar esta información a los usuarios, les enviaremos un mensaje personalizado mediante la API de Business Messages.
Quizás recuerdes que los mensajes se analizan en la función route_message de views.py. Primero, la función normaliza la cadena y, luego, comienza a verificar si el mensaje normalizado coincide con alguno de los parámetros hard-coded. Para simplificar, agregaremos una condición adicional en la que comprobemos si el mensaje normalizado es igual a una nueva constante que llamaremos CMD_BUSINESS_HOURS_INQUIRY y contendrá el valor "business-hours-inquiry". Si la condición se evalúa como verdadera, invocaremos una función llamada send_message_with_business_hours.
La función route_message ahora se verá de la siguiente manera:
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)
...
Para que el código funcione, tendremos que hacer dos cambios más: el primero es definir CMD_BUSINESS_HOURS_INQUIRY junto con las otras constantes y, el segundo, definir la función send_message_with_business_hours y enviar un mensaje usando la API de Business Messages.
Primero, definamos la constante en la parte superior del archivo con las otras declaraciones 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'
...
Y ahora, para definir send_message_with_business_hours. Puedes definir esta función en cualquier parte del archivo con la sintaxis de Python adecuada. Dado que esta función solo envía un mensaje, al igual que echo_message, puedes usarla como plantilla para definir esta función.
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)
...
De esta forma, nuestro bot debería poder responderle al usuario con este horario de atención cuando este envíe el siguiente mensaje: "business-hours-inquiry". Puedes esperar algo como esto:
Una vez que implementes el código fuente en GCP, los cambios serán visibles de inmediato. No almacenamos en caché la aplicación web en Google Cloud Platform de la misma manera que la información del agente, por lo que podrás probar esta experiencia de inmediato.
Si bien tenemos un poco de impulso al hacer cambios de fuente, hagamos una modificación más que le permitirá al usuario hacer consultas sobre las compras en línea. Tu agente digital te responderá que la función aún no está disponible, pero debes volver a revisar más tarde.
Informar al usuario que pronto comprará en línea
Implementaremos una modificación similar a la que hicimos para informar al usuario acerca del horario de atención. Esta vez, coloquemos la información en una tarjeta enriquecida junto con una imagen atractiva.
Analiza el mensaje normalizado y verifica una condición para una constante llamada CMD_ONLINE_SHOPPING_INQUIRY con el valor establecido en “online-shopping-inquiry”, que invoca a send_online_shopping_info_message si la condición es verdadera.
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)
...
Ahora, para definir send_online_shopping_info_message. Queremos que este mensaje se envíe en una tarjeta enriquecida con una imagen, así que copiemos la función send_rich_card para usarla como plantilla y definir send_online_shopping_info_message.
Primero, debemos actualizar el texto de resguardo para que tenga un mensaje adecuado. El texto de resguardo se usa si el dispositivo no puede recibir una tarjeta enriquecida por algún motivo. A continuación, debemos actualizar BusinessMessagesRichCard para incluir un título, una descripción, sugerencias y un campo multimedia relevantes. Nuestra función debería verse de la siguiente manera:
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)
...
¡Muy bien! Nuestro agente digital ahora puede responder a las consultas de los usuarios sobre compras en línea. Por el momento, nuestro agente digital aún no admite compras en línea, por lo que proporcionamos un mensaje al usuario para informarle que la función estará disponible pronto. Así es como se ve nuestro agente digital cuando el usuario consulta sobre comprar en línea.
Al igual que el cambio anterior que hicimos para permitir que un usuario consulte sobre el horario de atención, este cambio se puede ver de inmediato si usas ngrok o en cuanto implementas el código en App Engine de GCP.
En la siguiente parte, usaremos temas de conversación y chips de sugerencias para guiar la conversación hacia el camino ideal.
Usa chips para guiar la conversación
Realizamos algunos cambios en el código fuente y, además, implementamos el agente digital actualizado, pero nunca esperamos que los usuarios escriban "business-hours-consulta" o "online-shopping-info" para hacer consultas sobre la empresa. Actualicemos los temas de conversación para que, cuando se abra la conversación, el usuario no solo reciba un agradable mensaje de bienvenida, sino que también se presente con disparadores de conversación.
Dirígete a Business Communications Console y accede a la página Información del agente de tu agente. Anteriormente, definimos los temas de conversación para “chips”, “card” y “carousel”. Si bien siguen funcionando, ya no son relevantes para nuestra función empresarial. Puedes dejarlas allí para seguir mostrando estas funciones enriquecidas o quitarlas para que tu agente digital muestre temas de conversación específicos para el negocio de Bonjour Meal.
Crearemos dos nuevos disparadores de conversación. Para la primera, configura el campo text con la pregunta "¿Cuál es tu horario de atención?" y los Datos de notificación de conversión en "Business-hours-consulta". Para el punto de partida de la segunda conversación, establece el argumento text en "¿Puedo realizar compras aquí?" y los Datos de notificación de conversión en "online-shopping-info".
El resultado debería ser la configuración que aparece en la siguiente captura de pantalla:
Al igual que con otros cambios realizados en la consola de Business Communications, este proceso demorará un tiempo en propagarse antes de que puedas ver los cambios realizados en el dispositivo móvil.
Ahora que terminamos con los temas de conversación, también debemos buscar una manera de guiar al usuario por el camino ideal una vez que la conversación haya comenzado. Es posible usar chips contextualmente después de que se envía un mensaje para guiar al usuario a otras funciones que puede usar el agente digital. Por lo tanto, lo que haremos será enviar un mensaje con una sugerencia de hacer algo más con el agente cada vez que el usuario pregunte sobre el horario de atención o las compras en línea.
Al final de la función, agrega lo siguiente:
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)
...
Ten en cuenta que el campo de texto de BusinessMessagesSuggestion tiene un límite de 25 caracteres, como se describe en la documentación.
Con los temas de conversación actualizados y el uso estratégico de los chips de sugerencias, aquí hay algunas capturas de pantalla de la experiencia del usuario esperada.
6. Felicitaciones
Felicitaciones, creaste correctamente tu primer agente digital de Business Messages.
Implementaste una aplicación web para brindar asistencia a tu agente digital en Business Messages, usaste Business Communications Console para modificar el agente y le dio forma a la experiencia del usuario con un agente digital realizando cambios en el código fuente.
Ahora conoces los pasos clave necesarios para crear una experiencia interactiva de Business Messages, y las posibilidades de aquí en adelante son emocionantes. Tu agente puede extenderse para que admita la búsqueda de inventario o incluya un carrito de compras para hacer un seguimiento de lo que podría interesarle al usuario. Podrías usar un carrusel para mostrar elementos del menú y usar las sugerencias para permitir que el usuario seleccione los elementos que le interesan.
Aquí tienes un avance de cómo podría ser.
¿Cómo puedo crear una experiencia de conversación excelente?
Los mejores agentes proporcionan información contextual al usuario y, al mismo tiempo, le dan funcionalidad a través de la conversación para que puedan interactuar con la empresa como lo harían por teléfono o incluso en persona. Piensa en cómo podrían aplicarse los siguientes temas a una conversación que te gustaría tener con una empresa con la que trabajas.
Brindar contexto y establecer expectativas
Proporcionar contexto puede consistir en todo tipo de cosas, desde indicar explícitamente cómo puedes ayudar al usuario hasta presentar al agente digital con una persona con la que el usuario se puede identificar. Los agentes exitosos en Business Messages usan el avatar representativo para mostrarle al usuario con quién están hablando.
Establecer expectativas depende de la experiencia del usuario que estés desarrollando. Por ejemplo, si tu agente admite la búsqueda de inventario, primero infórmale al usuario que la disponibilidad puede ser baja antes de brindar la respuesta.
Bríndale funcionalidad al usuario
Los consumidores se conectan con las empresas todo el tiempo. Desde consultas como la verificación del estado de un pedido hasta la verificación de si un artículo está en stock, Business Messages puede admitir interacciones complejas de los usuarios. Muchos usuarios siguen llamando a las empresas por teléfono para obtener respuestas a sus preguntas, incluso si las respuestas están disponibles en el sitio web de la empresa. Como resultado, las empresas deben invertir más recursos para manejar el volumen de llamadas, especialmente durante las festividades.
Mantén la participación de los usuarios
Proporciona puntos de contacto conversacionales para mantener al usuario involucrado en la conversación. Entre mensajes, puedes invocar indicadores de escritura para informarle al usuario que estás procesando una respuesta.
Con funciones enriquecidas, como indicadores de escritura, chips de sugerencias, tarjetas enriquecidas y carruseles, puedes guiar al usuario a través de las experiencias de usuario de la ruta feliz para ayudarlo a completar ciertas tareas, como realizar pedidos desde un menú de elementos. El objetivo es reducir el tráfico de llamadas a la línea telefónica de una empresa.
Es fundamental que una conversación proporcione funcionalidad al usuario. Los usuarios que se conectan con una empresa a través de mensajes esperan que se respondan sus preguntas rápidamente. En una situación no ideal, el agente digital no puede facilitar la conversación, lo que podría generar una mala experiencia del usuario. Afortunadamente, existen maneras de evitar esto, como transferir la conversación a un agente humano, que abordaremos en un codelab futuro.
¿Qué sigue?
Cuando tengas todo listo, consulta algunos de los siguientes temas para obtener más información sobre interacciones más complejas que puedes lograr en Business Messages
- La vida de un agente: creación para su lanzamiento
- Requisitos y lineamientos
- Lineamientos del logotipo
- Todas las guías
Documentos de referencia
- SuggestedReply
- Documento de referencia de Message de Business Messages
- Definición de JSON para RichCard