Aplicación: Calculador de Compras

Funcionalidad Principal:

1. Pantalla 1 (Selección de Productos):
• Mostrar una lista de productos.
• Cada producto tendrá un nombre, un precio y un Checkbox asociado.
• Un botón para "Calcular Total".
2. Pantalla 2 (Resumen y Total):
• Mostrar una lista de los productos seleccionados con sus precios.
• Mostrar el precio total de los productos seleccionados.
• Un botón para "Volver" a la pantalla anterior.

---

Diseño de la Interfaz de Usuario (Designer)

Pantalla 1: Screen1 (Selección de Productos)

1. Componentes Básicos:
• VerticalScrollArrangement: (Desde Layout) Arrastra este componente al visor. Esto nos permitirá tener muchos productos y que la pantalla sea desplazable si es necesario. Dentro de este, colocaremos el resto de los componentes.
• Label: Un título, por ejemplo, "Seleccione sus Productos".
• Varios HorizontalArrangement: (Desde Layout) Uno para cada producto. Dentro de cada HorizontalArrangement irán:
• Checkbox: Para seleccionar el producto.
• Label: Para el nombre del producto (ej. "Laptop").
• Label: Para el precio del producto (ej. "Precio: $800").
2. Ejemplo de estructura para un producto (repetir para cada producto):
• Dentro del VerticalScrollArrangement:
• HorizontalArrangement1 (para Producto 1)
• Checkbox1 (Propiedad Text vacía)
• Label1 (Propiedad Text: "Laptop")
• Label2 (Propiedad Text: "$800.00")
• HorizontalArrangement2 (para Producto 2)
• Checkbox2 (Propiedad Text vacía)
• Label3 (Propiedad Text: "Smartphone")
• Label4 (Propiedad Text: "$450.00")
• (... y así sucesivamente para cada producto)
3. Botón:
• Button1: (Desde User Interface) Propiedad Text: "Calcular Total". Colócalo al final de la lista de productos, fuera de los HorizontalArrangement de productos, pero dentro del VerticalScrollArrangement principal.
4. Componente No Visible:
• TinyDB: (Desde Storage) Arrastra este componente. Es crucial para pasar los datos de los productos seleccionados de una pantalla a otra. No tiene propiedades visuales.

Pantalla 2: Screen2 (Resumen y Total)

1. Componentes Básicos:
• VerticalScrollArrangement: Para que la lista de productos seleccionados sea desplazable.
• Label: Un título, por ejemplo, "Productos Seleccionados".
• Label: Para mostrar la lista de productos seleccionados y sus precios (lo llamaremos LabelProductosSeleccionados).
• Label: Para el total final (lo llamaremos LabelTotal). Propiedad Text: "Total: $0.00".
• Button1: Propiedad Text: "Volver".

---

Programación por Bloques (Blocks Editor)

Screen1 Bloques:

Necesitaremos una forma de almacenar la información de los productos (nombre y precio) y una forma de recopilar los productos seleccionados.

1. Inicialización de variables:

• Crea una variable global para almacenar los datos de los productos (una lista de listas).
• Crea una variable global para almacenar los productos seleccionados (una lista vacía).

Fragmento de código

// Variables de inicialización

initialize global productos_disponibles to

  make a list

    (make a list "Laptop" 800)

    (make a list "Smartphone" 450)

    (make a list "Tablet" 300)

    (make a list "Smartwatch" 150)

    // Agrega más productos aquí siguiendo el mismo patrón

initialize global productos_seleccionados to

  make a list

2. Asignar precios a los Checkboxes (opcional pero bueno para la lógica):

No podemos asociar el precio directamente a un Checkbox. Lo que haremos es que cuando el usuario marque un Checkbox, buscaremos en nuestra lista productos_disponibles el producto correspondiente.

3. Lógica del Botón "Calcular Total":

Cuando se haga clic en Button1 (Calcular Total):

• Recorre todos los Checkbox en la pantalla.
• Si un Checkbox está marcado (.Checked es true):
• Identifica qué producto es (esto requiere un poco de lógica, podrías usar una lista de componentes Checkbox y sus índices para relacionarlos con productos_disponibles).
• Agrega el nombre y precio de ese producto a la lista productos_seleccionados.
• Guarda la lista productos_seleccionados en TinyDB.
• Abre Screen2.

Vamos a simplificar la lógica de asociación de Checkbox a producto, que es la parte más "complicada" sin crear demasiados bloques repetidos.

Estrategia para Screen1:

En lugar de asociar cada Checkbox individualmente en los bloques, podemos recorrer todos los componentes del VerticalScrollArrangement y verificar si son Checkbox.

Fragmento de código

// Bloques para Screen1

 

// Evento: Cuando Button1.Click

when Button1.Click do

  // Limpiar la lista de productos seleccionados antes de volver a llenarla

  set global productos_seleccionados to make a list

 

  // Recorrer los HorizontalArrangements (donde están los productos)

  // Esta es una forma simplificada. Si tienes muchos productos,

  // deberías considerar un componente como ListView o Dynamic Components

  // que harían esto más escalable.

  // Pero para un número fijo y manejable de productos con Checkbox manuales,

  // podemos hacerlo así:

 

  // Para Producto 1 (Laptop)

  if Checkbox1.Checked then

    add items to list global productos_seleccionados

      list

        (get item (get global productos_disponibles) index 1) // Obtiene el primer producto (Laptop, 800)

  end if

 

  // Para Producto 2 (Smartphone)

  if Checkbox2.Checked then

    add items to list global productos_seleccionados

      list

        (get item (get global productos_disponibles) index 2) // Obtiene el segundo producto (Smartphone, 450)

  end if

 

  // Repite este patrón para cada Checkbox/producto que tengas:

  // if CheckboxN.Checked then

  //   add items to list global productos_seleccionados

  //     list

  //       (get item (get global productos_disponibles) index N)

  // end if

 

  // Guardar la lista de productos seleccionados en TinyDB

  call TinyDB1.Store tag "productosSeleccionados" value (get global productos_seleccionados)

 

  // Abrir Screen2

  open another screen screenName "Screen2"

Consideraciones para la escalabilidad en Screen1 (si tienes muchos productos):

Si tuvieras muchos productos y no quisieras arrastrar 100 Checkbox y Label manualmente, la solución más avanzada sería usar:

• ListView: Pero no tiene Checkbox nativos para selección múltiple.
• Extensiones de Dynamic Components: Esto te permitiría crear los HorizontalArrangement, Checkbox y Label programáticamente. Sería la forma más limpia y escalable, pero añade una capa de complejidad inicial (instalar la extensión, aprender sus bloques).
• VerticalScrollArrangement y luego iterar sus hijos: Puedes usar Any Component para recorrer todos los Checkbox dentro de un Arrangement y verificar su estado. Esto requiere un poco más de bloques pero es más dinámico.

Por ahora, para mantenerlo sencillo, usaremos el enfoque de Checkbox individuales y su lógica explícita.

Screen2 Bloques:

1. Inicialización de Pantalla: Cuando Screen2 se inicializa (Screen2.Initialize):
• Recupera la lista de productos seleccionados de TinyDB.
• Inicializa una variable local para el total en 0.
• Inicializa una variable local para el texto_resumen (donde construiremos la lista de productos y sus precios).
• Recorre la lista de productos_seleccionados.
• Por cada producto:
• Obtén el nombre del producto (primer elemento de la sublista).
• Obtén el precio del producto (segundo elemento de la sublista).
• Suma el precio al total.
• Añade el nombre y precio al texto_resumen (ej. "Laptop: $800\n").
• Establece el LabelProductosSeleccionados.Text con el texto_resumen.
• Establece el LabelTotal.Text con "Total: $" y el valor del total.
2. Botón "Volver": Cuando se haga clic en Button1 (Volver):
• Cerrar la pantalla actual y volver a Screen1.

Fragmento de código

// Bloques para Screen2

 

// Evento: Cuando Screen2.Initialize

when Screen2.Initialize do

  // Recuperar la lista de productos seleccionados de TinyDB

  local productos_seleccionados_cargados = call TinyDB1.GetValue tag "productosSeleccionados" valueIfTagNotThere (make a list)

 

  local total = 0

  local texto_resumen = ""

 

  // Recorrer la lista de productos seleccionados

  for each item in list local productos_seleccionados_cargados do

    local nombre_producto = get item (get item from list local productos_seleccionados_cargados index 1) index 1 // Asume que cada item es una lista [nombre, precio]

    local precio_producto = get item (get item from list local productos_seleccionados_cargados index 1) index 2

 

    // Sumar al total

    set local total to (get local total) + (get local precio_producto)

 

    // Construir el texto de resumen

    set local texto_resumen to join

      (get local texto_resumen)

      (get local nombre_producto)

      ": $"

      (get local precio_producto)

      "\n" // Salto de línea para cada producto

  end for

 

  // Mostrar el resumen de productos

  set LabelProductosSeleccionados.Text to get local texto_resumen

 

  // Mostrar el total

  set LabelTotal.Text to join "Total: $" (format as decimal (get local total) 2) // Formatear a 2 decimales

 

// Evento: Cuando Button1 (Volver).Click

when Button1.Click do

  close screen

---

Pasos para Construirlo en App Inventor:

1. Abre tu proyecto en App Inventor.
2. Crea Screen1:
• Arrastra los Layouts (VerticalScrollArrangement, HorizontalArrangement).
• Arrastra los User Interface (Label, Checkbox, Button).
• Configura las propiedades de Text y Hint según sea necesario.
• Arrastra el TinyDB desde Storage.
3. Crea Screen2:
• Haz clic en "Add Screen..." en la barra de herramientas superior. Nómbrala Screen2.
• Arrastra los Layouts (VerticalScrollArrangement).
• Arrastra los User Interface (Label, Button).
• Configura las propiedades.
4. Cambia al editor de bloques (Blocks).
5. Programa Screen1:
• Declara las variables globales.
• Arrastra el bloque when Button1.Click do.
• Implementa la lógica para verificar los Checkbox y agregar a la lista.
• Usa los bloques TinyDB1.Store y open another screen.
6. Programa Screen2:
• Arrastra el bloque when Screen2.Initialize do.
• Implementa la lógica para TinyDB1.GetValue, recorrer la lista, sumar y mostrar.
• Arrastra el bloque when Button1.Click do (el de Screen2) y usa close screen.

---

¡Consejos Adicionales!

• Nombres de componentes: Es una buena práctica renombrar tus componentes (ej. CheckboxLaptop, LabelPrecioLaptop, ButtonCalcular) para que tus bloques sean más fáciles de leer y mantener.
• Pruebas: Usa el compañero de App Inventor (AI Companion) o un emulador para probar tu aplicación a medida que avanzas. ¡No esperes hasta el final!
• Formato de dinero: Puedes usar bloques de texto para formatear los precios a dos decimales o agregar el símbolo de moneda ($).

 

Esta actividad es solo para 3er Año, Sección B

Nota importante: deben ir haciendo esta aplicación en sus plataformas de App Inventor; esto debe estar listo el dia viernes, 06 de Junio de 2025.