Cuando hice el parón para hablar de Blockchain ya anticipé que uno de los temas que me estaba llamando la atención era el No Code o la posibilidad de hacer webs y apps, sin saber programación.
El No Code hace años que está entre nosotros. Antes, para hacer una web tenías que, sí o sí, contar con informáticos.
Con el tiempo fueron apareciendo WordPress (en su versión más sencilla wordpress.com o usando tu propio servidor con la .org, yo usé este video para aprender cómo hacer este blog), Wix, GoDaddy… para hacer páginas estáticas o incluso e-commerce, pero básicamente webs donde tú pones la información para que la consulten o compren los usuarios.
También cada vez más gente emplea herramientas como Notion para hacer algo intermedio entre una web y un gestor de tareas o gestor documental.
Bubble.io
Pero recientemente he tenido la oportunidad de conocer más a fondo Bubble.io haciendo este curso de Udemy que puedes encontrar por menos de 100 euros (o menos de 20 si pillas la promoción, pero da igual, el valor que te aporta vale miles de euros*…) *No, no soy afiliado, ni cobro por decirlo 😅
Y esto… lo cambia todo.
Porque no tiene nada que ver un Blog o un e-commerce con una aplicación tipo AirBnB donde tienes usuarios que se dan de alta, que pueden poner ellos mismos los anuncios, que están geolocalizados, donde los usuarios pueden chatear entre ellos, se envían notificaciones al email, consultas información desde APIs externas y donde hay lógicas de negocio bastante complejas.
¿Realmente esto era real y sin saber programar o sin haber tenido un CTO podría haber creado un Nautal? Vayamos por partes.
Lo primer que hice fue el curso. Es un curso de 16 horas de video grabado, por lo que puedes verlo cuando quieres, puedes poner velocidad 1,5x si vas sobrado o puedes repetir infinitas veces una sección si no lo pillas; ventajas del asíncrono. Yo estuve una semana part time, haciendo en paralelo todo lo que iba explicando.
Este curso tiene las siguientes secciones:
Como puede observarse, al final del curso ya haces proyectos casi reales, como un gestor de tareas y un tipo Airbnb (con la posiblidad de crear usuarios, poner anuncios, geolocalizarlos, chatear y reservar mediante Stripe).
Pero veamos con más detenimiento las secciones de Bubble:
En Design es donde dibujas el Front End de la web. Puedes colocar elementos visuales (textos, imágenes, iconos, …), Contenedores (agrupar elementos visuales, crear tablas de información, popups…), elementos de interacción (casillas donde se pueda escribir, subir imágenes, chceckbox, dropdowns, sliders…) y elementos reusables (cabecera, pié…).
Adicionalmente, para cada elemento del diseño verás como se coloca y agrupa a través del Elements Tree y podrás definir sus características de diseño, definir condicionales para que su diseño cambie en base a reglas y ponerle transiciones.
En la pestaña Responsive es donde puedes ver cómo quedará tu diseño en función del tamaño de la pantalla. Para arreglar el diseño responsive tienes 3 herramientas. Para cada elemento de diseño decir si será de tamaño fijo o flexible (con un mínimo y un máximo), agrupar elementos y en esa misma pestaña indicar si se alinea a la izquierda, centro o derecha.
Ah, y antes de comenzar que sepas que puedes comenzar con el lienzo en blanco o usando templates que tienen.
En Workflow es donde defines la lógica de la página. Básicamente si pasa esto, haz esto, eso y aquello. Se usan al cargar la página, al rellenar un elemento de interacción, al clicar un botón, etc. Por cada acción puedes crear varias consecuencias de tipo cuenta (crear un usuario, registrarlo…), navegación (ira a una página), data (crear o modificar registros en la base de datos…), email (enviar emails), pagos (hacer cobros mediante stripe o paypal), analítics (registrar eventos para hacer después un buen seguimiento del uso de la web), acciones de elementos (mostrar u ocultar popups o capas flotantes, vaciar inputs, rellenar una tabla…), plugins (hay multitud de plugins y APIs que potenciarán el poder de Bubble) y eventos customizados.
En Data creas la estructura de la base de datos y los campos de cada base, las condiciones de privacidad (quién puede ver qué campos en base a roles), puedes ver los datos rellenados en la base de datos o crearlos a mano y visualizar los ficheros subidos. Lo ideal aquí es que toda la gestión de los usuarios (sign up, login, guardar passwords sin que se vean, etc.) ya está preconstruído.
En Estilos puedes definir los estilos de tu App o Web para que cuando selecciones ese estilo en concreto tu texto, tabla, botón… tengan el diseño que has definido.
En Plugins puedes añadir complementos que potencien tu Bubble. Hay cosas como calendarios pre-hechos, conectores de APIs, swipes tipo Tinder…
Mi Proyecto Bubble
Al acabar el curso tuve claro que necesitaba hacer un proyecto propio para consolidar lo aprendido (junto a hacer este post que me está ayudando).
El profesor de baile de mi mujer me comentó que una App de baile podría molar, así que comencé por ahí. La idea no era crear una startup, sino aprender a ¿no-programar?
Era alucinante lo rápido que ibas. Todo lo que cuento es con flujos reales, un usuario puede registrarse y hacer todo esto.
En un día creabas la base de datos y los fronts mínimos para tener «algo». Básicamente la página de búsqueda de bailarines, la página de perfil de cada bailarín y la página para editar tu propio perfil.
Al día siguiente había creado una página para que los usuarios pudieran conversar y una página para publicar eventos…
Y al día siguiente un muro donde publicar posts y la posibilidad de seguir a gente para ver sus posts y darle like a los posts de otros y ya que estaba, añadir un contador y registro a los eventos para saber quién iría.
Al siguiente día se me fue un poco la olla y quise instaurar un sistema de bans o bloqueos, pero no tenía muy claro ni para qué, así que estuve dudando si cuando el usuario A bloqueaba al B, si debía añadir el registro en el usuario A o en el B o crear una nueva tabla, pero bueno, lo instauré para probar e hice que si un usuario A bloquea al usuario B, el usuario B ya no pueda ver los posts del A ni chatear (ni ver los chas antiguos) de A. Obviamente aqu´lo estoy hacendo todo mal, estoy haciendo features en lugar de averiguar y resolver problemas, pero la idea era jugar, probar y aprender.
Después pasé un par de días puliendo cositas que me habían quedado a medias y arreglando algunas cosas del resposive que no quedaban bien. Básicamente eran cosas que se ma habían atragantado, pero una búsqueda en Google y mirando alguna FAQ de Bubble o vídeo tutorial y encontraba la respuesta… o se me ocurria al cabo de un rato, como aquí.
Y después de un día de descanso pensé… me gustaría probar esto de conectar una API, a ver qué tal…
Pero claro, qué API en una app de baile… así que cambié la App. En medio día había convertido una red social de bailarines e una App de fans de las criptomonedas, cambiando los campos y textos necesarios. Lo realmente genial es que al cambiar el nombre de las tablas, los campos o los elementos, se cambiaba automáticamente en todos los workflows, sin tener que repasar toda la web para ir cambiando nombres.
Y mediante este video conecté una API de CoinGecko para obtener 250 criptomonedas, con información de ellas y su cotización, y creé este Dashboard
Así, que en una semana aproximadamente había creado una red social de amantes de las criptomonedas, co los siguientes elementos:
- Registro de usuarios
- Dashboard con información obtenida por API de los mercados
- Búsqueda de usuarios y de ver su perfil, con capacidad de follow y block
- Publicar posts y ver los posts de la gente que sigues (salvo que te hayan bloqueado) y darle like a sus publicaciones
- Chatear con la gente que no te haya bloqueado
- Crear y ver y apuntarte a eventos
- Editar tu perfil
- Portad, terms and conditions, etc.
Si queréis verla y jugar con ella, aquí la tenéis. Los emails están deshabilitados para no liarla, pero todos los procesos deberían funcionar, avísame si ves un bug.
Conclusión
Aprender Bubble me ha servido para consolidar muchos conceptos del desarrollo de software: bases de datos, lógica, diseño, responsive, uso de APIs…
También creo que puede ser útil para validar MVPs y hacer iteraciones rápidas durante este proceso de validación.
También puede servir para hacer herramientas internas cuando no haya un SaaS adecuado.
Pero seguro que no sirve cuando vayas a escalar. Te encontrarás limitaciones propias del no code (no puedes hacer cualquier cosa), no puedes, creo, implementar test y probablemente (porque no lo he probado) no escale bien cuando tengas muchos usuarios, tráfico y contenido.
Y como podéis ver, hacer el curso no me ha servido para mejorar mis habilidades en diseño.
