Cuando nos enfrentamos al reto de crear un nuevo producto digital, suele surgir la siguiente pregunta: ¿Debemos desarrollarlo de forma programada? o ¿quizás sería mejor utilizar herramientas sin código o de bajo código para este fin?

La respuesta a esta pregunta no es sencilla y depende del caso de uso, la complejidad del producto, la solidez y el rendimiento requeridos, así como la finalidad del producto digital.

Este reto nos lo planteamos cuando empezamos la ideación y desarrollo de My SpaList, y en este post vamos a explicar cómo lo hicimos y las razones que nos llevaron a tomar las decisiones.

¿Qué es My SpaList?

My SpaList es un motor de búsqueda y un directorio de masajistas y spas profesionales.

Hay dos tipos de usuarios en la página, por un lado los que están interesados en buscar estos servicios y por otro los usuarios profesionales que ven el producto como una herramienta útil para conseguir clientes. Estos últimos son los que tendrán un login para crear su perfil, los usuarios que sólo quieren buscar y contactar con un profesional no necesitan registrarse.

¿Qué herramientas sin código elegimos al principio?

Aunque el producto tenía que tener muchas funcionalidades desde el principio (no era sólo un producto mínimo para validar hipótesis) decidimos apostar por una pila de herramientas sin código, que con el tiempo han ido cambiando.

• La primera decisión fue elegir la herramienta o plataforma en la que desarrollar toda la web, para ello nos decidimos por Webflow por su potencia, versatilidad y gran experiencia del equipo.
• La primera decisión fue elegir la herramienta o plataforma en la que desarrollar toda la web, para ello nos decidimos por Webflow por su potencia, versatilidad y gran experiencia del equipo.
• Para que los usuarios puedan buscar masajistas y spas, así como marcarlos como favoritos, elegimos al principio Jetboost.
• Sendgrid se utiliza para la confirmación de correos electrónicos y el envío de boletines.
• La subida de todas las imágenes de masajistas y spas se realiza a través del widget Uploadcare.
• Para la verificación de correos electrónicos y números de teléfono hemos optado por utilizar la API de Twilio, ya que facilita mucho la gestión de este proceso.

¿Y dónde se almacena toda la información de los masajes y spas? Toda la información que es visible públicamente se almacena en el CMS proporcionado por Webflow, sin embargo, debido a las limitaciones de ese CMS y para limitar el acceso a los datos privados, el resto de la información se almacena en la cuenta Memberstack de cada masajista o spa.

Detrás de toda esta acumulación de herramientas hay bastante lógica, ¿cómo se gestiona? Para solucionarlo apostamos por utilizar Integromat para las acciones que implican conectar múltiples herramientas, junto con código Javascript para la lógica dentro de la página web.

¿Cómo gestionamos toda la lógica de la aplicación? Exprimiendo Integromat

A medida que avanzaba el desarrollo de la aplicación web vimos como la complejidad de la aplicación iba creciendo, desde Integromat interconectamos todas las herramientas mencionadas anteriormente, añadimos la lógica de negocio y registramos las acciones para luego poder realizar un análisis de dichos datos.

A continuación se muestra una captura de pantalla con todos los escenarios que se han creado, desde los más sencillos con sólo 2 módulos en el caso de lanzar alertas por correo electrónico cuando hay un error, hasta los 39 módulos utilizados en el escenario que gestiona la actualización de datos de un usuario registrado.

Uno de los escenarios más complejos que hemos desarrollado es el que detecta cambios en el perfil de un masajista o spa.

Lo hemos dividido en diferentes secciones: información personal, contacto, dirección, detalles, ubicaciones y empleados, lo que nos ayuda mucho a entenderlo y gestionarlo en caso de cualquier error.

En este flujo se obtiene y modifica la información tanto de Webflow CMS como de Memberstack, registrando algunas acciones en Google Sheets para el posterior análisis de los datos.

Otro escenario interesante es el desarrollado para validar el correo electrónico de un usuario, el usuario recibirá un correo de verificación, y tras hacer clic en el enlace de verificación se ejecutará este escenario.

En el que a través de la API de Twilio comprobaremos que todo ha ido correctamente, actualizaremos esta información en Memberstack, registraremos la información en Google Sheets para analizar los datos y redirigiremos al usuario a la web, si en algún momento hay algún problema o error se le redirigirá a una web que le informará de lo sucedido.

Aplicaciones web con Webflow, luces y sombras

Para la realización de la web desde el principio apostamos por Webflow, es una herramienta que nos ofrece una enorme versatilidad para desarrollar y diseñar.

Para el diseño de la parte pública no hubo mayores problemas, y se pudo maquetar correctamente lo diseñado, con algunos pequeños retoques con Javascript. Aquí mostramos la página de inicio y la página de perfil de un terapeuta.

Creación de la sección privada

Sin embargo, para la gestión de los perfiles era necesario tener una sección privada, que requería mucho más código para funcionar correctamente.

Por un lado, Memberstack se utiliza para configurar las suscripciones, el pago y la limitación de acceso a algunas páginas. Sin embargo, como se ha mencionado anteriormente, la información pública se almacena en el CMS de Webflow y la información privada en Memberstack, por lo que configurar una página desde la que modificar toda esta información no era una tarea fácil.

Para ello, se decidió dividirlo por secciones, en cada sección el usuario puede modificar una parte de su perfil, datos personales, dirección, fotografías, detalles...

Para gestionar toda la lógica ha sido necesario utilizar código Javascript, con este código se realizan llamadas a la API que verifica el número de teléfono, gestiona como guardar las horas de apertura al público, los servicios ofrecidos, los precios ofrecidos, las direcciones con geolocalización o la subida de múltiples fotos (utilizando el widget Uploadcare).

Es en este punto donde vemos las limitaciones de las herramientas sin código, cuando necesitamos más personalización o gestionar algo de forma más compleja.

Para el almacenamiento de información pública, el CMS de Webflow ha sido muy útil, pero hemos encontrado su principal limitación, y es que cada elemento de una colección sólo puede tener entre 30 y 60 campos (dependiendo del plan contratado) donde almacenar información.

Limitaciones del no-código y soluciones encontradas

A la hora de elegir una pila de herramientas sin código para nuestro proyecto es importante saber qué funcionalidades vamos a necesitar y qué limitaciones existen, ya que es muy probable que alguna funcionalidad tenga que cambiar un poco para adaptarse a una herramienta, o puede ser necesario descartar una herramienta por alguna limitación importante que tenga.

La experiencia de trabajar con todo este conjunto de herramientas es muy útil para conocer cuáles son los límites de cada una de ellas, ya que puede ocurrir que apostemos por el uso de una herramienta y al final surja una limitación que bloquee totalmente el desarrollo de nuestra idea.

Almacenamiento de datos

Almacenar y gestionar los datos en dos lugares diferentes, los públicos en Webflow y los privados en Memberstack, ha sido bastante problemático, ya que en todo momento hay que acceder a los datos en diferentes lugares y mantener la concordancia entre ellos.

Ha sido necesario utilizar mucho código para ello, ya que no era suficiente con tener una única fuente de datos, Webflow tiene campos limitados y expone los datos que almacena en las páginas de detalle de un elemento, por otro lado Memberstack muestra los datos privados de la persona que ha iniciado sesión, por lo que no sirve para la gestión de datos públicos.

Siempre que sea posible, es recomendable mantener una única fuente de verdad donde se almacenen los datos, ya que de lo contrario se hace más complejo tener varias fuentes de datos correctamente sincronizadas, y es en este punto donde pueden surgir incoherencias entre ellas.

Gestión de la lógica con Integromat

Aunque Integromat es una herramienta más flexible y potente que Zapier, al crecer el volumen de escenarios, módulos y herramientas conectadas, cualquier pequeño cambio puede hacer que algo se desconfigure o deje de funcionar, ralentizando el desarrollo. Además, no es posible tener escenarios en staging o borrador, por lo que siempre se están realizando cambios en la versión de producción, con los riesgos de estabilidad que ello conlleva.

Búsquedas y filtrado

Para realizar búsquedas y filtrados elegimos Jetboost, es un addon muy práctico para Webflow como comentamos en este artículo comparando los sistemas de filtrado que existen en Webflow, pero rápidamente encontramos sus limitaciones.

La búsqueda en un directorio de este tipo se basa en la ubicación, ya que el usuario no quiere desplazarse durante horas, por lo que era imprescindible una búsqueda basada en la localización.

Para solucionar este gran problema decidimos desarrollar un producto propio que permitiera realizar búsquedas de forma rápida, con geolocalización y con la posibilidad de mostrar los resultados en un mapa. En estos momentos estamos desarrollando este producto para ofrecer a todo el mundo esta compleja herramienta de búsqueda. Os mantendremos informados.

‍