3. AppInventor - Navegación y Listas

Vamos a comenzar a ver en más detalle cómo funcionan los bloques de programación y montar una navegación entre pantallas para nuestra app.

En cuanto un usuario abra la aplicación, el objetivo será mostrar una Lista de elementos si ya ha hecho login, si no le mostraremos la pantalla de Registro.

Ejemplo de Lista con App Inventor

1) Estructura

Lo más importante cuando creamos una aplicación es pensarla bien, pero también programarla de forma que sea flexible al cambio. Es imposible pensar la aplicación perfecta y luego no querer hacerle cambios a medida que la vamos creando, de hecho es algo común que se hace siempre!
El objetivo es pensarla lo mejor posible y luego crearla de forma que estemos abiertos a hacer cambios y mejoras sin que nos rompa la app entera.
Vamos a ver cómo.

Hasta ahora hemos creado una pantalla de Registro en la pantalla inicial de la aplicación (Screen1). 

Alguien del equipo investigando por internet, se ha dado cuenta que un 30% de nuevos usuarios ya no prueban una aplicación si se encuentran una pantalla de registro al abrir por primera vez la app! No queremos perder 1 de cada 3 nuevos usuarios qué podemos hacer?

• Crear un Onboarding explicando qué hace la aplicación.
• Dejarlos usar la aplicación y pedir registro solo cuando ya sea absolutamente necesario.

Cualquiera de esas 2 opciones es buena, pero tenemos un problema. Nuestra primera pantalla ya es el Registro! Tenemos que borrarlo todo :(

Para que esto no nos ocurra, dejaremos la (Screen1) SIEMPRE vacía y crearemos una pantalla distinta en app inventor para cada pantalla que haya en la aplicación. Esto nos permitirá modificar la navegación cuando queramos y seguir mejorando la aplicación sin romper nada hecho previamente.

Vamos a crear pues 2 nuevas pantallas en el App Inventor.

• Registro: Para registrar al usuario, será el mismo contenido que ya hemos creado.
• Principal: Nuestra pantalla principal, donde luego le pondremos un listado de elementos.

** Durante la fase de diseño de la aplicación es importante crear, aparte de las pantallas, la navegación entre ellas, el "navigation flow".

Recordad también de poner un nombre a las pantallas e intentar usar el mismo cuando las creéis en el AppInventor.

Este navigation flow es un poco complejo pero podéis usarlo como punto de partida y simplificarlo solo con las pantallas, nombres y flechas.

2) Navegación

Nuestra Screen1 ya ha quedado vacía, así que la usaremos como "router" para controlar el estado de la aplicación y decidir qué pantalla debe mostrarse primero.

# Bloque: Variables

La aplicación será distinta si hay un usuario o no, así que controlaremos ese estado con una variable global.

En el editor de bloques de la Screen1, creamos una nueva variable con nombre "hayUsuario" y al principio le ponemos el valor de false. Eso significa que cuando una nueva persona abra la app, tendrá que crearse un usuario. En ese momento (más adelante) le pondremos el valor de true.

Esto nos servirá para en todo momento saber si tenemos usuario disponible o no dentro de la aplicación.

Vamos pues a usarla. Hemos dicho que:

• Si hayUsuario (=verdadero / true): Mostramos una lista.
• Si NO hayUsuario (=falso / false): Mostramos el registro.

Esto que acabamos de decir es lo que se conoce como expresión "lógica booleana", es decir, que tiene 2 opciones. O lo uno, o lo otro -> Si / No.

Vamos a ver cómo se traduce esto en los bloques del AppInventor:

Aquí tenemos lo que hemos comentado antes traducido en bloques. Falta la parte anterior, que será:
Cuando se abra la aplicación > Cambia de pantalla >

• Si hay usuario
• Ves a la lista
• Si no
• Ves al Login

Los bloques quedarían pues de la siguiente manera:

Con esto ya no veremos más la Screen1, sino que al abrirse la app ya nos mandará al lugar correcto. 

Con el último bloque cerramos también la pantalla para que no se llegue a mostrar.

Como vemos, los cambios de pantalla se hacen con los bloques de Control y poniendo como Texto el nombre de la pantalla.

Esto lo podemos re-usar en botones o cualquier elemento que queramos para abrir una nueva pantalla.

Faltaría solo un paso previo de comprobar si realmente hay usuario (conectándonos a la base de datos) que veremos más adelante en el curso.

# Probando la navegación

La única forma de probar la navegación es instalando la app final en nuestro móvil (sin usar la app de AI2 Companion). Esto lo haremos generando el archivo .apk (equivalente de un .exe para windows, un instalador) y pasándolo a móvil por cable USB, correo, dropbox, etc.

3 ) Listas

Vamos a montar nuestra pantalla principal como un listado de países en Europa.
Para ello arrastraremos un VisorDeListas desde la Paleta al Visor.

Las listas tienen una Propiedad llamada "ElementosDesdeCadena" que permiten poner un seguido de palabras separadas por comas (,) que formarán la lista. Podemos añadir por ejemplo la siguiente lista:
Spain, France, Germany, Portugal, Italy, Switzerland, Ireland, Greece, Hungary, Poland, Prague, Slovenia, Lithuania, Norway, Finland, Sweeden

Finalmente en los bloques podemos ver qué país ha sido seleccionado, y abrir una nueva pantalla donde lo mostraremos en el mapa.

Enhorabuena por haber llegado hasta aquí. Ahora al principio puede parece todo muy complejo pero a medida que nos familiaricemos con App Inventor y conociendo sus estructuras básicas se irá haciendo más fácil.

Ánimos y adelante!