https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-an-interactive-board-whatsapp-sms-and-mms-to-a-website-part-2/interactive-board_whatsapp-mms-p2.png

Construir un tablero interactivo: WhatsApp, SMS y MMS a un sitio web (Parte 2)

Publicado el February 21, 2024
#messages-api
#javascript
#ai-studio

Tiempo de lectura: 8 minutos

Visión general

En Parte 1creamos un tablero de mensajes interactivo para recibir mensajes SMS, MMS y WhatsApp y mostrarlos en una página web. Esta aplicación utilizó la API Messages API de Vonage y un servidor Express.

En la Parte 2, reproduciremos esta funcionalidad con una vuelta de tuerca. UtilizaremosVonage AI Studiopara manejar los mensajes entrantes. Nuestros mensajes se almacenarán en una base de datos Airtable y luego se mostrarán en nuestra aplicación Node.js.

Vonage AI Studio es una plataforma de bajo código que facilita a desarrolladores y no desarrolladores la creación de asistentes virtuales. Con su intuitiva interfaz de arrastrar y soltar, puedes diseñar flujos conversacionales.

Puede encontrar el código del panel de administración en este repositorio de GitHub. Clona, y vamos a seguir el tutorial que he preparado para ti, explicando todas las partes paso a paso.

Esquema del proyecto

  • Interacción con el usuario: Un usuario inicia la interacción enviando un mensaje de WhatsApp a un número de teléfono virtual de Vonage específico vinculado a la aplicación de Vonage que contiene el flujo.

  • Recepción de mensajes: El flujo de la conversación comienza con el nodo "Inicio", que permite al usuario enviar o ver mensajes.

  • Almacenamiento de datos: Una vez procesado, el mensaje se guarda en Airtable, una plataforma en línea para crear y compartir bases de datos relacionales.

  • Visualizar: Construir nuestro Admin Dashboard: Una página web, continuamente actualizada, obtiene estos mensajes de Airtable y los muestra.

Almacenar información en la base de datos de Airtable

En primer lugar, vamos a crear nuestro almacenamiento de datos, así que cree una Account en Airtable. Una vez conectado, encontrar los siguientes pasos desde el tablero de instrumentos Airtable. En comparación con la parte 1, he optado por simplificar para la parte 2 y crear sólo una tabla llamada Mensajes.

  1. Crear una base llamada "Tablero Interactivo" haciendo clic en "+ Crear una base", y elegir un color de tema y el icono de forma opcional; Me he saltado el resto de la configuración, pero no dude en rellenar si lo desea y pasar por el final de la creación de la base donde me llevan a la base de Mensajes.

  2. Ahora puede ver algunas filas numeradas vacías. Vamos a crear una tabla llamada Mensajes. Tiene las siguientes columnas: 'Mensaje', 'Numbers' (número de teléfono), 'Estado' de tipo 'Selección única' y añadimos las opciones 'Aceptado', 'Pendiente' y 'Rechazado'. Y por último, 'ImageUrl'.

  3. Crear vistas como "Vista de cuadrícula" para filtrar mensajes

Incorporar un sistema de moderación para aprobar o rechazar mensajes

Una vez que los registros se registran en airtable, tienen el estado 'Pendiente'. Sus moderadores pueden acceder a la base de datos de Airtable y cambiar manualmente el estado de cada registro a 'Rechazado' o 'Aceptado'. Si son aceptados, saldrán en la página web del tablón interactivo.

Crear el Agente AI Studio: Guía paso a paso

Desglosaré cada paso para que puedas crear el flujo de nuestra aplicación conversacional.

  1. Acceso a AI Studio:

    • Iniciar sesión/ Registrarse en Vonage AI Studio. Lo encontrarás en el panel de Vonage, debajo del menú de la izquierda. Selecciona "AI Studio" y haz clic en "Ir a AI Studio".

The Vonage dashboard shows that ‘AI Studio’ can be found on the left menu.AI Studio

  1. Configuración del agente de WhatsApp:

    • Elige "WhatsApp" como tipo de agente y haz clic en "Siguiente".

      Agent Creation FormWhatsapp Agent Creation

    • Rellene los datos necesarios, como Región, Nombre del agente (por ejemplo, "Pizarra interactiva"), Idioma y Zona horaria (por ejemplo, Europa/Londres) y haga clic en "Siguiente".

    • 2. Fill in the required details such as Region, Agent Name (e.g., 'Interactive Board'), Language, and Time Zone (e.g., Europe/London) and click ‘Next’.Agent Creation Details

  2. Selección de plantillas:

    • Haga clic en "Crear agente". Para crear una nueva aplicación, visita Agentes de Vonage AI Studio.

    • Elija la plantilla "Empezar de cero".

    • Seleccione 'Evento de Sesión de Entrada' y haga clic en 'Crear'. Este paso es esencial para que los usuarios inicien la sesión con el agente.

Construir la Aplicación Conversacional: Definir el flujo conversacional

Esta sección se adentrará en los pormenores de la creación de una aplicación conversacional con integración de WhatsApp:

Flow showing the blocks: Start, Greeting, Input Collection, Menu condition, Messages to see, send messages, classification, webhook, media receipt, endVonage AI Agent Dashboard

Crear un "Saludo (Enviar mensaje) justo después de la ruta START de bienvenida a los usuarios, explica las capacidades del bot en la entrada 'El agente dice', y haz clic en 'Guardar y Salir'.

Agent says: Hello! I am a WhatsApp bot that collects text or images and outputs the message on an Interactive Board.Greeting Node

Crear una Recoger Entrada nodo de conversación, elija el parámetro MENSAJE, elija 'Listar Mensajes', y añada una sección para 'Ver Mensajes' y otra sección para 'Enviar Mensajes', añada cualquier otra información que crea conveniente para que quede descrito y el usuario lo entienda y pulse 'Guardar y Salir'.

Choose the parameter MESSAGE, choose ‘List Messages’, and add one section for ‘See Messages’ and another section for ‘Send Messages’, add any other information you see fit to make it described and user for the user to understand it and click ‘Save and Exit’.Input collection

Crear una Condiciones (lo he llamado "Menú Condición: ver o enviar") con dos condiciones: 'Ver Mensaje' y 'Enviar Mensaje'. La primera condición debe ser Parámetro: MENSAJE, Operación: Contiene, Valor: Ver. La segunda debe ser Parameter: MENSAJE, Operación: Contiene, Valor: Enviar.

Create a Conditions conversation node with two conditions: ‘See Message’ and ‘Send Message’. The first condition should be Parameter: MESSAGE, Operation: Contains, Value: See. The second one should be Parameter: MESSAGE, Operation: Contains, Value: Send.Menu Condition

Tras el bloque de condiciones, crearemos dos bloques:

  1. Un nodo 'Enviar Mensajes' vinculado a nuestra condición 'Ver' (lo he llamado Mensaje a Ver Mensajes). El mensaje debería decir Si desea ver todos los mensajes de salida, acceda a este enlace.

    Actualizaremos este enlace más adelante con el enlace ngrok que tendrás funcionando con tu servidor express. Por ahora, puedes dejarlo con un mensaje ficticio.

    1. A 'Send Messages' node linked to our ‘See’ condition. The message should read: If you'd like to see all the output messages, please access this link. We'll update this link later with the ngrok link you will have running with your express server. For now, you can leave it with a dummy message.Message to See Messages

  2. Un segundo nodo vinculado a "Enviar" de tipo "Recopilar entradas" (yo lo he llamado "Enviar mensajes") y, en el aviso, añade un mensaje del tipo "¡Adelante, envíame el mensaje o la imagen que te gustaría compartir!" y selecciona "Texto" e "Imagen" como entradas esperadas, ¡ya que es lo que esperamos que envíen nuestros usuarios!

A node linked to ‘Send’ of type ‘Collect Input’ and in the prompt add a message along the lines of ‘Go ahead and send me the message or image you'd like to share!’ and select ‘Text’ and ‘Image’ as expected input, as this is what we expect our users to send!Send Message

Usemos ahora Classification para manejar la entrada de nuestros usuarios. En la parte 1, hemos agregado un archivo que contiene las palabras bloqueadas para nuestra aplicación web. Ahora, en la parte 2, con Vonage AI Studio, podemos agregar un Nodo de clasificación. Puedes encontrarlo en el menú de la izquierda: Nodo > Conversación > Clasificación. Agrega ese bloque al flujo justo después de 'Enviar mensajes' y llénalo con la siguiente información:

A classification node with Send Message and Block Words intentsClassification Intent

Parámetro de clasificación: MENSAJE Crearemos dos intents: Enviar Mensaje y Bloquear Palabras Desde el Menú de la izquierda, puede hacer clic en 'Propiedades' y crear un nuevo intento, o incluso desde la vista de clasificación en la que se encuentra actualmente, puede hacer clic en 'Intento' y crear uno nuevo desde allí y añadir el conjunto de Entrenamiento para cada intento.

Bloquear palabras: Puedes añadir las palabras bloqueadas para tu flujo (por ejemplo, palabras malsonantes).

Enviar mensaje: puedes añadir algunos ejemplos de mensajes que los usuarios pueden enviar, por ejemplo: "Gran evento", "Me lo estoy pasando muy bien", "Me encanta esto, pero ojalá hubiera sushi".

Más información sobre Clasificación y piense en futuros pasos de mejora añadiendo la integración del análisis de sentimientos para detectar automáticamente los mensajes negativos.

Cree un nodo de envío de mensajes llamado "Alerta de lista permitida". El agente debe decir "El mensaje anterior iba en contra de nuestras directrices de palabras permitidas. Por favor, envíe otro mensaje".

A send message node called "Allowlist alert". The agent should say The previous message went against our guidelines of allowlisted words. Please send another message.Allowlist alert

La opción de Clasificación "lista de bloqueo" debe estar vinculada a ella, y debe estar vinculada de nuevo a la Entrada de Mensajes de Envío.

The Classification "blocklist" option should be linked to it, and it should be linked back to the Send Messages Message Input.Links

A continuación, utilizaremos un Nodo Webhook (lo he llamado "Webhook: Crear registro") para añadir nuestros Mensajes a nuestro backend Airtable. Para añadir registros a Airtable, Haga clic en Integraciones > Webhook y rellene la siguiente información:

Método: POST URL de solicitud: https://api.airtable.com/v0/BASE_URL/Messages Cabeceras: Clave: Authorization, Value: Bearer 'YOUR_AIRTABLE_ACCESS_TOKEN' Key: Content-Type, Valor: application/json

Method: POST Request URL: https://api.airtable.com/v0/BASE_URL/Messages Headers: Key: Authorization, Value: Bearer ‘YOUR_AIRTABLE_ACCESS_TOKEN’ Key: Content-Type, Value: application/jsonWebhook node

Nota: La URL de la solicitud tiene que alinearse con su tabla en Airtable

Si te quedas atascado o tienes dudas, para una explicación más detallada, consulta Bajo apalancamiento de código: AI Studio con Airtable de Benjamin Aronov, donde explica en detalle cómo utilizar AI Studio con Airtable.

En la segunda pestaña del webhook llamada 'Cuerpo', añade la siguiente información de tipo JSON. Eso significa que estamos añadiendo el mensaje que el usuario envió conteniendo texto o imagen, asignando el número de teléfono de la persona que interactúa con este agente, y estableciendo el estado de Pendiente, donde los moderadores pueden cambiarlo a Aceptado o Rechazado desde Airtable.

{
 "records": [
  {
   "fields": {
   "Message":"$MESSAGE",
    "Number": "$SENDER_PHONE_NUMBER",
	"ImageUrl": "$MESSAGE",
    "Status":"Pending"
   }
  }
 ]
}

Vincule la opción de éxito del webhook a un nuevo nodo 'Enviar Mensaje'. Cree un nuevo nodo 'Enviar Mensaje', nómbrelo 'Media Receipt', y añada bajo Agent Says '¡Gracias por enviar esto!' y haga clic en guardar y salir.

‘Send Message’ node, name it ‘Media Receipt’, and add under Agent Says ‘Thanks for sending this over!’ and click save and exit.Media receipt

Enlaza la opción de fallo del webhook a la anterior de enviar Mensaje Recoger Entrada para solicitárselo de nuevo. Enlaza el nodo 'Media receipt' al preexistente 'Message to See Messages', y luego enlaza con 'End Conversation'.

Link the webhook fail option to the previous send Message Collect Input to request it from them again. Link the ‘Media receipt’ node to the pre-existing ‘Message to See Messages’, then link to ‘End Conversation’.Flow

Hablemos de código: Cómo construir nuestro panel de administración

El código es similar al que hemos visto en la parte 1. Sin embargo, podemos eliminar el blocklist.txt ya que esto ahora se maneja dentro del flujo de conversación en Vonage AI Studio y la creación del usuario y la inserción de los registros en Airtable. Sin embargo, mantenemos el endpoint que cambia el estado del mensaje "/messages/:messageId/:status" además del punto final que obtiene los mensajes /messages. Este es el aspecto del index.js para este proyecto.

Tal y como se mencionó en la parte 1, deberías tener ngrok ejecutándose y volver al Flujo del Agente de AI Studio y actualizar el nodo Ver Mensajes con la URL de ngrok proporcionada; siempre podrías alojar tu sitio web y añadir la página web enlazada allí para este tutorial de demostración usando ngrok desde nuestro localhost es suficiente.

Pruébelo

Puedes ver un botón Probador en la parte superior derecha de Vonage AI Studio; puedes probar tu conversación sin publicarla. Selecciona "Sesión entrante" y haz clic en el botón "Iniciar chat". Puedes completar previamente los parámetros con los que deseas que trabaje el agente (haciendo clic en el ícono de configuración/engranaje) y elegir el modo de prueba. Eche un vistazo a la Página del Probador para obtener más información.

Posibles ampliaciones

Añadir compatibilidad con MMS

Hemos utilizado la entrada para empezar con los mensajes de WhatsApp, pero si tuviéramos que utilizar MMS, siempre se puede utilizar el mismo número asignado al chatbot de WhatsApp. Hay algunos requisitos para un MMS Numbers de los EE.UU. 10DLCNumbers que tengas en tu panel de control a otros números dentro de Estados Unidos. Puedes obtener más información sobre Cómo enviar mensajes MMS con Node.js.

Añadir soporte SMS

Dentro de Vonage AI, hay una acción llamada "Enviar SMS". Puedes agregar ese bloque a tu flujo de conversación para enviar un mensaje SMS, completa los campos que contienen los números del remitente y del destinatario y el cuerpo del mensaje, haz clic en 'guardar y salir' y conéctalo al nodo al que deseas que se envíe el mensaje. Puedes obtener más información sobre Cómo enviar SMS con Vonage AI.

Publique su agente

Cuando terminé de crear esta aplicación conversacional de demostración, quise ver cómo quedaba en WhatsApp y poder versionar y publicar mis cambios. Para ello, compré un número de teléfono, se lo asigné al agente, lo vinculé mediante Messages API y creé una WhatsApp Business Account con mi número recién comprado. Puede obtener más información sobre cómo publicar tu agente para publicar el tuyo y compartirlo con los demás

Conclusión

Consulte la Documentos de Vonage AIComparte tus experiencias, comentarios y cualquier uso innovador que hayas encontrado utilizando nuestras API con nuestra comunidad a través de X, antes conocido como Twitter o la Comunidad Slack.

Compartir:

https://a.storyblok.com/f/270183/400x400/3f6b0c045f/amanda-cavallaro.png
Amanda CavallaroDefensor del Desarrollador