2. Appinventor - Pantalla de Registro

Vamos a empezar a usar algunos elementos de la Paleta del apartado de "Interfaz de Usuario" para conseguir montar una simple pantalla de Registro para nuevos usuarios que quieran usar nuestra aplicación.

El resultado será una pantalla con un campo de texto donde el usuario podrá introducir el Email y otro para el Password. Finalmente habrá un botón para finalizar el Registro.

Nuestro objetivo será crear una pantalla (más simplificada) como esta:

Vamos a abrir el proyecto que habíamos creado en la Intro y empezar a trabajar!

1) UI

La sección de App Inventor donde añadimos los elementos, el "Diseñador", es donde podremos crear nuestra UI (User Interface). 

UI es el término que se usa para expresar todo aquello que el usuario puede Ver, es decir, los menús, botones, textos, listas,... en resumen, todo lo que es visible en la pantalla del móvil.

Antes de empezar a programar la app con App Inventor, deberemos siempre tener dibujadas las distintas pantallas que conformarán la UI, y en el App Inventor crearlas y convertirlas en una app real.

Como buena práctica, lo primero será elegir qué elemento será el "padre", es decir, contendrá todos los elementos "hijos" (campo de email/password y botón).
Por defecto podríamos ponerlos directamente, pero para organizar mejor las pantallas debemos estructurar los componentes en contenedores.

Para ello elegiremos de la Paleta en Disposición, una Disposición Vertical y la arrastraremos en la pantalla del Visor.

Ya tenemos nuestro nuevo elemento que queda como un pequeño cuadrado gris. Queremos que ocupe toda la pantalla, así que lo seleccionamos en Componentes y vamos a editar sus Propiedades.
- En alto y ancho elegiremos "Ajustar al contenedor" para que nos ocupe todo el espacio.
- Queremos los elementos centrados, así que en DispHorizontal y DispVertical seleccionaremos "Centro".

Ya está nuestro contenedor listo. Vamos ahora a añadirle 2 Campo de Texto para Email y Contraseña (están en Interfaz de Usuario).
Vemos que se van al centro directamente gracias a las Disposiciones que hemos elegido.

Muy importante! Los campos se han creado como CampoDeTexto1 y CampoDeTexto2. Cuando tengamos una app de 100+ elementos nos vamos a volver locos con esos nombres, así que lo primero y más importante será seleccionar cada uno > Cambiar Nombre > y ponerles un nombre adecuado. Por ejemplo "CampoRegistroEmail"y "CampoRegistroPassword".
Siempre hay que parar un momento y poner un nombre que sea claro y fácil de entender más adelante.

En las Propiedades del campo podemos hacer algunas modificaciones. En este caso la más importante es poner una "Pista" para indicar al usuario qué debe escribir. Podemos ponerles "Introduce tu email" y "Elige tu password".

Ya lo tenemos listo, vamos ahora a añadir un botón, cambiarle el nombre y cambiarle el texto a por ejemplo "Registro".
Si queremos podemos hacerlo un poco más redondeado en Forma > redondeado o cambiarle el ColorDeFondo.

Por ahora deberíamos tener algo así:

Si podemos, vamos a probarlo en nuestro móvil para asegurarnos que queda bien.

Con esto ya tenemos la UI básica montada! 

# Extras

- Añadir una foto arriba del todo que identifique nuestra aplicación.

- Añadir unas etiquetas con los textos "Email" y "Contraseña" encima de cada campo.

- Añadir las mismas etiquetas que el punto anterior pero al lado de cada campo. Para ello usaríamos una Disposición Horizontal y dentro estaría la etiqueta y el campo de texto.

- Poner un botón de "Ya tienes cuenta? Entra aquí" para abrir la pantalla de Login.

Qué más se os ocurre que podríamos añadir?

2) Código

Cuando el usuario hace click en el botón de Registrar deberíamos crear un nuevo usuario en nuestra Base de Datos y mostrar el resto de la aplicación.

Por ahora, para familiarizarnos un poco con el código (Bloques) del AppInventor, vamos a mostrar una notificación al usuario con el email que ha elegido.

Para ello arrastramos un Notificador a nuestro Visor y le ponemos el nombre de "NotificadorRegistro". Vemos que esta vez no se muestra en pantalla, si no que se añade debajo en "Elementos no visibles". Aquí es donde se guardan todos los componentes que el usuario no ve directamente pero que están presentes en una pantalla.

Para mostrar el Notificador cuando el usuario hace un Registro debemos cambiar a la sección de Bloques.

Primero de todo debemos poner el código para cuando el usuario hace click en el botón de Registro. Para ello seleccionamos el botón en la ventana de la izquierda y arrastramos el bloque "Cuando BotonRegistro .Click".

Vemos que se añade en la pantalla y que tiene un hueco con flechita para ejecutar más órdenes. Vamos a decirle que muestre nuestro Notificador.

Para ello seleccionamos el Notificador y buscamos el bloque "llamar NotificadorRegistro .MostrarDialogoMensaje". Lo arrastramos y lo encajamos dentro del bloque anterior.

Ahora nos queda rellenar los huecos de mensaje, título y textoEnBotón. Les pondremos los bloques que encontramos en Integrados > Textos > "[]" que nos permitirán escribir el texto que debe salir.

Podríamos poner por ejemplo:
- Título: Bienvenido

- Mensaje: Gracias por registrarte!

- Texto Botón: Ok

Cuando lo probamos en el móvil vemos que efectivamente se nos muestra un popup con los textos que hemos puesto!

Pero hemos dicho que queremos mostrar el email de usuario, así que en la pieza que sigue a Mensaje quitamos el texto y ponemos el bloque que encontraremos en nuestro CampoRegistroEmail > CampoRegistroEmail . Texto.

Ahora si rellenamos el campo de email nos saldrá lo que hemos escrito en nuestro popup!

Si queremos el email y un texto, ponemos ambos usando en bloque en Texto > Unir.

El resultado final debería ser algo así:

Qué os ha parecido? No os desaniméis al ver tantos bloques, al final solo se usan unos pocos, solo es cuestión de práctica y poco a poco ir descubriéndolos y conociéndolos!