lunes, 20 de mayo de 2013
Hoy vamos a ver como crear una aplicación de appinventor, su diseño será el siguiente:
Y se encargará de que al introducir el nombre completo, este automaticamente se divida en nombre y apellidos, ademas de este campo de texto, habrá 5 elementos mas con los que se podrá interactuar, dos checkbox en los que seleccionaremos nuestro sexo, un campo de texto solo numérico donde introduciremos la edad, un listado donde escogeremos nuestro equipo de fútbol, y un botón que se encargará de decirnos "Señor/a, le quedan X años para cumplir los 50 y es usted del equipo X" o hace X años que cumplio los 50, para ello vamos a ver como lo programaremos:
Blocks Editor:
Vamos a empezar por el campo de nombre completo, tendremos que usar una función de "text" llamada "split at spaces" para que nos divida el nombre completo en 3 segmentos, que almacenaremos en un listado/variable de donde lo sacarán los campos "nombre", "1º apellido" y "2º apellido" para lograr esto usaremos el siguiente código:
A este código base podremos añadirle comprobadores "if" por si el campo de texto está vacio, o si el nombre tiene un único apellido e incluso cubrir la posibilidad de un segundo nombre, pongo como ejemplo mi código final (es recomendable descargar la imagen para estudiarla mejor):
Ahora pasaremos a los checkbox, cuando cualquiera de los dos cambie, haremos una comprobación de si el otro está activo, en caso de que lo este, el que intentamos activar no se activará:
El siguiente elemento será el campo edad, que se encargará de que al perder el foco sobre si mismo, comprobará primero si tiene texto insertado, si no tiene texto, el "hint" cambiará para recordarnos que introduzcamos la edad, después realizará otra comprobación de si la edad introducida es mayor de 200 o menor de 0, y en caso de ser así nos avisará de ello a través del "hint":
Nuestro próximo elemento es el listado, en el que nos dejará elegir nuestro equipo de fútbol, para ello insertaremos unos datos al inicio de la aplicación, podemos introducir los equipos que queramos, además debajo de este listado pondremos un campo de imagen, donde nos mostrará el escudo del equipo elegido:
Al seleccionar un equipo de la lista, lo pondremos como texto de la lista, para que así sepamos nuestra elección, además de la imagen anteriormente nombrada, para ella, yo la he llamado igual que el elemento del listado con la extensión ".png" por lo tanto con un sencillo "Set image.picture to" y un "make text" en el que acoplaremos "listado.selection" y un campo "text" en el que ponga ".png" lograremos que nos muestre el escudo de el equipo que seleccionamos, aquí adjunto el código de mi listado para que se vea el ejemplo:
Por último veremos el botón de "text to speech" mediante el cuál nos dirá respecto a nuestro género, nuestra edad y nuestro equipo, diferentes versiones de la frase, antes de nada veremos la configuración obligatoria de "text to speech" dos funciones que hay que poner si o si, para que el lector hable en español:
Y ahora adjunto el código del botón "text to speech", por su longitud recomiendo descargar la imagen para comprenderla mejor, y apreciar los diferentes comprobantes "if":
Espero que este tutorial sea de utilidad, hasta la próxima.
