IFCT083PO · App Inventor · Bloque 6

Aplicaciones del iPhone

Vamos a crear una app informativa usando ListView para mostrar la función de varias aplicaciones básicas de iPhone.

Label Image ListView Sound AfterPicking if / else if

1. ¿Qué vamos a crear?

Vamos a crear una app llamada Aplicaciones del iPhone.

El usuario tocará una aplicación en una lista y la app mostrará para qué sirve y un ejemplo de uso.

            La app permitirá:
            Mostrar varias aplicaciones básicas de iPhone en un ListView.
Seleccionar una aplicación directamente en pantalla.
Mostrar la función principal en un Label.
Mostrar un ejemplo de uso cotidiano.
Reproducir un sonido opcional al seleccionar una opción.

          

Aplicaciones que vamos a trabajar

Aplicación	Función principal
Safari	Navegar por Internet
Mapas	Buscar rutas y ubicaciones
Cámara	Hacer fotos y vídeos
Siri	Usar comandos de voz
Wallet	Pagos y tarjetas
Salud	Actividad física y bienestar

Esta actividad refuerza el apartado 6.3: aplicaciones básicas.

2. Diseño de la aplicación

APPS DEL IPHONE

📲

Selecciona una aplicación:

Safari

Mapas

Cámara

Siri

Wallet

Salud

Información:

Mapas
Sirve para buscar lugares, calcular rutas y recibir indicaciones para llegar a un destino.

Diseño recomendado

Título grande en la parte superior.
Imagen relacionada con iPhone o aplicaciones.
ListView con las aplicaciones básicas.
Label para mostrar la función principal.
Label para mostrar un ejemplo de uso.

Esta vez no usamos ListPicker. Usamos ListView para que todas las opciones se vean directamente en pantalla.

3. Componentes necesarios

Componente	Nombre recomendado	Función
Label	LabelTitulo	Muestra el título de la aplicación.
Image	ImageApps	Imagen decorativa relacionada con iPhone o aplicaciones.
Label	LabelPregunta	Indica al usuario que debe seleccionar una aplicación.
ListView	ListViewApps	Muestra la lista de aplicaciones: Safari, Mapas, Cámara, Siri, Wallet y Salud.
Label	LabelFuncion	Muestra para qué sirve la aplicación seleccionada.
Label	LabelEjemplo	Muestra un ejemplo de uso cotidiano.
Sound	Sound1	Reproduce un sonido al seleccionar una aplicación. Es opcional.

El componente más importante de esta actividad es el ListView.

4. Configura el ListView

Propiedad ElementsFromString

En el componente ListViewApps, configura la lista de elementos:

Safari,Mapas,Cámara,Siri,Wallet,Salud

También puedes escribir los elementos desde el editor de propiedades del ListView.

Importante

Los textos deben coincidir con los que usarás en los bloques.

Si escribes Cámara, luego debes comprobar Cámara.
Si escribes Camara sin tilde, también debes usarlo sin tilde en los bloques.
Evita cambiar espacios, tildes o mayúsculas sin revisar los bloques.

5. Diferencia entre ListPicker y ListView

ListPicker

Se muestra como un botón.
El usuario pulsa y se abre una lista.
Después se selecciona una opción.
Puede cambiar su texto con la opción elegida.

          ListView
          La lista está visible directamente en pantalla.
El usuario toca una opción.
Es muy útil para apps informativas.
El evento principal es AfterPicking.

        

La lógica es muy parecida: seleccionamos una opción y usamos condicionales para mostrar un resultado.

6. Bloques principales

Usaremos el evento ListViewApps.AfterPicking y una cadena de condicionales.

when ListViewApps.AfterPicking

    if ListViewApps.Selection = "Safari"
        set LabelFuncion.Text to "Safari permite navegar por Internet y consultar páginas web."
        set LabelEjemplo.Text to "Ejemplo: buscar información, entrar en Classroom o leer noticias."
        call Sound1.Play

    else if ListViewApps.Selection = "Mapas"
        set LabelFuncion.Text to "Mapas permite buscar lugares, calcular rutas y recibir indicaciones."
        set LabelEjemplo.Text to "Ejemplo: buscar una dirección o llegar a una academia."
        call Sound1.Play

    else if ListViewApps.Selection = "Cámara"
        set LabelFuncion.Text to "Cámara permite hacer fotografías y grabar vídeos."
        set LabelEjemplo.Text to "Ejemplo: hacer una foto de un documento o grabar un vídeo."
        call Sound1.Play

7. Bloques principales continuación

    else if ListViewApps.Selection = "Siri"
        set LabelFuncion.Text to "Siri permite controlar el iPhone mediante comandos de voz."
        set LabelEjemplo.Text to "Ejemplo: pedir una alarma, llamar a alguien o consultar el tiempo."
        call Sound1.Play

    else if ListViewApps.Selection = "Wallet"
        set LabelFuncion.Text to "Wallet permite guardar tarjetas, entradas y realizar pagos con el móvil."
        set LabelEjemplo.Text to "Ejemplo: pagar en una tienda o guardar una tarjeta de embarque."
        call Sound1.Play

    else if ListViewApps.Selection = "Salud"
        set LabelFuncion.Text to "Salud permite registrar datos de actividad física y bienestar."
        set LabelEjemplo.Text to "Ejemplo: contar pasos, revisar actividad o consultar datos del Apple Watch."
        call Sound1.Play

No hace falta usar un botón. La información aparece al tocar una opción del ListView.

8. Bloques paso a paso

Orden recomendado

1. when ListViewApps.AfterPicking

2. if ListViewApps.Selection = "Safari"

3. set LabelFuncion.Text to "Safari permite navegar..."

4. set LabelEjemplo.Text to "Ejemplo: buscar información..."

5. call Sound1.Play

6. else if para Mapas

7. else if para Cámara

8. else if para Siri, Wallet y Salud

Qué debes entender

El ListView muestra todas las opciones en pantalla.
El evento AfterPicking se ejecuta cuando seleccionas una opción.
Selection guarda el texto elegido por el usuario.
Cada else if comprueba una aplicación distinta.

9. Prueba la aplicación

☐ El ListView muestra Safari, Mapas, Cámara, Siri, Wallet y Salud.

☐ Al pulsar Safari aparece información sobre navegación web.

☐ Al pulsar Mapas aparece información sobre rutas y GPS.

☐ Al pulsar Cámara aparece información sobre fotos y vídeos.

☐ Al pulsar Siri aparece información sobre comandos de voz.

☐ Al pulsar Wallet aparece información sobre pagos y tarjetas.

☐ Al pulsar Salud aparece información sobre actividad física.

☐ El diseño se entiende bien y no hay errores al seleccionar opciones.

Prueba todas las opciones antes de entregar el ejercicio.

10. Documento Word para Classroom

Cuando termines la app, debes rellenar un documento de Word y subirlo a Google Classroom.

            El documento debe incluir:
            Nombre y apellidos.
Nombre de la aplicación.
Componentes utilizados.
Explicación breve de lo que hace la app.
Bloques principales escritos.
Pruebas realizadas.
Dificultades encontradas.

          

Preguntas que debes responder

¿Qué diferencia hay entre ListPicker y ListView?
¿Qué evento usamos en el ListView?
¿Qué aplicación sirve para navegar por Internet?
¿Qué aplicación sirve para buscar rutas?
¿Qué aplicación sirve para pagar o guardar tarjetas?
¿Qué aplicación te parece más útil y por qué?

Si puedes, añade una captura del diseño de tu aplicación.

11. Reto opcional para alumnos rápidos

Reto 1

Añade dos nuevas aplicaciones al ListView:

Notas
Calendario

Después añade dos nuevos else if para mostrar su función y un ejemplo de uso.

Reto 2

Añade un componente Notifier.

Cuando el usuario seleccione una app, muestra un aviso como este:

Has seleccionado: Safari

El reto es opcional. Primero debe funcionar la aplicación básica.

Fin de la actividad

ListView muestra las opciones directamente

Esta app repasa las aplicaciones básicas de iPhone y permite practicar un componente nuevo sin usar cálculos ni condicionales anidados.

Diseño terminado ListView configurado Bloques creados App probada Entrega en Classroom

Índice de páginas