Taller de Apps Móviles con MIT App Inventor

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