Cuando supe que podía crear aplicaciones sin escribir una sola línea de código, pensé que significaba crear aplicaciones simples sin mucha profundidad. Pensé que podría hacer cosas básicas, pero luego el proyecto se volvería desafiante, y tendría que aprender a codificar para que funcionara.
La verdad es que, a pesar de mi falta de habilidades técnicas y mi escepticismo, he creado algunas aplicaciones bastante interesantes y sólo me llevó unas semanas alcanzar un resultado funcional.
¿Pero cómo? Las herramientas sin código simplifican conceptos avanzados de programación, haciéndolos más fáciles de entender y usar. En lugar de tener que escribir código o ingresar comandos manualmente, puede utilizar interfaces visuales, elementos de arrastrar y soltar y asistentes para configurar todo tal como lo desea.
En esta guía, lo guiaré paso a paso a través de la creación de una aplicación simple con una herramienta sin código llamada Bubble. Una vez que hayas terminado, comprenderás los conceptos básicos de la creación de aplicaciones sin código y estarás bien encaminado para crear cosas nuevas y emocionantes sin código.
Una introducción a mi aplicación de lista de tareas pendientes
Things To Do es la aplicación modelo que recrearemos hoy. Es una aplicación de lista de tareas pendientes donde puedes:
Visualiza las tareas pendientes que debes realizar hoy
Agregar y eliminar nuevas tareas de la lista
Marcar tareas como realizadas
Ver una lista de tareas completadas
He aquí un ejemplo de diseño:
Puede explorar la funcionalidad visitando el sitio de la aplicación. Inicie el registro con las credenciales de prueba proporcionadas en la página y pruébelo. Pero ten cuidado: es posible que otras personas lo estén probando al mismo tiempo, por lo que es posible que veas muchas tareas yendo y viniendo.
Seguir esta guía hasta el final llevará aproximadamente dos horas.
Antes de empezar
Antes de comenzar a crear nuestra propia versión de Things To Do, deberá crear una cuenta gratuita en Bubble.
Si lo desea, también puede tomar el curso intensivo, un conjunto de 10 lecciones que explican los conceptos básicos en una serie de instrucciones paso a paso. Pero puedes saltarte esa parte por ahora, ya que iré explicando lo que haremos a medida que avancemos.
Una vez que haya creado una cuenta, haga clic en el botón Nueva aplicación , complete la información en el cuadro de diálogo y elija Comenzar con una página en blanco.
Parte 1: Configuración de la base de datos
La mayoría de las aplicaciones modernas dependen de una base de datos para funcionar. Una base de datos permite almacenar, mantener y acceder a datos, a la vez que posibilita crear relaciones entre diferentes elementos de datos.
Accedamos a la parte de Bubble que trata los datos. Haga clic en la pestaña Datos en la barra de navegación de la izquierda de su pantalla.
Cuando creamos una aplicación, almacenaremos datos de nuestros usuarios en nuestra base de datos. Dependiendo de lo que necesitemos para potenciar las funciones de la aplicación, necesitarás diferentes tipos de datos.
En este momento, solo existe el tipo de datos Usuario. Está configurado de forma predeterminada y realiza un seguimiento de los usuarios de la aplicación, sus direcciones de correo electrónico, contraseñas, la fecha de creación o modificación, quién creó el usuario y el slug.
Dado que estamos creando una lista de tareas pendientes, necesitaremos una forma de almacenar las tareas que cada usuario creará para completar su lista. En el campo de entrada Nuevo tipo , escriba "Tarea" y haga clic en Crear.
Ahora que tenemos un tipo de datos para las tareas, necesitamos almacenar más información sobre cada tarea. Necesitamos tener una descripción de la tarea, para que los usuarios puedan registrar que necesitan pasear al perro o hacer su cama; también necesitamos una forma de almacenar el estado de la tarea, si aún debe hacerse o ya está completa.
Vamos a crear estos campos ahora. Haga clic en Crear un nuevo campo.
En el cuadro de diálogo Nombre del campo que aparece, escriba "descripción". Los campos de datos también necesitan un tipo. Haga clic en el menú desplegable Tipo de campo y seleccione Texto. Una vez que haya terminado, haga clic en Crear.
Repitamos el proceso para el estado de la tarea. Haga clic en Crear un nuevo campo, escriba "estado" en Nombre del campo y configure el Tipo de campo en número.
¿Por qué el tipo de número? Utilizaremos un sistema numérico para realizar un seguimiento del estado de nuestra tarea. Las tareas que tengan el número 0 se considerarán no realizadas y las tareas con el número 5 se considerarán completadas. La razón por la que elegimos 0 y 5 (y no 0 y 1, por ejemplo) es para dejar algo de margen para crear estados de tareas adicionales en el futuro. Después de todo, desde la lista de trabajos atrasados hasta la lista de completados, también podríamos agregar un estado de "programado" o "en progreso".
Ahora tenemos la información básica que necesitamos para que el tipo de datos Tareas sea útil. Hay solo un pequeño problema: cuando tengamos nuestros primeros 10 usuarios en la aplicación, y todos estos usuarios comiencen a crear sus tareas, tendremos dificultades para asignar cada tarea a su legítimo propietario. Esto podría complicar las cosas a largo plazo, por lo que agregaremos un campo de datos adicional para registrar quién es el propietario de cada tarea.
Haga clic en Crear un nuevo campo. En el cuadro de diálogo, establezca el Nombre del campo como propietario. Para el tipo de campo, abra el menú desplegable y elija Usuario en la parte inferior. Por último, haga clic en Crear.
Todos los campos de datos para el tipo de datos Tarea están configurados. Su pantalla debería verse así:
Al crear la aplicación más adelante, también será útil anclar cada tarea a cada usuario en la base de datos. Vamos a configurarlo ahora. Haga clic en el tipo de datos Usuario .
Haga clic en Crear un nuevo campo. Asígnele el nombre "tareas", establezca el Tipo de campo en Tarea y, antes de hacer clic en Crear, recuerde marcar la opción Este campo es una lista (múltiples entradas). Esto garantiza que cada usuario pueda agregar tantas tareas como necesite en este campo.
Ahora estamos listos para reenviar. (Nota: si desea agregar más funciones a su aplicación, deberá volver a visitar la pestaña de datos en el futuro).
Digamos que desea agregar una forma para que cada usuario pueda realizar un seguimiento de los proyectos. Eso significaría que tendría que crear un tipo de datos Proyectos y proporcionar todos los campos relevantes para identificar al propietario del proyecto, los participantes y las tareas. Lo mismo se aplicaría si quisieras permitir que los usuarios rellenen formularios equipos.
Simplemente recuerda que cada vez que necesites almacenar más tipos de datos dentro de tu aplicación, tendrás que ampliar tu base de datos. Por ahora, pasemos a la creación de la interfaz de usuario.
Parte 2: Creación de la interfaz de usuario
La interfaz de usuario (UI) es aquello con lo que interactúan los usuarios para escribir y recuperar información de la base de datos, así como para realizar las operaciones lógicas que hacen que su aplicación sea útil (en este caso, la aplicación de lista de tareas pendientes).
Primero necesitamos agregar una nueva página. Una página de aplicación funciona de forma muy similar a una página web: puedes usarla para separar diferentes actividades o paneles. Haga clic en el menú desplegable que muestra la página actual en el borde superior izquierdo de la pantalla.
Haga clic en Agregar una nueva página.
Establezca el nombre de la página como lista y deje el menú desplegable en blanco. Haga clic en Crear.
Es hora de empezar a diseñar. Observe el generador de interfaz de usuario en la parte izquierda de la pantalla:
El árbol de Elementos mostrará una lista de todos los elementos que agregó a la página hasta ahora. Todo lo que está debajo de esta sección son los elementos que puedes agregar a la página, los cuales están divididos en categorías.
Agreguemos un grupo que contendrá nuestra lista de tareas pendientes. En la sección Contenedores , haga clic en Grupo.
Ahora, dibuja un rectángulo ancho en el lienzo.
Una vez que haya terminado, aparecerá el cuadro de diálogo de edición. Este tipo de diálogo le permitirá editar los detalles de cada elemento que agregue a la página. Comencemos cambiando el nombre del elemento para mantener las cosas organizadas. Haga clic en el encabezado de este cuadro de diálogo y cámbiele el nombre a "Listas de grupos".
Vamos a darle un borde. Haga clic en Eliminar estilo para desbloquear la edición de estilo individual para este grupo.
Ahora, configure el Estilo del borde: todos los bordes en Sólido, Redondez en 10 y Ancho en 2.
Ajustemos el tamaño y la posición de este grupo para asegurarnos de que pueda contener todo lo que necesitamos. Haga clic en la pestaña Diseño dentro de la ventana de edición.
Complete el ancho (W), la altura (H), la posición X (X) y la posición Y (Y) con los siguientes valores:
O 731
H 393
X 114
Y 134
Este grupo servirá únicamente como elemento visual, por lo que no vamos a modificarlo más.
Es hora de agregar un grupo repetitivo para mostrar la lista de tareas pendientes. Un grupo repetitivo es un tipo especial de grupo que muestra datos en una serie de filas y columnas, lo que le permite visualizar una gran cantidad de datos de una manera sencilla.
En el menú UI Builder de la izquierda, en Contenedores, haga clic en Grupo repetitivo.
Dibuje el grupo repetitivo dentro de las Listas de grupos que acabamos de configurar. Asegúrese de que cubra la mayor parte de su área interior.
Cuando aparezca el cuadro de diálogo de edición del grupo repetitivo, notarás que estamos en la pestaña Diseño . Introduzca los siguientes valores de ancho, alto, X e Y:
O 671
H 346
X 28
Y 16
Mantengamos las cosas organizadas. Cambie el nombre de este grupo repetitivo a "Lista de tareas pendientes del grupo repetitivo" haciendo clic en el encabezado del cuadro de diálogo de edición.
Editemos un poco más la apariencia de este grupo. Haga clic en la pestaña Apariencia .
Establezca el número de filas en 6.
También vamos a deshacernos del separador de línea. Haga clic en Eliminar estilo como antes para editar el estilo de este elemento de forma independiente. En la nueva configuración que aparece, haga clic en el menú desplegable frente a Separador y configúrelo en Ninguno.
Es hora de configurar algunas funcionalidades. Necesitamos avisarle a Bubble que este grupo repetitivo mostrará nuestras tareas pendientes. Haga clic en el menú desplegable Tipo de contenido y seleccione Tarea.
Pero esto no es suficiente con mostrar las tareas; también necesitamos decir dónde obtener las tareas que queremos mostrar. En la entrada de la fuente de datos , verá un pequeño rectángulo que lo invita a "Hacer clic". Haga clic allí para activar un menú desplegable.
En el menú desplegable, seleccione Realizar una búsqueda de.
En el nuevo cuadro de diálogo de la izquierda, en el menú desplegable Tipo , haga clic en Tarea.
Pero no queremos mostrar todas las tareas, ¿verdad? Solo queremos mostrar las tareas que aún están incompletas y las tareas que pertenecen al usuario actual. Haga clic en Agregar una nueva restricción.
Haga clic en el pequeño rectángulo dentro del campo de entrada que aparece.
En el menú desplegable, haga clic en estado.
Haga clic nuevamente y seleccione =.
Por último, haga clic nuevamente, escriba 0 (cero) y presione Enter. Esta restricción filtro los resultados, mostrando solo las tareas con un estado de 0 (no completada).
Haga clic a continuación para agregar otra restricción. Entonces:
haga clic en el campo de entrada
elegir propietario
Haga clic nuevamente para seleccionar =
y haga clic una última vez para elegir Usuario actual
Esta expresión asegura que los resultados solo contendrán tareas creadas por el usuario actual, no tareas que pertenecen a otros usuarios en la aplicación. El resultado final debería verse así:
Nuestra lista de tareas pendientes de RepeatingGroup extrae la información correctamente de la base de datos, pero no hay forma de que nuestros usuarios puedan verla. Puede cerrar el cuadro de diálogo de edición presionando el ícono X en la parte superior derecha.
Ahora, necesitamos agregar elementos de texto dentro del grupo repetitivo y luego configurarlos para mostrar los datos correctos.
Antes de comenzar, ¿recuerdas que el grupo repetitivo tiene varias filas? Una gran ventaja de este elemento es que, al configurar la primera fila, todas las demás filas tendrán el mismo diseño y funcionalidad. Esto le permite crear funciones como un canal de redes sociales, una lista de productos en una tienda en línea o, lo adivinó, tareas en una lista de tareas pendientes.
Desde el menú UI Builder a la izquierda, arrastre un elemento Texto desde Elementos visuales y suéltelo dentro de la primera fila del grupo repetitivo. Si ves que aparece una línea roja debajo del cursor, lo estás haciendo bien.
¿Ves cómo se replica en las otras filas? Esta es una vista previa de cómo se verá al final. Haga clic derecho en el elemento de texto y haga clic en Editar.
En el campo de entrada superior, borre "...edítame..." y haga clic en el botón azul Insertar datos dinámicos.
En el menú desplegable, seleccione Descripción de la tarea de la celda actual.
Cada uno de estos elementos de texto extraerá la tarea de la celda correspondiente y mostrará su descripción. Podríamos repetir el proceso para otros campos de datos (por ejemplo, para mostrar el estado de la tarea o la fecha de creación), pero no será necesario por ahora.
Una lista de tareas pendientes también necesita un método para marcar las tareas como realizadas. Arrastre un elemento Icono desde el menú Elementos visuales y suéltelo dentro de la primera fila del grupo repetitivo en el lado derecho.
El icono predeterminado es una bandera. Elija un icono que sea apropiado para la acción que queremos ilustrar. También necesitamos hacerlo más pequeño. Arrastre los controladores de límite del ícono para cambiar su tamaño o haga clic en la pestaña Diseño e ingrese los siguientes valores:
O 30
H 30
X 609
Y 14
Continuemos manteniendo las cosas organizadas. Cambie el nombre del icono a "Icono marcado como terminado".
Si los usuarios cometen un error al agregar tareas, sería útil tener un botón para eliminar la tarea. Repita el proceso para agregar un ícono para eliminar una tarea. Utilice el mismo método para cambiar el tamaño del ícono y no olvide nombrarlo "Tarea de eliminación de ícono".
Es hora de agregar un botón para agregar tareas a nuestra lista. También usaremos un icono para tal efecto. Colóquelo en la parte superior derecha de la lista de tareas pendientes y nómbrelo "Icono Nueva Tarea".
Para agregar nuevas tareas, aparecerá una ventana emergente con un campo de entrada y un botón. En el menú UI Builder a la izquierda, en Contenedores, haga clic en Ventana emergente y luego haga clic en el medio del lienzo para colocarlo.
Cambie el nombre de la ventana emergente en la ventana de edición a "Nueva tarea emergente". A continuación, agregue un elemento de texto a la ventana emergente y escriba "Crear nueva tarea" en él.
Cambiemos el estilo de este texto a algo más impactante. Haga clic en el menú desplegable Estilo y seleccione H2 Encabezado - Oscuro.
Utilice los controladores del elemento para cambiar su tamaño y posición en la ventana emergente. Para centrarlo, haga clic derecho y presione Centrar horizontalmente. También puedes utilizar las teclas de flecha de tu teclado para mover el elemento.
Agregue un campo de entrada debajo del elemento de texto (lo encontrará en el menú UI Builder , en la sección Formularios de entrada ). Edite el valor del marcador de posición para que sea "ingrese una descripción aquí…"
Por último, agrega un botón (lo encontrarás en Elementos visuales en el menú de la izquierda) debajo de ambos elementos y etiquétalo como "crear tarea".
La ventana emergente está obstruyendo el resto de nuestra aplicación. Haga clic fuera para ocultarlo. Si deseas volver a verlo más tarde, puedes alternar su visibilidad en el menú de la izquierda, debajo de Árbol de elementos. Busque la ventana emergente allí y haga clic en el pequeño ícono del ojo para mostrarla u ocultarla.
La interfaz de nuestra aplicación está casi completa. Agreguemos una lista para que nuestros usuarios puedan ver las tareas completadas. Usaremos otro grupo repetitivo que filtrará las tareas según el estado y el propietario, muy parecido al primero que creamos.
Haga clic con el botón derecho en la lista de tareas pendientes de RepeatingGroup y haga clic en Editar.
Haga clic en la pestaña Diseño .
Desmarcar Este elemento es visible al cargar la página. Usaremos esta propiedad para crear un menú más adelante que mostrará las tareas pendientes o las tareas completadas.
Tenga en cuenta el ancho (W), la altura (H), la posición X (X) y la posición Y (Y) de este elemento. En este caso, es W 675, H 347, X 22, Y 19.
Ahora, cierre el cuadro de diálogo. Haga clic con el botón derecho en la lista de tareas pendientes de RepeatingGroup y haga clic en Copiar.
Haga clic derecho dentro de la región superior izquierda de las Listas de grupos y seleccione Pegar.
Se pegó una copia del grupo repetitivo ligeramente separada del original. También notarás que apareció un nuevo elemento dentro del árbol de elementos en el menú de la izquierda. Haga clic en el pequeño ojo para ocultar la lista de tareas pendientes de RepeatingGroup.
Ahora, haga clic en la copia de la Lista de tareas pendientes del grupo repetido para abrir el cuadro de diálogo de edición.
Para mantener todo organizado, cambie el nombre de este grupo a Lista de tareas realizadas por RepeatingGroup (para ello, haga clic en el nombre en el encabezado del cuadro de diálogo de edición).
Haga clic en la pestaña Diseño e ingrese los valores W, H, X, Y que copió anteriormente (W 675, H 347, X 22, Y 19). Esto garantizará que ambas listas tengan las mismas dimensiones y posición en la página.
Es hora de cambiar el tipo de tareas que mostraremos en esta lista. Haga clic en la pestaña Apariencia .
En el campo Fuente de datos , haga clic en la expresión Buscar tareas. Aparecerá un nuevo diálogo. En la restricción de estado , cambie "0" a "5" (es el número que decidimos que marcaría una tarea como realizada). Deje todos los demás campos como están.
No necesitaremos un icono de eliminar para las tareas completadas dentro de la lista "hecho". Puedes hacer clic derecho y eliminarlo.
El icono para mostrar que la tarea está completada debe ser diferente del que tenemos para marcar la tarea como realizada. Elige un icono más apropiado. Una vez que encuentres el adecuado:
Cambia su color a verde (haz clic derecho en el ícono, haz clic en Editar; debajo de Estilo , haz clic en Eliminar estilo y verás un selector de color arriba).
Cambie su nombre a "Icono listo".
Ahora tenemos dos grupos repetitivos: uno muestra las tareas pendientes y el otro es una lista de tareas completadas. Necesitamos una forma de alternar entre ellos. Agreguemos un menú simple en la parte superior de la lista para hacer exactamente eso.
Añade un icono que sugiera la funcionalidad del menú en la parte superior izquierda. Llámalo "Listas de iconos".
Agregue un botón etiquetado "por hacer", seguido de otro etiquetado "hecho".
Usaremos algo llamado "estados de elementos personalizados" para alternar la visibilidad de cada lista. Los estados de elementos personalizados son una forma ágil de controlar muchos aspectos de la interfaz de usuario en Bubble.
Haga clic derecho en la Lista de iconos que colocamos y haga clic en Editar.
Haga clic en el botón i pequeño en el encabezado del cuadro de diálogo de edición (inspector de elementos).
En Estados personalizados, haga clic en Agregar un nuevo estado personalizado.
Establezca el nombre del estado en "lista activa" y el tipo de estado en "número". Termine haciendo clic en Crear.
Utilizaremos este estado de la siguiente manera: siempre que el estado se establezca en 1, la lista de tareas pendientes de RepeatingGroup estará visible; cuando el estado se establezca en 2, la lista de tareas realizadas de RepeatingGroup estará visible. Como queremos que nuestros usuarios vean la lista de tareas pendientes cada vez que abran la página por primera vez, podemos establecer el valor predeterminado en 1.
Ahora que tenemos este estado personalizado, necesitaremos avisar a nuestros grupos repetitivos cuándo deben aparecer y desaparecer. En el árbol Elementos, haga clic en la lista de tareas pendientes RepeatingGroup.
En el cuadro de diálogo de edición que aparece, haga clic en la pestaña Condicional .
Esta pestaña le permite cambiar las características de este elemento cuando se cumplen ciertas condiciones. Agreguemos una nueva condición. Haga clic en Definir otra condición.
Haga clic en el campo de entrada frente a Cuándo. En el menú desplegable que aparece:
Desplácese hacia abajo para encontrar las Listas de íconos y haga clic en ellas.
Continúe la expresión seleccionando la lista activa de.
Luego, seleccione es.
Escriba el número 1 y presione Enter en su teclado
El resultado debería verse así:
Haga clic en el menú desplegable denominado Seleccionar una propiedad para cambiar cuando sea verdadero.
Seleccionar Este elemento es visible.
No olvides marcar la casilla.
Esto es lo que sucede: siempre que el estado personalizado de la lista de íconos sea 1, se mostrará este grupo repetido. Repitamos un proceso similar para mostrar la lista de tareas realizadas. En el menú de la izquierda, dentro del árbol Elementos, haga clic en la lista RepeatingGroup listo.
El cuadro de diálogo de edición ya debería estar en la pestaña Condicionales . Haga clic para establecer la expresión como antes:
Seleccione Listas de iconos > lista activa de > es.
Esta vez, escriba el número 2 y presione Enter.
Haga clic en el menú desplegable Seleccionar una propiedad para cambiar cuando sea verdadero, seleccione Este elemento es visible y marque la casilla.
Ahora, siempre que el estado personalizado de la lista de íconos se establezca en 2, se mostrará este grupo repetido. Configuraremos los medios para cambiar estos estados (y cambiar la visibilidad de estos elementos) en la siguiente sección.
La interfaz de usuario está lista para funcionar. Tenemos todos los elementos que extraen información de la base de datos y la muestran de la forma que queremos, y también tenemos todos los botones y estados que necesitamos para la funcionalidad. Es hora de vincular todo mediante flujos de trabajo.
Parte 3: Lógica y flujos de trabajo
Ahora viene la parte emocionante. Aquí es cuando la aplicación realmente hará lo que queremos que haga. Ahora configuraremos todos los botones e íconos para realizar las acciones correctas.
Haga clic derecho en el ícono para agregar una nueva tarea y haga clic en Iniciar/Editar flujo de trabajo.
Usaremos este botón para mostrar una ventana emergente. Haga clic Haga clic aquí para agregar una nueva acción…
Coloque el cursor sobre Acciones del elemento y haga clic en Mostrar.
Aparece un nuevo cuadro de diálogo. Haga clic en el menú desplegable Elemento y seleccione Nueva tarea emergente.
Ahora, cada vez que el usuario haga clic en ese botón, se mostrará la ventana emergente Nueva tarea. Regresemos a la pestaña Diseño para encontrar el siguiente elemento que configuraremos.
Configuremos el botón para crear tareas que colocaremos dentro de la ventana emergente. Haga visible la ventana emergente haciendo clic en el pequeño ícono del ojo en el menú del árbol Elementos en el lado izquierdo de su pantalla.
Haga clic con el botón derecho en el botón denominado Crear tarea y haga clic en Iniciar/Editar flujo de trabajo.
Este flujo de trabajo será más largo. Haga clic para agregar una nueva acción. Coloque el cursor sobre Datos (Cosas) y haga clic en Crear una cosa nueva.
El tipo de cosa que queremos crear es Tarea. Selecciónelo en el menú desplegable.
Queremos llenar algunos de los campos de datos de la tarea. Haga clic en Establecer otro campo.
Haga clic en el campo de entrada y seleccione la descripción en el menú desplegable.
Haga clic en el área delante del signo =. En el menú desplegable que aparece, haga clic en Entrada e ingrese una descripción.
Esto le permitirá a Bubble saber que debe completar el campo de datos de "descripción" con lo que esté dentro del campo de entrada que colocamos dentro de la ventana emergente anteriormente. Termina la expresión seleccionando el valor de.
Cuando se crea una tarea, es probable que no esté completa. Haga clic para establecer otro campo. Seleccione el estado en el menú desplegable.
Haga clic en el área delante del signo =. No elegiremos nada del menú desplegable. Simplemente escriba el número "0" y presione Enter en su teclado.
Por último, necesitamos establecer un propietario para esta tarea. Repita el proceso para configurar otro campo y elija propietario como el campo a configurar. Haga clic en el área delante del signo =. Seleccione Usuario actual en el menú desplegable.
El paso 1 está completo. Ahora, asociaremos esta tarea con la cuenta del usuario actual. Haga clic para agregar una nueva acción.
En Cuenta, haga clic en Realizar cambios en el usuario actual.
Haga clic en Cambiar otro campo.
Haga clic en el campo de entrada y seleccione tareas en el menú desplegable.
Haga clic nuevamente y seleccione agregar.
Haga clic nuevamente y seleccione Resultado del paso 1 (Crear una nueva tarea…).
El paso 2 está completo. Asociará cada tarea que el usuario cree con su propia cuenta. Esto ahorrará tiempo y recursos cuando la aplicación busque en la base de datos para mostrar todas las tareas de un usuario específico, por lo que es crucial que completemos este paso.
El paso 3 restablecerá el campo de entrada y borrará el cuadro de descripción. Si la acción aún no está sugerida por Bubble, haga clic para agregar una nueva acción, pase el cursor sobre Acciones del elemento y haga clic en Restablecer entradas.
Por último, ocultemos la ventana emergente después de agregar la tarea. Haga clic para agregar una nueva acción, pase el cursor sobre Acciones de elemento y haga clic en Ocultar.
Haga clic en el menú desplegable y seleccione Nueva tarea emergente.
Este flujo de trabajo está completo. Vamos a configurar nuestro menú con estados de elementos personalizados. Haga clic en la pestaña Diseño para ver nuevamente la interfaz de nuestra aplicación.
Haga clic con el botón derecho en el botón etiquetado pendiente y haga clic en Iniciar/Editar flujo de trabajo.
Haga clic para agregar una nueva acción. Coloque el cursor sobre Acciones del elemento y haga clic en Establecer estado.
En el Elemento, busque el ícono llamado Listas de íconos y haga clic en él.
Haga clic en el menú desplegable Estado personalizado y elija lista activa.
Haga clic en la entrada Valor , escriba 1 y presione Entrar.
Esto es lo que hemos hecho aquí: cada vez que el usuario hace clic en el botón "pendiente", el estado personalizado almacenado dentro de las Listas de iconos cambiará a 1, mostrando la Lista de tareas pendientes de RepeatingGroup y ocultando la Lista de tareas realizadas de RepeatingGroup.
Regrese a la pestaña Diseño . Haga clic con el botón derecho en el botón etiquetado Listo y haga clic en Iniciar/Editar flujo de trabajo.
Haga clic para agregar una nueva acción. En Acciones de elemento, haga clic en Establecer estado.
Repetiremos el mismo proceso que antes. Seleccione Listas de iconos como elemento y lista activa como estado personalizado, pero esta vez, establezca el valor en 2 y presione Entrar.
Cuando el usuario hace clic en este botón, el estado almacenado dentro del elemento Listas de iconos cambiará a 2, ocultando la Lista de tareas pendientes de RepeatingGroup y mostrando la Lista de tareas realizadas de RepeatingGroup.
Regresemos a la pestaña Diseño . Nos encargaremos de los flujos de trabajo de los íconos dentro de la lista de tareas pendientes de RepeatingGroup utilizando un enfoque ligeramente diferente. En el menú del árbol Elementos de la izquierda, haga clic en el ícono + para expandir el contenido de la Lista de tareas pendientes de RepeatingGroup.
Haga clic en el icono Eliminar tarea . Esto abrirá el cuadro de diálogo de edición. Haga clic en la pestaña Apariencia si aún no se muestra y luego haga clic en el botón Iniciar/Editar flujo de trabajo (es otra forma de ir a la página del flujo de trabajo).
Haga clic para agregar una nueva acción. En Datos (Cosas), haga clic en Eliminar cosa.
En el campo de entrada Para eliminar , elija Tarea de la celda actual.
¿Recuerdas cómo asociamos cada tarea con su propietario? Necesitamos eliminar esta tarea también de la cuenta del propietario. Haga clic para agregar una nueva acción. Coloque el cursor sobre Cuenta y haga clic en Realizar cambios en el usuario actual.
Haga clic en Cambiar otro campo. Entonces:
Haga clic en el campo de entrada y seleccione tareas.
Haga clic nuevamente y elija eliminar.
Haga clic una tercera vez y seleccione Tarea de la celda actual.
Ahora, los usuarios pueden eliminar tareas. Regresemos a la pestaña Diseño . En el árbol Elementos, haga clic en el ícono Marcar como listo para abrir la ventana de edición. Haga clic en Iniciar/Editar flujo de trabajo.
Cuando los usuarios hacen clic en este icono, significa que la tarea pasará de incompleta a completada. Decidimos que lo incompleto está representado por 0 y lo completo es 5. Haga clic para agregar una nueva acción. En Datos (Cosas), haga clic en Realizar cambios en una cosa.
En la cosa a cambiar, haga clic en Tarea de la celda actual.
Haga clic en Cambiar otro campo. Haga clic en el campo de entrada para seleccionar el estado y escriba el número 5.
Cuando un usuario hace clic en este ícono, el campo de datos de estado de la tarea cambia de 0 a 5, pasando de incompleto a completo.
Parte 4: Pruebas
Es hora de probar y ver si todo está funcionando bien. Haga clic en el botón Vista previa en la parte superior derecha de la pantalla.
Se abrirá una nueva pestaña en su navegador, que le mostrará una vista previa de la aplicación final. Utilice esta ventana de vista previa para probar su aplicación. ¿Está funcionando bien el menú? ¿Puedes agregar, eliminar y marcar tareas como realizadas? Si es así, has completado todos los pasos con éxito. ¡Felicidades!
(Busque el depurador en la parte inferior de la pantalla. Puede usarlo para solucionar problemas dentro de su aplicación.
Próximos pasos
Esta es solo la base para una pequeña aplicación de productividad. Desde aquí, puedes agregar tantas nuevas funciones como quieras, mientras personalizas la apariencia sobre la marcha.
Ya sea que esté creando algo para usted, algo para su negocio o un producto o servicio completamente nuevo, Bubble y otros creadores de aplicaciones sin código del mercado le brindan las herramientas que necesita para crear una aplicación web potente y pulida sin una sola línea de código.
¿Quieres saber más? Explora la serie Cómo crear de Bubble y practica tus habilidades de creación de aplicaciones mientras replicas aplicaciones populares.
Lecturas relacionadas:
