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

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin
Escrito por Jos Luis Rederjo Mircoles, 20 de Febrero de 2013 00:00
En el actual diseo del Bachillerato en Espaa se propone Tecnologas de la Informacin y la Comunicacin como asignatura optativa. Entre los objetivos generales de esta asignatura se puede leer Usar los recursos informticos como instrumento de resolucin de problemas especficos o Integrar la informacin textual, numrica y grfica obtenida de cualquier fuente para elaborar contenidos propios y publicarlos ... y formatos que faciliten la inclusin de elementos multimedia decidiendo la forma en la que se ponen a disposicin del resto de usuarios. Son muchos los profesores que ensean algn lenguaje de programacin como una de las herramientas para alcanzar estos objetivos.
En este artculo se propone usar App Inventor 1 como parte del curriculum de esta asignatura. App Inventor es al mismo tiempo un lenguaje de programacin, una herramienta de diseo y un entorno de desarrollo de aplicaciones para mviles y tablets que funcionen con el sistema operativo Android. App Inventor permite tambin ejecutar las aplicaciones en un emulador, por lo que no es imprescindible disponer del telfono para probar los programas que se hagan.
1 / 19

2 3 Massachusetts App Inventor fue Google, pero en de 2011 Software de claramente Libre inspirado bajo (MIT). laylicencia toma El lenguaje muchos Apache de elementos 2.0 programacin y su desarrollo deAgosto Scratch que se se traspas usade en fue App al publicado Inventor Tecnolgico est como que est siendo desarrollado por el MIT desde hace ms ocho aos. se En construye la imagen el siguiente interfaz se grfico puede deapreciar la mismo aplicacin: la herramienta de diseo en el Instituto navegador con la que
2 / 19

Por qu App Inventor?

Casi todos los lenguajes de programacin tienen una sintaxis que al principiante le suena a chino. Son una mezcla de ingls y extraas reglas de sintaxis. Como ejemplo, el programa ms pequeo 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 ms limpios en este sentido que Java, como Python, siempre requiere invertir mucha prctica y tiempo en aprender los comandos, sus reglas de escritura, sentido de los distintos signos de puntuacin, etc. Todo este tiempo es tiempo no empleado en aprender a disear algoritmos para resolver problemas, tal y como peda el primero de los objetivos de la asignatura de TIC.
Con App Inventor se aprende a programar usando bloques de programacin. Estos bloques estn hechos con elementos comunes a la mayora de los lenguajes de programacin existentes. Se colocan bloques para construir bucles, condiciones, variables, etc. que permiten pensar lgicamente y solucionar los problemas de forma metdica, sin perder el tiempo en encontrar el punto y coma o los dos puntos que estn donde no deben y producen errores de compilacin o ejecucin.
4 / 19

Imagen 3: Diagrama de funcionamiento de App Inventor de http://appinventor.mit.edu/explore/content/what-app-inventor.html Creative Commons Reconocimiento-CompartirIgual bajo licencia Es estn requiere cada que de indica bloque. traducidos esperar un en pequeo De parte que, todos aparte otros al su esfuerzo igual funcin modos, idiomas. que de o los hicieron el En traduccin bloques componente la informtica actualidad con estn Scratch, al estudiante alclasificados slo que en hacen estn el para futuro referencia. mediante entender los bloques un qu en criterio ingls, es de App de que lo colores Inventor que hace Adems hacen especialmente de los elementos adecuado: pedaggicos, App Inventor tiene algunas caractersticas que loy los 1. alumnos software libre, no es necesario la adquisicin de licencias por parte del profesor 2. instalada, Es multiplataforma: con java web start. requiere slo de un navegador y ladisponibles mquina virtual delo Java 3. hoy ensear en da en programacin buena sus propios para del telfonos futuro dispositivos el de fruto la mviles. de su trabajo. Los y 3.0 es telfonos atractivo ypara las tabletas los alumnos estn poder marcando
Elementos de programacin 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 programacin. Se distinguen rpidamente porque expresan una accin a realizar con un verbo en imperativo. Los ms habituales son call , set y def (abreviatura de define). Adems, los bloques que son sentencias slo estn 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 maysculas, cambiar la altura, texto o visibilidad de un recuadro de texto o definir una variable.
Condiciones
Con frecuencia necesitamos realizar distintas acciones en funcin 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 prcticamente encajar flujo.Las todos el tres estos test primeras obloques pregunta estructuras que puede se devolver hace ver son como habituales el programa tenemos en para la enmayora la decidir parte de por superior los donde lenguajes, un continuar espacio la ltima, su para ose es igual ase if-then-else test. con la diferencia de que permite una variable en funcin de que se cumpla o no elcho ,
Bucles
Un bucle provoca la ejecucin 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 domientras se cumpla la condicin que refleje el test. for range es el tpico bucle for de otros lenguajes de programacin y, como tal, tiene las opciones de elegir el nombre de la variable que itera, su comienzo, fin y el tamao de los saltos de iteracin. 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 numrico o un texto y se declara al asignarle un valor por primera vez.
En el grfico anterior se ve como se declara una variable llamada total_alumnos y se le da un valor numrico de 30. Adems 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 programacin. Se ve el bloque con el que se define la lista alumnos (se define vaca al no aadirle ningn ite m ) y tambin se ve el bloque en el que se le aaden dos elementos a la lista alumnos. En este ejemplo se le aade el texto que contienen los cuadros de texto TextBox1 y TextBox2.
Eventos
Es indispensable que los programas que sean capaces de responder a la interaccin 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 telfono o el tablet.
El nombre de los distintos eventos dependen del objeto que los provoca. Un botn avisa de cuando se ha hecho clic sobre l, mientras que el acelermetro avisa de cuando se ha agitado el mvil, la mensajera de cuando se ha recibido un mensaje, el objeto de Twitter de cuando hemos sido mencionados en esa red social, la cmara de fotos de cuando se ha hecho una foto y as sucesivamente.
8 / 19

En desarrollo. que un funcionalidades Bluetooth, botn la con imagen App ocuadros hacer imagen, Inventor anterior que llamadas, sino tienen se no tambin pueden slo enviar los se telfonos dispone ver de y recibir otros algunos yde muchos tablets mensajes, objetos de estos Android. objetos que las eventos. se coordenadas que Tenemos pueden nos De dan esta colocar acceso de acceso seleccin posicin en a Internet, la a las pantalla se GPS, aprecia etc. como etiquetas, Tambin son de elementos de color se que puede verde. My hayan blocks de apreciar Tienen sido texto, es colocados este como etc. donde color todos se porque manualmente leen los eventos o son manipulan parte en tienen el de entorno las la la seccin propiedades estructura de diseo: My When blocks de botones, los evento distintos en el brjula, 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 tambin de conexin a Internet (los programas y las aplicaciones se cargan siempre desde Internet) y uno de los siguientes navegadores web con estas versiones mnimas: Mozilla Firefox 3.6, sin la extensin NoScript instalada Apple Safari 5.0 Google Chrome 4.0 Microsoft Internet Explorer 7
9 / 19

Se necesita tambin una cuenta de correo electrnico 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 opcin u otra dependiendo del sistema operativo que se est usando. En el caso de Macintosh o Windows se dispone del tpico instalador para estos entornos. En sistemas Gnu/Linux Debian o derivados se proporcionan los paquetes deb de instalacin
4 5
o la opcin de instalar directamente desde un archivo comprimido tar.gz . Nota importante: En el caso de instalar en un sistema Linux de 64 bits es necesario asegurarse de que estn 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 mvil o en el emulador, sino que dispone adems de un intuitivo interfaz de depuracin que ayuda a encontrar errores de programacin. Para que App Inventor pueda comunicarse desde el ordenador con el mvil usando el cable USB es necesario ir a los ajustes del mvil ->Opciones de desarrollador y activar la opcin Depuracin 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 aplicacin de desarrollo avisando de que no encuentra el entorno de emulacin, 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 direccin 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 las que seabrir los trata que proyectos nuestros llevar para de, una descargar los simple se proyectos archivos guardan vista el de archivo desde en del unlistado la lado cualquier nube, del a proyecto de otro. es proyectos ordenador decir, Ensi cualquier se en quiere. hechos los con servidores caso, conexin por el del a Haciendo clic sobre elopciones botn New inmediatamente se abrir la siguiente pedir ventana: el nombre que queramos darle al proyecto e este
Se de En usar trata ella se ningn de han la ventana marcado lenguaje del con de diseador programacin, nmeros en cada la que todo una se de el construye, interfaz sus partes grfico mediante principales: que va el a ratn, tener sin la necesidad aplicacin. 1. La paleta elementos no vdeo, se ven etc. en grficos pantalla contiene como del todos cuadros mvil, los de como elementos texto, base botones, que de datos podemos lienzo (TinyDB), de insertar dibujo acelermetro, en (Canvas) nuestra y aplicacin. cmara elementos de Hay que 2. Viewer automticamente mvil. visor. Los Para elementos aadir :la El visor se un desplazarn que elemento de la no pantalla, tengan a la debajo pantalla visibilidad simula de la l hay apariencia hay bajo que que el arrastrarlo epgrafe arrastrarlos visual Non-visible que desde tambin tendr la paleta la components al aplicacin viewer y soltarlo y 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 lista los componentes de componentes y soltado que desde donde se han la paleta est colocado el al botn visor en que el aparecer proyecto. permite 4. Media proyecto. insertarlo usando Cualquier muestra este archivo las apartado distintas de imagen para imgenes que o audio est y sonidos disponible. que se quiera que estarn usar en disponibles la aplicacin para hay el que 5. Properties aparecern 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 Viewerse muy puedan se familiar entornos podr cambiar seleccione esta cambiar de de forma desarrollo ese un en de componente. componente, Properties trabajar. del tipo su de Por en color, Visual Properties 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 el navegador que botn de se se la disea de carga: descarga avise la esquina la de aplicacin. la que aplicacin superior va a Para descargar derecha aparecer poder con una realizar en el aplicacin la texto parte la programacin Open inferior que the arrancar de blocks la es
11 / 19

Al terminar mvil aparecer la carga, estesi mensaje: no est instalada la aplicacin que permite la ejecucin o simulacin del
Tras aceptar el mensaje aparecer por fin el editor de bloques de programacin:
12 / 19

los Esta grfico. blanco mens es Se la a pantalla la que puede derecha dan apreciar que acceso donde usaremos como a se esos irn est para bloques. arrastrando dividida hacer los en los dos bloques partes que de muy programacin interaccionan claras: un enorme y con a la el izquierda lienzo interfaz en El men est formado por tres pestaas: Built-In ,programas My Blocks y Advanced ellas cada aparecen caso. apropiedades su vez distintos mens que permitirn seleccionar los bloques , enchufado y bajo disponibles cada en de 1. dicho, Built-In distribuidos contiene en las los secciones bloques que Definition, componen Text, el Lists, lenguaje Math, de Logic, programacin y propiamente Colors. 2. hayan programa My sido Blocks a colocados sus ya se en ha la nombrado pantalla y eventos Viewerdel anteriormente diseador y contendr para poder una lista acceder de los mediante elementos el que 3. comunes tipo. algunas Por Advanced propiedades ejemplo, a todos es los al una colocar elementos que pestaa afecten un par que que simultneamente de hemos permite botones colocado acceder aparecer a los en de el forma todos Any Viewer Button los global y botones. que aControl yalgunas sean se podrn de propiedades un cambiar mismo ah En botones ordenador la parte que o superior lanzar dan acceso el derecha emulador. a conectar del editor con de un bloques telfono de Android programacin que estuviera se pueden ver tambin 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 pgina oficial hay un enlace bien visible llamado Teach donde se puede acceder a decenas de ejemplos y tutoriales de uso. Es casi un clsico empezar con la aplicacin Hello Purr en la que un gatito maulla al pulsar en la pantalla 7 . Se pueden encontrar por Internet tambin ejemplos avanzados
8 9
que usan bases de datos y el reconocimiento de voz o desarrollos curriculares completos. En concreto, hay varios
10 11
que estn orientados para alumnos del primer curso universitario en facultades de ciencias, y
13 / 19

con pequeas 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 cmo hacer aplicaciones visuales para los mviles, a continuacin se expondr cmo hacer una aplicacin con un interfaz sencillo en el que prime ms la parte de solucin de problemas. Para ello , vamos a hacer el ejercicio tpico en los cursos de lenguajes de programacin de decir cul el mayor nmero de entre tres o ms.
Primero hay que hacer el diseo en el navegador, usando el diseador de App Inventor. En la paleta, en la seccin Screen Arrangement se escoje un VerticalArrangement y se suelta sobre la pantalla del Viewer. El componente VerticalArrangement es para forzar una distribucin vertical de los componentes que se suelten sobre l. As se asegura que la disposicin de los elementos en la pantalla es en vertical, independientemente del tamao y los componentes que pongamos.
Despus se aade, sobre el VerticalArrangement1, un TextBox (de la pestaa Basic), un HorizontalArrangement y un Label. Despus se aaden 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 se puesto haga darles el en programa el nombres paso anterior podamos identificativos identificar que de seleccionarlos su bien funcin. los objetos Para en elrenombrar apartado que estnCompone los en y la nts pulsar al botn Rename btnFin . En este yque lblresultado programa renombramos el cuadro dehay texto, los botones y el label a txtInput,btnNuevo,
15 / 19

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

la Para este programa NumbersOnly vamos en a hacer sus propiedades, que el txtInput talslo y como se ve nmeros, en la imagen por loalmacenando anterior. que El propiedad del interfaz de diseador. bloques de lade aplicacin programacin, ya est que completo, sees abrir ahora pulsando toca hacer en el botn el programa Open mediante the Block el Editor editor Una Definition, vez abierto, dos variables. para empezar, Una de se ellas definen una mediante lista alist. el laacepte bloque que se que ha llamado se encuentra en activamos Built-in lista_numeros bloque cada uno se de arrastra los nmeros desde Built-In->Lists->make que el usuario introduzca a cuando En quiera esta listase comparar irn varios. . Su->
hay La momento mximo otra que variable y arrastrarlo se sea recorrer ir se almacenando llama desde lista_numeros, maximo Built-in->Math->number ah y el se mayor se usar ir de comparando cuando los nmeros el usuario cada revisados. valor pulse que el Como botn contiene Fin. con un En nmero, ese el pulse A continuacin en ese botn se se harn ha programado los siguientes evento pasos: Click de btnNuevo. Cada vez queser el usuario Aadir el texto de txtInput como un nuevo elemento de lista_numeros Poner cero el texto de txtInput Asegurase de que lblResultado tiene el texto Introduciendo nmeros
Finalmente btnFin: seaade ha mayor programado la parte ms lo ocurre el usuario pulsa Primero el valor que haya todava en txtInput a la lista cuando de losA elementos continuacin de la recorre lista lista_numeros, los mximo recorre. asignando aque una variable llamada valorcada uno Si un nmero comprueba compleja, valor es quesegn mximo, pasa a ser valor
17 / 19

Despus de averiguar el mximo muestra enningn lblResultado Reinicia maximo a 0 para volver alo empezar - Vaca lista_numeros asignndola de nuevo sin elemento
Es algo Definitions colocado quiera localizarlo principio poner tedioso suele en en porque el una la ocurrir diseo el pestaa sentencia, tener cada que hay que Built-In. vez el que bucle, ir usuario que cambiando buscarlo se Con un haga no nmero, la encuentra en prctica continuamente referencia My un Definitions, se texto en a hace qu una en de apartado fcil blanco variable las encontrar pestaas o creada est una que lo condicin cada cada de que o Built-In un cosa, necesita. vez componente hay que pero a que se My al En posible aplicacin cualquier cometer se caso, encarga errores como automticamente de todo sintaxis. el programa Se puede de se convertir ha ver hecho tambin arrastrando como, omientras strings sin y a definir soltando nmeros las bloques variables, y viceversa. no la es derecha Finalmente todo ha ido del podemos bien. editor Para de probar bloques ello pulsamos en y nuestro le decimos el botn mvil que Connect o en transfiera eltextos emulador to el Device... programa el programa de al la dispositivo esquina ya comprobar superior deseado. si
18 / 19

13 12en 1 2 Podemos haber aplicacin que quisiramos conectado ir en modificando elconsultar dispositivo. depurar, al mvil tanto o tambin al Adems, emulador elvalores programa existe en y caso un se de sistema ver de bloques que en para de tiempo hubiera como depuracin real el errores diseo como grfico cambia la lgica despus el del programa de de lade poder ver flujo del programa, de variables, etc. muy completo para 3 En la web oficial de App Inventor existe una completa referencia de breve App todos Inventor y concisamente yel cada y uno de los los las bloques bloques dudas y que disponibles es un puedan sitio ideal surgir para el al lenguaje hacer familiarizarse los de programas. que programacin. con explica las posibilidades ladiseo funcionalidad Explica 4 5 http://appinventor.mit.edu/ 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-setup_1.1_all.deb 8 http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1.tar.gz 9 Hay Wheezy que o instalar superior lib32stdc++6 o ia32-libs-core y lib32ncurses5. en Debian Squeeze Adems o se inferior debe instalar ia32-libs en Debian 10 http://gigaom.com/mobile/hands-on-with-googles-android-app-inventor/ 11 http://www.appinventorblocks.com/appinventor-tutorials-tips 12 13 http://notes.hfoss.org/index.php/AppInventor:Advanced_Tutorials https://sites.google.com/a/usfca.edu/cs107/home https://sites.google.com/site/appinventoredu http://beta.appinventor.mit.edu/learn/reference/other/testing.html
http://beta.appinventor.mit.edu/learn/reference/
19 / 19

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

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

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

Transféré par

Droits d'auteur :

Formats disponibles

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Escrito por Jos Luis Rederjo Mircoles, 20 de Febrero de 2013 00:00

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Por qu App Inventor?

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

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Elementos de programacin en App Inventor

Veamos algunos de esos bloques de App Inventor:

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Como usar App Inventor

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

se puede ver la lista de paquetes necesarios.

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Tras aceptar el mensaje aparecer por fin el editor de bloques de programacin:

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Debe quedar una pantalla como la siguiente:

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Uso de AppInventor en la asignatura de Tecnologas de la Informacin y la Comunicacin

Vous aimerez peut-être aussi