BreynGINE

Mi lista de tareas (app, en el móvil)

Esta es la versión para el móvil y la tablet (Android), con la interfaz táctil del editor. ¿Lo vas a hacer en el ordenador? Ve a la versión para ordenador.
Estás leyendo el tutorial en el navegador del móvil. En BreynGINE, ☰ > Ayuda > Tutoriales abre esta misma página y te ofrece copiar a tu proyecto los dibujos y sonidos que necesita; aquí también puedes descargarlos en ZIP.

Capítulo 1Lo que vas a hacer

En este tutorial vas a crear una app para el móvil, desde cero, sin escribir código y en el propio móvil: una lista de tareas de verdad. Podrás apuntar tareas, marcarlas como hechas, abrir cada una para añadirle notas, borrarlas (con una pregunta de confirmación), cambiar al modo oscuro y, al final, darle su propio icono e instalarla en tu móvil como una app más.

«Mis tareas»: la lista, una tarea abierta y el modo oscuro.
«Mis tareas»: la lista, una tarea abierta y el modo oscuro.

Usarás tres cosas de BreynGINE:

  • El modo App: pantallas con forma de móvil y el panel Componentes para montarlas a golpe de toque.
  • BreynFlow: las reglas que dan vida a la app («cuando se pulsa este botón, añade una tarea»).
  • El editor de Sprites, para dibujar el icono.

Es la versión del tutorial para la interfaz táctil del editor, con capturas del móvil. Si aún no conoces las pestañas de abajo (Escena, Vista, Inspector, Proyecto, Más), la barra de entornos y los gestos, mira el capítulo El editor en el móvil de Mi primer juego.

Consejo: las tareas se guardan solas en el móvil. Aunque cierres la app, siguen ahí la próxima vez. No tienes que programar nada para eso.

Capítulo 2Crea el proyecto

En el administrador de proyectos (lo que ves al abrir BreynGINE), toca Nuevo Proyecto.

1
En Nombre del proyecto escribe Mis tareas.
2
En Plantilla elige App vacía.
3
Toca Crear y el editor se abre con tu proyecto.
La plantilla «App vacía»: un proyecto de app con su primera pantalla.
La plantilla «App vacía»: un proyecto de app con su primera pantalla.
Consejo: la plantilla App: Lista de tareas, en la pestaña Tienda del administrador de proyectos, trae esta misma app ya hecha. Es perfecta para curiosear cuando termines, pero ahora aprenderás mucho más construyéndola tú.

Capítulo 3El modo App

Un proyecto de app tiene su propia forma de trabajar. Toca la pestaña Proyecto, abre la carpeta res:// con su flecha y toca dos veces home.tscn. Después toca Vista (y 2D en la barra de entornos, si no lo ves ya).

La pantalla de la app, dentro del marco de un móvil.
La pantalla de la app, dentro del marco de un móvil.
  • En la vista ves la pantalla dentro de un móvil. Debajo de las herramientas tienes el tamaño: Móvil, Móvil grande, Tablet u Ordenador, y un botón para girarlo. La app se adapta a todos.
  • En la pestaña Escena (la Jerarquía) está lo que forma la pantalla: Home (la pantalla), AppBar (la barra de arriba, con el título) y Content > Box, la columna donde van tus componentes.
  • El panel Componentes tiene los textos, botones, campos, listas... Un toque y se añaden a la pantalla.

Cambiar de panel

En la pestaña Escena hay más paneles que la Jerarquía: Inspector, Proyecto, Componentes, Ayuda... Para ir a uno, toca los tres puntos ⋮ de arriba a la derecha y elígelo en la lista.

Los tres puntos ⋮ llevan a cualquier panel; aquí, a Componentes.Los tres puntos ⋮ llevan a cualquier panel; aquí, a Componentes.
Los tres puntos ⋮ llevan a cualquier panel; aquí, a Componentes.
Consejo: los componentes se añaden dentro del seleccionado (si es una fila o una columna) o justo debajo (si es otra cosa). Si no hay nada seleccionado, van al final de la columna principal. Así que el truco en el móvil es: toca el objeto en la Jerarquía, cambia a Componentes con ⋮ y toca el componente.

Capítulo 4La pantalla de tareas

Primero, deja la pantalla en blanco. La plantilla trae un saludo que no necesitas:

1
En la Jerarquía, mantén el dedo sobre Title y elige Borrar. Haz lo mismo con Text.
2
Toca Home y, en el Inspector, cambia Title por Mis tareas. Es el título que sale en la barra de arriba.

La fila para escribir

Arriba irá un campo para escribir la tarea y, a su lado, un botón +. Para ponerlos uno al lado del otro se usa una Fila:

1
Toca Box en la Jerarquía, ve a Componentes (⋮) y toca Fila.
2
La fila queda seleccionada: toca Campo de texto. Se pone dentro de la fila.
3
Vuelve a la Jerarquía, toca la fila (Row) y, en Componentes, toca Botón.

Ahora dales nombre y forma. Para renombrar algo, mantén el dedo sobre él en la Jerarquía y elige Renombrar:

  • El campo de texto: llámalo NuevaTarea. En el Inspector, borra el Label y escribe Añade una tarea... en Placeholder (el texto gris que se ve cuando está vacío).
  • El botón: llámalo Añadir. Borra su Text y en Icon Name elige add (el símbolo +).
Consejo: los nombres importan: en las reglas verás «se pulsa Añadir» o «NuevaTarea está vacío». Con buenos nombres, las reglas se leen solas.

La lista

1
Toca Box otra vez y, en Componentes, Lista. Llámala Lista.
2
En el Inspector, rellena:
  • Collection: tasks. Es el nombre del «cajón» donde se guardan las tareas en el móvil (las piezas de BreynFlow usan tasks si no les dices otro).
  • Subtitle Field: notes, para ver las notas de cada tarea debajo de su título.
  • Check Field: done. Así cada tarea tiene su casilla de «hecha».
  • Activa Show Delete: cada tarea tendrá su papelera.
  • Empty Text: Nada que hacer. ¡Añade tu primera tarea! Es lo que se ve con la lista vacía.
  • Activa Newest First para que las nuevas salgan arriba.
La Jerarquía de la pantalla, y las propiedades de la Lista en el Inspector.La Jerarquía de la pantalla, y las propiedades de la Lista en el Inspector.
La Jerarquía de la pantalla, y las propiedades de la Lista en el Inspector.

Los «Elementos de ejemplo» solo salen en el editor, para que veas el diseño. En la app saldrán tus tareas. Guarda con 💾.

Capítulo 5Las reglas: añadir tareas

La pantalla ya está bonita, pero todavía no hace nada. Toca darle vida con BreynFlow.

1
Toca Home en la Jerarquía y, en Componentes, Reglas (BreynFlow) (está al final de la lista).
2
Ve a Vista y toca BreynFlow en la barra de entornos: ahí están las reglas de la pantalla. Toca Nueva regla y se abre el buscador de piezas.
El buscador de piezas. En un proyecto de app ves las piezas para apps y las de siempre.
El buscador de piezas. En un proyecto de app ves las piezas para apps y las de siempre.

Regla 1: añadir con el botón

3
Como evento, elige Interfaz > Se pulsa un botón (o escribe boton en el buscador) y toca Añadir a la regla.
4
La regla dice «Se pulsa este objeto». Toca ese recuadro resaltado para elegir el botón: se abre la ficha de la pieza.
5
Toca este objeto en la ficha y elige Un objeto de la escena.... En la ventana, toca Añadir y Aceptar.
La ficha de la pieza y la ventana para elegir el botón Añadir.La ficha de la pieza y la ventana para elegir el botón Añadir.
La ficha de la pieza y la ventana para elegir el botón Añadir.
6
Toca + Condición y elige Apps > El campo de texto está vacío. Elige NuevaTarea como campo y, en su menú ⋮, toca Invertir (NO): así la regla solo funciona si no está vacío. ¡Nada de tareas en blanco!
7
Toca + Acción y elige Apps > Añadir elemento. En título de elige NuevaTarea: la tarea se llamará como lo que hayas escrito. El campo se vacía solo después.
8
Otra acción: Apps > Mensaje corto, con el texto Tarea añadida.
9
Toca «Regla 1» (arriba de la regla) y llámala Añadir con el botón.
La primera regla terminada. Debajo, la explicación en palabras.
La primera regla terminada. Debajo, la explicación en palabras.

Reglas 2 y 3: Intro y papelera

En el móvil se escribe con el teclado de la pantalla, y mucha gente pulsa su botón Intro (✓) en vez del +. Haz una segunda regla igual que la primera, pero con el evento Apps > Se introduce un texto (campo NuevaTarea, «se confirma (Intro)»). Llámala Añadir con Intro.

Consejo: con el menú ⋮ de una regla puedes duplicarla y cambiar solo el evento. Mucho más rápido.

Y una tercera, para avisar al borrar: evento Apps > Elemento de lista (lista Lista, «se borra»), acción Mensaje corto con Tarea borrada. Llámala Borrada de la lista.

La regla «Borrada de la lista».
La regla «Borrada de la lista».

Guarda (💾).

Capítulo 6Pruébala

Toca ▶, arriba. La app se abre en su ventana, encima del editor.

1
Escribe Comprar pan y pulsa Intro en el teclado.
2
Escribe Llamar al dentista y toca el botón +.
3
Añade alguna más y marca la casilla de una tarea: queda tachada en gris, como hecha.
La app funcionando: tareas añadidas, una marcada y el mensaje «Tarea añadida».
La app funcionando: tareas añadidas, una marcada y el mensaje «Tarea añadida».

Ciérrala (■) y vuelve a tocar ▶: ¡las tareas siguen ahí! La lista las guarda sola en el dispositivo.

Consejo: si algo no va, mira la vista BreynFlow mientras la app está abierta: cada regla se ilumina cuando se cumple. Así ves enseguida cuál falla.

Capítulo 7Una pantalla para cada tarea

Ahora harás que, al tocar una tarea, se abra una pantalla para cambiar su nombre, escribir notas o borrarla.

1
En Componentes toca Nueva pantalla..., escribe tarea.tscn en Archivo y toca Guardar. Se crea y se abre una pantalla nueva, con su barra y su columna.
Nueva pantalla: solo hay que darle un nombre.
Nueva pantalla: solo hay que darle un nombre.
2
Toca Tarea (la pantalla) en la Jerarquía y pon Tarea en su Title.
3
Toca AppBar y, en Componentes, Botón: los botones de la barra se colocan a la derecha. Llámalo Borrar, borra su Text, en Icon Name elige delete y en Style elige Text (sin fondo).
4
Toca Box y añade un Campo de texto llamado Titulo, con Label Tarea y el Placeholder vacío.
5
Sin cambiar la selección, añade otro Campo de texto: se pone debajo. Llámalo Notas, con Label Notas y Placeholder Opcional.
6
Y un Botón debajo, llamado Guardar, con el texto Guardar.
La pantalla de una tarea.
La pantalla de una tarea.
Consejo: en las apps, la barra de arriba pone sola la flecha de volver atrás cuando llegas a una pantalla desde otra, y el botón Atrás del móvil también vuelve. No tienes que hacer nada.

Capítulo 8Las reglas de la pantalla Tarea

Añade Reglas (BreynFlow) a la pantalla Tarea (toca Tarea en la Jerarquía y el componente). Vas a hacer cuatro reglas, en la vista BreynFlow.

Mostrar la tarea

Cuando esta pantalla se abra, recibirá la tarea tocada en una variable llamada item. Sus datos se escriben entre llaves: {item.title} es el título e {item.notes} las notas.

  • Evento: Apps > Se muestra la pantalla.
  • Acción: Interfaz > Cambiar texto de Titulo a {item.title}.
  • Acción: Cambiar texto de Notas a {item.notes}.
La regla «Mostrar la tarea».
La regla «Mostrar la tarea».

Guardar

  • Evento: Se pulsa un botón (Guardar).
  • Condición: NO Titulo está vacío.
  • Acciones: Apps > Leer un campo de texto (Titulo en title), otra igual (Notas en notes), Apps > Cambiar elemento con title = {title} y notes = {notes}, un Mensaje corto Guardada y Apps > Volver atrás.
La regla «Guardar».
La regla «Guardar».

Sin título no se guarda

Si alguien borra el título y pulsa Guardar, mejor avisarle:

  • Evento: Se pulsa un botón (Guardar). Condición: Titulo está vacío (esta vez sin NO).
  • Acción: Objetos > Cambiar propiedad de Titulo: propiedad error, valor Escribe la tarea primero. El campo se pone en rojo con ese mensaje.

Borrar, preguntando antes

  • Evento: Se pulsa un botón (Borrar, el de la barra).
  • Acción: Apps > Preguntar al usuario, con el título ¿Borrar esta tarea?, el texto No se puede deshacer. y los botones Borrar y Cancelar. La respuesta se guarda en answer (verdadero si pulsa Borrar).
  • Acción: Lógica > Si / si no. Dentro, toca + Condición y elige Comparar variable: answer igual a true. Y en «entonces», con su + Acción: Apps > Borrar elemento, Mensaje corto Tarea borrada y Volver atrás.
La regla «Borrar»: pregunta, y solo si la respuesta es sí, borra.
La regla «Borrar»: pregunta, y solo si la respuesta es sí, borra.

Guarda (💾).

Capítulo 9Abrir una tarea desde la lista

Vuelve a la pantalla home (su pestaña, arriba de la vista) y añade una regla más a sus reglas:

  • Evento: Apps > Elemento de lista (Lista, «se toca»).
  • Acción: Apps > Ir a una pantalla: elige tarea.tscn y, en enviando, escribe item = {item}. Así la pantalla Tarea recibe la tarea tocada.
«Abrir una tarea»: al tocar un elemento, va a la pantalla Tarea y le envía la tarea.
«Abrir una tarea»: al tocar un elemento, va a la pantalla Tarea y le envía la tarea.

Guarda y toca ▶. Toca una tarea, escribe una nota y toca Guardar:

La pantalla de una tarea, con su nota, y la lista al volver.
La pantalla de una tarea, con su nota, y la lista al volver.

Capítulo 10Ajustes y modo oscuro

Las apps de hoy tienen modo oscuro. La tuya también lo tendrá, en una pantalla de ajustes.

El botón de ajustes

1
En la pantalla home, toca AppBar y añade un Botón. Llámalo Ajustes, sin texto, con Icon Name settings y Style Text.
2
Añade una regla a home: Se pulsa un botón (Ajustes) → Ir a una pantalla ajustes.tscn. (Aún no existe: la crearás ahora mismo.)

La pantalla de ajustes

1
Nueva pantalla... con el nombre ajustes.tscn. Pon Ajustes en su Title.
2
Toca Box y añade, en este orden: un Interruptor llamado ModoOscuro con el texto Modo oscuro, un Separador, un Botón con borde llamado BorrarTodo con el texto Borrar todas las tareas y un Texto pequeño con Hecho con BreynGINE (centrado con Horizontal Alignment).
La pantalla de ajustes.
La pantalla de ajustes.
3
Añádele Reglas (BreynFlow) con estas tres:
  • Mostrar el modo actual: Se muestra la pantalla, condición Apps > El modo oscuro está activado, acción Cambiar propiedad de ModoOscuro: button_pressed = true. Así el interruptor sale encendido si ya estaba en modo oscuro.
  • Modo oscuro: Se pulsa un botón (ModoOscuro) → Apps > Modo oscuro (cambiar). La app recuerda la elección.
  • Borrar todo: Se pulsa un botón (BorrarTodo) → Preguntar al usuario ¿Borrar todas las tareas? → Si / si no con answer igual a true, y dentro Borrar elemento con la opción todos activada y un Mensaje corto Tareas borradas.
La regla «Borrar todo»: la misma idea que borrar una tarea, pero con «todos».
La regla «Borrar todo»: la misma idea que borrar una tarea, pero con «todos».

Guarda todo y pruébala: toca el botón de ajustes, enciende el modo oscuro y vuelve atrás.

Los ajustes, la lista en modo oscuro y la pregunta antes de borrar.
Los ajustes, la lista en modo oscuro y la pregunta antes de borrar.

Capítulo 11Tu color

El azul está bien, pero la app es tuya. El color principal (botones, casillas, iconos) se cambia en un sitio:

1
Toca ☰ > Proyecto > Configuración del proyecto...
2
Escribe color de acento en el buscador y toca Tema, en BreynApp.
3
Toca la barra de Color de Acento y elige el que quieras (o escribe su código en Hex). Aquí, un verde: 1f9d6b.
El color de acento, y la misma pantalla, ahora en verde.El color de acento, y la misma pantalla, ahora en verde.
El color de acento, y la misma pantalla, ahora en verde.
Consejo: en esa misma sección, Modo decide si la app sigue el modo del móvil (claro u oscuro), o va siempre clara u oscura.

Capítulo 12El icono, y a tu móvil

Lo último: que tu app tenga su icono y esté en tu móvil como una app más.

Dibuja el icono

1
En Vista, ve a Sprites y toca Nuevo sprite...: uno de 24 x 24 llamado icono.
2
Dibújalo con el dedo. Aquí, una hoja con tres casillas: dos marcadas (verdes) y una sin marcar.
3
Desliza la fila de arriba y toca Icono de app.... Elige el color de Fondo (el mismo verde) y el Margen, y mira la vista previa.
El icono en Sprites, y la ventana «Icono de la app».El icono en Sprites, y la ventana «Icono de la app».
El icono en Sprites, y la ventana «Icono de la app».
4
Toca Crear icono. Se guarda en res://app_icon en todos los tamaños que pide Android (también el icono adaptable de los móviles nuevos) y pasa a ser el icono del proyecto.

Instálala en tu móvil

1
En Componentes, toca Generar APK... (o ☰ > Proyecto > Herramientas > Generar APK (Android)...).
2
Revisa el Nombre de la app (el que sale bajo el icono) y el Paquete (un nombre único: com.tuempresa.mistareas), deja marcado Instalarlo en este móvil cuando esté listo y toca Generar.
3
La primera vez, BreynGINE descarga las plantillas de exportación y sigue solo. Al terminar, Android te pregunta si quieres instalarla: acepta (la primera vez, permite que BreynGINE instale apps).

¡Ya tienes Mis tareas entre tus apps, con tu icono! El APK queda en la carpeta build del proyecto, por si quieres enviárselo a alguien.

Capítulo 13Y ahora, ¿qué?

¡Has hecho una app completa, en el móvil! Con tres pantallas, datos que se guardan solos, preguntas de confirmación, modo oscuro, tu color y tu icono. Ideas para seguir:

  • Añade una fecha a cada tarea: otro campo en la pantalla Tarea, y date = {date} en Cambiar elemento.
  • Muestra cuántas tareas quedan: la condición Número de elementos y un texto con Cambiar texto.
  • Pon un Botón flotante (el redondo de abajo a la derecha) en vez de la fila de arriba.
  • Explora la plantilla App: Multimedia de la Tienda: vídeo, web, música y la cámara, también sin código.
  • Mira Ver como código en las reglas, por si un día te pica la curiosidad de programar.

Y si quieres hacer un programa para el ordenador, con base de datos, facturas y PDF, sigue con el tutorial de facturación.

¡A organizarse!

← Todos los tutoriales