Como crear un chatbot para capturar códigos de barras de productos

by | May 21, 2021 | Superbots, Supermarket | 0 comments

Mientras hacia compras en Wegmans, ví un afiche que promocionaba el uso de una aplicación para escanear productos y empacarlos mientras compraba, para reducir el tiempo de pago de la compra.

Entonces, pensé que algo similar se podría hacer fácilmente con un Twnel Superbot.

Explico cómo crear ese flujo en el artículo Cómo crear un chatbot para escanear productos en el supermercado y pagar en el cajero automático.

Sin embargo, antes de hacer ese flujo, necesitamos un repositorio con la información de los códigos de barras, incluido el número del código de barras, el nombre del producto y el precio, para que la aplicación de escaneo del supermercado pueda consultar esos datos al agregar artículos al carrito.

El siguiente video muestra al Superbot en acción y cómo la Hoja de Google Sheets se completa sobre la marcha.

Por lo tanto, necesitamos completar una hoja de Google Sheets con al menos la siguiente información (la versión más simple):

  • Valor del código de barras. Este es el valor numérico que representa un producto.
  • Nombre completo del producto
  • Precio

Es posible que desee tener alguna otra información en esa tabla (en una versión más avanzada), como:

  • Identificador de la persona que agregó un producto a la hoja. En nuestro caso, es su número de teléfono celular. Twnel utiliza el número de teléfono como identificador único de un usuario.
  • La fecha en que se agregó el producto
  • Una descripción del producto
  • El fabricante del producto
  • La categoría del producto
  • La marca del producto
  • Ingredientes del producto
  • Información nutricional
  • Columnas de promoción. Por ejemplo, descuentos en determinadas fechas y así sucesivamente.
  • Y tal vez la imagen del producto

La versión simple

Para nuestro pequeño ejercicio, usaremos los primeros tres, más el identificador de la persona que agregó el producto y la fecha en que se agregó el producto.

El flujo será algo como esto:

 La tabla de Google Sheet tendrá la siguiente información:

Podríamos completar esta tabla manualmente. Escribir el valor del código de barras y el resto de la información directamente en la hoja. Sin embargo, eso sería tedioso y propenso a errores, ya que cada código de barras puede tener muchos dígitos y, en algunos casos, la fuente debajo de los códigos de barras es bastante pequeña.

Y, por supuesto, eso frustraría el propósito de este artículo, ¿no es así?

Por lo tanto, para crear el Superbot para capturar el código de barras y el nombre y guardar esa información en la hoja, necesitamos:

  1. Crear un script que pueda recibir los datos del Superbot (usando Google Apps Script)
  2. Generar un webhook (endpoint) que se activará cuando haya datos del Superbot para guardar.
  3. Crear el Superbot usando la plataforma de bots de Twnel

Creación de un Apps Script que pueda recibir los datos del Superbot

Para crear un  Apps Script, debe tener una cuenta de Google Workspace. Si tiene G Suite Free Edition, también puede usar esa.

Google Workspace incluye Hojas de Cálculo, Documentos, Presentaciones, Meet, Calendarios y más. Apps Script es parte de eso y le permite automatizar tareas que involucran uno o más de esos servicios. También le brinda acceso a otros servicios, como acceso a las API de Maps y más.

Cómo crear un nuevo script

Primero, debe iniciar Apps Script. Simplemente vaya al menú de Google Workspace y seleccione Apps Script para abrirlo, como se muestra a continuación.

Como alternativa, visite script.google.com para abrir el editor de secuencias de comandos. (Deberá iniciar sesión en su cuenta de Google).

Si es la primera vez que visita script.google.com, se le redirigirá a una página que presenta Apps Script.

Haga clic en “Iniciar secuencia de comandos” para pasar al editor de secuencias de comandos.

Una pantalla de bienvenida le preguntará qué tipo de script desea crear. Haga clic en Proyecto en blanco o Cerrar.

Elimine cualquier código en el editor de secuencias de comandos y pegue el código a continuación.

Puedes obtener el id de tu hoja de Google desde la URL

En la imagen de arriba está el texto después de d / y antes de / editar como se muestra a continuación

docs.google.com/spreadsheets/d/1FNT8Z2QIuYnmJYDegGgZ7Wik-3-s8ptjtHl3aOKmtuY/edit#gid=0

El nombre de la hoja (la pestaña en la parte inferior) es cualquier nombre que desee asignarle. Llamé al mío Barcodes.

Al crear un webhook con Apps Script, debe tener una función doPost () o doGet () para cuando se llame a su webhook con un método POST o GET respectivamente.

El siguiente código permite consultar la hoja de Google y la hoja específica donde desea guardar los datos.

 Con este código le decimos al programa qué datos obtener del chatbot.

En este caso, queremos obtener el número del código de barras, el nombre o descripción del producto, el precio del producto y el teléfono de la persona que envió la información. En Twnel, el número de teléfono es la identificación digital de los usuarios.

En esta línea, agregamos una fila con esos cinco valores a la hoja.

El resto del programa crea la respuesta de que el webhook retornará al flujo del chatbot.

Bastante simple, ¿no?

Obtener la URL del webhook (endpoint)

Siga los pasos de la siguiente animación para guardar su proyecto como una aplicación web (webhook).

Necesitará la URL resultante para el chatbot.

En la siguiente sección, muestro cómo crear el chatbot que consume esa URL para enviar la información del código de barras a Google Sheet.

Cómo crear el Superbot usando el “framework” de bots de Twnel

Nota: En este momento, estoy discutiendo el uso de la especificación de bot (JSON). Sin embargo, pronto lanzaremos nuestro propio Twnel Chatbot Visual Builder. El siguiente video muestra una vista previa del mismo. Espero que estén tan emocionados como yo con su próximo lanzamiento.

Probablemente esta sea la primera vez que explora el Twnel Bot Spec. Por lo tanto, recomiendo ver primero el tutorial de sobre el uso del mismo.

La especificación JSON completa para este flujo es:

En la sección de variables, las variables de usuario son las predeterminadas. Nada que explicar ahí.

En las variables del chatbot, creamos una llamada save_products_url donde guardamos la URL del “endpoint” del webhook para enviar los datos a la hoja de Google. Como puede ver, usamos esa variable en la acción “guardar”.

En este flujo simple, tenemos cinco transiciones y sus respectivas acciones.

El primero es pedirle al usuario que escanee un código de barras de un producto. El siguiente para pedirle al usuario que escriba el nombre (o descripción) del producto. El siguiente solicita al usuario que ingrese el precio del producto. El cuarto es llamar a una API para enviar los datos a un script de Google Apps Script para agregar una fila a la hoja. Dado que Apps Script espera cuatro parámetros, esta acción lo hace. Envía el número de teléfono, el valor del código de barras, el nombre del producto y su precio. Y, por último, la transición final no tiene siguiente paso porque es el final del flujo. Su acción devuelve la respuesta del webhook.

Como puede ver en la acción “guardar”, en este caso, no necesitamos almacenar el valor del código de barras y el valor del producto en las variables de sesión y podemos recuperarlos consultando el output.answer.value de sus respectivas transiciones. .

Bastante simple, ¿no crees?

Así es como se ve en Chatbot Visual Builder

Con él podrás crear un flujo como este en tan solo 5 minutos.

Un enfoque más avanzado que utiliza una API para recuperar información sobre el producto.

Dado que el propósito del flujo del chatbot para crear un repositorio de códigos de barras es poder tener algunos datos para ser consumidos por los usuarios del supermercado que quieren ahorrar tiempo en el cajero, ese flujo debería ser suficiente.

Sin embargo, si por alguna razón un supermercado o tienda de conveniencia desea crear un repositorio de este tipo de verdad, les gustaría tener algo un poco más avanzado.

Uno en el que, después de escanear el código de barras, obtiene los datos asociados con él mediante una API de un servicio como Barcode Lookup.

En este caso, el flujo sería así:

Como puede ver, aunque esta vez no necesitamos escribir el nombre del producto ni nada más, podemos obtener una gran cantidad de datos del código de barras del producto gracias al API.

La tabla de Google Sheet se verá similar a esto:

El código de Apps Script será similar al de la versión más simple, pero pasando más variables o parámetros del flujo del chatbot.

Además, en la respuesta, además de enviar un mensaje (msg), también envía la URL de la imagen del producto.

Sin embargo, una cosa que noté fue que el “carácter se devolvió como '” (vea la fila 3 en la imagen de la hoja de cálculo de arriba). Para arreglar eso, creé una función replaceAll.

Y cambié las líneas 18, 20 y 20 a:

Probablemente hay mejores formas de solucionar ese problema que es más general para cualquier codificación / decodificación de texto. Pero para este ejercicio, es suficiente.

La especificación JSON del bot en este caso es:

Solo hay algunas diferencias en este flujo.

La primera es que reemplacé la transición y la acción denominada producto. En el primer caso, la acción fue un send_message con un tipo de entrada de texto, mientras que en este, nombré la transición y la acción como get_product_info y la acción fue un call_api que envia el número de código de barras a una API de Barcode Lookup.

Luego, algunos de los valores de respuesta se envían al webhook de Apps Script.

Puedes obtener una clave de Barcode Lookup con fines de prueba, creando una cuenta gratuita.

Otra diferencia es que, dado que obtenemos una imagen del producto a partir de la respuesta al guardar los datos en la hoja de Google, estamos almacenando esa imagen en un bucket de Amazon S3.

Para eso necesitamos dos cosas:

Para definir un “storage” en la “sección” de almacenamiento de la especificación, como:

La segunda diferencia es la transición y la acción “store_image“. La acción toma la URL de la imagen devuelta por el webhook después de guardar la información del código de barras y la almacena en el depósito S3.

La última diferencia es que agregué la transición y acción show_image para poder mostrar en el bot la imagen del producto recién guardado. media_url toma output.url de la transición en la que guardé la imagen en S3.

En este punto, puedes preguntarte ¿POR QUÉ?

¿Por qué no tomar directamente la URL devuelta por la API de Barcode Lookup , que es la misma que devuelve el webhook?

Esa es una gran pregunta.

En muchas ocasiones, las imágenes no se muestran cuando provienen de diferentes dominios. Es un problema de CORS.

Entonces, lo resolvemos copiando la imagen a un depósito público. En este caso, estoy usando un depósito privado de cliente, pero podría tener un enfoque más simple utilizando un depósito público y evitando la necesidad de la transición store_image y su acción correspondiente.

Eso es. Esas son las diferencias, pero ahora el chatbot es mucho más útil 🙂

En el Twnel Chatbot Visual Builder, el flujo se ve así:

Una vez más, algo que solo tomaría un poco de tiempo para crear.

¿Tiene ideas de chatbots que le gustaría que comentemos sobre cómo construirlos?

Si es así, agregue un comentario a continuación.

Además, comparta este artículo con cualquier persona que pueda beneficiarse de él.

Autor: Gilbert Mizrahi

Head of Growth – Twnel

Siempre buscando problemas interesantes para resolver.

Te notificaremos cuando publiquemos
nuevos artículos, casos de uso,
podcasts y webinars.

Copy link
Powered by Social Snap