Uso de Appinventor en La Asignatura de Tecnologias de La Comunicacion y La Informacion

Uso de AppInventor en la asignatura de Tecnologías de la Información y la Comunicación Escrito por José Luis Rederjo Miércoles, 20 de Febrero de 2013 00:00

En el actual diseño del Bachillerato en España se propone “Tecnologías de la Información y la Comunicación como asignatura optativa”. Entre los objetivos generales de esta asignatura se puede leer “Usar los recursos informáticos como instrumento de resolución de problemas específicos” o “Integrar la información textual, numérica y gráfica obtenida de cualquier fuente para elaborar contenidos propios y publicarlos ... y formatos que faciliten la inclusión de elementos multimedia decidiendo la forma en la que se ponen a disposición del resto de usuarios”. Son muchos los profesores que enseñan algún lenguaje de programación como una de las herramientas para alcanzar estos objetivos.

En este artículo se propone usar App Inventor 1 como parte del curriculum de esta asignatura. App Inventor es al mismo tiempo un lenguaje de programación, una herramienta de diseño y un entorno de desarrollo de aplicaciones para móviles y tablets que funcionen con el sistema operativo Android. Android. App Inventor permite también también ejecutar las aplicaciones aplicaciones en un emulador, por lo que no es imprescindible i mprescindible disponer del teléfono para probar los programas que se hagan.

1 / 19


2 3 Massachusetts App fue desarrollado por Google, en de 2011 claramente Software de Libre inspirado bajo (MIT). laylicencia toma El lenguaje muchos Apache de elementos 2.0 programación ypero su desarrollo deAgosto Scratch que se se traspasó usade en fue App al publicado Inventor Tecnológico está como que está siendo el MIT desde hace más ocho años. En se construye laInventor imagen el siguiente interfaz se gráfico puede deapreciar la mismo aplicación: la herramienta de diseño en el Instituto navegador con la que

2 / 19


¿Por qué App Inventor? Casi todos los lenguajes de programación tienen una sintaxis que al principiante le suena a chino. Son una mezcla de inglés y extrañas reglas de sintaxis. Como ejemplo, el programa más pequeño que se puede hacer en Java es algo así:

class Hola { public static void main(String [] args)

3 / 19


{ System.out.println("Hola mundo"); } }

Es evidente que al aprender a programar la sintaxis provoca una curva de aprendizaje significativa. Aunque hay lenguajes más limpios en este sentido que Java, como Python, siempre requiere 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 problemas, tal y como pedía el primero de los objetivos de la asignatura de TIC.

Con App Inventor se aprende a programar usando bloques de programación. Estos bloques están hechos con elementos comunes a la mayoría de los lenguajes de programación existentes. Se colocan bloques para construir bucles, condiciones, variables, etc. que permiten pensar lógicamente y solucionar los problemas de forma metódica, sin perder el tiempo en encontrar el punto y coma o los dos puntos que están donde no deben y producen errores de compilación o ejecución.

4 / 19


3: Diagrama de funcionamiento de App Inventor Imagen de http://appinventor.mit.edu/explore/content/what-app-inventor.html Creative Commons Reconocimiento-CompartirIgual bajo licencia Es estén requiere cada que de indica bloque. traducidos esperar un en pequeño De parte que, todos aparte otros al su esfuerzo igual función modos, idiomas. que o de los hicieron elEn traducción bloques componente la informática actualidad con están Scratch, al estudiante alclasificados que sólo en hacen están elylicencias para futuro referencia. mediante entender los bloques un qué en criterio inglés, es de lo App de que lo Inventor colores que hace Además hacen especialmente de los elementos adecuado: pedagógicos, App Inventor tiene algunas características que loy los 1. alumnos software libre, no es necesario la de por parte del profesor instalada, Es multiplataforma: con “java web start”. requiere sólo de un navegador ladisponibles máquina virtual de Java 3. hoy2. enseñar en día en programación buena sus propios del para teléfonos futuro dispositivos el de fruto la móviles. deadquisición su trabajo. Los y3.0 es teléfonos atractivo ypara las tabletas los alumnos están poder marcando

Elementos de programación en App Inventor

Veamos algunos de esos bloques de App Inventor:

5 / 19


Sentencias Al programar necesitamos a menudo decirle al ordenador que haga algo. En App Inventor existen numerosos bloques que son sentencias de programación. Se distinguen rápidamente porque expresan una acción a realizar con un verbo en imperativo. Los más habituales son call , set y def (abreviatura de define). Además, los bloques que son sentencias sólo están disponibles en dos colores: azul para modificar variables o propiedades de un objeto y naranja para llamar a funciones. En la imagen siguiente se ven algunos ejemplos de las sentencias para dividir un texto en partes, convertirlo a mayúsculas, cambiar la altura, texto o visibilidad de un recuadro de texto o definir una variable.

Condiciones Con frecuencia necesitamos realizar distintas acciones en función de que ocurra o no algo. En App Inventor para condicionar nuestro programa tenemos las estructuras if-then, if-then-else , while y choose :

6 / 19


En encajar flujo.Las todos eltres estos testprimeras obloques pregunta estructuras que puede se devolver hace ver soncomo habituales el programa tenemos enpara la enmayoría la decidir parte de por superior los donde lenguajes, un continuar espacio la última, su para ose es prácticamente igual ase if-then-else test. con la diferencia de que permite una variable en función de que se cumpla o no elcho ,

Bucles

Un bucle provoca la ejecución repetida de varias sentencias. En App inventor disponemos de los bucles while , for range y foreach .

El primero ejecutará el bloque de sentencias que se encajen en el apartado do mientras se cumpla la condición que refleje el test. for range es el típico bucle “for ” de otros lenguajes de programación y, como tal, tiene las opciones de elegir el nombre de la variable que itera, su comienzo, fin y el tamaño de los saltos de iteración. Finalmente, foreach es un iterador sobre los elementos de una lista.

Variables

7 / 19


Disponemos de las herramientas para definir y cambiar variables. El tipo puede ser numérico o un texto y “se declara” al asignarle un valor por primera vez.

En el gráfico anterior se ve como se declara una variable llamada “total_alumnos” y se le da un valor numérico de 30. Además se ven dos bloques muy importante en App Inventor. Su lenguaje cuenta con una estructura de datos llamada list (lista) que es similar a los Arrays de otros lenguajes de programación. Se ve el bloque con el que se define la lista “alumnos” (se define vacía al no añadirle ningún ite m ) y también se ve el bloque en el que se le añaden dos elementos a la lista alumnos. En este ejemplo se le añade el texto que contienen los cuadros de texto “TextBox1” y “TextBox2”.

Eventos Es indispensable que los programas que sean capaces de responder a la interacción del usuario con el interfaz. Es ahí donde toman su importancia los bloques de App Inventor, para ejecutar acciones en respuesta a los eventos que se produzcan en el teléfono o el tablet.

El nombre de los distintos eventos dependen del objeto que los provoca. Un botón avisa de cuando se ha hecho clic sobre él, mientras que el acelerómetro avisa de cuando se ha agitado el móvil, la mensajería de cuando se ha recibido un mensaje, el objeto de Twitter de cuando hemos sido mencionados en esa red social, la cámara de fotos de cuando se ha hecho una foto y así sucesivamente.

8 / 19


En botón que un funcionalidades Bluetooth, lade con imagen App o hacer imagen, Inventor anterior que llamadas, sino tienen se no también pueden sólo enviar los se teléfonos dispone ver de ytodos recibir otros algunos yde muchos tablets mensajes, objetos de estos Android. objetos que las eventos. coordenadas que Tenemos nos Dede dan esta colocar acceso de acceso selección posición abotones, Internet, la a las pantalla se GPS, etc. como etiquetas, También son de elementos desarrollo. color se cuadros que puede verde. “My hayan blocks” de apreciar Tienen texto, sido es colocados este como etc. donde color se porque manualmente leen los eventos oson manipulan parte en tienen el dese entorno las la lapueden sección propiedades estructura diseño: “My “When blocks” deen los evento distintos en elaprecia brújula, entorno do”, y

Como usar App Inventor

App Inventor requiere que el ordenador tenga alguno de estos sistemas operativos:

- GNU/Linux: Ubuntu 8+, Debian 5+ - Macintosh (con procesador Intel): Mac OS X 10.5, 10.6 - Windows: Windows XP, Windows Vista, Windows 7

Necesita también de conexión a Internet (los programas y las aplicaciones se cargan siempre desde Internet) y uno de los siguientes navegadores web con estas versiones mínimas:

-

Mozilla Firefox 3.6, sin la extensión NoScript instalada Apple Safari 5.0 Google Chrome 4.0 Microsoft Internet Explorer 7

9 / 19


Se necesita también una cuenta de correo electrónico de Gmail y Java Web Start instalado en el ordenador.

El software para ejecutar los programas se descarga de http://appinventor.mit.edu/explore/con tent/install-app-inventor-software.html , donde se elegirá una opción u otra dependiendo del sistema operativo que se esté usando. En el caso de Macintosh o Windows se dispone del típico instalador para estos entornos. En sistemas Gnu/Linux Debian o derivados se proporcionan los paquetes deb de instalación 4

o la opción de instalar directamente desde un archivo comprimido tar.gz 5

. Nota importante: En el caso de instalar en un sistema Linux de 64 bits es necesario asegurarse de que están instalados algunos paquetes para que el software funcione. En 6

se puede ver la lista de paquetes necesarios.

Este software permitirá no solo ejecutar los programas en nuestro móvil o en el emulador, sino que dispone además de un intuitivo interfaz de depuración que ayuda a encontrar errores de programación. Para que App Inventor pueda comunicarse desde el ordenador con el móvil usando el cable USB es necesario ir a los ajustes del móvil ->Opciones de desarrollador y activar la opción “Depuración de USB”.

Importante: Es conveniente instalar este software, pero no necesario para hacer los programas. Si no se instala saldrá un mensaje de error cada vez que se carga la aplicación de desarrollo avisando de que no encuentra el entorno de emulación, pero se puede realizar el programa igualmente.

Si el ordenador está conectado a Internet, dispone del sistema operativo y el navegador adecuado y tiene Java instalado ya se puede empezar a programar. En el navegador hay que introducir la dirección http://beta.appinventor.mit.edu/ . Entonces pedirá nuestros datos de acceso al correo de Gmail y, si es la primera vez que se accede, pedirá permiso para usar esa cuenta de correo. Una vez que se le concede el permiso se carga la siguiente pantalla:

10 / 19


Se puede usuario. MIT. Internet mismo Por interfaz sin En tanto, apreciar que App da podemos tengamos Inventor que selos abrir trata que proyectos nuestros llevar de para descargar los simple se proyectos archivos guardan vista el de archivo desde “en del unla listado lado cualquier nube”, del aproyecto de otro. es proyectos ordenador decir, Ensicualquier se enproyecto quiere. hechos los conservidores caso, conexión por el del a Haciendo clic sobre elopciones botón New inmediatamente selas abrirá la siguiente , una pedirá ventana: el nombre que queramos darle al e este

Se de En usar trata ella se ningún de han la ventana marcado lenguaje del con de diseñador programación, números en cada labase que todo una se de ely construye, interfaz sus partes gráfico mediante principales: que va el a ratón, tener sin lasoltarlo necesidad aplicación. 1. La paleta contiene vídeo, elementos no se ven etc. en gráficos pantalla como del todos cuadros móvil, los de como elementos texto, botones, que de datos podemos lienzo (TinyDB), de insertar dibujo acelerómetro, en (Canvas) nuestra yProperties aplicación. elementos de Hay que 2. Viewer móvil. visor. automáticamente Los Para elementos añadir :la El visor se un desplazarán que elemento de la no pantalla, tengan a la debajo visibilidad simula de la él apariencia hay bajo que que el arrastrarlo epígrafe arrastrarlos visual “Non-visible que desde también tendrá la paleta la components” al aplicación viewer ycámara yde en en el el 3. Components Cualquier ahí. borrarlo. Si se quiere componente borrar muestra que alguno haya la es lista sido en de la arrastrado los componentes de componentes soltado que desde donde se han la paleta está colocado al botón visor en que el aparecerá proyecto. permite 4. Media muestra proyecto. insertarlo usando Cualquier este archivo las apartado distintas de imagen para imágenes que olista audio esté yhay sonidos disponible. que se quiera que estarán usar en disponibles la aplicación para hay el que 5. Properties aparecerán hacer etc. Windows Para clic aquellos o sobre Gambas todos un :clic cada los que componente en detalles hayan vez Linux que usado le que en será TextBox se el antes Viewer muy puedan se familiar entornos podrá se cambiar seleccione esta cambiar de forma desarrollo ese un en de componente. componente, Properties trabajar. del tipo su de Por en color, Visual ejemplo, texto, Studio al fuente, en Este necesario editor”. con pantalla Java es Eso el un Web hacer entorno texto hará Start. indicativo que en en Mientras el el navegador que botón de se se la diseña de carga: descarga avise lapantalla esquina la de aplicación. la que aplicación superior va ade Para descargar derecha aparecerá poder con una realizar en el aplicación la texto parte lael programación “Open inferior que the arrancará blocks la es

11 / 19


Al terminar móvil aparecerá la carga, estesimensaje: no está instalada la aplicación que permite la ejecución o simulación del

Tras aceptar el mensaje aparecerá por fin el editor de bloques de programación:

12 / 19


los Esta gráfico. “blanco” menús es Se la a la que puede derecha dan apreciar que acceso donde usaremos como apantalla se esos irán está para bloques. arrastrando dividida hacer los en los dos de que muy programación interaccionan claras: un enorme ymediante con a la el izquierda lienzo interfaz en El menú está formado por tres pestañas: Built-In ,programas My partes Blocks y Advanced ellas cada aparecen caso. apropiedades su vez distintos menús que permitirán seleccionar , enchufado ypodrán bajo disponibles cada en de 1. dicho, Built-In distribuidos contiene en las los secciones bloques que Definition, componen Text, el lenguaje Math, de Logic, programación Control yver propiamente Colors. 2. hayan programa My sido Blocks colocados sus ya se en ha la nombrado y eventos Viewer anteriormente del diseñador ybloques contendrá para poder una lista acceder de los elementos el que 3. comunes tipo. algunas Advanced propiedades ejemplo, aapantalla todos es los al una colocar elementos que pestaña afecten un par que que simultáneamente de hemos permite botones colocado acceder aparecerá aLists, los en de el forma todos “Any Viewer Button” los global botones. ylos que abloques y algunas se sean de propiedades un cambiar mismo ahí En botones ordenador laPor parte que osuperior lanzar dan acceso el derecha emulador. a conectar del editor con de un bloques teléfono de Android programación que estuviera se pueden también aluna los

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 pantalla 7 . Se pueden encontrar por Internet también ejemplos avanzados 8

que usan bases de datos y el reconocimiento de voz 9

o desarrollos curriculares completos. En concreto, hay varios 10

11

que están orientados para alumnos del primer curso universitario en facultades de ciencias, y

13 / 19


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:

14 / 19


Para pantalla objetos que es cuando conveniente se han sepuesto haga darles el enprograma elnombres paso anterior podamos identificativos identificar quelos de seleccionarlos subien función. los objetos Para en elrenombrar que estánCompone los enyla nts pulsar al botón Rename .btnFin En este yque lblresultado programa renombramos el cuadro dehay texto, botones y el label aapartado txtInput,btnNuevo,

15 / 19


Una vez que han sido renombrados los objetos, a algunos de ellos se le cambian las propiedades.

16 / 19


Para la propiedad este programa NumbersOnly vamos en a hacer sus propiedades, que el txtInput talsólo ytoca como acepte se ve números, en la imagen por loalmacenando anterior. que El del interfaz diseñador. de bloques dedos lade aplicación programación, ya está que completo, sees abrirá ahora pulsando hacer en el botón el programa “Open mediante the Block el Editor” editor Una “Definition”, vez variables. para empezar, Una de se ellas definen una mediante lista alist”. ellabloque que se que ha llamado se encuentra enactivamos “Built-in” lista_numeros bloque cada uno seabierto, de arrastra los números desde “Built-In”->”Lists”->”make que el usuario introduzca a cuando En quiera esta lista comparar se irán varios. . Su->

hay La momento máximo que variable yarrastrarlo se seael recorrerá irá se almacenando llama desde lista_numeros, maximo “Built-in”->”Math-”>number ahí yelse mayor se usará irá de comparando cuando los números el usuario cada valor pulse que el Como botón contiene Fin. con un En número, ese el pulse A continuación en ese botón se se harán ha programado los siguientes evento pasos: Click de btnNuevo. Cada vez queserá el usuario Añadir texto de txtInput como un nuevo elemento derevisados. lista_numeros Poner cero el texto de txtInput -otra Asegurase de que lblResultado tiene el texto “Introduciendo números”

btnFin: Finalmente seañade ha un programado la parte más loa que el usuario pulsa Primero el lista valor que haya todavía en txtInput a laocurre lista cuando de -losSi A elementos continuación de la recorre lista_numeros, los máximo recorre. asignando una variable llamada valor cada uno valor es número comprueba … compleja, mayor quesegún máximo, pasa a ser valor 17 / 19


- Después de averiguar el máximo muestra en ningún lblResultado Reinicia maximo a 0 para volver alo empezar Vacía lista_numeros asignándola de nuevo sin elemento

Es algo Definitions” colocado quiera localizarlo principio tedioso suele en en porque el una laocurrir diseño el pestaña sentencia, tener cada que hay que “Built-In”. vez el que bucle, ir usuario que buscarlo se Con un haga no la encuentra en práctica continuamente referencia “My un Definitions”, se texto en aemulador hace qué una en de apartado fácil variable blanco las encontrar pestañas ocreada está una que condición cada de cada que olas “Built-In” un cosa, necesita. vez componente hay que pero aque se “My al En posible aplicación cualquier cometer se caso, encarga errores como automáticamente de todo sintaxis. el programa Se puede de se convertir ha hecho también arrastrando como, omientras strings sin yde adefinir soltando números bloques variables, y viceversa. no la es derecha Finalmente todo haponer ido del bien. podemos editor Para de probar bloques ello pulsamos en ycambiando nuestro le decimos elnúmero, botón móvil que “Connect over en transfiera eltextos to el Device...” programa el programa allalo dispositivo esquina ya comprobar superior deseado. si

18 / 19


12 en 13 1 2 Podemos haber aplicación que conectado iroficial en modificando dispositivo. depurar, al móvil tanto obloques también al Además, emulador elvalores programa enun ycaso un se de sistema verá de bloques que en para tiempo de hubiera como depuración real elerrores diseño como gráfico cambia la lógica el del programa de de lade poder flujo del programa, de variables, etc. muy completo para 3 En laquisiéramos web de App Inventor existe una completa referencia de breve App todos Inventor yver concisamente yel cada yelconsultar uno de los los las bloques dudas yexiste que disponibles es puedan sitio ideal surgir para el al lenguaje hacer familiarizarse los de programas. que programación. con explica lasdespués posibilidades ladiseño funcionalidad Explica 4 http://appinventor.mit.edu/ 5 https://groups.google.com/d/msg/app-inventor-announcements/jTfW1d2OMxo/t55dux2btvYJ 6 http://scratch.mit.edu/ 7 http://dl.google.com/dl/appinventor/installers/linux/appinventor-se tup_1.1_all.deb 8 http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1.tar.gz 9 Wheezy Hay que o instalar superior lib32stdc++6 o ia32-libs-core y lib32ncurses5. en Debian Squeeze Además o se inferior debe instalar ia32-libs en Debian 10 http://gigaom.com/mobile/hands-on-with-googles-android-app-inventor/ 11 12 http://www.appinventorblocks.com/appinventor-tutorials-tips http://notes.hfoss.org/index.php/AppInventor:Advanced_Tutorials 13 https://sites.google.com/a/usfca.edu/cs107/home https://sites.google.com/site/appinventoredu other/testing.html http://beta.appinventor.mit.edu/learn/reference/

http://beta.appinventor.mit.edu/learn/reference/

19 / 19

Uso de Appinventor en La Asignatura de Tecnologias de La Comunicacion y La Informacion

Recommend Documents