Editor de bubble.io
En el editor de bubble.io (el dashboard que ves cuando empiezas un proyecto) puedes diseñar, construir, mantener y escalar tu aplicación. El editor está estructurado en torno a siete pestañas principales, que se describen aquí. También tiene una serie de herramientas y características claves que puedes utilizar a medida que construyes tu app o web en Bubble. Veamos a grandes rasgos estas herramientas:
Pestañas principales
Pestaña de diseño
Aquí es donde diseñas la apariencia visual de la aplicación. Puedes dibujar elementos en la página, cambiar el tamaño, y ajustar sus propiedades y apariencia. Hice un vídeo en youtube donde te lo explico en detalle y este artículo sobre el apartado de diseño en bubble.io
Agregar un nuevo elemento es fácil, al ser una herramienta nocode el sistema es de clic y arrastre.Haz clic en un tipo de elemento en la paleta de la izquierda, luego haga clic y arrastra en la página para insertarlo. Al hacer doble clic en un elemento, aparece el Editor de propiedades, donde puedes personalizar la apariencia y el comportamiento del elemento. Al hacer clic con el botón derecho en un elemento, se muestra un menú desplegable con opciones de edición adicionales de forma directa.
Pestaña de flujo de trabajo
Otra parte del editor de bubble.io es la pestaña Flujo de trabajo es donde puedes definir los flujos de trabajo que programan tu página. Los diferentes flujos de trabajo se muestran como cuadros, que representan el evento.
Al hacer clic en un evento o una acción, aparecerá un panel similar al Editor de propiedades. Ahí es donde puedes definir los diferentes campos que deben establecerse para la acción. Por ejemplo, una acción de ‘Enviar correo electrónico’ abrirá un panel con un campo llamado ‘Para’, donde definirá la dirección a la que se debe enviar el correo electrónico. Si esta información es dinámica, puede agregarla mediante Composer, que te permitirá crear expresiones dinámicas sin código.
Pestaña de datos
La pestaña Datos es donde puedes ver la estructura de datos y modificarla. Puedes ver los diferentes tipos de datos que se utilizan en tu aplicación, así como los campos para cada uno de ellos.
La sección ‘Datos de la aplicación’ muestra los datos reales. Una vista tipo Excel mostrará las entradas que se has creado, pudiendo consultar, exportar, modificar y eliminar entradas. La sección Privacidad es donde se define las reglas de privacidad para asegurarse de que los usuarios correctos vean los datos de la aplicación que corresponde en función de los permisos. Esto es muy importante, ya que los datos de tus usuarios deben estar protegidos.
Puedes definir roles y asociar a los roles determinados permisos. Esta es una característica avanzada, pero tendrás que configurarla tan pronto como quieras lanzar tu app.
Pestaña de estilos
La pestaña Estilos es donde defines los diferentes estilos que pueden tener los elementos en tu interfaz. Un estilo es un conjunto compartido de propiedades (p. ej., colores de fondo, tamaño de fuente, etc.) que se pueden aplicar a elementos de un tipo similar (p. ej., elementos de texto). El uso de estilos te ayudará a tener una interfaz más consistente y te permitirá cambiar rápidamente de tema sin tener que hacerlo de uno en uno. Puedes importarlos de Figma.
Pestaña de complementos
Los complementos son una forma de ampliar la funcionalidad principal de Bubble. Por ejemplo, tienes que instalar complementos en tu aplicación si quieres utilizar un elemento creado por la Comunidad, cargar una tarjeta de crédito con Stripe u ofrecer a sus usuarios la posibilidad de registrarse en Facebook.
Puedes instalar complementos en la pestaña Complementos. Una vez que se instala, puedes ingresar parámetros para cada complemento si es necesario. Por ejemplo, si desea utilizar el complemento Stripe, tienes que ingresar las claves API que te da Stripe.
En la misma pestaña también puedes revisar los complementos y calificarlos. Dado que la comunidad crea la mayoría de los complementos, las calificaciones y las revisiones son muy importantes para mantener el ecosistema de Bubble en buen estado y ayudar a los creadores de complementos a perfeccionar sus complementos.
Pestaña de configuración
Esta pestaña te permite controlar la suscripción de tu aplicación y los complementos pagados. En la pestaña Configuración, también están algunas configuraciones para toda la aplicación que tienes que definir antes de iniciar su aplicación.
Esas configuraciones van desde definir una paleta de colores y agregar fuentes personalizadas, hasta establecer una política de contraseñas, hacer que su aplicación sea privada, etc.
Pestaña de registros
Esta pestaña del editor de bubble.io es útil una vez que la aplicación está activa o cuando la estás probando en modo Ejecutar. Puedes ustilizar los registros del servidor para ayudar a diagnosticar eventos pasados y problemas de flujo de trabajo, así como para verificar las acciones programadas y el uso de su aplicación en términos de ejecución de flujo de trabajo y almacenamiento de carga.
Herramientas clave
Editor de propiedades
El Editor de propiedades es el panel principal que se utiliza para diseñar los diferentes elementos de cada página y personalizar eventos y acciones. Es una ventana emergente arrastrable que mostrará los diferentes campos que pueden/deben completarse para un elemento, acción o evento.
Aparece cuando haces doble clic en un elemento o hace clic una vez en un evento o acción. La barra superior te permite cambiar el nombre del elemento/acción/evento que estás editando, y los iconos de la derecha le permiten mostrar el Inspector de elementos, el Panel de comentarios o algunos vídeos contextuales.
Herramienta de búsqueda de aplicaciones
Cuando tengas varias páginas y elementos, te encontrarás en una situación en la que necesites buscar directamente, por ejemplo, todos los elementos que usan el correo electrónico del usuario actual, o todos los que tienen un estilo determinado.
Al hacer clic en el ícono de la lupa en la barra superior del editor, aparecerá la herramienta de búsqueda. Puede buscar elementos, acciones, etc. Al hacer clic en una entrada, accederá a la página/pestaña correcta en el Editor.
Verificador de problemas
Dado que Bubble es muy abierto, puedes (y probablemente los cometerás al inicio) algunos errores al diseñar. Un error puede ser un campo faltante o un problema con un tipo incoherente, como por ejemplo, usar un tipo de campo de texto en una acción “Cobrar a un usuario actual”, cuando debería ser un número para el precio.
El Verificador de problemas verificará la aplicación en tiempo real y enumerará los problemas para solucionar. Verás un ícono de advertencia rojo en la barra superior cuando haya problemas, y al hacer clic en este ícono de advertencia se mostrará la lista con los errores. De manera similar a la herramienta de búsqueda, hacer clic en cada entrada te llevará al lugar correcto y resaltará el problema correspondiente.
Es importante mantener la lista de problemas lo más corta posible en todo momento (preferiblemente a 0 elementos), ya que los problemas pueden hacer que la aplicación no funcione en el modo de ejecución. Si tienes problemas, no podrás implementar la versión en vivo para el usuario de su aplicación.
Avance
Tan pronto como crees una nueva aplicación en Bubble, la aplicación estará lista para ejecutarse. Puede hacer clic en Vista previa en cualquier momento y eso ejecutará su aplicación en la página que está editando actualmente.
Control de versiones
Puedes revertir las modificaciones en la aplicación a cualquier momento, según el plan que tengas contratado. Si algo sale mal, como si eliminas una página y no puedes deshacer el cambio con un ctrl z , puedes restaurar su aplicación a un momento anterior a la eliminación.
Características claves
Ahorro en tiempo real
En Bubble se guardan todos los cambios automáticamente, en tiempo real. Tan pronto como modifiques un elemento, acción, configuración, etc., el cambio se guardará. Verás una notificación de “guardado” en la barra superior durante un breve instante, que cambiará a “guardado” de forma automática o si le das al icono de guardar. guardado.
A veces la notificación se pone de color rojo, porque la conexión a Internet no ha sido estable durante algún tiempo. Cuando esto suceda, espera hasta que vuelta al color de siempre, porque si sigues trabajando y no se guardarán los cambios, en caso de error en la pagina, los cambios no se habrán guardado y tienes que hacerlos otra vez.
Si no cambia solo, actualiza la página. Es posible que pierdas los últimos cambios.
Deshacer y rehacer
Todas las modificaciones en tu aplicación, dentro de una sesión de navegador, se pueden deshacer/rehacer. Puedes hacer clic en ambos iconos en la barra superior para revertir los cambios o aplicarlos nuevamente (también ctrl z).
Ten cuidado y no deshagas a lo loco. Algunos cambios pueden no ser visibles y que los estés eliminando. Si no ves que se desahag los cambios, modifica manualmente y no digas deshaciendo.
Edición multiusuario
Más de un usuario puede modificar una aplicación al mismo tiempo (aunque esto es solo con el plan de pago). Cuando alguien más esté modificando la aplicación, verás que el mouse del otro usuario se mueve. Esto es útil para evitar que dos personas modifiquen el mismo elemento al mismo tiempo.
Atajos
Se han agregado algunos accesos directos al Editor para que la construcción sea más rápida. Además de copiar y pegar, puedes agregar un flujo de trabajo a un botón y navegar por el Compositor (entre otras acciones) usando accesos directos. Puedes ver una lista de los accesos directos disponibles actualmente en el panel Accesos directos del menú Ayuda.
Nuestra comunidad hispanohablante
Únete a nuestra comunidad en discord y inicia tu recorrido en el nocode con bubble.