Uso de App Inventor en la asignatura de Tecnologías de la Información y la Comunicación
En el actu actual al dise diseño ño del Bachillerat Bachillerato o en Espa España ña se pro propone pone “Tecnol “Tecnología ogías s de la Info Informa rmación ción y la Comunicación como asignatura optativa”. Entre los o!etivos generales de esta asignatura se puede leer “"sar los recursos inform#ticos como instrumento de resolución de prolemas específicos” o “Integr “Int egrar ar la info informac rmación ión te$tu te$tual% al% num& num&rica rica y gr# gr#fica fica ot otenid enida a de cual cual'ui 'uier er fuen fuente te par para a ela elaora orar r contenid cont enidos os pro propios pios y pu pulicar licarlos.. los.... y for formato matos s 'ue faciliten faciliten la incl inclusió usión n de ele elemen mentos tos mult multime imedia dia decid de cidien iendo do la fo form rma a en la 'u 'ue e se po pone nen n a dis dispos posici ición ón de dell re resto sto de usu usuar arios ios”. ”. (on muchos muchos los profesores 'ue enseñan alg)n lengua!e de programación como una de las herramientas para alcan*ar estos o!etivos. En este artículo se propone usar +pp Inventor , como parte del curriculum de esta asignatura. +pp Inventor es al mismo tiempo un lengua!e de programación% una herramienta de diseño y un entorno de desarrollo de aplicaciones para móviles y talets 'ue funcionen con el sistema operativo +ndroid. +pp Inventor permite tami&n e!ecutar las aplicaciones en un emulador% por lo 'ue no es imprescindile disponer del tel&fono para proar los programas 'ue se hagan.
+pp Inventor fue desarrollad desarrollado o por -oogle% -oogle% pero en +gosto +gosto de /,, /,, fue pulicado como (oft0are 1ire a!o la licencia +pache ./ y su desarrollo se traspasó al Instituto Tecnológico de 2assachusetts 32IT4.
El lengua!e de programación 'ue se usa en +pp Inventor est# claramente inspirado y toma muchos elementos de (cratch 5 'ue est# siendo desarrollado por el mismo 2IT desde hace m#s de ocho años. En la imagen siguiente se puede apreciar la herramienta de diseño en el navegador con la 'ue se construye el interfa* gr#fico de la aplicación6
¿Por qué App Inventor? Casi todos los lengua!es de programación tienen una sinta$is 'ue al principiante le suena a chino. (on una me*cla de ingl&s y e$trañas reglas de sinta$is. Como e!emplo% el programa m#s pe'ueño 'ue se puede hacer en 7ava es algo así6 class Hola { public static void main(String [] args) { System.out.println("Hola mundo"); } }
Es evidente 'ue al aprender a programar la sinta$is provoca una curva de aprendi*a!e significativa. +un'ue hay lengua!es m#s limpios en este sentido 'ue 7ava% como 8ython% siempre re'uiere invertir mucha pr#ctica y tiempo en aprender los comandos% sus reglas de escritura% sentido de los distintos signos de puntuación% etc. Todo este tiempo es tiempo no empleado en aprender a diseñar algoritmos para resolver prolemas% tal y como pedía el primero de los o!etivos de la asignatura de TIC. Con +pp Inventor se aprende a programar usando lo'ues de programación. Estos lo'ues est#n hechos con elementos comunes a la mayoría de los lengua!es de programación e$istentes. (e colocan
lo'ues para construir ucles% condiciones% variales% etc. 'ue permiten pensar lógicamente y solucionar los prolemas de forma metódica% sin perder el tiempo en encontrar el punto y coma o los dos puntos 'ue est#n donde no deen y producen errores de compilación o e!ecución.
Imagen 56 9iagrama de funcionamiento de +pp Inventor.
Es de esperar 'ue% al igual 'ue hicieron con (cratch% en el futuro los lo'ues de +pp Inventor est&n traducidos a otros idiomas. En la actualidad sólo est#n disponiles en ingl&s% lo 'ue re'uiere un pe'ueño esfuer*o de traducción al estudiante para entender 'u& es lo 'ue hace cada lo'ue. 9e todos modos% los lo'ues est#n clasificados mediante un criterio de colores 'ue indica en parte su función o el componente al 'ue hacen referencia. +dem#s de los elementos pedagógicos% +pp Inventor tiene algunas características 'ue lo hacen especialmente adecuado6 ,.
Es softare li!re% no es necesario la ad'uisición de licencias por parte del profesor y los alumnos
.
Es multiplataforma 6 re'uiere sólo de un navegador y la m#'uina virtual de 7ava instalada% con “!ava 0e start”.
5.
Es programación para dispositivos móviles . 1os tel&fonos y las taletas est#n marcando hoy en día uena parte del futuro de la inform#tica y es atractivo para los alumnos poder enseñar en sus propios tel&fonos el fruto de su traa!o.
"lementos de programación en App Inventor :eamos algunos de esos lo'ues de +pp Inventor6
#entencias
+l programar necesitamos a menudo decirle al ordenador 'ue haga algo. En +pp Inventor e$isten numerosos lo'ues 'ue son sentencias de programación. (e distinguen r#pidamente por'ue e$presan una acción a reali*ar con un vero en imperativo. 1os m#s haituales son
call % set y def 3areviatura
de define4. +dem#s% los lo'ues 'ue son sentencias sólo est#n disponiles en dos colores6 a*ul para modificar variales o propiedades de un o!eto y naran!a para llamar a funciones. En la imagen siguiente se ven algunos e!emplos de las sentencias para dividir un te$to en partes% convertirlo a may)sculas% camiar la altura% te$to o visiilidad de un recuadro de te$to o definir una variale.
Condiciones Con frecuencia necesitamos reali*ar distintas acciones en función de 'ue ocurra o no algo. En +pp Inventor para condicionar nuestro programa tenemos las estructuras if-then, if-then-else , while y choose6
En todos estos lo'ues se puede ver como tenemos en la parte superior un espacio para enca!ar el test o pregunta 'ue se hace el programa para decidir por donde continuar su flu!o. 1as tres primeras estructuras son haituales en la mayoría de los lengua!es% la )ltima% choose% es pr#cticamente igual a if-then-else con la diferencia de 'ue permite devolver una variale en función de 'ue se cumpla o no el test.
$ucles "n ucle provoca la e!ecución repetida de varias sentencias. En +pp inventor disponemos de los ucles while% for range y foreach.
El primero e!ecutar# el lo'ue de sentencias 'ue se enca!en en el apartado do mientras se cumpla la condición 'ue refle!e el test. for range es el típico ucle “for ” de otros lengua!es de programación y% como tal% tiene las opciones de elegir el nomre de la variale 'ue itera% su comien*o% fin y el tamaño de los saltos de iteración. ;inalmente% foreach es un iterador sore los elementos de una lista.
%aria!les 9isponemos de las herramientas para definir y camiar variales. El tipo puede ser num&rico o un te$to y “se declara” al asignarle un valor por primera ve*.
En el gr#fico anterior se ve como se declara una variale llamada “total
"ventos Es indispensale 'ue los programas 'ue sean capaces de responder a la interacción del usuario con el interfa*. Es ahí donde toman su importancia los lo'ues de +pp Inventor% para e!ecutar acciones en respuesta a los eventos 'ue se produ*can en el tel&fono o el talet. El nomre de los distintos eventos depende del o!eto 'ue los provoca. "n otón avisa de cuando se ha hecho clic sore &l% mientras 'ue el acelerómetro avisa de cuando se ha agitado el móvil% la mensa!ería de cuando se ha reciido un mensa!e% el o!eto de T0itter de cuando hemos sido mencionados en esa red social% la c#mara de fotos de cuando se ha hecho una foto y así sucesivamente.
En la imagen anterior se pueden ver algunos de estos eventos. 9e esta selección se aprecia 'ue con +pp Inventor no sólo se dispone de o!etos 'ue se pueden colocar en la pantalla como un otón o imagen% sino tami&n de otros muchos o!etos 'ue nos dan acceso a las funcionalidades 'ue tienen los tel&fonos y talets +ndroid. Tenemos acceso a Internet% Bluetooth% hacer llamadas% enviar y reciir mensa!es% las coordenadas de posición -8(% etc. Tami&n se puede apreciar como todos los eventos tienen la estructura “=hen evento do”% y son de color verde. Tienen este color por'ue son parte de la sección “2y loc>s” en el entorno de desarrollo. “2y loc>s” es donde se leen o manipulan las propiedades de los distintos elementos 'ue hayan sido colocados manualmente en el entorno de diseño6 otones% r)!ula% eti'uetas% cuadros de te$to% etc.
Como usar App Inventor +pp Inventor re'uiere 'ue el ordenador tenga alguno de estos sistemas operativos6 o
-?"@1inu$6 "untu A% 9eian
o
2acintosh 3con procesador Intel46 2ac D( ,/.% ,/.F
o
=indo0s6 =indo0s 8% =indo0s :ista% =indo0s G
?ecesita tami&n de cone$ión a Internet 3los programas y las aplicaciones se cargan siempre desde Internet4 y uno de los siguientes navegadores 0e con estas versiones mínimas6 o o
2o*illa ;irefo$ 5.F% sin la e$tensión ?o(cript instalada +pple (afari ./
o
-oogle Chrome H./
o
2icrosoft Internet E$plorer G
(e necesita tami&n una cuenta de correo electrónico de -mail y 7ava =e (tart instalado en el ordenador. El
soft0are
para
e!ecutar
los
programas
se
descarga
de http6@@appinventor.mit.edu@e$plore@content@installappinventorsoft0are.html % donde se elegir# una opción u otra dependiendo del sistema operativo 'ue se est& usando. En el caso de 2acintosh o =indo0s se dispone del típico instalador para estos entornos. En sistemas -nu@1inu$ 9eian o derivados se proporcionan los pa'uetes de de instalación H o la opción de instalar directamente desde un archivo comprimido tar.g* . ?ota importante6 En el caso de instalar en un sistema 1inu$ de FH its
es necesario asegurarse de 'ue est#n instalados algunos pa'uetes para 'ue el soft0are funcione. En F se puede ver la lista de pa'uetes necesarios. Este soft0are permitir# no solo e!ecutar los programas en nuestro móvil o en el emulador% sino 'ue dispone adem#s de un intuitivo interfa* de depuración 'ue ayuda a encontrar errores de programación. 8ara 'ue +pp Inventor pueda comunicarse desde el ordenador con el móvil usando el cale "(B es necesario ir a los a!ustes del móvil JDpciones de desarrollador y activar la opción “9epuración de "(B”. Importante6 Es conveniente instalar este soft0are% pero no necesario para hacer los programas. (i no se instala saldr# un mensa!e de error cada ve* 'ue se carga la aplicación de desarrollo avisando de 'ue no encuentra el entorno de emulación% pero se puede reali*ar el programa igualmente. (i el ordenador est# conectado a Internet% dispone del sistema operativo y el navegador adecuado y tiene 7ava instalado ya se puede empe*ar a programar. En el navegador hay 'ue introducir la dirección http6@@eta.appinventor.mit.edu@ . Entonces pedir# nuestros datos de acceso al correo de -mail y% si es la primera ve* 'ue se accede% pedir# permiso para usar esa cuenta de correo. "na ve* 'ue se le concede el permiso se carga la siguiente pantalla6
(e puede apreciar 'ue se trata de una simple vista del listado de proyectos hechos por el usuario. En +pp Inventor los proyectos se guardan “en la nue”% es decir% en los servidores del 2IT. 8or tanto% podemos arir nuestros proyectos desde cual'uier ordenador con cone$ión a Internet sin 'ue tengamos 'ue llevar los archivos de un lado a otro. En cual'uier caso% este mismo interfa* da las opciones para descargar el archivo del proyecto si se 'uiere. Kaciendo clic sore el otón New % pedir# el nomre 'ue 'ueramos darle al proyecto e inmediatamente se arir# la siguiente ventana6
(e trata de la ventana del diseñador en la 'ue se construye% mediante el ratón% sin necesidad de usar ning)n lengua!e de programación% todo el interfa* gr#fico 'ue va a tener la aplicación. En ella se han marcado con n)meros cada una de sus partes principales6 ,.
1a paleta contiene todos los elementos 'ue podemos insertar en nuestra aplicación. Kay elementos gr#ficos como cuadros de te$to% otones% lien*o de diu!o 3Canvas4 y elementos 'ue no se ven en la pantalla del móvil% como ase de datos 3Tiny9B4% acelerómetro% c#mara de vídeo% etc.
.
Viewer 6 El visor de la pantalla% simula la apariencia visual 'ue tendr# la aplicación en el móvil. 8ara añadir un elemento a la pantalla hay 'ue arrastrarlo desde la paleta y soltarlo en el visor. 1os elementos 'ue no tengan visiilidad hay 'ue arrastrarlos tami&n al vie0er y autom#ticamente se despla*ar#n dea!o de &l a!o el epígrafe “?onvisile components”
5.
Components muestra la lista de los componentes 'ue se han colocado en el proyecto. Cual'uier componente 'ue haya sido arrastrado y soltado desde la paleta al visor aparecer# ahí. (i se 'uiere orrar alguno es en la lista de componentes donde est# el otón 'ue permite orrarlo.
H.
Media muestra las distintas im#genes y sonidos 'ue estar#n disponiles para el proyecto. Cual'uier archivo de imagen o audio 'ue se 'uiera usar en la aplicación hay 'ue insertarlo usando este apartado para 'ue est& disponile.
.
Properties6 cada ve* 'ue en el :ie0er se seleccione un componente% en 8roperties aparecer#n todos los detalles 'ue se puedan camiar de ese componente. 8or e!emplo% al hacer clic sore un componente Te$tBo$ se podr# camiar en 8roperties su color% te$to% fuente% etc. 8ara a'uellos 'ue hayan usado antes entornos de desarrollo del tipo de :isual (tudio en =indo0s o -amas en 1inu$ le ser# muy familiar esta forma de traa!ar.
Este es el entorno en el 'ue se diseña la aplicación. 8ara poder reali*ar la programación es necesario
hacer clic en el otón de la es'uina superior derecha con el te$to “Dpen the loc>s editor”. Eso har# 'ue el navegador avise de 'ue va a descargar una aplicación 'ue arrancar# con 7ava =e (tart. 2ientras se descarga la aplicación aparecer# en la parte inferior de la pantalla un te$to indicativo de la carga6
+l terminar la carga% si no est# instalada la aplicación 'ue permite la e!ecución o simulación del móvil aparecer# este mensa!e6
Tras aceptar el mensa!e aparecer# por fin el editor de lo'ues de programación6
Esta es la pantalla 'ue usaremos para hacer los programas 'ue interaccionan con el interfa* gr#fico.
(e puede apreciar cómo est# dividida en dos partes muy claras6 un enorme lien*o en “lanco” a la derecha donde se ir#n arrastrando los lo'ues de programación y a la i*'uierda los men)s 'ue dan acceso a esos lo'ues. El men) est# formado por tres pestañas6 Built-In% My Blocks y Adanced % y a!o cada una de ellas aparecen a su ve* distintos men)s 'ue permitir#n seleccionar los lo'ues disponiles en cada caso. ,. BuiltIn contiene los lo'ues 'ue componen el lengua!e de programación propiamente dicho% distriuidos en las secciones 9efinition% Te$t% 1ists% 2ath% 1ogic% Control y Colors. .
2y Bloc>s ya se ha nomrado anteriormente y contendr# una lista de los elementos 'ue hayan sido colocados en la pantalla :ie0er del diseñador para poder acceder mediante el programa a sus propiedades y eventos
5. +dvanced es una pestaña 'ue permite acceder de forma gloal a algunas propiedades comunes a todos los elementos 'ue hemos colocado en el :ie0er y 'ue sean de un mismo tipo. 8or e!emplo% al colocar un par de otones aparecer# “+ny Button” y se podr#n camiar ahí algunas propiedades 'ue afecten simult#neamente a los todos los otones. En la parte superior derecha del editor de lo'ues de programación se pueden ver tami&n los otones 'ue dan acceso a conectar con un tel&fono +ndroid 'ue estuviera enchufado al ordenador o lan*ar el emulador.
Programando 1a me!or forma de ilustrar la forma de traa!ar con +pp Inventor es mediante un e!emplo hecho paso a paso. En la p#gina oficial hay un enlace ien visile llamado “Teach” donde se puede acceder a decenas de e!emplos y tutoriales de uso. Es casi un cl#sico empe*ar con la aplicación “Kello 8urr” en la 'ue un gatito maulla al pulsar en la pantalla G. (e pueden encontrar por Internet tami&n e!emplos avan*ados A 'ue usan ases de datos y el reconocimiento de vo* L o desarrollos curriculares completos. En concreto% hay varios,/ ,, 'ue est#n orientados para alumnos del primer curso universitario en facultades de ciencias% y con pe'ueñas adaptaciones para disminuir la dificultad de los proyectos propuestos pueden ser usados en ,M de Bachillerato en la asignatura de TIC. En lugar de seguir el criterio haitual en los tutoriales 'ue muestran cómo hacer aplicaciones visuales para los móviles% a continuación se e$pondr# cómo hacer una aplicación con un interfa* sencillo en el 'ue prime m#s la parte de solución de prolemas. 8ara ello % vamos a hacer el e!ercicio típico en los cursos de lengua!es de programación de decir cu#l el mayor n)mero de entre tres o m#s. 8rimero hay 'ue hacer el diseño en el navegador% usando el diseñador de +pp Inventor. En la paleta% en la sección “(creen +rrangement” se esco!e un “:ertical+rrangement” y se suelta sore la pantalla del :ie0er. El componente :ertical+rrangement es para for*ar una distriución vertical de los componentes 'ue se suelten sore &l. +sí se asegura 'ue la disposición de los elementos en la pantalla es en vertical% independientemente del tamaño y los componentes 'ue pongamos. 9espu&s
se añade% sore el :ertical+rrangement,% un Te$tBo$ 3de la pestaña Basic4% un
Kori*ontal+rrangement y un 1ael. 9espu&s se añaden dos Button sore el Kori*ontal+rrangement con lo 'ue se asegura 'ue los otones van a estar siempre colocados uno al lado del otro% en hori*ontal. 9ee 'uedar una pantalla como la siguiente6
8ara 'ue cuando se haga el programa podamos identificar ien los o!etos 'ue est#n en la pantalla es conveniente darles nomres identificativos de su función. 8ara renomrar los o!etos 'ue se han puesto en el paso anterior hay 'ue seleccionarlos en el apartado Components y pulsar el otón !ename. En este programa renomramos el cuadro de te$to% los otones y el lael a t$tInput%tn?uevo% tn;in y llresultado
"na ve* 'ue han sido renomrados los o!etos% a algunos de ellos se le camian las propiedades.
8ara este programa vamos a hacer 'ue el t$tInput sólo acepte n)meros% por lo 'ue activamos la propiedad ?umersDnly en sus propiedades% tal y como se ve en la imagen anterior. El interfa* de la aplicación ya est# completo% ahora toca hacer el programa mediante el editor del de lo'ues de programación% 'ue se arir# pulsando en el otón “Dpen the Bloc> Editor” del diseñador. "na ve* aierto% para empe*ar% se definen mediante el lo'ue 'ue se encuentra en “Builtin” J “9efinition”% dos variales. "na de ellas es una lista a la 'ue se ha llamado lista"numeros. (u lo'ue se arrastra desde “BuiltIn”J”1ists”J”ma>e a list”. En esta lista se ir#n almacenando cada uno de los n)meros 'ue el usuario introdu*ca cuando 'uiera comparar varios.
1a otra variale se llama ma$imo y se usar# cuando el usuario pulse el otón ;in. En ese momento se recorrer# lista de tn?uevo. Cada ve* 'ue el usuario pulse en ese otón se har#n los siguientes pasos6 o o o
+ñadir el te$to de t$tInput como un nuevo elemento de lista
;inalmente se ha programado la parte m#s comple!a% lo 'ue ocurre cuando el usuario pulsa tn;in6 •
•
8rimero añade el valor 'ue haya todavía en t$tInput a la lista + continuación recorre lista
(i alor es un n)mero compruea O
o
(i alor es mayor 'ue m#$imo% m#$imo pasa a ser valor
•
9espu&s de averiguar el m#$imo lo muestra en llNesultado
•
Neinicia ma$imo a / para volver a empe*ar
•
:acía lista
Es algo tedioso el tener 'ue ir camiando continuamente de las pestañas de “BuiltIn” a “2y 9efinitions” por'ue cada ve* 'ue se haga referencia a una variale creada o a un componente colocado en el diseño hay 'ue uscarlo en “2y 9efinitions”% mientras 'ue cada ve* 'ue se 'uiera poner una sentencia% ucle% un n)mero% un te$to en lanco o una condición hay 'ue locali*arlo en la pestaña “BuiltIn”. Con la pr#ctica se hace f#cil encontrar cada cosa% pero al principio suele ocurrir 'ue el usuario no encuentra en 'u& apartado est# lo 'ue necesita. En cual'uier caso% como todo el programa se ha hecho arrastrando y soltando lo'ues no es posile cometer errores de sinta$is. (e puede ver tami&n como% sin definir las variales% la aplicación se encarga autom#ticamente de convertir te$tos o strings a n)meros y viceversa. ;inalmente podemos proar en nuestro móvil o en el emulador el programa y comproar si todo ha ido ien. 8ara ello pulsamos el otón “Connect to 9evice...” de la es'uina superior derecha del editor de lo'ues y le decimos 'ue transfiera el programa al dispositivo deseado.
8odemos ir modificando tanto el programa de lo'ues como el diseño gr#fico despu&s de haer conectado al móvil o al emulador y se ver# en tiempo real como camia el diseño de la aplicación en el dispositivo. +dem#s% en caso de 'ue huiera errores en la lógica del programa 'ue 'uisi&ramos depurar% tami&n e$iste un sistema de depuración , muy completo para poder ver el flu!o del programa% valores de variales% etc. En la 0e oficial de +pp Inventor e$iste una completa referencia ,5 'ue e$plica la funcionalidad de todos y cada uno de los lo'ues disponiles para el lengua!e de programación. E$plica reve y concisamente los lo'ues y es un sitio ideal para familiari*arse con las posiilidades de +pp Inventor y consultar las dudas 'ue puedan surgir al hacer los programas.
