TALLER DE APLICACIONES MÓVILES CON MIT APP INVENTOR Índice de contenidos Empezando con MIT App Inventor 2 .............................................................................................. 1 Desarrollando aplicaciones y probándolas en vivo ................................................................... 2 Nuestra primera aplicación: DarthVader ...................................................................................... 3 Crear un proyecto ............................................................................................................................... 3 Diseño.................................................................................................................................................... 4 Propiedades de los componentes .................................................................................................... 4 Disposiciones ....................................................................................................................................... 6 Componente Botón............................................................................................................................. 6 Componente Sonido ........................................................................................................................... 8 Programación en MIT App Inventor ............................................................................................... 8 MIT AI2 Companion.............................................................................................................................. 9 Guardar el proyecto .......................................................................................................................... 10 Instalar la aplicación ......................................................................................................................... 11 Ejercicios ............................................................................................................................................... 12 Recursos multimedia de utilidad .................................................................................................. 12 Una app de dibujo: MyPaint .......................................................................................................... 13 Componente Lienzo .......................................................................................................................... 14 Ejercicios ............................................................................................................................................... 16 Lector de códigos de barras y QR: LectorQR ............................................................................. 17 Diseño de LectorQR .......................................................................................................................... 17 Bloques de LectorQR ........................................................................................................................ 17 Reconocimiento de voz y traducción: TraduVoz ..................................................................... 18 Bloques de TraduVoz ........................................................................................................................ 18 Conectividad a Internet y ubicación GPS: DondeEstoy ......................................................... 19 Diseño de DondeEstoy ..................................................................................................................... 19 Bloques de DondeEstoy ................................................................................................................... 19 Conclusiones ........................................................................................................................................ 20 Más información y referencias ...................................................................................................... 20 Empezando con MIT App Inventor 2 MIT App Inventor es una herramienta de desarrollo de aplicaciones móviles basada en la nube lo que significa que puedes crear tus aplicaciones simplemente utilizando un navegador web. Para comenzar accede al sitio web oficial de MIT App Inventor y haz clic en el botón "Create Apps!". Imagen 1 - http://appinventor.mit.edu/explore/ Los proyectos que realices se almacenarán automáticamente en los servidores del MIT y para garantizar el acceso a los mismos y la seguridad, MIT App Inventor utiliza un sistema de autenticación de cuentas de usuario basado en Google por lo que es imprescindible que dispongas de una y le concedas permiso para poder utilizarlo. Imagen 2 - Autenticación de Google para acceder a MIT App Inventor 1 22 Desarrollando aplicaciones y probándolas en vivo Cuando creamos nuestras apps con MIT App Inventor podemos ver en vivo los cambios que vamos realizando en un dispositivo real o emulado. Para conseguir esto MIT App Inventor necesita conectarse a una aplicación que se instala en el dispositivo móvil denominada MIT AI2 Companion. Esta aplicación es gratuita y puede descargarse de Google Play. Imagen 3 - MIT AI2 Companion El correcto funcionamiento de esta aplicación precisa que el ordenador donde desarrollamos la app y el dispositivo móvil puedan comunicarse directamente por lo que es altamente recomendable que ambos equipos compartan la misma red de comunicaciones, ya sea mediante cable o de forma inalámbrica. Si no disponemos de un dispositivo Android podemos utilizar el emulador oficial de App Inventor o bien usar alguno comercial como pueda ser Genymotion o BlueStacks. Para usar el emulador deberemos descargar e instalar el software específico para nuestro sistema operativo en: http://appinventor.mit.edu/explore/ai2/setup-emulator.html. Imagen 4 - Emulador de dispositivo Android 2 22 Nuestra primera aplicación: DarthVader Crearemos una primera aplicación que nos permitirá tomar confianza con la herramienta y ver su funcionamiento. Si lo deseamos podemos cambiar por completo el idioma de la plataforma, tanto en los menús como en los nombres de los componentes, sus propiedades y respectivos bloques. En adelante utilizaremos el idioma Español pero siéntete libre de seleccionar el que desees. Imagen 5 Selección de idioma Crear un proyecto Para comenzar cualquier proyecto haremos clic en la pantalla de "Mis Proyectos" en "Comenzar un proyecto nuevo..." y escribiremos un nombre1. Imagen 6 Creando un proyecto nuevo En este proyecto vamos a introducir la programación dirigida por eventos, paradigma del funcionamiento de MIT App Inventor, creando una sencilla aplicación que responderá a la interacción del usuario frente a dos botones. El diseño de la misma consistirá en la imagen del popular personaje de la película Star Wars junto con esos dos botones. La interacción del usuario será clave para determinar si la app reproduce un sonido o por el contrario termina. 1 Los nombres de los proyectos no deben contener símbolos, tildes ni espacios 3 22 Diseño Para realizar el diseño tendremos que arrastrar desde la parte izquierda de la vista de diseño(Paleta) a la parte central de la pantalla los siguientes componentes: • • • • • Imagen (interfaz de usuario) Disposición horizontal(disposición) Dos componentes tipo botón(interfaz de usuario) Disposición vertical(disposición) Sonido(medios) Observa como el componente sonido aparece como no visible ya que realmente no afecta a la apariencia de la aplicación sino que permitirá reproducir sonidos. En este componente tendremos que "cargar" el fichero de audio a reproducir mediante la ventana de medios o directamente subiéndolo en su propiedad Origen. Análogamente, el componente imagen necesita que "subamos" el fichero a mostrar, en este caso, la imagen del popular personaje de la saga. Imagen 7 Vista de diseño de nuestra app Propiedades de los componentes En App Inventor, como te habrás dado cuenta, cada componente tiene una serie de propiedades propias del tipo que podrán ser establecidas antes y/o durante la ejecución de la aplicación. Si vamos seleccionando los distintos componentes en la ventana Componentes en la parte derecha aparecerán las propiedades que podemos modificar. 4 22 • • • • • • • • • • • • • • • PantallaAcercaDe: Son los créditos de nuestra aplicación. DispHorizontal, DispVertical: Alineación en los ejes verticales y horizontales que tendrán los elementos dentro de la pantalla. AppName: Nombre de nuestra aplicación. Por defecto, el nombre de nuestro proyecto. ColorDeFondo: Color que mostrará la pantalla en su fondo. ImagenDeFondo: Imagen que podemos cargar como fondo en lugar de un color sólido. AnimaciónAlAbrirPantalla, AnimaciónCierreDePantalla: Efectos visuales al abrir o cerrar la pantalla. Icono: Imagen que presentará nuestra app en el cajón de aplicaciones de nuestro dispositivo Android. Enrollable: Permite desplazar la pantalla en el caso de que los componentes ocupen un área mayor a la que cabe en pantalla. ShowListsAsJson: Propiedad de la aplicación para manejar las listas en formato JSON. ShowStatusBar: Muestra/Oculta la barra de estado de nuestro dispositivo(cobertura, hora, batería, etc). Sizing: Establece si nuestra aplicación mostrará un aspecto fijo en píxeles(fixed) o adaptado al tamaño de la pantalla que lo visualice(responsive). Título: Texto que aparecerá en la parte superior de la ventana si está visible la propiedad TitleVisible. TitleVisible: Establece la visibilidad de la barra de título. TutorialURL: Dirección del tutorial de realización de la app(requiere aprobación). CódigoDeVersión,NombreDeVersión: Cambios de importancia en la app precisarán de un incremento del código de versión. El nombre de la versión lo incrementaremos generalmente para el arreglo de pequeños fallos. Imagen 8 Propiedades Screen1 5 22 Disposiciones Por defecto, MIT App Inventor apila en la vista de diseño los componentes visuales que agregamos. En general, podemos afirmar que las disposiciones son elementos contenedores que permiten alinear otros componentes en pantalla; ya sea una disposición horizontal que los alinea teniendo como referencia el eje del mismo nombre o vertical, que los permitiría alinear conforme a la vertical de la pantalla del dispositivo. Puede ocurrir también que entre dos componentes, como es el caso de nuestra aplicación de ejemplo con los botones, queramos introducir un determinado espaciado a modo de separación. Para este último caso, el uso de una disposición vertical u horizontal "separadora"(realmente no contiene otros componentes) también puede resultar de utilidad. Imagen 9 Propiedades disposición horizontal Observa cómo podemos establecer el tamaño de las disposiciones haciéndolas partícipes del tamaño original de los elementos que contienen(automático), configurando un ancho o alto fijo en píxeles o en porcentajes u ocupando todo el área que nos permita el contenedor que la tenga. Componente Botón Uno de los componentes más utilizados en las aplicaciones móviles son los botones. Podremos gestionar lo que ocurre cuando hagamos clic sobre él y otros cuantos eventos interesantes en la vista de bloques. El aspecto visual lo definiremos en la vista de diseño a través de sus propiedades. 6 22 • • • • • • • • • • • • • • ColorDeFondo: Color sólido del botón. Habilitado: Por defecto el usuario puede usarlo si está marcado. Negrita: El texto del botón aparecerá resaltado. Cursiva: El texto del botón se mostrará en cursiva. Tamaño de la letra: Número que especifica el tamaño en puntos de la fuente usada por el botón. TipoDeLetra: Fuente utilizada por el texto. Alto, Ancho: Dimensiones del botón especificadas mediante puntos fijos(píxeles) o porcentajes. Imagen: Nos permite personalizar un botón con un icono o imagen. Forma: Define el estilo del botón. MostrarPulsación: Marcado distinguirá entre pulsado y sin pulsar. Texto: Mensaje que aparecerá escrito sobre el botón. PosiciónDelTexto: Alineación respecto al eje horizontal. ColorDelTexto: Color sólido de la fuente. Visible: Marcado indica que se mostrará en pantalla. Imagen 10 Propiedades de un botón 7 22 Componente Sonido Este componente multimedia nos permitirá reproducir ficheros de audio de corta duración e incluso hacer que el dispositivo móvil vibre. Si el audio resulta ser una melodía o canción tendremos que utilizar el componente Reproductor. Los formatos de sonido soportados son los estándares que reproduzca el dispositivo Android siendo WAV o MP3 los más utilizados. Para reproducirlos previamente tendremos que cargar los ficheros a nuestra aplicación e indicarlo en su propiedad Origen. Imagen 11 Propiedades del componente sonido Programación en MIT App Inventor Una vez realizado el diseño de nuestra aplicación tendremos que gestionar lo que ocurre con la misma. Para ello cambiaremos la interfaz de la plataforma a la pantalla de bloques. MIT App Inventor, como otros lenguajes de programación visuales, utiliza un sistema de bloques o "fichas de puzle" que nos permiten programar lo que ocurre cuando interactuamos con la aplicación. Existen una serie de bloques clasificados por colores denominados integrados que podremos utilizar en cualquier momento y un conjunto de bloques que dependerán de los componentes que hayamos incluido en nuestra aplicación. Controlar lo que ocurre en nuestra aplicación es una tarea bastante sencilla. Cada componente introducido tiene una serie de eventos asociados que arrastrándolos al área de principal de la pantalla nos permitirán conectar con otros bloques que definirán el comportamiento de la app. 8 22 Para nuestra primera aplicación de ejemplo los bloques necesarios son los siguientes: Imagen 12 Bloques de la app Darth Vader La interpretación que podemos hacer de los mismos es la siguiente: << Cuando la pantalla principal se inicie estableceremos como origen el fichero de audio DarthVaderefectoVoz.mp3 en el componente Sonido1. En cualquier momento de la ejecución de nuestra app si el usuario hace clic sobre el Botón1 se reproducirá el audio cargado en el componte Sonido1 y si hace clic sobre el Botón2 se cerrará la aplicación. >> Observa que: • Inicializar es un evento de Screen1 y en general de cualquier "pantalla". • Los eventos Clic son propios de los componentes tipo botón. • Desde la vista de bloques podemos también establecer propiedades en tiempo de ejecución que se podrían configurar en la vista diseño. • Podemos hacer uso de los bloques integrados para tareas de control como cerrar la aplicación o poner un campo de texto. MIT AI2 Companion Suponiendo que estamos desarrollando en la misma red en la cual está el dispositivo móvil conectado mediante WIFI, podemos enlazar ambos utilizando MIT AI2 Companion. Para ello desde el menú de App Inventor generaremos un código QR que podremos teclear o escanear. Este código será de un sólo uso y habilitará el "desarrollo en vivo", esto es, que mientras estamos viendo la aplicación en el dispositivo real cualquier cambio en MIT App Inventor se verá reflejado en el terminal. 9 22 Imagen 13 Generación de código QR para conexión con MIT AI2 Companion Debemos tener en cuenta que el hecho de enlazar con Companion requiere la descarga de todos los activos de nuestro proyecto al terminal con lo que deberemos ser pacientes si incluimos ficheros de gran tamaño o el ancho de banda de la red es limitado. Guardar el proyecto MIT App Inventor almacenará nuestro proyecto de manera automática en la nube sin que tengamos que preocuparnos de nada; sin embargo, puede ser conveniente por diversos motivos disponer de una copia del mismo. Para conseguir esto, la plataforma nos permite generar un fichero en formato AIA que más tarde podríamos volver a cargar en la plataforma bien en nuestro perfil de usuario o en otro. Este fichero, que no es más que un archivo ZIP con la extensión cambiada, contiene toda la estructura de nuestro proyecto incluyendo los distintos ficheros que hayamos incorporado. 10 22 Imagen 14 Exportando el proyecto a formato AIA Instalar la aplicación Una vez concluido el proceso de creación de la app si deseamos instalarla de manera permanente en un dispositivo tendremos que generar y descargarnos un fichero en formato APK. Dicho formato es el estándar utilizado por cualquier aplicación Android solo que en lugar de descargarlo del mercado oficial lo haremos desde los servidores del MIT. Previo a este paso deberemos permitir a nuestro dispositivo la instalación de aplicaciones desde orígenes desconocidos(no oficiales). Imagen 15 Cambiando los ajustes de Android para la instalación de ficheros APK 11 22 Imagen 16 Generando el paquete de instalación APK Ejercicios 1. Utilizando la opción de Guardar como... crea una nueva app a partir del proyecto actual con una imagen diferente, botones con fondos personalizados y otro fichero de sonido. 2. Usando la pantalla "Mis Proyectos" publica tu creación en Gallery y comparte su enlace por redes sociales. El vínculo se obtiene pulsando en el botón SHARE una vez rellenos los campos que describen tu aplicación. Recursos multimedia de utilidad Generadores de Botones: • https://dabuttonfactory.com/ • http://buttonoptimizer.com/ Biblioteca de Sonidos: • http://www.findsounds.com/ • https://www.freesound.org/ • http://soundbible.com/ • https://www.youtube.com/audiolibrary/ Bancos de Imágenes: • https://search.creativecommons.org/ • https://pixabay.com/es/ • http://www.gratisography.com/ • http://www.morguefile.com/ • http://es.freeimages.com/ Iconos: • https://www.iconfinder.com/ • http://www.iconarchive.com/ • http://findicons.com/ • http://www.flaticon.com/ Vídeos: • http://www.lifeofvids.com/ • http://www.vidsplay.com/ • http://mazwai.com/ 12 22 Una app de dibujo: MyPaint Para crear una aplicación que permita dibujar en pantalla o mover determinadas imágenes tenemos que utilizar en MIT App Inventor el componente Lienzo o también denominado en su versión inglesa Canvas. En esta práctica vamos a crear una aplicación que nos va a permitir: • Dibujar en pantalla arrastrando el dedo. • Cambiar el color de la línea utilizando botones. • Guardar en el dispositivo un fichero con nuestra creación. La vista de diseño tendrá el siguiente aspecto: Imagen 17 Interfaz de MyPaint Imagen 18 Componentes 13 22 Componente Lienzo El componente Lienzo se utiliza siempre que queramos manejar gráficos en pantalla y que estos representen una zona de dibujo para nuestra aplicación. Se diferencia en este sentido del componente Imagen en que en el lienzo añadimos la interactividad con el usuario posibilitando: • • • • • Dibujar puntos, líneas y círculos con distintos colores. Mostrar otras imágenes que pueden animarse (sprites). Presentar textos. Establecer imágenes de fondo y modificarlas. Guardar en un fichero el propio lienzo. En nuestra aplicación el usuario deslizará su dedo por el lienzo trazando líneas. Para conseguir esto haremos uso del evento Arrastrado teniendo en cuenta las coordenadas de origen y destino en el desplazamiento del dedo. Imagen 19 La gestión de Arrastrado nos permitirá dibujar las líneas sobre el lienzo Considera lo siguiente: • • • • Ajustar el lienzo para que ocupe el 75% de la altura de la pantalla del dispositivo. Dimensionar los botones que muestran los colores a 30x30 píxeles Configurar el tamaño de la letra de los botones Guardar, Borrar y Salir a 8 puntos. Para cada uno de los botones de colores las propiedades serás las mismas exceptuando ColorDeFondo. 14 22 Para poder mostrar mensajes en un cuadro de diálogo al usuario de la app tendremos que añadir un componente no visible denominado Notificador. Imagen 20 Vista de los bloques de la app MyPaint Observa en sus bloques asociados que utilizando el notificador podremos, no solamente presentar textos en una ventana emergente, sino también solicitar alguna información del usuario. En nuestro caso el componente notificador nos permitirá pedirle al usuario el nombre del fichero donde queremos que se almacene el dibujo que haya realizado. 15 22 Ejercicios 1. Estudia las diferencias entre los argumentos XInicial, YInicial, XPrevio, YPrevio y XActual, YActual del evento arrastrado. Haz los cambios que necesites para comprobar qué significa cada pareja de coordenadas en el uso del evento Arrastrado. 2. Realiza los cambios oportunos para almacenar el dibujo en un fichero de nombre "Dibujo.jpg" en el caso de que el usuario no escriba nada en la ventana del notificador. Pista: Usa el bloque integrado de Control Si ... entonces ... para comprobar si la respuesta en el notificador no contenía ningún texto. 3. Imagina que deseamos conseguir una tonalidad de color rojo determinada. ¿Cómo la podemos poner sabiendo su código de color RGB en App Inventor? Haz la prueba construyendo un color rojo personalizado. 4. Crea un par de botones que permitan aumentar o disminuir el ancho de la línea de dibujo. 5. Incorpora un nuevo botón que utilizando el componente Cámara permita tomar una foto con el dispositivo móvil y establecerla como fondo del lienzo. 16 22 Lector de códigos de barras y QR: LectorQR Los códigos de barra y QR son especificaciones comunes de casi cualquier tipo de envasado o producto de consumo donde se indican referencias al mismo. MIT App Inventor incluye un componente denominado LectorCódigoDeBarras que utilizando la cámara del dispositivo nos permitirá leer estos códigos. Aquí os presentamos un sencillo ejemplo. Diseño de LectorQR Imagen 21 Vista de diseño de LectorQR Bloques de LectorQR Imagen 22 Vista de bloques de LectorQR 17 22 Reconocimiento de voz y traducción: TraduVoz Otras de las grandes posibilidades de MIT App Inventor son los componentes TextoAVoz, ReconocimientoDeVoz y TraductorYandex. Utilizando la síntesis de voz de Google podemos crear una completa y funcional aplicación traductora en pocos minutos. Diseño de TraduVoz Imagen 23 Vista de diseño de la aplicación TraduVoz Bloques de TraduVoz Imagen 24 Vista de bloques de la app TraduVoz 18 22 Conectividad a Internet y ubicación GPS: DondeEstoy En esta sencilla aplicación podemos comprobar el potencial de MIT App Inventor con el uso del sensor de ubicación y la representación gráfica de mapas utilizando Google. Diseño de DondeEstoy Imagen 25 Vista de Diseño de la aplicación DondeEstoy Bloques de DondeEstoy Imagen 26 Vista de bloques de la aplicación DondeEstoy 19 22 Conclusiones MIT App Inventor ofrece un sinfín de posibilidades para el desarrollo del Pensamiento Computacional en la creación de contenidos digitales para dispositivos móviles. El usuario/a es capaz de desarrollar sus propias apps de manera rápida y sencilla con una formación mínima motivando el aprendizaje de cualquier disciplina. Por otro lado, el hecho de que existan componentes de todo tipo permite que nuestros estudiantes puedan solventar problemas comunes haciendo uso de la tecnología y sin las complicaciones típicas del aprendizaje de un lenguaje de programación convencional y, lo mejor es, que el producto final ¡lo tienen en su bolsillo! pudiendo compartirlo en Internet a través de la propia galería de aplicaciones de MIT App Inventor o publicándolo en Google Play. Más información y referencias • • • • • • • • • Tu App Inventor Android: https://www.tuappinvetorandroid.com/ Recursos de App Inventor: https://programamos.es/recursos/appinventor/ AppInventor.org: http://www.appinventor.org/ Pura Vida Apps: https://puravidaapps.com/ MIT App Inventor + IOT: http://iot.appinventor.mit.edu/ App Inventor for educators: http://teach.appinventor.mit.edu/ Foro MIT App Inventor: https://groups.google.com/forum/#!forum/mitappinventortest Foro español MIT App Inventor: https://groups.google.com/forum/#!forum/app-inventor-en-espanol App Inventor Plus: https://appinventorplus.wordpress.com/ 20 22
