Tiempo estimado de lectura: 12 minutos.
El no-code es un movimiento que ha surgido en torno a los diseñadores de productos, profesionales del marketing, creadores de contenido y gente no técnica en general, que buscan ser autónomos a la hora de resolver los problemas de su día a día.
Esto es debido a que las herramientas no-code permiten lanzar productos, automatizar procesos y hacer crecer los negocios digitales de forma rápida y económica sin necesidad de programar.
Por ello, es una manera ideal de realizar experimentos, iterar sobre los resultados y en definitiva, acelerar la validación de cualquier idea.
En mi caso, tengo varias ideas de aplicaciones y llevaba ya tiempo queriendo aprender una plataforma que me lo permitiera. Después de un análisis de varias que te contaré en otra ocasión, me decanté por aprender Bubble.
Bubble es una herramienta de desarrollo visual por bloques y un proveedor de servicio, lo que significa que la aplicación está activa en el momento que la publicas.
Te cuento mis pasos hasta tener la primera versión de mi aplicación de recetas: Recetas de Familia.
Primeros pasos
- Paso 1: abrir una cuenta en Bubble. Es gratis, con una funcionalidad limitada que vale para empezar. Solo tendrás que pagar cuando quieras publicar tu aplicación en un entorno real.
- Paso 2: crear una nueva aplicación en el botón New app de la pestaña My Apps.
- Paso 3: completar nombre y uso (por temas estadísticos).
- Paso 4: abrir una “página en blanco” o “seguir los pasos del asistente (New Application Assistant)”.
En el segundo caso tendrás que incluir: nombre con el que se va a mostrar la aplicación, el idioma, el logotipo que se va a ver en la pestaña web (favicon) e instalar plugins o conectores API, si los conoces a priori. Si no, sigue adelante.
En cualquier momento puedes modificar los datos desde la pestaña de configuración (Settings) en el menú vertical izquierdo de la pantalla.
Además, si has seguido este proceso, se cargará la plantilla de Bubble por defecto. Si no te interesa, elimina todos los bloques y en próximas ocasiones, comienza con la opción de “página en blanco”.
- Paso 5: La primera vez, la plataforma te ofrece un viaje guiado para familiarizarte con los elementos principales. Yo lo hice.
Primer problema que solucionar: Google Map key
Lo primero que vi en el panel de la aplicaciones, en la parte superior, es un aviso en rojo.
Siempre aparece por defecto y sólo te afecta a la hora de lanzar tu aplicación en vivo y si tienes mapas.
Para solucionarlo lo mejor es seguir las instrucciones del aviso porque hay que activar las APIs geográficas que asocian los mapas en Bubble a tu cuenta y pagos de Google.
El proceso es:
- Ir a la consola de Google.
- Crear un proyecto con el nombre que quieras.
- En el Menú de Navegación -> APIs and services -> Library, y activamos: Geocoding API, Places API, Geolocation API, Time Zone API
Estas APIs tienen un coste a por uso aunque mensualmente dan un crédito de 200$.
- Volvemos al Menú de Navegación -> APIs and services y vamos a -> Credenciales, para crear dos APIs:
- Una, que llamamos cliente y restringimos para “aplicaciones a HTTPS referrers“, donde el referrer es el dominio de la aplicación. En mi caso “.recetasdefamilia.bubbleapps.io/”
- Otra, que llamamos servidor y restringimos a las cuatro APIs que hemos habilitado (Geocoding API, Places API, Geolocation API, Time Zone API)
- Finalmente, en Menú de Navegación -> APIs and services -> Credenciales, copiamos las claves (keys) para incluirlas en Bubble:
- La del cliente se copia en Menú de Bubble -> Settings -> General -> Google Map API key
- La del servidor se copia en Menú de Bubble -> Settings -> General ->Google Geocode API
Sabrás que está bien hecho si desaparece el aviso,
¿Por dónde empiezo?
Mi proceso de aprendizaje de una nueva aplicación no-code es siempre el mismo y sigue cuatro pasos.
Ahora estoy en la segunda fase, donde experimento y juego con la herramienta.
Para ello, aprendo lo básico.
Bubble te lo pone fácil con su academia y su sección “Videos” donde te indica cómo empezar:
- Empezando con Bubble (Getting Started with Bubble)
- Los fundamente de Bubble (The Bubble Fundamentals)
- Construye tu primera aplicación Bubble (Build Your First Bubble App)
Con los dos primeros te familiarizas con la herramienta.
Con el tercero ya te metes, “manos en la masa”. Y nunca mejor dicho, porque la aplicación que proponen para empezar es una aplicación de recetas.
De ahí mi aplicación “Recetas de familia”, algo tuneada a mis gustos.
Este curso me ha venido bien porque llevaba tiempo queriendo tener una aplicación para todas mis creaciones culinarias, o las de otros que me gustaban. Por ello, he aprovechado para tener mi primer embrión de producto.
¿Qué he aprendido y no te dicen los vídeos?
Según sigues los vídeos básicos, te vas encontrando con “pequeños problemas”, no suficientemente detallados, y que tienes que investigar por tu cuenta.
Estas son las cosas que yo he aprendido.
Primero) Familiarizarme con los avisos de error.
Como has visto, es lo primero que aparece cuando empiezas a crear una aplicación desde cero, ya que te pide que incluyas unas claves API por si utilizas mapas de Google.
Ten en cuenta que si tienes errores, no vas a poder poner la aplicación en producción.
Segundo) Utilizar el new responsive engine.
Aunque los tutoriales están hechos con el motor antiguo de Bubble, merece la pena utilizar el nuevo. Te facilita el formateado en diferentes dispositivos y en general el diseño.
Lo puedes elegir desde el menú de la página o yendo al menú “Responsive”. Ten en cuenta que tendrás que seleccionar este modo página a página.
El curso se enfoca en formato PC pero a mi me gusta que las apps puedan ser utilizadas en móvil desde el primer día.
Tercero) A acceder a los diferentes elementos desde el “árbol de elementos”.
Cuando anidas componentes y elementos, a veces es complicado acceder a uno u otro y acabas cambiando el que no quieres.
Dedicarle un tiempo a entender cómo funciona el árbol de elementos ha sido muy útil para luego ir más rápido.
Por cierto, desde el nuevo motor es mucho más fácil cambiar las ramas dentro del árbol.
Cuarto) Nombrar de forma clara todos los elementos para que luego puedas identificarlos fácilmente.
Es imprescindible saber a qué elemento accedes cuando se complican los flujos de automatizaciones.
Quinto) Cuidado con las reglas de privacidad.
Pasé un buen rato hasta que descubrí porqué no me funcionaba la función de autobinding (autorelleno de datos) y era por una regla mal configurada.
Sexto) No es necesario publicar para ver la herramienta en el móvil
En general, puedes ir haciendo previsualizaciones de tu diseño (en el menú superior) pero, te los va mostrando en el ordenador.
Yo pensaba que para previsualizarlo en el móvil tenía que publicar la herramienta en producción.
El problema es que para publicar la herramienta tienes que contratar un plan de pago. Afortunadamente, tienes 14 días gratis y yo decidí contratarlo para poder visualizar el diseño en pantalla pequeña.
Cuando publiqué en producción, aprendí varias cosas como que:
- La base de datos en desarrollo y en producción son diferentes. Lógico, ¿no?. Los datos de pruebas no suelen ser los definitivos. Lo digo por si te sorprende publicar y que tengas que empezar a completar todos los datos de cero.
- Una vez publicas una aplicación, no puedes “des-publicarla”, a menos que la borres. También es normal. En teoría, publicas cuando tu desarrollo se puede usar.
En mi caso, para evitar enseñar diseños en los que aún estaba trabajando, tuve que crear otra página con un cartel, “Estamos trabajando” y hacer de esta, “la nueva página de inicio” (botón derecho del ratón sobre la página).
Inmediatamente la aplicación se pone en modo “soporte” y muestra la nueva página con el cartel. Luego tendrás que hacer los mismo a la inversa cuando quieras ver la versión final.
- Solo puedes modificar la aplicación en modo desarrollo. Cada nueva versión tendrás que volver a desplegarla en producción.
- Pero, lo que me di cuenta, es que no era necesario publicar para ver el formato móvil.
La versión de desarrollo se puede ver en la pantalla pequeña, accediendo desde el móvil a la dirección web de la página de previsualización del ordenador.
Mis siguientes pasos
Todo lo que te he contado ha pasado en escasas dos semanas y no he dedicado más de 1 hora cada día.
En resumen, me encanta lo que he conseguido en poco tiempo y el potencial que veo a la herramienta.
Ahora que estoy convencida de seguir adelante con ella, mi siguiente paso es consolidar el conocimiento.
Para ello:
- Voy a hacer curso Bubble Crash Course con los cracks @nocodelife y @pabloheredia24
- Quiero aprender a organizar bien las bases de datos.
- Trataré de mejorar el diseño. Seguramente me apoye en Figma porque he visto que hay una opción para importar el diseño en Bubble.
- Mi objetivo es exprimir al máximo las capacidades. Tengo mil ideas en la cabeza que os iré compartiendo.
- En general, participaré más en los foros de la comunidad Bubble mientras sigo #buildinpublic
Espero que te haya gustado y si quieres estar al día, suscríbete a mi newsletter.
