miércoles, 25 de julio de 2012

[App Inventor] Login sencillo (Primeros Pasos)


Este primer tutorial nos va a servir como un primer acercamiento con el funcionamiento del App Inventor. Lo que vamos a aprender en este tutorial será:

  • Añadir componentes a la vista de diseño de nuestra aplicación.
  • Agrupar esos componentes en la pantalla con los componentes de "Disposición en Pantalla" (Screen Arrangement).
  • Trabajar con el Blocks Editor: Crear y trabajar con una lista (array) para buscar si existe un elemento dado dentro de dicha lista.
  • Mostrar el resultado en pantalla y montarlo en el emulador Android del App Inventor.
¡ATENCIÓN!
ANTES DE EMPEZAR A TRABAJAR: Asegúrate que instalaste las herramientas necesarias para empezar a trabajar con el App Inventor

AÑADIR COMPONENTES A LA VISTA DE DISEÑO 

Los componentes que vamos a necesitar son 5, estos componenentes los puedes encontrar en la parte izquierda del diseñador debajo de la etiqueta "Palett":
Los componenentes que vamos a necesitar.

El primero que vamos a poner en nuestra aplicación va a ser el TableArrangement. Para colocarlo en la aplicación basta con pulsar con el ratón sobre el componente en la lista , y sin soltar el botón izquierdo del ratón arrastrarlo hasta la parte central de la aplicación (Screen).
Arrastrando con el ratón pondremos el control en nuestra aplicación.
Si os fijáis, ahora en la parte derecha tenemos el árbol de componentes donde empezamos la jerarquía por la pantalla (Screen1) y dentro de ella ahora tendremos nuestro TableArrangement. Abajo de esta ventana tenemos los botones "Rename" para renombrar nuestro componente con un nombre más identificativo (recomendado cuando en nuestra aplicación ya tenemos muchos componentes) y "Delete" que borrará los componentes seleccionados (y los que cuelgan de él).

Por último, y no menos importante, en la parte derecha encontramos la ventana de "Propierties" que són las distintas propiedades que admite nuestro componente seleccionado (ancho, alto, fuente, tamaño fuente, texto predeterminado, etc...).
Las propiedades varían dependiendo del
componente seleccionado.
Vamos a editar las propiedades de nuestro TableArrangement tal que:
  • Columns (columnas): 2
  • Rows (filas): 3
  • Visible: Activado
  • Width (ancho): Fill parent (rellenar ancho al mismo tamaño que el ancho de su componente padre).
  • Heigth (alto): Automatic... 

AGRUPAR COMPONENTES EN PANTALLA

Tener ahora en mente, que aunque no se vea, realmente nuestro TableArrangement tendría 2 columnas y 3 filas, y la manera más o menos visual si llegasen a verse los limites de los bordes de celda sería algo así:

Ahora tenemos una especie de tabla 2*3.


Ahora lo que vamos a poner van a ser un par de etiquetas Label. Ahora cuando los arrastreis a la pantalla, si arrástrais encima de nuestro TableArrangement observareis como salen los limites de cada celda momentaneamente en pantalla. Desconozco el motivo de porqué no aparecen en todo momento ( porque serviría para aclararnos mejor) pero después de unos intentos le cogeréis el truco.

Pondremos una etiqueta en lo que sería la primera celda de la primera fila, y otra etiqueta en la primera celda de la segunda fila. Se tienen que haber creado dos nuevos componentes en nuestra jerarquía enlazados a nuestro TableArrangement que serían Label1 y Label2

Editamos las propiedades de nuestro Label1:
  • FontBold (fuente en negrita): Activado.
  • FontSize (tamaño de fuente): 22.0
  • Text (texto de la etiqueta): "Usuario:" (sin las comillas)
  • TextAlignment (alineación del texto): Right
  • Width: 150 pixels
Editamos las propiedades de nuestro Label2:
  • FontBold (fuente en negrita): Activado.
  • FontSize (tamaño de fuente): 22.0
  • Text (texto de la etiqueta): "Clave:" (sin las comillas)
  • TextAlignment (alineación del texto): Right
  • Width: 150 pixels
Nuevamente vamos a poner un par de controles más. Uno va a ser un TextBox en la segunda celda de la primera fila, y un PasswordTextBox en la segunda celda de la segunda fila.

Ponemos ahora un Button en la tercera fila, segunda columna.

Editamos las propiedades de nuestro Button1:
  • FontSize (tamaño de fuente): 22.0
  • Text (texto de la etiqueta): "Login"
Por último vamos a poner otro nuevo Label en la tercera fila, primera columna.

Editamos las propiedas de nuestro Label3:
  • FontBold (fuente en negrita): Activado.
  • FontSize (tamaño de fuente): 22.0
  • Text (texto de la etiqueta): "{STATUS}" (sin las comillas)
  • TextAlignment (alineación del texto): Center
  • Visible: Desactivado
Si habéis seguido todos los pasos correctamente deberíamos tener algo así:
El Label3 de {Status} claramente no lo podréis ver porque su visibilidad
está desactivada.

TRABAJAR CON EL BLOCKS EDITOR

Vamos con la parte divertida. En la parte superior derecha veréis un botón que debéis pulsar llamado "Opens Blocks Editor". Si instalasteis correctamente las tools del App Inventor no debería daros ningun problema y os descargará un pequeño archivo de Java que debéis ejecutar para abrir el Editor. ¡Bienvenidos a la programación con piezas de puzle!

Esta pantalla se divide en dos partes. En la parte izquierda tenemos tres pestañas:
  • Built-In. Definiciones de código ya creadas y lógicas de control como if-else, etc...
  • My Blocks. Aquí están las funciones respecto a las funciones ya creadas por nosotros en el Blocks Editor, así como las funciones de los distintos componentes que hemos puesto en nuestra aplicación.
  • Advanced. Funciones avanzadas que no necesitamos en este momento.
En la parte derecha y restante de la pantalla tenemos nuestro área de trabajo donde posicionaremos nuestras piezas de puzle.

Lo primero que vamos a realizar es una lista con los posibles valores que vamos a tomar como correctos en nuestro login, que serán combinaciones de nombres de usuario y sus respectivas claves. Para ello vamos a Built-In -> Definition -> variable y la arrastramos hasta el espacio de trabajo.

Con esto creamos una nueva variable que va a ser la que va a contener la lista con los nombres de usuario y claves. Podemos renombrarla simplemente situandonos encima del título variable y escribiendo lo que desees. En nuestro caso: listaUsuarios.

Pero todavía no tiene la estructura de una lista. Volvemos a Built-In -> Lists -> make a list y arrastramos esta nueva pieza para encajarla con nuestra variable en nuestro espacio de trabajo. Ahora debeis tener en cuenta, que realmente un usuario se compone de dos campos: nombre de usuario y clave, y el conjunto de estos dos datos unidos hacen lo que es un objeto de usuario que nosotros lo vamos a tratar como si fuera una lista más (que no dejan de ser arrays). Con lo que Built-In->Lists->make a list y arrastramos esta pieza dentro del campo item del anterior make a list.

Nos vamos a Built-In -> Text -> text y arrastramos un par de piezas de este tipo a los campos item de la lista más interior. Al primer item de tipo text  le pondremos como valor pinchando encima de su texto predefinido "usuario1" (sin las comillas). Y al segundo item que va a ser la clave "1234" (sin las comillas). Bien hecho, ya tenemos nuestro primer usuario. Ahora solo tenéis que seleccionar esta lista más interior,  pulsar la combinación de teclas para copiar (Windows es CRTL+C) y pegar con otra combinación de teclas (Windows es CRTL+V). Pegar un par de listas y arrastrarlas para convertirlas en listas dentro de la lista principal. Si todo os ha salido bien, os debería quedar algo así: 
El resultado de nuestra lista de usuarios.
Lo siguiente que debemos realizar es que cuando alguien pulse el botón de "Login" compruebe si el usuario está en la lista, y en caso de estarlo compruebe la contraseña introducida en los campos para dar un Status de OK. Vamos a My Blocks -> Button1 -> Button1.Click. Lo que introduzcamos dentro de esta pieza se ejecutará cuando se recoja el evento que hemos pulsado sobre el botón de Login. Debemos hacer uso de las piezas de control, con lo que Built-In -> Control -> ifelse y arrastramos esta pieza dentro de la acción del click. Debemos comprobar que la lista contenga el usuario introducido en nuestro Input. Para ello vamos a Built-In -> Text -> contains arrastrando a la parte de test del ifelse que pusimos. En el campo text del contains debemos poner la pieza My Blocks -> My definitions -> global listaUsuarios que es la forma de llamar a la variable que creamos antes de la lista de usuarios. En piece el texto a buscar, con lo que arrastramos My Blocks -> TextBox1 -> TextBox1.Text.

Como veo que lo vais pillando, os dejo con el resultado de como debería quedar todo el click finalmente. Sabed que si no entendéis algo solo debéis comentar, no se muerde.
Pinchar para verlo más grande.


MOSTRAR EL RESULTADO EN PANTALLA

Ahora, desde el mismo Blocks Editor puedes hacer instancia a un emulador Android en el que se hace Deploy automático de la app. Solo pulsa "New Emulator" en la parte derecha superior, una vez que esté cargado pulsa en "Connect to Device" y pruébalo! 


Si te ha gustado el tutorial, no se te olvide comentar! ;)