驴Alguna vez te has preguntado c贸mo es crear aplicaciones web sin la necesidad de escribir una sola l铆nea de c贸digo? Empieza con Bubble, un lenguaje de programaci贸n visual no code que te permite crear aplicaciones web usando un editor de arrastrar y soltar.

En este art铆culo, te presentar茅 Bubble. Aprender谩s qu茅 es, qu茅 caracter铆sticas ofrece y qu茅 tipo de aplicaciones web puedes crear con 茅l. Luego compararemos su enfoque de programaci贸n no code con el desarrollo de aplicaciones web tradicionales y examinaremos los pros y los contras de usar Bubble. Por 煤ltimo, crearemos una aplicaci贸n con Bubble para que puedas familiarizarte con c贸mo crear cosas con ella.

驴Qu茅 es Bubble?

Bubble es una herramienta de programaci贸n visual no code y una plataforma. Creas la aplicaci贸n usando una interfaz de arrastrar y soltar en el navegador, y luego Bubble act煤a como la plataforma que sirve a tu aplicaci贸n. Esto significa que todo lo que necesitas para crear una aplicaci贸n web est谩 en tu navegador web. Bubble se encarga de toda la configuraci贸n y el aprovisionamiento necesarios para ejecutar una aplicaci贸n web.

Bubble est谩 dirigido tanto a programadores como a no programadores. Pero sobre todo atrae a los no programadores que quieren crear aplicaciones web no code sin conocer las herramientas tradicionales del mercado.

Caracter铆sticas de Bubble

Bubble est谩 repleto de muchas funciones. No puedo cubrirlos todos aqu铆, pero intentare cubrir los m谩s importantes.

  • Constructor de UI . Con el constructor de UI de Bubble, puedes arrastrar y soltar elementos visuales como texto, im谩genes, iconos, mapas, videos y otros elementos de UI comunes en tu lienzo. Las aplicaciones web creadas con Bubble incorporan un dise帽o receptivo y se pueden cambiar f谩cilmente a cualquier idioma.
  • Plataforma de hosting . Despu茅s de crear la aplicaci贸n con el constructor de IU de arrastrar y soltar, Bubble se encarga de implementar y alojar la aplicaci贸n por ti. Tambi茅n tiene un sistema de control de versiones que te permite revertir tu aplicaci贸n en cualquier momento. Bubble tambi茅n te permite escalar f谩cilmente la aplicaci贸n cuando surja la necesidad. Sabr谩s cu谩ndo es el momento de actualizar, porque Bubble tiene gr谩ficos sobre las m茅tricas del servidor, como las visitas a la p谩gina y el uso de la capacidad del servidor. El 煤nico inconveniente de Bubble es que no puedes alojar la aplicaci贸n que creaste con Bubble en tu propio servidor.
  • Complementos . Con los complementos , puedes integrar la funcionalidad de varias herramientas de la Web en tu aplicaci贸n web. Por ejemplo, si quieres que tus usuarios inicien sesi贸n con su cuenta de Facebook, puedes hacerlo con el complemento de Facebook .
  • Colaboraci贸n en tiempo real . Bubble es amigable para los equipos. Permite hasta 40 colaboradores.

Qu茅 puedes construir con Bubble

Debido a su flexibilidad, puedes construir cualquier tipo de aplicaci贸n web con Bubble.

  • Aplicaciones CRUD . Estas son aplicaciones que permiten a los usuarios crear, leer, actualizar y eliminar datos. La mayor铆a de las aplicaciones de hoy son realmente aplicaciones CRUD con diferentes caracter铆sticas agregadas. Entonces, con la capacidad de crear aplicaciones CRUD, ya puedes crear todo tipo de funciones. Piensa en Amazon o YouTube. En esencia, son solo aplicaciones CRUD.
  • Aplicaciones en tiempo real . Estas son aplicaciones que permiten a los usuarios comunicarse o colaborar en tiempo real, ya sea a trav茅s de chat, audio, videollamada o una interfaz compartida. Algunos ejemplos de estas aplicaciones son Messenger, Discord y Slack.
  • Aplicaci贸n conectada a API . La idea de que 芦ning煤n hombre es una isla禄 se aplica tambi茅n a las aplicaciones. Con Bubble, puedes crear aplicaciones que utilicen API de terceros en Internet. Piensa en Stripe para gestionar los pagos o en Algolia para gestionar la b煤squeda. Las posibilidades son infinitas con el acceso a las API. A trav茅s de una API, puedes proporcionar cualquier tipo de funcionalidad que no proporcione Bubble. Tambi茅n funciona al rev茅s: las aplicaciones que creas con Bubble tambi茅n pueden exponer una API que otros pueden usar.
  • Aplicaciones responsive . Estas son aplicaciones que se ven bien sin importar en qu茅 dispositivo las est茅s viendo. Con Bubble, obtienes esto de forma gratuita, ya que las aplicaciones que creas con 茅l ya son responsive.
  • Aplicaciones web progresivas . Estas son aplicaciones web que puedes agregar a tu pantalla de inicio para un f谩cil acceso. No tendr谩n acceso a la funcionalidad nativa que est谩 disponible para las aplicaciones nativas de Android o iOS, pero se puede acceder a ellas desde la pantalla de inicio y pueden trabajar sin conexi贸n. As铆 que es lo m谩s parecido a una aplicaci贸n nativa.

Si deseas ver ejemplos en vivo de aplicaciones que puedes crear con Bubble, consulte la p谩gina de presentaci贸n de Bubble. Tambi茅n puedes consultar c贸mo crear una p谩gina para ver un tutorial sobre c贸mo crear aplicaciones como Instagram, Dropbox o TripAdvisor. Ten en cuenta que estos no son tutoriales s煤per detallados; son solo generales para darte una idea de los pasos generales para crear este tipo de aplicaciones. A煤n necesitar谩s cierto nivel en el uso de Bubble para poder crear esas aplicaciones.

Recibe mi Newsletter semanal
Recibir谩s un email semanal (los domingos por la ma帽ana) con el mejor contenido que vaya encontrado por la red.


Yo tambi茅n odio el spam solo contenido de valor a trav茅s de mi newsletter

Lo que no se puede construir con Bubble

  • Aplicaciones nativas . En el momento de escribir este art铆culo, Bubble no admite la creaci贸n de aplicaciones nativas que se ejecuten en Android o iOS. Bubble dice en su documentaci贸n que hay un plan para agregar esta funci贸n a la funcionalidad principal, pero a煤n no est谩 en la l铆nea de tiempo de Bubble. As铆 que no sabemos realmente cu谩ndo estar谩 disponible. Por ahora, la 煤nica opci贸n factible es crear una aplicaci贸n web progresiva o envolver la aplicaci贸n web en una vista web utilizando herramientas como React Native, Flutter o Cordova.
  • Juegos . Si planeas crear juegos y otras aplicaciones con requisitos gr谩ficos complejos con Bubble. Bubble est谩 dise帽ado espec铆ficamente para crear aplicaciones web. Probablemente puedas salirse con la tuya creando juegos de rompecabezas simples, pero eso es todo.

Programaci贸n no code de Bubble frente al desarrollo de aplicaciones web tradicionales

En esta secci贸n, veremos c贸mo Bubble se compara con la forma tradicional de desarrollar aplicaciones web, bas谩ndonos en estas m茅tricas:

  • Control sobre c贸digo y datos
  • Velocidad de desarrollo
  • Costo de desarrollo
  • Costo de despliegue

Control sobre c贸digo y datos

Bubble tiene una funci贸n de exportaci贸n de datos que te permite exportar datos creados por el usuario a trav茅s de archivos CSV. El 煤nico inconveniente es que todo se ejecuta en la plataforma de Bubble, por lo que realmente no puedes exportar tu aplicaci贸n y ejecutarla en otro lugar. Bubble ha garantizado que lanzar谩 el c贸digo fuente de su aplicaci贸n bajo una licencia de c贸digo abierto en caso de que cierre.

Con el desarrollo web tradicional, tienes control sobre todo, ya que el c贸digo fuente est谩 escrito desde cero y est谩 alojado en un servidor de tu elecci贸n.

Velocidad de desarrollo

Bubble viene con todas las herramientas que necesitas para crear una aplicaci贸n web a trav茅s de una interfaz de arrastrar y soltar. Esto hace que el proceso de desarrollo sea m谩s r谩pido que el desarrollo web tradicional. Dicho esto, tambi茅n viene con una curva de aprendizaje que depende de lo que quieras construir. Si se trata de una aplicaci贸n simple de una p谩gina que solo hace una o dos cosas, probablemente te llevar谩 algunas horas aprender. Pero si se trata de una aplicaci贸n bastante compleja, puedes invertir de uno a tres meses antes de que puedas volverte lo suficientemente productivo para crear la aplicaci贸n r谩pidamente.

Con el desarrollo web tradicional, puedes estar al menos tres meses aprender las tecnolog铆as y herramientas. f谩cilmente de seis meses a un a帽o dependiendo de varios factores para ponerte en marcha. Sin embargo, una vez hecho esto, puedes ser productivo con la creaci贸n de la mayor铆a de las aplicaciones.

En general, la velocidad de desarrollo depender谩 principalmente de tu nivel. Si eres un novato, Bubble ser谩 m谩s r谩pido. Si ya tienes algo de experiencia en desarrollo, generalmente es m谩s r谩pido crear su aplicaci贸n a trav茅s de la ruta tradicional. S铆, tu experiencia de desarrollo probablemente ayudar谩 con muchos de los conceptos en la creaci贸n de aplicaciones con Bubble. Pero la curva de aprendizaje para crear aplicaciones bastante complejas seguir谩 siendo grande.

Costo de desarrollo

Con Bubble, puedes crear la aplicaci贸n t煤 mismo, incluso si no tienes experiencia previa. Bubble proporciona muchos recursos gratuitos para aprender a crear diferentes tipos de aplicaciones. Por supuesto, puedes contratar a otras personas para que lo hagan por ti. Pero la premisa principal de Bubble (y otras plataformas no code en general) es reducir los costos de desarrollo haciendo el desarrollo tu mismo.

Con el desarrollo web tradicional, lo m谩s probable es que tengas que contratar a un desarrollador web para que cree la aplicaci贸n por ti, debido a la empinada curva de aprendizaje que implica.

En general, los costos de desarrollo asociados al desarrollar tu aplicaci贸n con Bubble se reducen significativamente en comparaci贸n con el desarrollo tradicional.


Bubble, una herramienta no code para crear aplicaciones en 2021 1
Descarga la Gu铆a de Design Thinking 2022 gratis

Costo de despliegue

Bubble comienza con un plan gratuito. Esto te permite aprender la plataforma y crear una aplicaci贸n con ella. El plan personal de Bubble se utilizar谩 principalmente para pruebas y despliegue. Una vez que est茅s listo para iniciar tu aplicaci贸n, deber谩s cambiar a planes profesionales o de producci贸n. Puedes consultar la p谩gina de precios de Bubble para obtener m谩s informaci贸n sobre lo que obtienes con cada plan.

Bubble tiene un concepto llamado 芦unidades禄, que son b谩sicamente capacidades de servidor reservadas para escalar. Se necesitan unidades adicionales una vez que tu aplicaci贸n adquiera una cierta cantidad de usuarios activos. Aparte de eso, otro factor limitante es el almacenamiento de archivos. Cada plan tiene asignada una asignaci贸n total de almacenamiento de archivos. Por lo tanto, lo m谩s probable es que alcances el l铆mite antes si tu aplicaci贸n almacena una gran cantidad de medios cargados por el usuario. Hay complementos disponibles para manejar el almacenamiento de archivos, pero tendr谩n un costo adicional al mes.

Por otro lado, ejecutar tu aplicaci贸n a trav茅s de la forma tradicional costar谩 tan solo 5鈧 al mes para el servidor. El 煤nico inconveniente es que tienes que configurar todo desde cero: cosas como el servidor web y la base de datos. Hablando de manera realista, no solo pagar谩s 5鈧 al mes, ya que tambi茅n debes tener almacenamiento de archivos, informes de errores y servicios de implementaci贸n. Esos pueden aumentar f谩cilmente tus costos operativos totales.

En general, los costos asociados con la ejecuci贸n de tu aplicaci贸n depender谩n en gran medida de los servicios que necesitas y de la capacidad del servidor que necesitas.

Construyendo una aplicaci贸n con Bubble

Para que tengas una idea de c贸mo es crear aplicaciones con Bubble, crearemos una aplicaci贸n CRUD simple con 茅l. Antes de continuar, primero debes crear una cuenta de Bubble .

Una vez que tengas una cuenta, crea una nueva aplicaci贸n.

Crea una nueva aplicaci贸n

Una vez que se crea la aplicaci贸n, el asistente de la nueva aplicaci贸n te pedir谩 que comiences. Haz clic en el bot贸n Comenzar con una p谩gina en blanco y cierra el asistente. No s茅 tu, pero yo siempre prefiero empezar de cero.

Asistente de nueva aplicaci贸n en Bubble

Ahora que tenemos una aplicaci贸n, repasemos r谩pidamente lo que vamos a construir.

  • Funci贸n de autenticaci贸n . Esto permitir谩 al usuario iniciar sesi贸n en el sistema.
  • Producto CRUD . CRUD es un acr贸nimo que describe una aplicaci贸n capaz de manejar las funciones de base de datos m谩s importantes para la interactividad, y significa 芦crear, leer, actualizar y eliminar禄, que b谩sicamente permite al usuario mantener los datos del producto en una base de datos.

Hemos elegido estas dos funciones para mostrar la eficacia con la que Bubble puede manejar la l贸gica de las aplicaciones y asegurarnos de que esta gu铆a te ense帽e todos los conceptos que puedas necesitar para dar vida a tus propias ideas en Bubble.

Conceptos b谩sicos de la interfaz de usuario

Antes de proceder a crear la aplicaci贸n, es importante familiarizarse primero con la interfaz de usuario.


Pantalla de aplicaci贸n en blanco

La pesta帽a Dise帽o es donde normalmente empezaras. Como Bubble es un lenguaje de programaci贸n visual, siempre comienza con la interfaz de usuario. La pesta帽a Dise帽o contiene una lista de elementos visuales que puedes arrastrar o hacer clic y dibujar (haz clic en el elemento para seleccionarlo, suelta y luego dibuja el elemento) en el lienzo.

Ficha dise帽o en Bubble

La siguiente es la pesta帽a Flujo de trabajo . Aqu铆 es donde encontrar谩s todos los flujos de trabajo para una p谩gina espec铆fica. Bubble, usa flujos de trabajo para especificar qu茅 hace la aplicaci贸n cuando ocurre un evento determinado. Por ejemplo, cuando se hace clic en el bot贸n Iniciar sesi贸n, queremos que el usuario inicie sesi贸n en la aplicaci贸n, borrar el formulario y luego redirigir al usuario a la p谩gina de administraci贸n si las credenciales son correctas.

Ficha flujo de trabajo en Bubble

Los flujos de trabajo se muestran solo por p谩gina y no por toda la aplicaci贸n, por lo que debes hacer clic en el men煤 desplegable en la esquina superior izquierda para seleccionar a qu茅 p谩gina quieres agregar un flujo de trabajo.

Men煤 desplegable de la p谩gina de flujo de trabajo en Bubble

La pesta帽a Datos es donde ver谩s la base de datos de la aplicaci贸n, las tablas que contiene y los datos dentro de cada tabla. Tambi茅n viene con un administrador de datos que te permite realizar operaciones CRUD en cada fila.

Pesta帽a de datos en Bubble

Si quieres editar las columnas de cada tabla, puedes hacerlo en la pesta帽a Tipos de datos .

Pesta帽a tipos de datos en Bubble

Por 煤ltimo, tenemos la pesta帽a Estilos. Aqu铆 es donde puedes personalizar el tema general de la aplicaci贸n.

Pesta帽a estilos en Bubble

Hay otras tres pesta帽as que no hemos revisado: complementos, configuraciones y registros. Realmente no los repasaremos ya que no los usaremos en la aplicaci贸n que estamos construyendo aqu铆.

Autenticaci贸n

Ahora que hemos pasado por la interfaz de usuario de Bubble, comencemos a implementar la funci贸n de autenticaci贸n.
La aplicaci贸n predeterminada que borramos anteriormente con el nuevo asistente de aplicaciones ya tiene la autenticaci贸n de usuario incorporada. Pero como lo hemos eliminado, tendremos que volver a construirlo desde cero. De esta manera, sabr谩 lo f谩cil que es crear la funci贸n de autenticaci贸n de la aplicaci贸n usando Bubble.

La p谩gina de 铆ndice ya est谩 creada para nosotros de forma predeterminada, por lo que todo lo que tenemos que hacer es dibujar todos los elementos que necesitamos.

Recibe mi Newsletter semanal
Recibir谩s un email semanal (los domingos por la ma帽ana) con el mejor contenido que vaya encontrado por la red.


Yo tambi茅n odio el spam solo contenido de valor a trav茅s de mi newsletter

La p谩gina de inicio de sesi贸n

Primero, en la secci贸n Contenedores en la pesta帽a Dise帽o, haz clic en Grupo , luego dibuja un cuadrado en el lienzo. Esto servir谩 como contenedor de inicio de sesi贸n.

A continuaci贸n, haz clic en el elemento Texto, su茅ltalo y luego dibuja dentro del contenedor que acabas de crear. Ver谩s un borde rojo que rodea el contenedor cuando lo hagas.

Haga clic, suelte y dibuje en Bubble

Una vez que se dibuja el elemento, aparecer谩 un cuadro flotante. Esto te permite personalizar el elemento. En este caso, todo lo que tenemos que hacer es cambiar la etiqueta.

Etiqueta de correo electr贸nico en Bubble

A continuaci贸n, haz lo mismo con la contrase帽a. En lugar de seguir los pasos exactos, simplemente puedes copiar y pegar la etiqueta de correo electr贸nico que acabas de dibujar.

Si de alguna manera has perdido el elemento actual (muy com煤n con los elementos del contenedor, ya que son invisibles para los usuarios finales), puedes hacer clic en el men煤 desplegable junto al men煤 desplegable de selecci贸n de p谩gina y hacer clic en el elemento que quieres seleccionar.

Seleccionar elemento en Bubble

Una vez dibujadas las etiquetas, puedes proceder a dibujar los elementos de entrada correspondientes. Simplemente despl谩zate hacia abajo hasta la secci贸n de formularios de entrada y haz clic en entrada. Luego dibuja el elemento como de costumbre. Tambi茅n cambia el marcador de posici贸n, ya que eso es esencialmente lo que usaremos para identificar el elemento m谩s adelante. Despu茅s de eso, el formato de contenido tambi茅n debe cambiarse al tipo de datos correspondiente que esperamos. Con esto en su posici贸n, Bubble se encargar谩 de la validaci贸n del tipo de datos por ti.

Configuraci贸n de entrada en Bubble

A estas alturas, deber铆as conocer el siguiente paso. Dibuja un elemento de bot贸n dentro del contenedor, luego cambia su etiqueta.

Bot贸n de inicio de sesi贸n en Bubble

Terminamos de dibujar todos los elementos para la p谩gina de inicio de sesi贸n. El siguiente paso es agregar la funcionalidad de inicio de sesi贸n. Haz clic en el bot贸n Iniciar / Editar flujo de trabajo en el cuadro de personalizaci贸n del bot贸n de inicio de sesi贸n. Esto te redireccionar谩 a la pesta帽a Flujo de trabajo para cuando se haga clic en el bot贸n de inicio de sesi贸n. Haz clic en el cuadro debajo de la acci贸n, coloca el cursor sobre Cuenta y luego haz clic en Iniciar sesi贸n como usuario .

Seleccionar el flujo de trabajo del bot贸n de inicio de sesi贸n en Bubble

Aparecer谩 un cuadro de personalizaci贸n. Bubble ya asume que todos los usuarios iniciar谩n sesi贸n usando una combinaci贸n de correo electr贸nico y contrase帽a. Entonces, todo lo que tienes que hacer es elegir el elemento de entrada correspondiente y elegir su valor.

Elija el elemento correspondiente en Bubble

Haz lo mismo con la contrase帽a. Una vez hecho esto, tu pantalla deber铆a verse as铆.

Pantalla final para la personalizaci贸n del flujo de trabajo de inicio de sesi贸n en Bubble

A continuaci贸n, queremos limpiar el formulario despu茅s de la accion. Haz clic en el cuadro donde dice Haz clic aqu铆 para agregar una acci贸n, coloca el cursor sobre Acciones de elementos y luego haz clic en Restablecer datos .

Agregar acci贸n de restablecimiento de datos en Bubble

Como nos hemos tomado el tiempo de agrupar todos los elementos relacionados con el formulario de inicio de sesi贸n anteriormente, ahora nos recompensa al permitirnos seleccionar el contenedor para restablecer cada elemento individual.

Restablecer contenedor de inicio de sesi贸n en Bubble

A continuaci贸n, agrega otra acci贸n para redirigir a la p谩gina de administraci贸n.

Ir a la pagina en Bubble

En el men煤 desplegable de destino, selecciona Crear una nueva p谩gina鈥 . Luego, establece el nombre de la p谩gina en admin. Bubble crear谩 esta p谩gina para ti. Una vez creado, se mostrar谩 en el men煤 desplegable de destino para que ahora puedas seleccionarlo.

Ir a la p谩gina de administraci贸n en Bubble

Eso es todo para el flujo de trabajo de inicio de sesi贸n. A continuaci贸n, debemos crear la p谩gina de registro para que los usuarios puedan registrarse.

P谩gina de registro

Para crear una nueva p谩gina, haz clic en el men煤 desplegable que dice p谩gina: 铆ndice. Luego haz clic en Agregar una nueva p谩gina鈥 .

Crea una nueva pagina en Bubble

Esto deber铆a mostrar la misma ventana modal que viste antes cuando creaste la p谩gina de administraci贸n. Ingresa 芦registro禄 y haga clic en crear .

En esta p谩gina reci茅n creada, arrastra los mismos elementos que usamos en la p谩gina de inicio de sesi贸n anteriormente. Solo cambia la etiqueta del bot贸n de registro a Registrarse. Como acceso directo, incluso puedes copiar y pegar desde la p谩gina de inicio de sesi贸n a la p谩gina de registro. Simplemente copia el contenedor del grupo y traer谩s todos los elementos dentro de 茅l junto con 茅l. A partir de ah铆, todo lo que tienes que hacer es cambiar la etiqueta del bot贸n.

P谩gina de registro en Bubble

A continuaci贸n, haz clic en el bot贸n Registrarse y edita tu flujo de trabajo como lo hicimos anteriormente con el bot贸n de inicio de sesi贸n. Selecciona Cuenta , luego registre al usuario .

Firmar la acci贸n del usuario en Bubble

Establezca el valor que se utilizar谩 para el correo electr贸nico y la contrase帽a del usuario.

Establecer valor de correo electr贸nico y contrase帽a en Bubble

Ya deber铆as conocer el siguiente paso. Debemos limpiar despu茅s de introducir los datos, luego redirigir a la p谩gina de inicio de sesi贸n para que el usuario pueda iniciar sesi贸n. De hecho, podemos registrar al usuario y luego iniciar sesi贸n autom谩ticamente desde aqu铆, pero intentemos mantener las cosas simples por ahora.

Flujo de registro en Bubble

A continuaci贸n, en la p谩gina de registro, agrega un enlace a la p谩gina de inicio de sesi贸n. Haz lo mismo con la p谩gina de inicio de sesi贸n para que los usuarios puedan registrarse f谩cilmente.

Enlace de registro en Bubble

En este punto, ahora puedes probar el proceso de registro. Haga clic en el enlace Vista previa en la esquina superior derecha de la pantalla. Aseg煤rate de no tener habilitadas las extensiones del bloqueador de ventanas emergentes, ya que eso interferir谩 con la apertura de la nueva pesta帽a en la que se mostrar谩 la vista previa.

Enlace de vista previa en Bubble

P谩gina de administrador

Procedamos ahora con la p谩gina de administraci贸n. Selecciona administrador en el men煤 desplegable del selector de p谩gina en la parte superior izquierda de la pantalla. Una vez all铆, haz clic en la pesta帽a Flujo de trabajo. No queremos que nadie acceda a esta p谩gina si no ha iniciado sesi贸n, por lo que tenemos que comprobar si el usuario est谩 desconectado.

Compruebe si el usuario est谩 desconectado en Bubble

Si el usuario est谩 desconectado, lo dirigimos a la p谩gina de 铆ndice para que pueda iniciar sesi贸n.

Navegar a la p谩gina de inicio de sesi贸n en Bubble

Ahora estamos listos para implementar la funcionalidad para el lado del administrador.

Primero, arrastra un elemento de texto en la esquina superior derecha de la pantalla. Esto mostrar谩 un saludo al usuario. Para hacer esto, simplemente escriba la palabra 芦Hola禄, luego haga clic en insertar datos din谩micos . Desde all铆, selecciona Usuario actual y luego correo electr贸nico .

Mostrar saludo de usuario en Bubble

A continuaci贸n, creamos el formulario de producto, que comprende lo siguiente:

  • cargador de im谩genes
  • texto del t铆tulo)
  • precio (texto, solo n煤meros)
  • cantidad (entero)
  • Bot贸n guardar

Aseg煤rate de arrastrar un contenedor de grupo al lienzo antes que nada. Luego, una vez que hayas dibujado los elementos, el contenedor deber铆a volverse rojo para indicar que se est谩 arrastrando dentro de 茅l.

Al final, deber铆as tener algo que se parezca a la imagen de abajo.

Forma de producto en Bubble

A continuaci贸n, agrega un flujo de trabajo al bot贸n Guardar . Selecciona Datos (Cosas), luego Crear una nueva鈥 .

Guardar flujo de trabajo del bot贸n en Bubble

En el men煤 desplegable de tipo, selecciona Crear un nuevo tipo … y config煤ralo como 芦producto禄.

Crea un nuevo tipo en Bubble

Haz clic en el bot贸n Establecer otro campo para agregar cada campo uno por uno. Estos campos deben corresponder con los campos que arrastraste al formulario de producto anteriormente.

Establecer茅 el primer campo como ejemplo y dejar茅 que tu hagas el resto. El primer campo es el cargador de im谩genes. El nombre del campo es el nombre de la columna en la base de datos, mientras que el tipo de campo es su tipo de datos.

Crear campo de imagen en Bubble

Haz el resto de los campos haciendo clic en el bot贸n Establecer otro campo :

  • texto del t铆tulo)
  • precio (n煤mero)
  • cantidad (n煤mero)

Al final, deber铆as ver algo como lo que se muestra a continuaci贸n.

Campos de producto en Bubble

El siguiente paso es establecer el valor en los campos correspondientes del formulario.

Asignar valores en Bubble

Pero ahora estamos en un aprieto, ya que el precio parece tener un error. En Bubble, los problemas se muestran en la esquina superior derecha de la pantalla (justo a la derecha del icono de regalo). Haz clic en eso para ver de qu茅 se trata el problema.

Discrepancia de tipo de datos en Bubble

La imagen de arriba muestra un error de discrepancia de datos. Se espera que el valor sea un n煤mero, pero en su lugar hemos ingresado algo de texto.

Para resolver eso, necesitamos establecer el tipo de datos del precio en texto. Ve a la pesta帽a Datos y selecciona la tabla Producto (esta se cre贸 cuando agregamos un nuevo tipo). Realmente no es posible actualizar los tipos de datos en Bubble, por lo que tenemos que eliminar el existente y crear uno nuevo con el tipo de datos correcto.

Eliminar un campo de precio existente en Bubble

Una vez eliminado, crea un nuevo campo de precio .

Crear nuevo campo de precio en Bubble

A continuaci贸n, vuelve al flujo de trabajo y elimina tambi茅n el campo de precio existente. Luego crea uno nuevo y asigna el campo correcto. Eso ahora deber铆a solucionar el problema.

Asignar el campo de precio correcto en Bubble

A continuaci贸n, restablece el formulario del producto.

Restablecer formulario de producto en Bubble

En este punto, puedes probar si el formulario de tu producto est谩 guardando los datos en la base de datos. Deber铆as ver algo parecido a lo que se muestra a continuaci贸n.

Vista previa del formulario del producto en Bubble

Nota: Bubble es lo suficientemente inteligente como para iniciar sesi贸n con un usuario existente en la base de datos si obtiene una vista previa de una p谩gina de administraci贸n. As铆 que aseg煤rate de registrarte primero con una cuenta para que Bubble tenga algunos datos con los que trabajar.

Una vez que hayas completado todos los campos y guardado todo, vuelve al editor de bubble. En la pesta帽a Datos , haz clic en Datos de la aplicaci贸n y luego en Todos los productos. Esto deber铆a mostrar el producto que acabas de guardar.

Datos de productos en Bubble

El siguiente paso es mostrar todos los productos almacenados en la base de datos. Para hacer eso, necesitamos usar un contenedor RepeatingGroup . Arr谩stralo al lienzo. Mientras estas all铆, arrastra tambi茅n un campo de texto. Una vez que hayas terminado, deber铆a parecerse a la imagen de abajo. Esto est谩 justo debajo del formulario del producto.

Grupo de repetici贸n y campo de b煤squeda en Bubble

A continuaci贸n, haz clic en el grupo que se repite y establece tu tipo de contenido en producto. La fuente de datos debe establecerse en Realizar una b煤squeda de鈥 鈫 producto .

Establecer el tipo de contenido de grupo repetido y la fuente de datos en Bubble

Tambi茅n puedes ordenar los datos por fecha de creaci贸n.

Ordenar por fecha de creaci贸n en Bubble

No se mostrar谩 nada si obtienes una vista previa ahora. Eso es porque a煤n no sabes qu茅 campos quieres mostrar.

Primero arrastra los encabezados de la tabla para que tengamos una gu铆a donde se mostrar谩 cada campo. Estos son solo elementos de texto.

Encabezado de la tabla en Bubble

A continuaci贸n, arrastra un elemento de imagen dentro del grupo repetido. Sabr谩s que est谩 siendo arrastrado hacia adentro si ve el borde rojo. En el cuadro de personalizaci贸n de la imagen, haz clic en el campo de texto al lado de la etiqueta de la imagen din谩mica. Luego, selecciona la celda actual 鈫 producto 鈫 img . Esto ahora deber铆a mostrar la imagen del producto en esta columna en particular.

Imagen del producto en Bubble

La misma idea se aplica al t铆tulo, precio y cantidad, solo que esta vez necesitas usar el elemento de texto. Te mostrar茅 c贸mo se hace el t铆tulo y luego t煤 har谩s el resto.

B谩sicamente arrastra o dibuja un elemento de texto dentro del grupo repetido, arrastra tu contenedor para que tengas espacio para productos con t铆tulos particularmente largos. Luego, para el contenido, haz clic en Insertar datos din谩micos 鈫 celda actual 鈫 producto 鈫 t铆tulo .

Titulo del producto en Bubble

Haz lo mismo con el precio y la cantidad.

Una vez que hayas terminado, deber铆as tener algo parecido a esto.

Lista de productos en Bubble

En este punto, ahora puedes obtener una vista previa y agregar algunos productos para ver la lista en acci贸n.

Funcionalidad de b煤squeda

Es posible que hayas intentado escribir en el campo de b煤squeda anteriormente, pero eso no funcionar谩 ya que el grupo repetido a煤n no est谩 hecho para responder a los eventos del campo de b煤squeda.

Para hacer eso, debes agregar un condicional al grupo repetido. Un condicional te permite agregar un filtro a los resultados de la b煤squeda cuando se cumplen criterios espec铆ficos. En este caso, solo necesitamos dos condiciones:

  • Cuando el campo de b煤squeda est谩 vac铆o, no queremos aplicar ning煤n filtro a la fuente de datos del grupo repetido.
  • Cuando el campo de b煤squeda no est谩 vac铆o, aplicamos un filtro a la fuente de datos.

En el cuadro de personalizaci贸n del grupo repetido, haz clic en la pesta帽a Condicional. Luego haz clic en el bot贸n Definir otra condici贸n .

Para agregar una condici贸n, haz clic en el campo cuando y config煤ralo en Ingresar el producto de b煤squeda 鈫 valor 鈫 est谩 vac铆o . Luego haz clic en seleccionar una propiedad para cambiar cuando sea verdadero men煤 desplegable. De las opciones, seleccione Fuente de datos .

Establecer valor de condici贸n en Bubble

Haz clic en el campo de la fuente de datos y selecciona Realizar una b煤squeda .

Hacer una b煤squeda de en Bubble

Establece el tipo de producto y ord茅nalo por Fecha de creaci贸n en orden descendente.

Buscar productos en Bubble

Ci茅rralo, y eso deber铆a solucionar la primera condici贸n.

A continuaci贸n, haz clic en definir otra condici贸n. Esta vez, queremos establecer la condici贸n opuesta a lo que hicimos anteriormente: Input search product脝s 鈫 value 鈫 is empty . La propiedad a cambiar sigue siendo la fuente de datos con producto como tipo y Fecha de creaci贸n como clasificaci贸n. Pero esta vez, haz clic en el bot贸n Agregar una nueva restricci贸n. En el nuevo campo que aparece, selecciona t铆tulo 鈫 contiene 鈫 Ingrese el producto de b煤squeda 鈫 valor . Esto crea efectivamente un filtro para el campo de t铆tulo.

En este punto, ahora puedes obtener una vista previa de la aplicaci贸n y ver que el campo de b煤squeda ahora funciona como se esperaba.

Funcionalidad de actualizaci贸n

Ahora estamos listos para implementar la funcionalidad de actualizaci贸n. Realiza algunos ajustes en la posici贸n de los elementos dentro del grupo repetido para dejar espacio para el bot贸n Editar :

Editar interfaz de usuario en Bubble

Para mostrar el producto actual que se est谩 editando, usaremos un elemento emergente. Arrastra uno para que est茅 en la misma posici贸n en la que se encuentra actualmente el formulario de creaci贸n de producto.

Ventana emergente de producto en Bubble

Dentro de la ventana emergente, agrega los mismos campos que el formulario del producto para que se vea as铆.

Actualizar formulario de producto en Bubble

A continuaci贸n, debes especificar qu茅 valor inicial deseas mostrar. Para el cargador de im谩genes, especifica eso como el valor para el campo de imagen din谩mica. Para los campos de texto, es el contenido inicial. Simplemente haz clic en Insertar datos din谩micos, selecciona Producto del grupo principal 鈫 img . Eso deber铆a mostrar la imagen del producto del bot贸n Editar en el que se hizo clic de forma predeterminada. Haga lo mismo con el t铆tulo, el precio y la cantidad, esta vez proporcionando el valor del contenido inicial .

Mostrar imagen din谩mica en Bubble

Es posible que te preguntes c贸mo Bubble conoce el producto del grupo de padres. La respuesta es porque hemos establecido la ventana emergente de tipo de contenido al producto. Recuerda que una ventana emergente se clasifica como contenedor, y los contenedores se encargan de agrupar todo lo que hay dentro. Esto es lo que nos dio la opci贸n de grupo de padres . Sin embargo, eso todav铆a no responde c贸mo Bubble puede cargar el producto exacto en el que el usuario hizo clic. 

Ahora necesitamos agregar una forma de abrir la ventana emergente. Pero al mismo tiempo, tambi茅n necesitamos cargar los datos del producto en el que se hizo clic en el bot贸n Editar . Para hacer eso, agregamos un flujo de trabajo al bot贸n Editar . Haz clic en el contenedor para agregar una nueva acci贸n, luego selecciona Acciones de elemento 鈫 Mostrar datos .

Datos de visualizaci贸n de elementos en Bubble

Establece el elemento como producto emergente mientras que los datos que se mostrar谩n son el producto de la celda actual . Esta es la pieza que faltaba de antes. As铆 es como Bubble sabe qu茅 producto exacto cargar en la ventana emergente. Bastante anticlim谩tico, a pesar de todo el suspenso. Pero eso es todo.

Mostrar datos en Bubble

A continuaci贸n, para mostrar la ventana emergente, agrega otra acci贸n, selecciona Elementos y luego Mostrar. Luego elije la ventana emergente como valor para el campo Elemento .

En este punto, ahora deber铆as poder probar que la ventana emergente est谩 cargando los datos del producto cuando hace clic en el bot贸n Editar .

Actualizar la demostraci贸n del producto en Bubble

A continuaci贸n, debemos agregar la funcionalidad de actualizaci贸n real. Para hacer eso, agrega un flujo de trabajo al bot贸n Actualizar . Agrega una acci贸n y selecciona Datos (Cosas) 鈫 Realizar cambios en las cosas鈥 .

Hacer cambios en la cosa en Bubble

Configura para cambiar al producto del grupo principal . Si recuerdas, esto es lo mismo que usamos para mostrar los datos del producto actual. Haz clic en Cambiar otro campo para agregar un campo para modificar. Puede resultar un poco confuso saber qu茅 campos debe elegir, pero puedes utilizar el grupo principal como palabra clave. Los campos que tienen esa palabra clave al principio son los que se arrastraron a la ventana emergente. Los otros son los del formulario de creaci贸n de producto. Al final, el tuyo deber铆a verse as铆.

Modificar campos en Bubble

Despu茅s de eso, necesitamos agregar dos acciones m谩s: restablecer el formulario y cerrar la ventana emergente. Te dejo con la siguiente captura de pantalla para que puedas resolverlo por tu cuenta.

Actualizar la acci贸n del bot贸n en Bubble

En este punto, puedes ejecutar la vista previa nuevamente y deber铆a poder actualizar un producto. Una vez que se actualiza un producto, la ventana emergente deber铆a cerrarse autom谩ticamente y los datos actualizados deber铆an reflejarse en el grupo repetido.

Eliminar funcionalidad

Ahora pasemos a la funcionalidad final antes de embellecer un poco las cosas.

La forma m谩s f谩cil de realizar la funci贸n de eliminaci贸n es simplemente hacer uso de la ventana emergente. De esa forma, ya tenemos acceso al producto seleccionado. Contin煤a y arrastra un bot贸n Eliminar debajo del bot贸n de actualizaci贸n.

Eliminar interfaz de usuario en Bubble

Esta vez, seleccione Datos  鈫 Eliminar …

Eliminar flujo de trabajo en Bubble

En el campo Para eliminar, selecciona el producto del grupo principal una vez m谩s. 隆Eso es todo! Simplemente agrega otra acci贸n para cerrar la ventana emergente y listo.

En este punto, puedes probar la vista previa. Cuando eliminas un producto, debes cerrar la ventana emergente y el producto correspondiente en el grupo repetido tambi茅n debe desaparecer.

Dise帽ando la aplicaci贸n

Hagamos el estilo un poco m谩s agradable, porque hasta ahora, no hemos considerado realmente c贸mo se alinear谩n los diferentes elementos. Aqu铆 tienes un ejemplo r谩pido para mostrarte lo que quiero decir.

P谩gina de inicio de sesi贸n en Bubble

Como puedes ver, en realidad no est谩 alineado correctamente, aunque se ve decente en la p谩gina de dise帽o.

Dise帽o de p谩gina de inicio de sesi贸n en Bubble

Lo primero que puedes hacer para solucionar este problema de alineaci贸n es asegurarte de que el contenedor que rodea el elemento tenga las mismas dimensiones que el contenido real. A continuaci贸n, puedes ver que el contenedor del enlace de registro realmente no coincide con las dimensiones del contenido que contiene.

Dimensi贸n del enlace de registro en Bubble

Para solucionarlo, todo lo que tienes que hacer es usar las manijas para ajustarlo en consecuencia. Tambi茅n puedes ajustar el ancho y la altura del elemento en el cuadro de personalizaci贸n. Esto es muy 煤til para asegurarte de que los campos de texto y los botones tengan el mismo ancho y alto. Haz esos ajustes en todas las formas.

Caja de personalizaci贸n en Bubble

Otra cosa que puedes hacer para corregir la alineaci贸n es hacer clic derecho en el elemento y seleccionar las opciones de centrado. Puedes centrar las cosas vertical u horizontalmente. Esto centrar谩 el elemento dentro de tu contenedor inmediato.

Centrar las cosas en Bubble

Si eso a煤n no ha arreglado la alineaci贸n, aseg煤rate de que el contenedor inmediato sea de ancho fijo.

Ancho fijo en Bubble

Tambi茅n puedes seleccionar varios elementos y alinearlos verticalmente.

Alinear centros verticales en Bubble

Aqu铆 hay otro ejemplo con el grupo de repetici贸n.

Grupo de repetici贸n central en Bubble

Tambi茅n puedes distribuir elementos verticalmente. Esto asegura que los elementos seleccionados tengan la misma cantidad de espacio entre ellos. Ten en cuenta que si haces esto con las entradas, debes alinear los centros verticales una vez m谩s, ya que distribuir los elementos verticalmente har谩 que se restablezca.

Distribuir verticalmente en Bubble

Alinear los elementos y asegurarte de que todo tenga el mismo ancho y alto contribuye en gran medida a que el dise帽o se vea lo suficientemente decente.

Una 煤ltima cosa que podr铆amos hacer es cambiar los estilos de los botones para que no se vean todos iguales. Comienza asignando el estilo de bot贸n secundario al bot贸n de edici贸n.

Bot贸n secundario en Bubble

Para el bot贸n de eliminar, podemos crear un nuevo estilo.

Crea un nuevo estilo en Bubble

Nombra el estilo Danger .

Estilo de peligro en Bubble

Una vez creado, haz clic en editar estilo y personal铆zalo como quieras.

Personalizar estilo en Bubble

Una vez que hayas terminado de editar el estilo, vuelve a la pesta帽a Dise帽o y ver谩s que el bot贸n Eliminar ahora tiene el nuevo estilo aplicado.

Nuevo estilo aplicado en  Bubble

Conclusi贸n

隆Eso es todo! En este art铆culo, has aprendido todo sobre Bubble, una plataforma no code que permite a los desarrolladores y no desarrolladores desarrollar aplicaciones sin la necesidad de programar, configurar tus propios servidores y todo lo dem谩s que viene con el desarrollo tradicional.

Bubble est谩 m谩s optimizado para crear aplicaciones web y no para sitios web con mucho dise帽o. Ciertamente, puedes crear aplicaciones m谩s complejas con 茅l, porque viene con un sistema de complementos, aunque tendr谩s que dedicar m谩s tiempo a aprender las reglas, y tambi茅n tendr谩s que pagar m谩s para obtener acceso a ciertas funciones a trav茅s del sistema de complementos. .

En general, Bubble es una buena herramienta para crear un MVP, desde aplicaciones bastante simples hasta aplicaciones con un poco m谩s de complejidad. Para aplicaciones m谩s complejas como las redes sociales, es mejor desarrollarlas por medios tradicionales.

Es cierto que crear una aplicaci贸n con Bubble puede ser desafiante y confuso, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesi贸n de estrategia y dejar que comience la lluvia de ideas.

Recibe mi Newsletter semanal
Recibir谩s un email semanal (los domingos por la ma帽ana) con el mejor contenido que vaya encontrado por la red.


Yo tambi茅n odio el spam solo contenido de valor a trav茅s de mi newsletter

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.

Ir arriba