My app inventor

1. Introducción

En este proyecto he desarrollado una aplicación en MIT App Inventor que combina dos funcionalidades principales:

• Un gestor de tareas (To-Do List)
• Un temporizador (Timer)

El objetivo de la app es mejorar la productividad del usuario permitiéndole organizar tareas mientras controla el tiempo.

2. Diseño de la interfaz (Designer)

Primero diseñé la interfaz en el apartado Designer.

Estructura general:

• Un contenedor principal (Vertical Arrangement)
• Parte superior:
  • Etiqueta con el tiempo restante (Timeleft)
  • Botón “+” para añadir tareas
• Parte central:
  • Espacio donde se muestran las tareas
  • Parte inferior:
  • Botones para cambiar entre:
    • TO-DO
    • TIMER

Para organizar todo utilicé:

• Horizontal Arrangement
• Vertical Arrangement
• Labels
• Buttons

Para que las tareas no se pierdan al cerrar la app, utilicé TinyDB: Es un componente que guarda datos de forma permanente, incluso si se cierra la aplicación

• Creé una lista global → global listaTareas
• Cuando se añade/modifica algo:
  • Uso TinyDB.StoreValue
• Cuando se abre la app:
  • Uso TinyDB.GetValue

3. Inicialización (Screen.Initialize)

Cuando se inicia la app:

1. Cargo las tareas guardadas desde TinyDB
2. Si no hay datos, creo una lista vacía
3. Muestro las tareas en pantalla
4. Inicializo el temporizador (ej: 45:00)

4. Añadir tareas (Botón +)

Cuando el usuario pulsa el botón “+”:
Bloques utilizados:

• ButtonAdd.Click
• Notifier.ShowTextDialog

Funcionamiento:

1. Se abre un cuadro de texto
2. El usuario escribe la tarea
3. Se añade a la lista
4. Se guarda en TinyDB
5. Se actualiza la interfaz

5. Mostrar tareas

Para mostrar las tareas:
Uso:

• Bucles (for each item)
• Listas
  Qué hago:
• Recorro la lista de tareas
• Creo elementos visuales dinámicamente
• Los muestro en el contenedor

6. Editar tareas

Cada tarea tiene un botón de editar.

1. Detecto qué tarea se ha pulsado
2. Abro un diálogo con el texto actual
3. El usuario lo modifica
4. Sustituyo el valor en la lista
5. Guardo en TinyDB

7. Eliminar tareas

Cada tarea también tiene botón de borrar.

1. Obtengo el índice de la tarea
2. La elimino de la lista
3. Actualizo TinyDB
4. Refresco la pantalla

8. Temporizador (Clock)

Para el temporizador uso el componente Clock.
Bloques clave:

• Clock.Timer
• Variables de tiempo

9. Formato del tiempo

• Divido segundos entre 60 → minutos
• Uso módulo → segundos
• Uno los valores en texto

10. Cambio de pantalla (TO-DO / TIMER)

No uso pantallas diferentes, sino pantallas virtuales.

• Uso set Visible true/false
  Ejemplo:
• Mostrar TO-DO → ocultar TIMER
• Mostrar TIMER → ocultar TO-DO

11. Notificaciones y sonido

Cuando el tiempo llega a 0:

• Notifier
• Sound
  Qué ocurre:
• Suena una alerta
• Se muestra mensaje