Después de crear un producto por medio de sus inputs ( Nombre , descripción , precio … ) y si alguna vez editarlo , podríamos hacer que una vez hagamos click sobre el producto ya creado ( idealmente sobre un icono de lápiz “ editar “ ) , vayamos a la página de ese producto pero en modo edición .

Esta página podría ser una página versátil , pero permitiera tanto la creación como la edición del propio producto. Tan solo será necesario diferenciar una de la otra por medio de uno u otro texto introductorio al usuario.

Una vez tengamos un listado de productos ( un repeating group ) al hacer click sobre su call to action “ lápiz “ , podremos editar el producto activando un workflow de “ go to “ … para enviar a la página del propio producto, pero esta vez , a su versión de edición de producto.

La página de producto que nosotros hemos llamado submit  , que es en realidad la misma que para la creación de producto  , incluiremos un curret.s cell product , utilizando su unique id generado automáticamente por Bubble  , y crearemos a su vez el parámetro PRODUCTO así ;

Volveremos entonces a la propia página de los inputs , para localizar el grupo que su vez contiene a todos los grupo que incluyen inputs en productos . Daremos a ese grupo principal o “padre “ ( parent Group )  la capacidad de leer esos datos de la URL , en este caso lo haremos marcando como fuente de datos ,  la variable PRODUCTO , que es su vez el id único de la tabla de datos que contiene PRODUCT como hemos comentado.  

Nuestra App leerá de la URL tipo parameter  , de esa manera la llamaremos “ producto “ y será vera por tanto como :

../submit?producto=XXXXXXXXXXXXXX

en la url de la página en bubble . Nuestro Grupo Padre tendrá que buscarla en nuestra base de datos , en tabla PRODUCT.

Una vez hecho esto , todos los grupos incluidos en ese grupo principal o grupo padre deberían heredar esa característica en cascada . Para conseguirlo debemos recordar marcar en cada input que el valor inicial  ( initial content )  vendrá dado por el ese grupo padre.

De esa manera conseguiremos que cada acceso a la página de edición donde la app detecte la existencia del párametro ?producto=XXXXXXXXXXXXXX , todos los campus inputs ,  estarán rellenados previamente.

¿ Cansado de la claridad del editor blanco inmaculado de Bubble? Déjalo así si quieres ;

De momento esto es solo posible con una extensión en Chrome que puedes descargar aquí https://chrome.google.com/webstore/detail/bubbleio-editor-dark-mode/infkadcekhdmdjeiapipcbanolpmlpln

Otra interesante funcionalidad de Bubble es la vista de depuración , debug Mode , que podemos mostrar en la parte inferior cuando desarrollamos una APP y usamos la versión vista previa Preview.

La vista de depuración nos permite acceder a tres zonas diferenciadas ;

Cómo podemos analizar cada elemento en el modo de depuración

Los elementos en azul , pueden ser clicables , por ejemplo es posible ver cada elemento grabado en la base de datos si analizamos su workflow  y en el orden en el cual es grabado en la base de datos.

También en verde , podremos ver las condiciones que se han dado y que son válidas para ejecución del workflow  , si no son consideradas ciertas se muestran en rojo . A mayor numero de condiciones , más importante es evaluar que se cumplen por medio del modo de depuración.

Por último , por medio del inspector podremos ver todos los elementos de un grupo

Bubble nos permite integrar nuestra App con app externar que nos añaden elementos, eventos, acciones y fuentes de datos adicionales. Estos plugins son creados por el equipo de Bubble y otros usuarios de Bubble, y existen tanto plugins gratuitos como de pago.

 La mayoría de los servicios externos que se conectan a la aplicación, incluyendo proveedores de pago como Stripe, etc.

Se mostrará por tanto el listado de todos los plugins disponibles para instalar , donde podemos desmarcar los plugins de pago ( Premium ) entre otros filtros.

Cómo hemos visto es muy sencillo crear una app responsive para móviles en Bubble , Pero , ¿ Qué pasa si por ejemplo queremos ver esa App en nuestro ipad? , veríamos lo siguiente ;

 Nuestra disposición del contenido en Columna impedirá el contenido distribuirse , ahora si queremos que ese contenido se expanda a la derecha ocupando más espacio por ejemplo en iPad debemos permitir la disposición en filas  , esos podremos hacerlo modificación la disposición ( layout ) del grupo padre que contiene ese contenido .

La manera de facilitar que el contenido se expanda es hacerlo por fila , ( uno de encima de otro ) , esta disposición denominada de Fila ( row ) permite apilar los grupos de contenidos .

El resultado final será que dentro de ese Grupo de fila podremos albergar a su vez grupo de columnas cuya disposición podrá extenderse a lo ancho de nuestra pantalla, de esta manera.

Conforme aumenta la complejidad de los elementos en tu App bubble va siendo más díficil localizarlos en su disposición – El menú a la izquierda del árbol de elementos se vuelve clave.

Vamos a poner nombre el GROUP PESO DEL ENVÍO  , y así localizarlo fácilmente en el ELEMENT TREE.

Por ejemplo , para tener un index alternativo solo para móvil , lo primero que debes hacer es crear un nueva página réplica ( clone ) de nuestro index , llamándolo en este caso index_mobile.

Para tener un diseño específico para la página cuando se carga en un dispositivo móvil, en la ventana apariencia Appearance , selecciónala en el menú desplegable . Como la URL sigue siendo la misma, esto es transparente para el usuario.

Listo ! ya tenemos nuestra versión móvil del index.

Una alerta muestra un mensaje temporal en la página, como una advertencia. Se muestra con una animación de aparición y desaparición. Muéstralo a través de un workflow.

Es importante no confundir una alerta con un PopUp , estos últimos son considerados elementos , y en algunos casos son tratados como páginas, algo que veremos más adelante.

Para introducir un mensaje de Alerta , debes buscarlo en árbol de elementos , introducir el texto de la alerta y opcionalmente puedes alterar su diseño

Incorporarlo al workflow nos permitirá mostrar el mensaje

Bubble te permite definir algunos estilos generales para tus elementos. Cada nueva aplicación que inicias viene con un conjunto de estilos preestablecidos. Esto te permitirá organizar mejor el diseño de tu aplicación, ya que sólo tendrás que modificar el estilo una vez para que todos los elementos reciban el estilo correspondiente. Esto también ahorra algo de espacio en tu aplicación, y conducirá a cargas más rápidas ya que los datos de estilo son compartidos por todos los elementos que utilizan un estilo similar.

¿ Dónde puedes encontrar la sección de fuentes por defecto en Bubble no-code?

La fuente por defecto es algo fea en Bubble , así que para cambiarla vamos a ir a Styles > en Element Type elegiremos HTML > body . Aquí nos ofrecerá la posibilidad cambiar el tipo por Inter ( regular ) y filar interliando a 1.5 porque facilita la tarea del ajuste.

Los Inputs en Bubble App permiten a los usuarios escribir texto en una línea. Es útil para escribir un correo electrónico o una contraseña.

Marcador de posición / placeholder
Cuando este elemento está vacío, se muestra un texto para pedir al usuario que introduzca algo.
Contenido inicial / initial content
Este campo en Bubble App define la entrada antes de que sea modificada por el usuario o cuando se reinicie. Por ejemplo, cuando un usuario modifica su correo electrónico, el contenido inicial será probablemente “Correo electrónico del usuario actual”.
Formato del contenido / Content Format
Selecciona un tipo en este menú desplegable para definir el tipo de entrada. Esto es importante por dos razones:

• Para asegurarte que lo que se introduce es válido y para evitar que los flujos de trabajo se ejecuten si el contenido no es válido. En este caso, la entrada se establece en un “estado no válido”. Esto detecta, por ejemplo, cuando una dirección de correo electrónico sigue el patrón ‘name@example.com’.
• A veces controla los caracteres que se pueden escribir y los que se añaden automáticamente, para ayudar visualmente a los usuarios en el caso de fechas, contraseñas, etc.

Comprobar la contraseña mientras se escribe / Check password as you type
Si defines una política de contraseñas en la sección General de la pestaña Configuración en Bubble App , marca esta casilla para validar la entrada con respecto a esa política.

💡 Tip ; Cómo duplicar inputs

Con tal solo pulsar la tecla CONTROL y arrastrar el elemento puedes duplicar en Bubble

 Cómo conectar inputs visuales con las acciones en la base de datos , por medio de workflows ( la lógica ) en Bubble.,

La acción del botón recogerá la información de los inputs. Pulsamos en Workflows en al botón , y create a New Things , nos pedirá un primer tipo de dato ( Tabla  )  que llamaremos PRODUCTO , y que compondrá de los siguiente campos NOMBRE ( tipo texto )  /  PRECIO ( tipo  /  FOTO ( tipo image ) 

Si guardamos así el producto , solo subirá la imagen a la base de datos pero no sabrá asignar el input A sus valores ( Values  )

Definir el nombre de producto con INPUT , así con precio y foto.  Teniendo que cuenta que los INPUTs deben respetar el tipo de formato de los valores  , por  ejemplo idealmente, el INPUT PRECIO ( number ) debe ser un INPUT un CURRENCY que concuerda con el tipo numeric de la base de datos .

También debemos nombre cada  INPUT con un nombre para localizarlos mejor , el del precio será en este caso INPUT PRECIO

Una vez hemos comprobado que los valores de los INPUTS son compatibles , ya podemos asociar cada INPUT a la base de datos de manera que se grabe correctamente en la BD . Para ellos volvemos al Workflow , y la accesión CREATE NEW THINGS ( on DB ) y asociamos los VALORES a los INPUTS.

Listo ! , ya podemos entonces pulsar botón para guardar en la base de datos , cada valor en su sitio.