BreynGINE

Mi lista de tareas (app para el móvil)

Estás leyendo el tutorial en la web. En el editor del ordenador está en Ayuda > Tutoriales, al lado de tu proyecto. Los enlaces que en el editor copian dibujos y sonidos a tu proyecto, aquí los descargan en ZIP; en el móvil, BreynGINE te ofrece copiarlos al abrir el tutorial.

Capítulo 1Lo que vas a hacer

En este tutorial vas a crear una app para el móvil, desde cero y sin escribir código: 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 y crear el instalable para Android.

«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 clic.
  • 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.
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.

Si ya hiciste el tutorial de bienvenida, muchas cosas te sonarán (la Jerarquía, el Inspector, las reglas). Si no, no pasa nada: aquí se explica todo paso a paso.

Capítulo 2Crea el proyecto

Abre el Administrador de proyectos (lo que ves al abrir BreynGINE) y pulsa + Crear.

1
En Nombre del proyecto escribe Mis tareas.
2
Elige la carpeta donde guardarlo con Examinar.
3
En Plantilla elige App vacía.
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.
4
Pulsa Crear y el editor se abre con tu proyecto.
Consejo: la plantilla App: Lista de tareas, de la pestaña Tienda de Assets 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. Haz doble clic en home.tscn en el panel Proyecto (abajo a la izquierda) y pulsa 2D arriba si no lo ves ya.

La primera pantalla de la app, dentro del marco de un móvil.
La primera pantalla de la app, dentro del marco de un móvil.
  • En el centro ves la pantalla dentro de un móvil. Arriba 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 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.
  • Abajo a la derecha está el panel Componentes: textos, botones, campos, listas... Un clic y se añaden a la pantalla.
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.

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, haz clic en Title y luego, con Ctrl pulsado, en Text.
2
Pulsa la tecla Supr y confirma con Borrar.
Los dos textos de ejemplo, a punto de borrarse.
Los dos textos de ejemplo, a punto de borrarse.
3
Haz clic en 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
Selecciona Box en la Jerarquía y pulsa Fila en el panel Componentes.
2
Con la fila seleccionada, pulsa Campo de texto. Se pone dentro de la fila.
3
Vuelve a seleccionar la fila (Row) y pulsa Botón.

Ahora dales nombre y forma. Para renombrar algo, haz doble clic sobre él en la Jerarquía (o selecciónalo y pulsa F2):

  • 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 +).
La fila: el campo de texto y el botón con el icono +.
La fila: el campo de texto y el botón con el icono +.
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
Selecciona Box otra vez y pulsa 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 lista, con tres elementos de ejemplo para que veas cómo quedará.
La lista, con tres elementos de ejemplo para que veas cómo quedará.

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

Guarda con Ctrl+S.

Capítulo 5Las reglas: añadir tareas

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

1
Selecciona Home y pulsa Reglas (BreynFlow) en el panel Componentes (está al final de la lista).
2
En el Inspector aparece el editor de reglas. Pulsa 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 y pulsa Añadir a la regla.
4
La regla dice «Se pulsa este objeto». Haz clic en ese recuadro resaltado para elegir el botón.
Al hacer clic en un valor resaltado se abre la ficha de la pieza.
Al hacer clic en un valor resaltado se abre la ficha de la pieza.
5
Pulsa este objeto en la ficha y elige Un objeto de la escena.... En la ventana, elige Añadir.
Eligiendo el botón Añadir.
Eligiendo el botón Añadir.
6
Pulsa + Condición y elige Apps > El campo de texto está vacío. Elige NuevaTarea como campo y, en su menú ⋮, pulsa Invertir (NO): así la regla solo funciona si no está vacío. ¡Nada de tareas en blanco!
7
Pulsa + 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
Haz clic en «Regla 1» (arriba de la regla) y llámala Añadir con el botón.
La primera regla terminada, en la pantalla BreynFlow. Debajo, la explicación en palabras.
La primera regla terminada, en la pantalla BreynFlow. Debajo, la explicación en palabras.
Consejo: la pantalla BreynFlow (arriba, junto a 2D y 3D) enseña todas las reglas de la pantalla abierta, con más espacio que el Inspector. Puedes editarlas desde ahí.

Reglas 2 y 3: Intro y papelera

Mucha gente escribe y pulsa Intro en vez del botón. 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.

Las tres reglas de la pantalla de tareas.
Las tres reglas de la pantalla de tareas.

Guarda (Ctrl+S).

Capítulo 6Pruébala

Pulsa ▶ (arriba a la derecha, o F5). La app se abre en una ventana con el tamaño de un móvil.

1
Escribe Comprar pan y pulsa Intro.
2
Escribe Llamar al dentista y pulsa 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».

Cierra la ventana y vuelve a pulsar ▶: ¡las tareas siguen ahí! La lista las guarda sola en el dispositivo.

Consejo: si algo no va, mira la pantalla 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 el panel Componentes pulsa Nueva pantalla..., escribe tarea.tscn y pulsa 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
Selecciona Tarea (la pantalla) y pon Tarea en su Title.
3
Selecciona AppBar y pulsa 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
Selecciona 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. No tienes que hacer nada.

Capítulo 8Las reglas de la pantalla Tarea

Añade Reglas (BreynFlow) a la pantalla Tarea (selecciona Tarea y pulsa el componente). Vas a hacer cuatro reglas.

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}.

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.
«Mostrar la tarea» y «Guardar».
«Mostrar la tarea» y «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, pulsa + 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 (Ctrl+S).

Capítulo 9Abrir una tarea desde la lista

Vuelve a la pantalla home (su pestaña, arriba) 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 pulsa ▶. Toca una tarea, escribe una nota y pulsa 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, selecciona 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
Selecciona 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: pulsa 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
Abre Proyecto > Configuración del proyecto.
2
Escribe acento en el buscador y elige la sección BreynApp > Tema.
3
Pulsa en Color de Acento y elige el que quieras. Aquí, un verde.
El color de acento, en la Configuración del proyecto.
El color de acento, en la Configuración del proyecto.

Al cerrar, la pantalla del editor ya sale con el color nuevo, y la app también.

La misma pantalla, ahora en verde.
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 el APK

Lo último: que tu app tenga su icono en el móvil y crear el archivo para instalarla.

Dibuja el icono

1
Ve a la pantalla Sprites (arriba) y pulsa Nueva...: un sprite de 24 x 24 llamado icono.
2
Dibuja tu icono. Aquí, una hoja con tres casillas: dos marcadas (verdes) y una sin marcar.
El icono, dibujado en el editor de Sprites.
El icono, dibujado en el editor de Sprites.
3
Pulsa Icono de app.... Elige el color de Fondo (el mismo verde) y el Margen, y mira la vista previa.
La ventana «Icono de la app», con la vista previa.
La ventana «Icono de la app», con la vista previa.
4
Pulsa 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.

Genera el APK

Pulsa Generar APK... en el panel Componentes.

La ventana «Generar APK (Android)», con el icono ya elegido.
La ventana «Generar APK (Android)», con el icono ya elegido.
  • Nombre de la app: el que sale bajo el icono.
  • Paquete: un nombre único para las tiendas (com.tuempresa.mistareas).
  • Versión de prueba (debug): déjalo marcado mientras pruebas. Para publicar, desmárcalo.
  • Instalar y abrir en el móvil (USB): con el móvil conectado, la instala y la abre sola.

Pulsa Generar y tendrás el APK en la carpeta build del proyecto.

Consejo: la primera vez, BreynGINE te dirá si le falta algo para Android (las plantillas o el SDK) y cómo conseguirlo.

Capítulo 13Y ahora, ¿qué?

¡Has hecho una app completa! 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 de Assets: 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