Bubble, una herramienta no code para crear aplicaciones en 2021

¿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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Por último, tenemos la pestaña Estilos. Aquí es donde puedes personalizar el tema general de la aplicación.

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.

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.

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.

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.

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.

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

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 .

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.

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

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 .

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.

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

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.

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… .

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.

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 .

Establezca el valor que se utilizará para el correo electrónico y la contraseña del usuario.

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.

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.

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.

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.

Si el usuario está desconectado, lo dirigimos a la página de índice para que pueda iniciar sesión.

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 .

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.

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

En el menú desplegable de tipo, selecciona Crear un nuevo tipo … y configúralo como «producto».

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.

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.

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

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.

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.

Una vez eliminado, crea un nuevo campo de precio .

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.

A continuación, restablece el formulario del producto.

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.

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.

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.

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 .

También puedes ordenar los datos por fecha de creación.

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.

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.

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 .

Haz lo mismo con el precio y la cantidad.

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

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 .

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

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

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 :

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.

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

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 .

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 .

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.

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 .

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… .

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í.

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.

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.

Esta vez, seleccione Datos  → Eliminar …

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.

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

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.

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.

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.

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

También puedes seleccionar varios elementos y alinearlos verticalmente.

Aquí hay otro ejemplo con el grupo de repetición.

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.

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.

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

Nombra el estilo Danger .

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

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.

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.