Cómo crear un chatbot para escanear productos en el supermercado

by | May 24, 2021 | Industria, Superbots, Supermercados | 0 comments

Recientemente, cuando estaba esperando en la fila para entrar al supermercado Wegmans local, vi un cartel que mostraba cómo los clientes podían escanear y empaquetar sus productos usando una aplicación, llamada Wegmans Scan.

Al leer el póster pensé, humm, esto debería ser bastante fácil de implementar usando un Twnel Superbot (chatbot).

Así que me fui a casa y decidí crearlo y documentar todo el proceso. Espero que te sirva de inspiración, para que puedas crear tus propios Superbots para resolver muchos otros problemas o mejorar los procesos actuales.

Idea general

En esta publicación, mostraré todo el proceso. Como no trabajo en una cadena de supermercados y no tengo acceso a su ERP / sistema de inventario, lo simularé usando hojas de cálculo de Google.

Por lo tanto, pondré los datos de algunos productos en una hoja. Incluirá la información del código de barras, el nombre del producto y el precio.

Para obtener la información del código de barras, crearé un bot simple para capturar la información del código de barras y luego ingresar el nombre del producto. El bot guardará esos datos en la hoja.

El flujo será algo como esto:

Otro enfoque es utilizar una API para obtener los datos del código de barras y guardar esa información en la hoja de Google. En ese caso, el flujo se ve así:

Si tienes acceso al ERP del supermercado o cualquier otro repositorio con esa información, o si solo te importa ver cómo crear el escaneo Superbot de compras escaneando códigos, puedes ignorar este paso extra.

Sin embargo, si deseas aprender algunas cosas y trucos, te recomiendo que lea Como crear un chatbot para capturar códigos de barras de productos.

A continuación, muestro cómo crear un bot (o flujo para ser más precisos) para escanear los productos y agregarlos al “carrito”.

Cuando el usuario esté listo para pagar, el bot generará un código QR que se mostrará en el bot (en el teléfono), que se puede escanear en el cajero de autopago para recuperar el contenido del carrito y proceder a pagar .

El flujo será algo similar a esto:

Como puedes ver en este diagrama, el flujo es bastante simple. Supongo que esa es la belleza de los Twnel Superbots. Pueden ser muy simples y fáciles de crear, pero pueden mejorar los procesos de formas muy poderosas.

En este caso, puede reemplazar la necesidad de crear aplicaciones móviles personalizadas, que pueden tardar mucho tiempo en ser desarrolladas y son costosas de construir y mantener.

Para guardar y recuperar datos de una hoja de Google, estoy creando un webhook usando Google Apps Script. No te preocupes, te lo explicaré todo.

Lo bueno de este ejercicio es que puedes utilizar el mismo chatbot para intentar vender el chatbot a una cadena minorista de su mercado. O, si trabajas para una cadena de supermercados, puedes tomar la iniciativa de crearla tu mismo. Quién sabe, tal vez consigas un ascenso 🙂

Puedes decir, sí, pero necesitarían tenerlo conectado a su ERP o sistema de inventario. Y yo diría… DEFINITIVAMENTE.

Sin embargo, con este bot, puedes mostrar cómo funcionará para ellos con poco esfuerzo, como un proyecto piloto.

Luego, después de que puedan probarlo en un supermercado, podría obtener el contrato para refinarlo y consumir los datos de su sistema ERP.

Y una vez dentro podrás ofrecerles más servicios y automatización utilizando Twnel. Un beneficio mutuo para todos.

Probablemente esta sea la primera vez que exploras el Twnel Bot Spec.

Por lo tanto, te recomiendo ver  este video primero.

Código en Google Apps Script para el webhook utilizado por el flujo del chatbot para obtener información del producto

Los datos de la hoja de cálculo se ven así:

Por lo tanto, el webhook deberá recibir el número de código de barras y recuperar el nombre y el precio.

Además, el mismo código de Apps Script puede crear una nueva hoja para almacenar el contenido del carrito.

Para el carrito, no necesitaremos ninguna otra información.

Por lo tanto, el script será simplemente:

En las lineas 10 y 11 hago referencia a la hoja de cálculo de Google y a la hoja donde tengo los datos de los productos respectivamente. Luego, obtengo todos los valores en la hoja con

Luego, recorre las filas y compara el número de código de barras escaneado con el bot, con el número de código de barras en la hoja de cálculo (la tercera columna tiene un índice 0f 2, ya que el índice comienza en 0).

Una vez que encuentra una coincidencia (el código de barras es igual al valor de esa columna en una fila determinada), toma el nombre del producto y el precio, y los coloca en un objeto que devuelve al bot.

Al ejecutar la consulta en el navegador, al enviar un parámetro barcode_number = 28000517205, el resultado es (como se esperaba):

Entonces, el código de Apps Script está funcionando bien.

Si no sabe cómo guardar este código como un webhook, consulte el artículo Como crear un chatbot para capturar códigos de barras de productos, donde lo explico en detalle.

El mismo Apps Script, sin embargo, se puede utilizar para crear una nueva hoja para cada usuario, y para realizar un seguimiento del contenido de su carrito.

Para el nombre de cada una de estas hojas (pestañas), podemos utilizar el número de teléfono del usuario, ya que es un identificador único.

Por lo tanto, tiene sentido hacer  una solicitud POST al webhook y reemplazar la función doGet() con una doPost().

Entonces, el código de Apps Script debería verse así:

Agregué una nueva variable, eliminar, para que la envíe el bot: es un booleano que indica si el usuario quiere agregar un producto al carrito o eliminarlo.

Como puedes ver, el código de las línea 37 a la 41 verifica si la hoja por el nombre (número de teléfono) existe o no. Si no es así, lo crea y agrega una fila con los encabezados.

Luego, necesitamos agregar una función para agregar un producto al carrito (agregando una nueva fila en la hoja), o eliminar un producto (eliminando una fila con el código de barras de ese producto).

Entonces el script completo es:

Tanto las funciones removeProductFromCart como saveProductToCart devuelven el resultado de otra función getCart2.

getCart2 crea una cadena que contiene todos los productos y sus respectivos precios y calcula el precio total en el carrito y el número total de artículos en él.

Luego, en la línea 46, estoy usando un generador de códigos QR http://goqr.me. Como puedes ver, es bastante simple

Debes pasar el tamaño y los datos como parámetros, y eso es todo. En este caso, paso el número de teléfono como los datos que contiene, ya que también es el identificador del usuario y la hoja (pestaña) donde se almacena la información de tu carrito.

También podrías crear el código QR con Apps Scripts, pero en ese caso tendría que almacenar la imagen en Google Drive, luego hacer que el directorio o al menos el archivo sea público para que funcione. Con http://goqr.me/ es mucho más sencillo. Además, su API permite almacenar varios parámetros, cambiar el color del código o el fondo, y más. Consulta http://goqr.me/api/doc/create-qr-code/ para obtener más información.

Finalmente, el script devuelve un objeto, respuesta, que contiene la información sobre el producto recién agregado o eliminado del carrito, el texto con todos los productos en el carrito con sus respectivos precios, el precio total, la cantidad de artículos en el carrito, y la URL del código QR.

En el script, también tengo una función getCart, que devuelve una arreglo de objetos y todos los productos en el carrito. No lo estoy usando, pero lo incluí allí en caso de que prefiera devolver su contenido como un arreglo en lugar de el  texto (string) devuelto por getCart2. Eso puede ser útil si desea realizar algún procesamiento adicional de esos datos en el bot directamente.

Puedes probar el webhook con Postman.

Ahora que el webhook está listo, es el momento de crear la especificación JSON del flujo del bot.

Parece complejo, pero en realidad es bastante simple.

En la sección de variables, solo hay una variable de chatbot, get_products_details, que es la URL del webhook creado con Google Apps Script.

Luego, hay dos variables de sesión, cart_content y barcode. cart_content almacena el objeto devuelto por el webhook cada vez que se invoca. Es entonces cuando el usuario escanea un producto nuevo para agregarlo al carrito o escanea un producto para quitarlo del carrito. Y barcode, que almacena el código de barras del producto más reciente escaneado.

Si viste el video sobre Twnel Bot Spec. o leiste el artículo sobre la creación del repositorio para los productos, deberas comprender la mayor parte de esta especificación JSON.

En cualquier caso, la línea 57 indica que el punto de entrada del flujo es la transición scan_barcode. Eso significa que el flujo comenzará con esa transición. Como probablemente ya sepas, cada transición define una acción que se ejecutará y cuál es la próxima transición.

La acción scan_barcode solicita al usuario que escanee el código de barras de un producto. Es un tipo de acción send_message, con un “input type” de código de barras.

Como puedes ver en la línea 144 tiene el atributo “geotag” con un valor de verdadero. Eso quiere decir que además de escanear un código de barras queremos obtener la geolocalización de la persona al hacerlo.

No estoy usando esa información aquí, pero la usaré en un artículo de seguimiento. Entonces, suscríbete a nuestro boletín (al final de este artículo) y síguenos en LinkedIn para sepas cuando publicamos nuevos artículos.

En la siguiente transición y acción, almaceno el número de código de barras en una variable. Luego, en la acción get_product_info ejecutada en la transición del mismo nombre, el bot llama al webhook y envía tres parámetros: el teléfono del usuario, el número de código de barras y un booleano que indica si el usuario quiere eliminar el elemento de el carro. Si el valor es falso, significa que quiere agregarlo.

Aunque estoy usando los mismos nombres para el par de transición y acción, cada uno puede tener su propio nombre único.

La siguiente acción, store_cart_info, almacena el contenido del carrito en una variable llamada cart_content.

La acción de respuesta, que se ejecuta en el siguiente paso (o transición), muestra algunos comentarios al usuario, obteniendo diferentes datos de la variable cart_content.

Luego, la siguiente acción es una acción send_message que muestra tres botones, para preguntarle al usuario qué quiere hacer a continuación:

  1. Escanear otro producto,
  2. Remover un producto del carrito,
  3. Ver el carrito

Por lo tanto, tiene un “input type” de radio para permitir ese comportamiento.

La siguiente transición en la siguiente sección (sé que no elegí bien el nombre de la transición, ya que esto puede resultar confuso … lo siento), muestra la bifurcación condicional según la opción que seleccione el usuario.

Como puedes ver, cada botón de la siguiente acción tiene una etiqueta (label), lo que el usuario ve en el botón y un id, que se usa en la transición para poder dirigir al usuario a la siguiente transición. Por lo tanto, si el usuario hace clic en el botón Escanear otro producto, el siguiente paso será scan_barcode2, y así sucesivamente.

La acción scan_barcode2 es similar a la de scan_barcode, pero con un par de diferencias. Primero, en este caso, no quiero capturar la geolocalización, ya que espero que el usuario continúe comprando en el mismo supermercado. La otra es que el mensaje debería ser un poco diferente. El scan_barcode también es el punto de partida, por lo que debe saludar o informar al usuario de qué se trata el flujo del chatbot.

Además, para que el flujo sea menos “robótico”, incluyo una serie de posibles mensajes en la acción scan_barcode2. Mira las líneas 234 a 236. Esto significa que cada vez que se ejecuta esta acción, el flujo mostrará uno de los mensajes al azar. Te sugiero que hagas lo mismo en muchas otras acciones de send_message.

La acción remove_item es similar, pero el mensaje indica que el usuario escaneará un producto que desea eliminar del carrito. Al eliminar un elemento, el flujo ejecuta la acción update_cart, que es similar a la de get_product_info. Sin embargo, el parámetro de eliminación es verdadero cuando se elimina un producto.

La acción view_cart muestra un texto con todo el contenido del carrito, y la acción qr_code muestra el código QR que contiene el número de teléfono del usuario. La idea es que el código QR se escanee luego en el autopago, para que pueda recuperar el contenido del carrito y cobrar al cliente en consecuencia.

Además, para poder mostrar el código QR que el usuario utilizará para pagar en el cajero automático, necesitamos habilitar un bucket de Amazon S3 o Azure público o privado.

En un caso como este, probablemente usaría uno público. Sin embargo, para el propósito de este tutorial, estoy usando uno privado. Por lo tanto, en las líneas 38 a 50, estoy creando un depósito S3 privado, al que se hace referencia en la acción store_image y se usa en la acción qr_code.

Desafortunadamente, no puedo mostrar aquí el escaneo del código QR en la función de pago, ya que debe programarse para ejecutarse en el cajero de autopago del supermercado.

Entonces, la idea es que una vez que el cliente pague, se activará la llamada de una API de Twnel que puede enviar el número de teléfono a otro webhook que creará un PDF a partir del contenido del carrito y lo enviará al flujo del bot para los registros del usuario.

La última parte del flujo se puede ajustar, para que el usuario pueda ir a un área de pago, para asegurarse de que no está agregando más productos después del pago, escanear un código QR que le da acceso a un flujo de pago y continuar pagando directamente desde ese flujo en su teléfono. Tal vez algún día veamos eso.

Pronto, lanzaremos Chatbot Visual Builder, que facilitará mucho la creación de chatbots. Este flujo de chatbot se ve así en el constructor visual:

Muy simple, para una automatización tan poderosa, ¿no crees?

¿Tienes ideas de chatbots que te gustaría que comentemos sobre cómo construirlos?

Si es así, agrega un comentario a continuación y suscríbete a nuestro boletín, para que no te pierdas contenido similar cuando lo publiquemos.

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

Autor: Gilbert Mizrahi

Head of Growth – Twnel

Siempre en busqueda de problemas por resolver

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

Escaneo de codigos QR para supermercados
Copy link
Powered by Social Snap