Programando. La mejor forma de ilustrar la forma de trabajar con App Inventor es mediante un ejemplo hecho paso a paso. En la página oficial hay un enlace bien visible llamado “Teach” donde se puede acceder a decenas de ejemplos y tutoriales de uso. Es casi un clásico empezar con la aplicación “Hello Purr” en la que un gatito maulla al pulsar en la pantalla7. Se pueden encontrar por Internet también ejemplos avanzados8 que usan bases de datos y el reconocimiento de voz9 o desarrollos curriculares completos. En concreto, hay varios10 11 que están orientados para alumnos del primer curso universitario en facultades de ciencias, y con pequeñas adaptaciones para disminuir la dificultad de los proyectos propuestos pueden ser usados en 1º de Bachillerato en la asignatura de TIC.
En lugar de seguir el criterio habitual en los tutoriales que muestran cómo hacer aplicaciones visuales para los móviles, a continuación se expondrá cómo hacer una aplicación con un interfaz sencillo en el que prime más la parte de solución de problemas. Para ello , vamos a hacer el ejercicio típico en los cursos de lenguajes de programación de decir cuál el mayor número de entre tres o más.
Primero hay que hacer el diseño en el navegador, usando el diseñador de App Inventor. En la paleta, en la sección “Screen Arrangement” se escoje un “VerticalArrangement” y se suelta sobre la pantalla del Viewer. El componente VerticalArrangement es para forzar una distribución vertical de los componentes que se suelten sobre él. Así se asegura que la disposición de los elementos en la pantalla es en vertical, independientemente del tamaño y los componentes que pongamos.
Después se añade, sobre el VerticalArrangement1, un TextBox (de la pestaña Basic), un HorizontalArrangement y un Label. Después se añaden dos Button sobre el HorizontalArrangement con lo que se asegura que los botones van a estar siempre colocados uno al lado del otro, en horizontal.
Debe quedar una pantalla como la siguiente:
Para que cuando se haga el programa podamos identificar bien los objetos que están en la pantalla es conveniente darles nombres identificativos de su función. Para renombrar los objetos que se han puesto en el paso anterior hay que seleccionarlos en el apartado Components y pulsar al botón Rename. En este programa renombramos el cuadro de texto, los botones y el label a txtInput,btnNuevo, btnFin y lblresultado.
Una vez que han sido renombrados los objetos, a algunos de ellos se le cambian las propiedades.
Para este programa vamos a hacer que el txtInput sólo acepte números, por lo que activamos la propiedad NumbersOnly en sus propiedades, tal y como se ve en la imagen anterior.
El interfaz de la aplicación ya está completo, ahora toca hacer el programa mediante el editor del de bloques de programación, que se abrirá pulsando en el botón “Open the Block Editor” del diseñador.
Una vez abierto, para empezar, se definen mediante el bloque que se encuentra en “Built-in” -> “Definition”, dos variables. Una de ellas es una lista a la que se ha llamado lista_numeros. Su bloque se arrastra desde “Built-In”->”Lists”->”make a list”. En esta lista se irán almacenando cada uno de los números que el usuario introduzca cuando quiera comparar varios.
La otra variable se llama maximo y se usará cuando el usuario pulse el botón Fin. En ese momento se recorrerá lista_numeros, se irá comparando cada valor que contiene con el máximo y se irá almacenando ahí el mayor de los números revisados. Como será un número, hay que arrastrarlo desde “Built-in”->”Math-”>number
A continuación se ha programado el evento Click de btnNuevo. Cada vez que el usuario pulse en ese botón se harán los siguientes pasos:
- Añadir el texto de txtInput como un nuevo elemento de lista_numeros.
- Poner a cero el texto de txtInput.
- Asegurase de que lblResultado tiene el texto “Introduciendo números”.
Finalmente se ha programado la parte más compleja, lo que ocurre cuando el usuario pulsa btnFin:
- Primero añade el valor que haya todavía en txtInput a la lista
- A continuación recorre lista_numeros, asignando a una variable llamada valor cada uno de los elementos de la lista según los recorre.
- Si valor es un número comprueba.
- Si valor es mayor que máximo, máximo pasa a ser valor.
- Después de averiguar el máximo lo muestra en lblResultado.
- Reinicia maximo a 0 para volver a empezar.
- Vacía lista_numeros asignándola de nuevo sin ningún elemento.
Es algo tedioso el tener que ir cambiando continuamente de las pestañas de “Built-In” a “My Definitions” porque cada vez que se haga referencia a una variable creada o a un componente colocado en el diseño hay que buscarlo en “My Definitions”, mientras que cada vez que se quiera poner una sentencia, bucle, un número, un texto en blanco o una condición hay que localizarlo en la pestaña “Built-In”. Con la práctica se hace fácil encontrar cada cosa, pero al principio suele ocurrir que el usuario no encuentra en qué apartado está lo que necesita.
En cualquier caso, como todo el programa se ha hecho arrastrando y soltando bloques no es posible cometer errores de sintaxis. Se puede ver también como, sin definir las variables, la aplicación se encarga automáticamente de convertir textos o strings a números y viceversa.
Finalmente podemos probar en nuestro móvil o en el emulador el programa y comprobar si todo ha ido bien. Para ello pulsamos el botón “Connect to Device…” de la esquina superior derecha del editor de bloques y le decimos que transfiera el programa al dispositivo deseado.
Podemos ir modificando tanto el programa de bloques como el diseño gráfico después de haber conectado al móvil o al emulador y se verá en tiempo real como cambia el diseño de la aplicación en el dispositivo. Además, en caso de que hubiera errores en la lógica del programa que quisiéramos depurar, también existe un sistema de depuración12 muy completo para poder ver el flujo del programa, valores de variables, etc.
En la web oficial de App Inventor existe una completa referencia13 que explica la funcionalidad de todos y cada uno de los bloques disponibles para el lenguaje de programación. Explica breve y concisamente los bloques y es un sitio ideal para familiarizarse con las posibilidades de App Inventor y consultar las dudas que puedan surgir al hacer los programas.
- Vamos a ver como he creado el programa desde el principio. Pitagoras.zip
En nuestro caso va a ser el teorema de Pitágoras. Introducimos los dos catetos y nos dará la hipotenusa. - Pulsamos New.
Screen1 es la pantalla de nuestro móvil.
En Palette están los elementos o componentes que podemos poner en la pantalla de nuestro móvil. Botones, casilleros, imagenes, etiquetas.
Vamos a arrastrar a la pantalla Screen1:
Una etiqueta (Label1)
Un casillero (TexBox1)
Otra etiqueta (Label2)
Otro casillero (TexBox2)
Un botón (Button1)
Otra etiqueta (Label3)
Fíjate a la derecha están las Propiedades de cada elemento.
Si marcas Label1, en la derecha puedes ponerla negrita (Bold), tamaño (FontSize), el texto que quieres que aparezca en esa etiqueta (Text).
Cada cierto tiempo pulsa en botón Save, para guardar los cambios que vayas realizando.
¿Cómo va quedando esto? Open the Blocks Editor.
Si conectamos el móvil mediante USB al ordenador y pulsamos Download to Connect Phone pasaríamos el programa al móvil.
Pero nosotros queremos utilizar el emulador para ver como va quedando en nuestro ordenador, y además aún nos queda poner los códigos del programa, para ello pulsamos Open the Blocks Editor.
Abrimos y permitimos que entre JAVA…
Pulsamos en New emulator (espera un minuto que cargue totalmente) y luego en Connect to Device… emulator – 5554, pasa pasar el programa que estamos haciendo al emulador (espera que cargue totalmente).
Si no sale el programa en la pantalla, pulsa el botón de abajo donde pone MENÚ.
Vamos a ver el código.
Vamos a utilizar 3 variables numéricas: un cateto (x), otro cateto (y), la hipotenusa (z).
Esas variables tenemos que declararlas, para ello vamos a Built-In / Definition.
(Declararlas significa presentarlas antes de que el programa comience).
Sacamos la pieza variable.
En variable ponemos x
Pulsamos donde pone as
luego en Math
y luego en 123 para indicarle que trabajamos con números.
Lo ponemos en el valor 1.
Si te equivocas al poner una pieza, la puedes borrar echándola en la papelera que aparece en la parte inferior derecha.
Ya tenemos las tres variables numéricas con valor inicial 1.
En My Blocks están los elementos de los que disponemos en la pantalla y las variables que hemos creado.
Queremos que cuando hagamos Click en el Button1, se realice la fórmula del teorema de Pitágoras.
Vamos a My Blocks / Button1 / y sacamos Button1.Click.
- Dentro de Button1.Click
- Tomamos el contenido del TextBox1.Text y lo asignamos a la variable x
- Tomamos el contenido del TextBox2.Text y lo asignamos a la variable y
- Hacemos la raiz cuadrada (sqrt) de x elevado a 2 más y elevado a dos y ese resultado lo asignamos a z
- Ponemos en el Label3.Text la unión (join) de «La hiponenusa vale…» y el valor de z.
Las piezas de las operaciones matemáticas las tomamos de Built-In
Los TextBox, Label, Button y las variables establecidas las tomamos de My Blocks
Ya lo tenemos. Pruébalo para ver cómo funciona. - Me funciona en el emulador, ahora ¿cómo lo paso al móvil?
Como indiqué anteriormente pulsamos en Package for Phone y, o bien lo guardarmos en nuestro ordenador, será un archivo de la forma pitagoras.apk y luego este archivo por cable USB, bluetooth,… lo pasamos al móvil. O bien lo pasamos directamente al móvil mediante Dowload to Connected Phone.
También se puede pasar mediante código de barra.