Editor de aplicaciones de bubble.io:
Usted diseña, construye, mantiene y escala su aplicación utilizando el Editor de Aplicaciones de bubble.io. 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 clave que utilizarás a medida que construyas en Bubble. Algunas de esas herramientas también se destacan aquí.
Pestañas principales:
Pestaña de diseño.
Aquí es donde diseñas la apariencia visual de la aplicación. Dibuja elementos en la página, arrástralos y cambia su tamaño, y ajusta sus propiedades y apariencia. Para los nuevos usuarios, recomendamos empezar por aquí.
Para añadir un nuevo elemento, haga clic en un tipo de elemento en la paleta de la izquierda y, a continuación, haga clic y arrastre en la página para insertarlo. Si hace doble clic en un elemento, aparecerá el Editor de propiedades, donde podrá personalizar la apariencia y el comportamiento del elemento. Si hace clic con el botón derecho en un elemento, aparecerá un menú desplegable con opciones de edición adicionales.
Pestaña Flujo de trabajo.
La pestaña Flujo de trabajo es donde se definen los flujos de trabajo que programan su página. Los diferentes flujos de trabajo se muestran como cajas, 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 necesitan ser configurados para la acción. Por ejemplo, una acción ‘Enviar email’ abrirá un panel con un campo llamado ‘Para’, donde definirás la dirección a la que se debe enviar el email. Si esta información es dinámica, puedes añadirla utilizando el Compositor, que te permite construir expresiones dinámicas sin código.
Ficha Datos
La pestaña Datos es donde puedes ver tu estructura de datos y modificarla. Puede ver los diferentes tipos de datos que se utilizan en su aplicación, así como los campos de 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 han creado, y podrá consultarlas, exportarlas, modificarlas y eliminarlas. La sección “Privacidad” es donde se definen las normas de privacidad para garantizar que los datos de su aplicación sean vistos por los usuarios adecuados. Se trata de una función avanzada, pero tendrá que configurarla en cuanto empiece a utilizar su aplicación en producción.
Pestaña Estilos
La pestaña Estilos es donde defines los diferentes estilos que los elementos pueden tener en tu interfaz. Un Estilo es un conjunto compartido de propiedades (por ejemplo, colores de fondo, tamaño de fuente, etc.) que pueden aplicarse a elementos de un tipo similar (por ejemplo, elementos de Texto). El uso de estilos le ayudará a tener una interfaz más consistente, y le permitirá cambiar rápidamente de tema. Es muy recomendable utilizar estilos siempre que pueda.
Pestaña Plugins
Los plugins son una forma de ampliar la funcionalidad básica de Bubble. Por ejemplo, tendrás que instalar plugins en tu aplicación si quieres utilizar un elemento que ha sido construido por la Comunidad, cargar una tarjeta de crédito con Stripe, u ofrecer a tus usuarios la posibilidad de registrarse con Facebook. Puede instalar plugins en la pestaña Plugins. Una vez instalado un plugin, podrá introducir parámetros para cada plugin si es necesario. Por ejemplo, si desea utilizar el plugin de Stripe, tendrá que introducir las claves API que obtenga de Stripe.
La pestaña Plugins también es donde puede revisar los plugins y calificarlos. Dado que la mayoría de los plugins son creados por la Comunidad, las valoraciones y reseñas son muy importantes para mantener el ecosistema de Bubble saludable y ayudar a los creadores de plugins a perfeccionarlos.
Pestaña Configuración
Esta pestaña te permite controlar tu suscripción a la aplicación y los complementos de pago. En la pestaña Configuración, también encontrarás algunos ajustes para toda la aplicación que tendrás que definir antes de lanzar tu aplicación. Estos ajustes van desde definir una paleta de colores y añadir fuentes personalizadas hasta establecer una política de contraseñas, hacer que tu aplicación sea privada, etc.
Pestaña Logs
Esta pestaña es útil una vez que tu aplicación está activa, o cuando la estás probando en modo Run. Puedes utilizar los registros del servidor para ayudar a diagnosticar eventos pasados y problemas de flujo de trabajo, así como para comprobar las acciones programadas y el uso de tu aplicación en términos de ejecuciones de flujo de trabajo y almacenamiento de carga.
Atención
El uso simultáneo de varias pestañas abiertas del navegador para el Editor de Aplicaciones Bubble en la misma aplicación puede provocar un comportamiento inesperado.
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 que muestra los diferentes campos que pueden/deben ser rellenados para un elemento, acción o evento. Aparece al hacer doble clic en un elemento, o al hacer clic una vez en un evento o acción. La barra superior te permite renombrar el elemento/acción/evento que estás editando, y los iconos de la derecha te permiten mostrar el Inspector de Elementos, el Panel de Comentarios, o algunos vídeos contextuales.
Aspecto
Controles relacionados con la apariencia general de un elemento. Esto incluye el tipo de datos, la fuente de datos, los estilos y la configuración de las transiciones.
Diseño
Controles relacionados con el diseño general de un elemento en la página. Esto incluye la anchura, la altura, el tipo de diseño del contenedor, la visibilidad de la página y los márgenes.
Condicionales
Los condicionales le permiten controlar cómo se comportan y aparecen los elementos de la página en determinadas circunstancias. Esta pestaña se mantiene sin cambios.
Herramienta de búsqueda de aplicaciones
En cuanto tenga varias páginas y elementos, se encontrará en una situación en la que querrá encontrar todos los elementos que utilizan el correo electrónico del Usuario actual, por ejemplo, o todos los que tienen un estilo determinado. Haciendo clic en el icono 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 correspondiente del Editor.
La opción “Contiene texto” simplemente coincide con cualquier elemento en el que los metadatos subyacentes, no el nombre para mostrar, contengan parte del texto que se busca. Por ejemplo, al renombrar un campo, no renombramos todas las apariciones de los metadatos de dicho campo, porque eso sería muy lento, sino que sólo le decimos al editor de burbujas que muestre el nuevo nombre de visualización donde sea necesario.
Comprobador de problemas
Dado que Bubble es muy abierto, puede cometer (y probablemente cometerá) algunos errores mientras diseña. Un error puede ser la falta de un campo o un problema con un tipo inconsistente, como utilizar un tipo de campo de texto en una acción “Cargar a un usuario actual”, cuando debería ser un número para el precio. El corrector de incidencias comprobará su aplicación en tiempo real y le mostrará los problemas que debe solucionar. Verás un icono rojo de advertencia en la barra superior en cuanto tengas un problema, y al hacer clic en este icono de advertencia aparecerá la lista. De forma similar a la herramienta de búsqueda, al hacer clic en cada entrada se te llevará al lugar correcto y se 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 su aplicación no funcione en modo de ejecución. Si tienes problemas, no podrás desplegar tu aplicación en la versión de cara al usuario.
Vista previa
Tan pronto como crees una nueva aplicación en Bubble, tu aplicación estará lista para ejecutarse. Puedes hacer clic en Vista Previa en cualquier momento, y eso ejecutará tu aplicación en la página que estás editando en ese momento.
Control de versiones
El control de versiones le permite trabajar en su aplicación dentro de un entorno de desarrollo sin afectar a la aplicación en vivo, lo que garantiza un proceso seguro para la adición de nuevas características y permite el despliegue cuando la aplicación está totalmente preparada.
Más información sobre el control de versiones aquí.
Características principales
Guardado en tiempo real
Bubble guarda su aplicación automáticamente, en tiempo real. En cuanto 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” en cuanto finalice el proceso de guardado.
Ten en cuenta que a veces la notificación puede ponerse roja, normalmente porque la conexión a Internet no ha sido estable durante algún tiempo. Cuando esto ocurra, deberías dejar de trabajar en tu aplicación durante un rato y ver si la conexión vuelve a la normalidad. Si no lo hace, refrescar el Editor es la mejor manera de volver a un estado normal. Es posible que pierdas los últimos cambios realizados al actualizar. No sigas trabajando en tu aplicación si la notificación se vuelve roja, ya que puedes perder cualquier cambio realizado en la aplicación después del cambio de color.
Deshacer y rehacer
Todas las modificaciones realizadas en tu aplicación, dentro de una sesión de navegación, se pueden deshacer/rehacer. Puedes hacer clic en ambos iconos de la barra superior para revertir los cambios o aplicarlos de nuevo. Ten en cuenta que los cambios pueden producirse en algunas partes del Editor que no son visibles en la página en la que te encuentras en ese momento, así que utiliza estos botones con precaución si no ves lo que están haciendo.
Edición multiusuario
Más de un usuario puede modificar una app al mismo tiempo (ten en cuenta que necesitas estar en un plan de pago para invitar a usuarios). Cuando otra persona esté modificando la aplicación en la que te encuentras, verás cómo se mueve el ratón del otro usuario. Esto es útil para evitar que dos personas modifiquen el mismo elemento al mismo tiempo.
Atajos
Se han añadido algunos atajos al Editor para que construir sea más rápido. Además de copiar y pegar, puede añadir un flujo de trabajo a un botón y navegar por el Compositor (entre otras acciones) mediante atajos. Puede ver una lista de los métodos abreviados disponibles actualmente en el panel Métodos abreviados del menú Ayuda.
Vídeos tutoriales
El menú Ayuda te da la opción de ver algunos vídeos de la Academia. También hay vídeos contextuales que aparecen la primera vez que dibujas un elemento. También puede verlos haciendo clic en el icono ‘?’ del Editor de propiedades. Aunque estos vídeos muestran a veces un tema antiguo de la interfaz de usuario de Bubble, su contenido sigue siendo actual y le ayudará a empezar con un nuevo elemento/acción.
Acceso a la referencia básica
Puede acceder a nuestros documentos desde el Editor a través del tool-tip ‘Ver referencia’. Cuando pase el ratón por encima de un icono o un campo durante unos segundos, aparecerá la información sobre herramientas. Al hacer clic en la información sobre herramientas, se abrirá una nueva pestaña que le llevará al lugar correcto dentro de los documentos. Si ya tiene los documentos abiertos, se le redirigirá instantáneamente al lugar correcto.