El desafío de crear un marketplace sin código

Cuando nos enfrentamos al desafío de crear un nuevo producto digital, suele surgir la siguiente pregunta: ¿Debemos desarrollarlo programáticamente? o tal vez sería mejor usar herramientas sin código o con poco código para este propósito.

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 del propósito del producto digital.

Este desafío se nos planteó cuando comenzamos la ideación y el 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 directorio de masajistas y spas profesionales.

Hay dos tipos de usuarios en el sitio, por un lado los que están interesados en buscar estos servicios y, por otro lado, los usuarios profesionales que ven el producto como una herramienta útil para conseguir clientes. Estos últimos son aquellos que tendrán un inicio de sesión para crear su perfil, los usuarios que solo quieran buscar y contactar a 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 solo un producto mínimo para validar hipótesis), decidimos optar 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 todo el sitio 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 todo el sitio web, para ello nos decidimos por Webflow por su potencia, versatilidad y gran experiencia del equipo.
• Para permitir a los usuarios búsqueda para masajistas y spas, así como para marcarlos como preferidos, elegimos Jetboost al principio.
• Enviar cuadrícula se usa para confirmación por correo electrónico y envío de boletines.
• El carga de todas las imágenes de masajistas y spas se realiza a través del Cargar care artilugio.
• Para el verificación de correos electrónicos y números de teléfono hemos optado por utilizar el Twilio API, ya que facilita mucho la gestión de este proceso.

Y dónde se almacena toda la información de masajes y spa? 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 a la limitación del acceso a datos privados, el resto de la información se almacena en el Pila de miembros cuenta de cada masajista o spa.

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

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

A medida que avanzaba el desarrollo de la aplicación web, vimos cómo crecía la complejidad de la aplicación, desde Integromat interconectamos todas las herramientas mencionadas anteriormente, agregamos lógica empresarial y registramos las acciones para luego poder realizar un análisis de dichos datos.

A continuación se muestra una captura de pantalla que muestra todos los escenarios que se han creado, desde los más simples con solo 2 módulos en el caso de lanzar alertas por correo electrónico cuando hay un error, al 39 módulos utilizado en el escenario que administra 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.

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

En este flujo, la información se obtiene y modifica tanto de Webflow CMS como de Memberstack, registrando algunas acciones en Google Sheets para su posterior análisis de 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 del 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 será redirigido 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 fue posible maquetar correctamente lo que se había diseñado, con algunos pequeños retoques con Javascript. Aquí le mostramos la página de inicio y el perfil de un terapeuta.

Creación de la sección privada

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

Por un lado, Memberstack sirve para configurar las suscripciones, el pago y la limitación de acceso a algunas páginas. Sin embargo, como se mencionó 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 fue una tarea fácil.

Para ello, se decidió dividirlo en 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 cómo guardar las horas abiertas al público, los servicios ofrecidos, los precios ofrecidos, las direcciones con geolocalización o la carga de varias fotos (utilizando el widget Uploadcare).

Es en este punto cuando vemos las limitaciones de las herramientas que no son de código, cuando necesitamos más personalización o para gestionar algo de una manera más compleja.

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

Limitaciones de la ausencia de código y soluciones encontradas

Al 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 bien 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 saber 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 distintos, 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 bastaba con tener una única fuente de datos, Webflow tiene campos limitados y expone los datos que almacena en las páginas de detalles 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 almacenarán 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 inconsistencias entre ellas.

Gestión lógica con Integromat

Aunque Integromat es una herramienta más flexible y potente que Zapier, a medida que aumenta el volumen de escenarios, módulos y herramientas conectadas, cualquier pequeño cambio puede provocar que algo se desconfigure o deje de funcionar, lo que ralentizará el desarrollo. Además, no es posible tener escenarios en fase de preparación o borrador, por lo que siempre se realizan cambios en la versión de producción, con los riesgos de estabilidad que esto conlleva.

Búsquedas y filtrado

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

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

Para resolver este gran problema, decidimos desarrollar nuestro propio producto que nos permitiera realizar búsquedas de forma rápida, con geolocalización y la posibilidad de mostrar los resultados en un mapa. Actualmente estamos desarrollando este producto para ofrecer a todos esta compleja herramienta de búsqueda. Te mantendremos informado.

‍