1. Introducción
Última actualización: 11/05/2022
Te damos la bienvenida a Business Messages
En este codelab, se presenta la integración con Mensajes de Negocio, que permite a los clientes conectarse con las empresas que administras a través de la Búsqueda de Google y Maps. Es posible que seas una empresa que desea integrarse directamente con Business Messages, o tal vez trabajes en un proveedor de software independiente que crea soluciones de mensajería para las empresas con las que trabajas, o quizás te encontraste con Business Messages y quieres experimentar con la plataforma.
Independientemente de lo que te haya traído aquí, este codelab es una excelente manera de comenzar. Al final, tendrás tu primer agente digital con el que los usuarios podrán interactuar. Cuando estés listo para lanzar tu canal en Business Messages después de pulirlo un poco más, tendrás el potencial de llegar a millones de clientes.
¿Qué características tiene un buen agente digital?
Los Mensajes de la Empresa son una plataforma de conversación que proporciona una experiencia similar a la de una app en dispositivos móviles y permite que los consumidores se conecten con las empresas sin instalar una app adicional. Un agente digital es la parte lógica con la que interactúan tus clientes. La lógica se administra a través de una aplicación web implementada en la nube o en tu infraestructura. Tú decides cómo responderle al usuario. Los mejores agentes brindan contexto para establecer expectativas, mantener la participación de los clientes y proporcionar funcionalidad para satisfacer 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á algunas preguntas simples, como "¿A qué hora cierran?" o "¿Puedo comprar en línea?".
En este codelab, tus usuarios podrán comprar artículos a través del agente digital, dirigir al usuario a un procesador de pagos para cobrar el dinero y, luego, programar el retiro de sus artículos ficticios en la tienda.
En este codelab, tu app hará lo siguiente:
- Responde preguntas a través de un chip de sugerencia
- Guía al usuario para que haga preguntas que tu agente digital pueda responder
- Proporciona funciones conversacionales enriquecidas para mantener la participación del usuario 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 Mensajes de Negocio envía tus mensajes
Este codelab se enfoca en compilar 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
Habilitar las API
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 Google Cloud Console.
- 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 que se indican en la documentación para crear una cuenta de servicio en la consola de Business Communications para desarrolladores.
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 enriquecidas disponibles en la superficie conversacional.
Configura tu webhook
Ahora que tu servicio está implementado, usarás la URL de la aplicación para establecer la URL de tu webhook en la página Configuración de la cuenta de la Consola para desarrolladores de Business Communications.
La URL del webhook será la URL de la aplicación + "/callback/". Por ejemplo, podría ser algo como https://PROJECT_ID.appspot.com/callback/
Dirígete a la página de configuración de la cuenta de Business Communications Console. En la esquina superior derecha, debajo de la barra de navegación, deberías ver el nombre de tu 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 de tu aplicación implementada.
Haz clic en Guardar junto a la referencia de tu proyecto de GCP.
3. Cómo crear tu primer agente
Cómo usar la Consola para desarrolladores de Business Communications
En la consola de Business Communications, haz clic en el logotipo que se encuentra en la parte superior izquierda para volver al panel de la consola y, luego, haz clic en Create agent. Creas una marca al mismo tiempo que creas tu agente. Selecciona Mensajes de la Empresa en Tipo de agente y asegúrate de que la Información del socio sea correcta.
En Marca, escribe el nombre de la marca que estás creando.La marca es la empresa con la que trabajas, y los consumidores pueden interactuar de forma conversacional con el agente. En Nombre del agente, especifica lo que quieres que vean los usuarios en la conversación de Business Messages. En el caso de la empresa ficticia Bonjour Meal, Bonjour Rail es la empresa ferroviaria que administra los restaurantes de Bonjour Meal. Por lo tanto, 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 su magia. 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 ver cómo se vería una solicitud de curl para hacer lo mismo que hace la consola.
Cómo tener tu primera conversación
Abre el agente que acabas de crear. Verás una página de Descripción general que te permitirá comenzar a revisar los detalles del agente. Consulta las URLs de prueba del agente. Estas URLs se usan para invocar la interfaz de conversación en tu dispositivo.
Para copiar la URL de prueba, haz clic en cualquiera de los chips. Por supuesto, copia la URL de prueba del dispositivo que tienes a mano para realizar la prueba. Envía este mensaje copiado a tu dispositivo de la forma que prefieras.
Una vez que estés en tu dispositivo móvil, presiona el vínculo para invocar el Selector de agentes de Business Messages con la URL de prueba de tu agente completada previamente.
Presiona Launch para invocar la superficie conversacional de tu agente.
Interactúa con el agente y familiarízate con sus capacidades. En general, verás que la interfaz de conversación solo repetirá tus mensajes. Envía un mensaje como "Hola, mundo" y verás que el agente te devolverá el mismo mensaje.
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 un 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 con la consola para desarrolladores, veamos cómo editar el mensaje de bienvenida del agente y aprovechemos los chips de sugerencias para ayudar al usuario a comunicarse.
Ve a la página Descripción general del agente y selecciona Información del agente. Desplázate hacia abajo hasta la sección de mensajes de bienvenida y temas para iniciar conversaciones.
Actualiza el mensaje de bienvenida (el campo de entrada amarillo) para que diga lo siguiente:
Te damos la bienvenida al agente de inicio de Bonjour Meal. Puedo repetir tus mensajes y mostrarte algunas de las funciones enriquecidas compatibles con la plataforma. ¡Prueba estas sugerencias!
Haz clic en + Agregar tema de conversación, como se indica en el cuadro morado de la imagen anterior, para agregar temas de conversación que invoquen chips de sugerencias, carruseles y tarjetas. Los activadores de conversación que agregues deben tener un componente de texto y un componente de postbackData. El texto es lo que se muestra al usuario, mientras que los datos de devolución de llamada son lo que se envía al webhook de tu agente. El webhook analiza los datos de devolución y envía la respuesta adecuada al usuario. 
La Información del agente en la consola 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. ¿Notaste cómo el mensaje de bienvenida refleja el cambio que acabas de realizar y los chips de sugerencias que se encuentran debajo?
Esta es una excelente herramienta para tener una idea de cómo será la experiencia del usuario. Puedes usarlo mientras compilas tu agente y planificas los recorridos del usuario que deseas admitir.
Lamentablemente, no podremos ver estos cambios reflejados en la conversación de inmediato, ya que los datos anteriores se almacenan en caché dentro de la infraestructura de Mensajes de Negocios. La caché se borra aproximadamente cada 2 horas, por lo que deberías poder probar esto mañana.
Mientras tanto, veamos cómo funciona todo.
4. Analiza el código de partida
Una vista general del código fuente
El código inicial que implementaste devuelve mensajes a los usuarios y puede presentar una tarjeta enriquecida, un carrusel o chips de sugerencias. Analicemos el código fuente en detalle para comprender cómo funciona. Luego, determinaremos qué tendremos que 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 los carritos de compras y las conversaciones asociadas. No te preocupes si no usaste Django antes, es bastante sencillo y, al final de este codelab, habrás aprendido cómo funciona.
En términos generales, Django enruta las URLs a las vistas, y la lógica de la vista produce una plantilla que se renderiza 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 la lógica si se reconocen esas dos URLs. Si la URL del proyecto es https://PROJECT_ID.appspot.com/, las rutas que conoce el proyecto son las siguientes:
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
Ambas rutas de URL hacen referencia a bopis_views, que proviene de bopis/views.py. Veamos qué sucede en este archivo. Para comenzar, primero 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 parte de la lógica cuando recibe una solicitud web que apunta a la raíz del proyecto. Aquí no sucede nada demasiado sofisticado: simplemente devolvemos un HTTPResponse que contiene algo de HTML al navegador que realizó la solicitud. Así que 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 dirige 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 a 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 obtener un mensaje o una suggestionResponse y pasa esa información a una función llamada route_message. Luego, devuelve un HttpResponse a la infraestructura de Business Messages para confirmar la recepción del mensaje.
Esta es una función importante. Esta parte de la lógica es el webhook de tu aplicación web, que recibe mensajes de los usuarios que interactúan con tu agente. Puedes extender el webhook para enviar mensajes a una herramienta de automatización como Dialogflow y comprender lo que dice un usuario, y producir una respuesta a partir de esa inferencia. También puedes reenviar el mensaje para que el usuario se comunique con un agente en vivo. Consulta el siguiente diagrama:
Mensajes de Negocios envía el contenido del mensaje como una carga útil de JSON a tu webhook, donde se enruta a un agente en vivo o a alguna lógica para responder como un bot. En nuestro caso, ese mecanismo de enrutamiento es route_message. Veamos.
bm-django-echo-bot/bopis/views.py [Líneas 105 a 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 parte de la lógica comienza a examinar el mensaje que recibió el usuario. Primero, se normaliza el mensaje convirtiendo todos los caracteres a minúsculas. Una vez normalizado, verifica 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 a 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 iniciadores de conversación del paso anterior de este codelab. Si no aparece ninguna de esas cadenas, simplemente pasa el mensaje a una función llamada echo_message, que, como puedes imaginar, repetiría los mensajes.
Envío de mensajes
A estas alturas, deberías tener una idea de cómo la aplicación web recibe los mensajes. 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 puedes enviar solicitudes directamente si tu infraestructura no está en un lenguaje para el que tenemos una biblioteca. Consulta Envío de 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 inicio de Bonjour Meal que se implementó en App Engine en tu proyecto de GCP o que se ejecuta de forma 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 a 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 que se crea una instancia, el objeto se pasa a send_message junto con el ID de conversación.
bm-django-echo-bot/bopis/views.py [Líneas 214 a 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 puedes enviar mensajes a esta conversación, crear una instancia de un cliente de Mensajes de Negocios 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 para tarjetas enriquecidas, carruseles y 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 analizarlo de forma adecuada.
Ahora que vimos cómo enviar un mensaje, investiguemos cómo el ejemplo 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 hermoso agente.
Bueno, no es tan bonito. De hecho, se ve un poco vacío y no representa muy bien a nuestra empresa. Afortunadamente, tenemos conocimientos básicos del código que admite el agente y las herramientas que necesitamos para personalizarlo de la manera que queramos.
En el resto de este codelab, extenderemos el agente con lo siguiente:
- Incluye un logotipo real
- Mensaje de bienvenida mejorado
- Proporciona información sobre el horario de atención
- Informa al usuario que pronto podrá comprar artículos en línea
- Uso de chips de sugerencias de conversación para facilitar la conversación
Aprovecharemos Business Communications Console para actualizar el logotipo y el mensaje de bienvenida, pero siempre tendrás la opción de usar las APIs de Business Communications directamente para hacer lo mismo. Luego, tendremos que actualizar el código fuente para enviar mensajes adecuados que proporcionen información sobre el horario de atención y que Bonjour Meal pronto ofrecerá una función de compra en línea. Cuando termines, volveremos a la Consola de comunicaciones comerciales y crearemos chips de sugerencias conversacionales para guiar la conversación hacia las experiencias del flujo ideal que admite el agente digital.
Incluye un logotipo
En la Consola de Business Communications, selecciona tu agente y ve a Información del agente. Deberemos actualizar el logotipo de la empresa, como se indica en amarillo a continuación.
Haz clic en Subir y podrás seleccionar una imagen para subirla o importarla desde una URL.
Consulta los lineamientos de diseño de logotipos en la documentación para conocer las prácticas recomendadas que sugerimos para usar tus propios logotipos.
Subamos el logotipo que se encuentra en el código fuente que clonaste al comienzo de este codelab. Puedes encontrarlo en el directorio ./assets/ del repositorio y el archivo se llama "bonjour_meal-logo.png". Puedes arrastrar el archivo al modal en el navegador web. Se mostrará una herramienta de edición ligera para manipular la calidad y el recorte de la imagen. Ajusta la resolución y el recorte de la imagen para que no supere 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 del modal.
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Este cambio 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 estar visible en un plazo de dos horas después del cambio.
Actualiza el mensaje de bienvenida
Ya actualizamos el mensaje de bienvenida en este codelab. Volvamos a hacerlo, pero esta vez configuraremos un mensaje de bienvenida más aplicable al recorrido del usuario de Bonjour Meal.
En la consola de Business Communications, selecciona tu agente y ve a Agent information. Desplázate hacia abajo hasta que veas el campo de entrada Mensaje de bienvenida, en el que puedes actualizar el mensaje.
Como sabemos que agregaremos iniciadores de conversación, podemos hacer referencia a ellos en nuestro mensaje de bienvenida. En el campo de entrada, reemplacemos el texto por el siguiente:
"Te damos la bienvenida a Bonjour Meal. Soy un asistente que puede ayudarte con las preguntas que tengas sobre Bonjour Meal. Prueba algunas de las siguientes opciones".
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Una vez más, este cambio tardará un tiempo en reflejarse debido a nuestro mecanismo de almacenamiento en caché para asegurarnos de que todo funcione rápido.
Proporcionar información sobre el horario de atención
Para proporcionar esta información a los usuarios, les enviaremos un mensaje personalizado a través de 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 codificados. Para simplificar, agreguemos una condición adicional en la que verificaremos si el mensaje normalizado es igual a una nueva constante que llamaremos CMD_BUSINESS_HOURS_INQUIRY y que 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 realizar dos cambios más: el primero es definir CMD_BUSINESS_HOURS_INQUIRY junto con las otras constantes, y el segundo es definir realmente la función send_message_with_business_hours y enviar un mensaje con 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'
...
Ahora, definiremos send_message_with_business_hours. Puedes definir esta función en cualquier parte del archivo, siguiendo la sintaxis de Python adecuada. Como esta función simplemente envía un mensaje, de manera similar a 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)
...
Con eso, nuestro bot debería poder responder con este horario de atención al usuario cuando envíe el siguiente mensaje: "business-hours-inquiry". Puedes esperar algo similar a lo siguiente:
Una vez que implementes el código fuente en GCP, los cambios se verán de inmediato. No almacenamos en caché la aplicación web en Google Cloud Platform de la misma manera en que se almacena en caché la información del agente, por lo que podrás probar esta experiencia de inmediato.
Si bien ya tenemos cierto impulso en la realización de cambios en la fuente, hagamos una modificación más que le permita al usuario consultar sobre compras en línea. Tu agente digital responderá que la función aún no está disponible, pero que vuelvas a consultar más tarde.
Avisarle al usuario que pronto podrá comprar en línea
Realizaremos una modificación similar a la que hicimos para informar al usuario sobre el 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 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, definiremos send_online_shopping_info_message. Queremos que este mensaje se envíe en una tarjeta enriquecida con una imagen, por lo que copiaremos 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 de medios pertinentes. 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 los usuarios que consultan sobre compras en línea. Por ahora, nuestro agente digital aún no admite compras en línea, por lo que le proporcionamos un mensaje al usuario para informarle que la función estará disponible pronto. Así se ve nuestro agente digital cuando el usuario consulta sobre compras en línea.
Al igual que el cambio anterior que realizamos para permitir que un usuario consulte el horario comercial, este cambio se puede ver de inmediato si usas ngrok o tan pronto como implementes el código en App Engine de GCP.
En la siguiente parte, usaremos preguntas para iniciar la conversación y chips de sugerencias para guiar la conversación hacia el flujo ideal.
Cómo usar chips para guiar la conversación
Realizamos algunos cambios en el código fuente y, luego, implementamos el agente digital actualizado, pero nunca esperaríamos que los usuarios escribieran "consulta-horario-comercial" o "información-compras-en-línea" para consultar sobre la empresa. Actualicemos los temas de conversación para que, cuando se abra la conversación, el usuario no solo reciba un saludo agradable, sino que también se le presenten temas de conversación.
Dirígete a la consola de Business Communications y accede a la página Información del agente de tu agente. Anteriormente, definimos iniciadores de conversación para "chips", "tarjetas" y "carruseles". Si bien siguen funcionando, ya no son relevantes para nuestra función comercial. Puedes dejarlos para seguir mostrando estas funciones enriquecidas o quitarlos para que tu agente digital muestre iniciadores de conversación específicamente para el negocio de Bonjour Meal.
Crearemos dos nuevos disparadores de conversación. Para la primera, establece el texto en “¿Cuál es tu horario de atención?” y los datos de devolución de llamada en “business-hours-inquiry”. Para el segundo iniciador de conversación, establece el texto en "¿Puedo hacer compras aquí?" y los datos de devolución de llamada en "online-shopping-info".
El resultado debería ser la configuración que se muestra en la siguiente captura de pantalla:
Al igual que con otros cambios realizados en la Consola de Comunicaciones de la Empresa, estos tardarán un tiempo en propagarse antes de que puedas ver los cambios producidos en tu dispositivo móvil.
Ahora que terminamos con los iniciadores de conversación, también necesitaremos una forma de guiar al usuario hacia un camino ideal una vez que comience la conversación. Es posible usar chips de forma contextual después de que se envía un mensaje para guiar al usuario a otras funciones que puede realizar el agente digital. Por lo tanto, lo que haremos es enviar un mensaje con una sugerencia para hacer otra cosa 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 dentro de un objeto BusinessMessagesSuggestion se limita a 25 caracteres, como se describe en la documentación.
Con los iniciadores de conversación actualizados y el uso estratégico de los chips de sugerencias, aquí tienes 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 admitir tu agente digital en Business Messages, usaste Business Communications Console para modificar el agente y definiste 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 a partir de ahora son emocionantes. Tu agente se puede extender para admitir la búsqueda de inventario o introducir un carrito de compras para hacer un seguimiento de lo que podría interesar al usuario. Podrías usar un carrusel para mostrar los elementos del menú y, con sugerencias, permitir que el usuario seleccione los elementos que le interesen.
Aquí tienes un adelanto de cómo podría verse.
¿Cómo creo una excelente experiencia de conversación?
Los mejores agentes proporcionan información contextual al usuario y, al mismo tiempo, le brindan funcionalidad a través de la conversación para que pueda interactuar con la empresa como lo haría normalmente por teléfono o incluso en persona. Piensa en cómo los siguientes temas pueden aplicarse a una conversación que te gustaría tener con una empresa con la que trabajas.
Proporciona contexto y establece expectativas
Proporcionar contexto puede ser desde indicar explícitamente cómo puedes ayudar al usuario hasta presentar al agente digital con un personaje con el que el usuario pueda identificarse. Los agentes exitosos en Mensajes de Negocios usan el avatar representativo para mostrarle al usuario con quién está hablando.
Establecer expectativas depende de la experiencia del usuario que estés creando. Por ejemplo, si tu agente admite la búsqueda de inventario, primero infórmale al usuario que la disponibilidad puede ser baja antes de brindarle la respuesta.
Proporcionar funcionalidad al usuario
Los consumidores se conectan con las empresas todo el tiempo. Desde consultas como verificar el estado de un pedido hasta comprobar si un artículo está en stock, los Mensajes de Negocios pueden admitir interacciones complejas con los usuarios. Muchos usuarios siguen llamando a las empresas por teléfono para obtener respuestas a sus preguntas, incluso si estas están disponibles en el sitio web de la empresa. El resultado es que las empresas deben invertir más recursos para manejar el volumen de llamadas, especialmente durante los días festivos.
Mantén la participación del usuario
Proporciona puntos de contacto conversacionales para mantener la participación del usuario en la conversación. Entre los mensajes, puedes invocar indicadores de escritura para que el usuario sepa que estás procesando una respuesta.
Con funciones enriquecidas, como indicadores de escritura, fichas de sugerencias, tarjetas enriquecidas y carruseles, puedes guiar al usuario a través de experiencias de usuario ideales para ayudarlo a completar ciertas tareas, como hacer un pedido 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 comunican con una empresa a través de la mensajería esperan que se les responda rápidamente sus preguntas. En una situación no ideal, el agente digital no puede facilitar la conversación, lo que puede generar una mala experiencia del usuario. Afortunadamente, existen formas de evitar esto, como transferir la conversación a un agente humano, lo que abordaremos en un codelab futuro.
¿Qué sigue?
Cuando estés listo, consulta algunos de los siguientes temas para obtener más información sobre interacciones más complejas en Business Messages.
- Ciclo de vida de un agente: desde la creación hasta el 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