4. AppInventor - Onboarding y Permisos

En el apartado de navegación vimos el concepto de Onboarding, es decir, introducir al usuario a nuestra aplicación, explicándole qué hace y cómo usarla.

Vamos a ver un ejemplo de Onboarding que aprovecharemos también para pedir algunos datos.

1) Composición

Cada pantalla que queramos hacer de onboarding será una pantalla distinta en AppInventor, aunque como vemos en el ejemplo de arriba serán muy parecidas.
Como recomendación, cada pantalla debería consistir de:

- Una Imagen: que tenga relación con el contenido a explicar.

- Texto: explicando la funcionalidad al usuario

- Navegación: botones para ir a la siguiente pantalla / saltarse el onboarding / continuar a la app.

2) Ejemplo y Disposición:

La primera pantalla del Onboarding (para una app que muestra países europeos) podría ser algo así:

Aquí vemos una imagen descriptiva en relación a la app y la explicación de lo que encontrarán los usuarios.

Abajo del todo vemos un botón a la izquierda para "Saltar" el Onboarding e ir directamente a la aplicación, y a la derecha una flecha para seguir a la siguiente pantalla del Onboarding.

Aquí la dificultad reside en posicionar correctamente los elementos en distintas cajitas (Disposiciones Verticales/Horizontales) y ponerles el tamaño adecuado (Ajustar al contenedor o Porcentaje).

Os muestro como han quedado los elementos para la pantalla anterior:

# Truco:

Si os fijáis, el texto de abajo de la imagen es 1 solo texto, pero tiene 2 lineas. Para hacer un salto de linea en una Etiquieta del App Inventor, debemos:

- Seleccionarla y marcar la casilla de HTMLFormat en propiedades:

- En el texto, usar <br> para indicar dónde debe saltar a una nueva línea. Sería el equivalente a un punto y aparte.

3) Código y Procedimientos

En la parte de código solamente tendremos que hacer un cambio de pantalla:

- A la pantalla Onboarding2 si el usuario le da a "Siguiente".

- A la pantalla  Principal (o Registro) si el usuario decide "Saltarse" el onboarding.

Para ello deberemos abrir la nueva pantalla y cerrar la anterior.

Como ya sabemos, pondremos por lo tanto un bloque de "Boton Siguiente .clic" y dentro los bloques de "abrir pantalla" y "cerrar".

El problema que nos encontramos es que el bloque de abrir nueva pantalla no tiene flechita para seguir con el bloque de cerrar pantalla!
Para solucionar esto usaremos procedimientos.

#Procedimientos 

Los Procedimientos son un conjunto de bloques que nosotros agrupamos bajo un nombre y que podemos re-usar en la misma pantalla solamente con llamarlos por el nombre del grupo que hemos elegido.

En programación, los procedimientos se conocen como funciones, un conjunto de código que hace una función específica.

En los bloques, hay una sección de procedimientos, y vamos a crear 2; uno para "Abrir Pantalla" y otro para "Cerrar Pantalla". Quedarían así:

Como vemos, el procedimiento de Abrir_Pantalla tiene una "x". Esto se llama un parámetro. 

Sirve para poder conectar en horizontal el bloque que necesitemos para ese procedimiento.

Por ejemplo, para abrir pantalla necesitamos el nombre de la pantalla, así que se lo añadimos como una "x" al procedimiento. Cada vez que lo usemos le diremos qué valor será esa x.

La x la podemos añadir/quitar a través del engranaje azul del bloque.

Ahora que tenemos los procedimientos listos, podemos usarlos dentro de los .Click de los botones. El resultado sería algo así:

4) Permisos

Otra utilidad que pueden tener las pantallas de Onboarding, es el de pedir permisos al usuario.

Por ejemplo, si en nuestra aplicación hay un mapa con la posición del usuario, se lo podemos explicar en una pantalla de Onboarding pidiéndole permiso.
En cuanto apriete el botón de siguiente, se lo pediremos de la siguiente manera:

El bloque de arriba pide el permiso "ACCESS_FINE_LOCATION", que es el necesario para poder obtener la localización del usuario (GPS).
Vemos que esos bloques deben conectar con algún otro por arriba, podríamos ponerlo por ejemplo al abrir la pantalla, o al apretar un botón.
Podemos ver el listado de permisos con sus nombres en la Table1 de la siguiente página:
https://developer.android.com/guide/topics/permissions/overview#perm-groups

Una vez el usuario ha aceptado o rechazado el permiso, podemos actuar sobre su respuesta con los siguientes bloques:

Si lo aceptó, podemos pasarlo a la siguiente pantalla.
Si rechazó, podríamos mostrarle un Notificador diciendo "Debes aceptar el permiso de localización para poder usar esta app" y explicar el motivo por el que necesitamos el permiso.

Os dejo los bloques completos: