Hoy hemos descubierto un nuevo plug-in para Bubble que permite convertir tu repeating group en un galería en la cual hacer scroll horizontal o vertical , el plugin puedes verlo aquí ,
Cómo convertir un grupo de repetición en una galería
Autor:
Cómo enviar un webhooks desde Bubble API
La API de workflows te permite ejecutar flujos de trabajo de la API en una solicitud POST o GET. Al utilizar estos workflows de la API, puedes crear cosas, registrar usuarios, enviar correos electrónicos y aprovechar los plugins para acceder a servicios externos.
Puedes definir los workflowss como los harías para una página normal, acción por acción. Pero, los flujos de trabajo de la API son un workflows ( Como lo son los recurring Event y los database change triggers ) lo que significa que se ejecutan independientemente de cualquier página de su aplicación y, por lo tanto, algunas acciones no están disponibles
Puedes crear workflows de la API después de marcar la casilla “Habilitar workflows de la API y workflows backend” en la sección de la API en la pestaña de configuración.
Posteriormente y una vez obtenida la dirección webooks a la cual enviar datos , desde por ejemplo una aplicación com Integromat ( ahora Maker ) , debemos pegarla en nuestra API , configurar las opciones que puedes ver a continuación y listo , ya tenemos nuestra conexión API por webbook lista para enviar datos a Integromat , una vez definamos el formato de datos json que queremos enviar y hacerlo con los inputs de nuestros formulario, por ejemplo.
Autor/a Orestes Seo
Cómo cambiar los toscos mensajes de error en tu app de Bubble con el editor metatags SEO
Aquí te dejamos una forma muy buena , no solo de editar el texto de los mensajes de sistema de tu aplicación , sino también de poder aplicar sobre ellos hojas de estilo CSS.
Y consiste en una vez modificados los mensajes de la forma habitual , es decir , dentro de Settings > Languages en el editor de Bubble . Nuestro amigo Eli nos descubre además una forma de aprovechar la edición de los CSS que ofrece el editor de metatags SEO . De esa manera podemos embeber CSS en el header del código fuente de nuestra APP , Genial !
Navigate to Settings > Languages in the Bubble editor. Locate the setting for ‘When the app has been updated and the user should refresh’ pic.twitter.com/3F6JlM4WNx
— Eli 🇺🇦 (@elibeachy) December 31, 2020
Autor/a Orestes Seo
Cómo hacer una cabecera flotante en Bubble
Cuando tenemos una cabecera header que queremos hacer flotante podemos hacerlo de la siguiente manera . Primero lo ideal es que esa cabecera sea un elemento reutilizable ( reusable group ) y posteriormente debemos marcar.
Las opciones son las siguientes y nos permiten configurar a que grupo se pegará nuestra cabecera ;
TOP ; para pegar nuestro header arriba
BOTTOM ; Para utilizarlo como nuestro pie de página
BOTH ; cuando utilizamos , por ejemplo menús a la izquierda , y que queremos que se pague tanto a la parte de arriba como a la abajo .
La opción Horizontally float relative to,en un menú expandible podemos decidir que se despliegue a la izquierda o a la derecha.
El floating zindex nos permitirá seleccionar la capa visible superior o inferior.
Autor/a Orestes Seo
Editar página de productos por medio de parámetros en URL con Bubble
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.
Autor/a Orestes Seo
Cómo editar bubble en dark mode
¿ 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
Autor/a Orestes Seo
Revisa la ejecución de tu app en Bubble por medio de la vista de depuración
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 ;
1 ) Depuración de los workflows
El lado izquierdo del depurador es el depurador de flujos de trabajo. Puedes ver tres botones que controlan cómo se comporta el depurador cuando se activa un flujo de trabajo. Hay tres modos posibles:
El modo ‘normal’ ejecuta los flujos de trabajo sin interrupción.
En el modo ‘lento’, hay una pausa de un segundo entre cada acción y la siguiente.
El modo ‘paso a paso’ te permite controlar la ejecución del flujo de trabajo. Este es el modo que utilizarás más a menudo.
2 ) El inspector de elementor
A veces es necesario averiguar por qué un elemento se muestra de una forma determinada, especialmente si se están utilizando condiciones o se están mostrando algunos datos. El depurador te permite elegir un elemento de la página y ver la lista de condiciones y campos y sus valores en la situación actual.
3 ) Indicador de errores de ejecución
En el depurador también puedes ver los errores de ejecución en modo de ejecución. Por ejemplo, si estás haciendo una llamada a la API de un servicio, y ese servicio devuelve un error porque falta un parámetro, ahí es donde se mostrará el error. Cuando se produce un error en un workflow o en un elemento, el icono se volverá rojo y se podrá hacer clic en él. Al hacer clic en él se mostrará la lista de errores.
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
Autor/a Orestes Seo
Cómo instalar plugins en Bubble
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.
Autor/a Orestes Seo
Cómo extender el contenido de nuestra app responsive en Bubble
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.
Autor/a Orestes Seo
Element tree en Bubble , tu mejor aliado
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.
