Tutori al App

Inventor
Nivel: Inicial

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Índice
Introducción ....................................................................................................................... 3
¿Qué voy a aprender? ................................................................................................... 3
Diseño de componentes .................................................................................................... 4
Paso 1: .............................................................................................................................. 4
El Diseñador está dividido en varias áreas:.................................................................... 5
Maquetado o Mockup ..................................................................................................... 6
Tener en cuenta que: ........................................................................................................ 7
Paso 2: .............................................................................................................................. 8
Agregar la Etiqueta ......................................................................................................... 8
El primer componente por agregar es una Etiqueta: ................................................... 8
El diseño debe tener el siguiente aspecto: .................................................................. 8
Agregar el Botón ............................................................................................................ 9
Para hacer que el botón se vea como la foto del gatito debes hacer lo siguiente: ...... 9
Paso 3: ............................................................................................................................ 10
Agregar el Maullido ...................................................................................................... 10
Editor de bloques ............................................................................................................ 11
Paso 4: ............................................................................................................................ 11
Haciendo Maullar al Gatito ........................................................................................... 11
Paso 5: ............................................................................................................................ 13
Paso 6: ............................................................................................................................ 13
Agregar el Ronroneo .................................................................................................... 13
Paso 7 ............................................................................................................................. 14
Agitando el Dispositivo ................................................................................................. 14
Compartir tu Aplicación ................................................................................................... 15
Posibles mejoras: ......................................................................................................... 16
Inspirarse en otros proyectos .......................................................................................... 16
Posibilidad de Adaptación en el aula: .............................................................................. 17

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

 MIT APP INVENTOR
HOLA GATITO

Introducción
El primer programa que se realiza para probar un nuevo lenguaje de programación
muestra el mensaje “Hola Mundo" para mostrar que todo está conectado y funcionando
correctamente. En AppInventor 2 incluso las aplicaciones más simples pueden hacer
mucho más que solo mostrar mensajes: ellas pueden
reproducir sonidos y reaccionar cuando el usuario
toca el dispositivo. Así que vamos a comenzar con algo
mucho más emocionante: tu primera aplicación se llamará.
Hola Gatito. En general todas las aplicaciones se definen
por sus pantallas visibles, lo que se conoce como la
interfaz de usuario y su comportamiento y su
comportamiento será como sigue:

 Cuando la imagen es presionada entonces se

emite el sonido de un maullido y el dispositivo vibra.
 Cuando el dispositivo es agitado entonces se
emite el sonido de un maullido

¿Qué voy a aprender?

 Construir aplicaciones en AppInventor seleccionando componentes y diciéndoles

que hacer y cuando hacerlo.
 Usar el Diseñador de Componentes para seleccionar componentes. Algunos
componentes son visibles en la pantalla del dispositivo mientras que otros no lo
son.
 Agregar archivos multimedia (sonidos e imágenes) a las aplicaciones,
subiéndoles a AppInventor 2 desde tu computadora.
 A usar el Editor de Bloques para ensamblar bloques de código que definen el
comportamiento de los componentes, y que por lo tanto en conjunto definen el
comportamiento de la aplicación.
 Aplicar el acelerómetro para el maullido del gatito
 Probar las aplicaciones directamente en los dispositivos, lo que te ayudará a ver
cómo las aplicaciones se comportan, paso a paso, a medida que las construyes.
 Empaquetar las aplicaciones que construyes para instalarlas en un dispositivo.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

 Para comenzar a programar con App Inventor debes acceder al sitio http://ai2.
appinventor.mit.edu

Diseño de componentes
Paso 1:
La primera vez que ingreses a http://ai2.appinventor.mit.edu, vas a ver la página de
Proyectos, la que seguramente estará en blanco porque aún no has creado ningún
proyecto. Para crear un proyecto, presiona el botón “Comenzar un proyecto nuevo" en
la esquina superior izquierda de la página, ingresa el nombre “HolaGatito" (los nombres
de proyecto son sin espacios), y luego presiona “Aceptar"

La primera ventana que se abre es el Diseñador de Componentes. El Editor de

Bloques está disponible al hacer clic en el botón “Bloques" en la esquina superior
derecha de la ventana. AppInventor es una herramienta computacional en la nube, por lo
tanto, si cierras AppInventor, tu aplicación estará ahí cuando regreses; no necesitas
guardar nada en tu computadora.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

El Diseñador está dividido en varias áreas:

 En el centro hay un area que se llama Visor. Aquí es donde colocas los
componentes y los ordenas para especificar cómo quieres que se vea tu
aplicación.
 A la izquierda del Visor está la Paleta, que es una lista de todos los componentes
que puedes usar en tu aplicación. La Paleta está dividida en secciones.
Inicialmente solo los componentes de la Interfaz de Usuario están visibles, pero
basta con hacer clic en los nombres de las otras secciones para ver los
componentes de cada una de ellas (por ejemplo: Medios, Sensores, etc.).
 A la derecha del Visor está la Lista de Componentes, que muestra los
componentes usados en tu proyecto. Cualquier componente que arrastres en el
Visor también aparecerá en esta lista.
 Abajo del área Componentes se muestran los Medios (imágenes y sonidos) en
el proyecto. Este proyecto todavía no tiene ningún archivo multimedia, pero pronto
agregarás algunos.
 Al extremo derecho de la pantalla hay una sección que muestra las Propiedades
de los componentes; cuando seleccionas un componente en el Visor, verás su
lista de Propiedades en esta sección.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Maquetado o Mockup
Es un modelo a escala o tamaño real de un diseño o
un dispositivo, utilizado para la demostración, evaluación
del diseño, promoción, y para otros fines. Un mockup es
un prototipo si proporciona al menos una parte de la
funcionalidad de un sistema y permite pruebas del diseño

Sea que uses plantillas o no al iniciar tus diseños,

siempre es buena idea iniciar en papel, armar tu
boceto o maquetado, es uno de los primeros medios con
que aprendimos a comunicarnos y la naturalidad de su
uso hace que te enfoques solo en lo que quieres hacer.
Ahí puedes dibujar en la pantalla la distribución de los botones, la disposición vertical u
horizontal que elijas y las funcionalidades que esperas que tenga tu aplicación, a
continuación, un ejemplo de 3 pantallas:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Una plantilla ideal para hacer el bosquejo de las distintas pantallas. Tener preparado un
boceto de tu idea de aplicación te ayudará a facilitarte la tarea tanto en el diseño y como
en el desarrollo.
https://vimeo.com/140384043

Tener en cuenta que:

 Al realizar un mockup es muy importante que expliquemos las acciones que

vamos a realizar en cada una de las partes del diseño. Por ejemplo, indicar
con qué zonas vamos a poder interaccionar: debemos indicar qué abre un botón
ya sea un video, la funcionalidad de GPS en la aplicación o simplemente una
imagen. También indicaremos si se hace tap, slide o swipe en determinadas
pantallas.
 Al empezar a definir el proyecto de desarrollo de aplicaciones, es recomendable
empezar por determinar el menú de la aplicación. Y a continuación centrarte en la
arquitectura de la información para organizar todo el contenido que quieres incluir,
cuál irá en el menú y cuál no.
 Es clave definir desde el principio de la fase de prototipado cuáles son los
servicios que se van a necesitar en la aplicación.
 Trabajar la usabilidad al inicio de cada proyecto también es uno de los puntos a
tener muy en cuenta.
 Definir qué colores vamos a utilizar desde un principio facilitará la tarea de
hacer un mockup en condiciones. O al menos una gama de colores para tu diseño
de aplicaciones.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Paso 2:
Los Componentes de la aplicación se encuentran en el lado izquierdo de la pantalla de
diseño bajo el título “Paleta”. Los componentes son los elementos básicos que se
utilizan para hacer funcionar las aplicaciones en el teléfono Android.

Para utilizar un componente en la aplicación, hay que hacer clic arrastrar en el visor en
el centro del diseño. Cuando se agrega un componente, este aparece tanto en el visor
como en la lista de componentes en la parte derecha del visor. Los componentes tienen
propiedades que se pueden ajustar para cambiar la forma en que el componente
aparece dentro de la aplicación. Para ver y cambiar las propiedades de un componente,
primero se debe seleccionar el componente deseado en la lista de componentes.

Para la aplicación Hola Gatito necesitarás de los siguientes componentes:

Componente Visible Componente no Visible

Etiqueta que muestra el texto “Hola Sonido, que es no-visible, y que sabe
Gatito" cómo reproducir sonidos, tales como el
maullido del gato
Botón con una imagen de un gato Acelerómetro, para detectar cuándo el
dispositivo está siendo agitado

Queremos que HolaGatito tenga un botón con la forma de la imagen gatito.png. Para
hacerlo tenemos que:

Agregar la Etiqueta
El primer componente por agregar es una Etiqueta:
1. Seleccionamos la sección “Interfaz de Usuario" en la Paleta (si es que no está ya
abierta), y arrastra una Etiqueta hacia el Visor. Luego de hacerlo, veremos una forma
rectangular en el Visor con el texto “Texto para Etiqueta1".
2. En el área de Propiedades de la etiqueta, buscamos la propiedad “Texto".
Cambiamos el valor de esta propiedad por el texto “Hola Gatito" y luego presionamos
Enter
3. Cambiamos el ColorDeFondo de la etiqueta haciendo clic en la caja, que
actualmente dice “Ninguno", para seleccionar un color de la lista que aparecerá.
Seleccionamos el Azul. También cambiamos el ColorDeTexto de la etiqueta a Amarillo.
Finalmente, cambiamos el tamaño de letra a 20.
El diseño debe tener el siguiente aspecto:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Agregar el Botón
El gatito para Hola Gatito está implementado como un Botón, creamos un botón normal,
y luego cambiamos su imagen de fondo a la del gatito. Para primero agregar un botón
normal, debemos buscar el componente Botón en la Paleta. Arrastramos el botón hacia
el Visor, ubicándolo debajo de la etiqueta. Veremos que un botón rectangular aparece en
el Visor.

Ahora tenemos un botón que usaremos para gatillar el efecto de sonido cuando alguien
lo presiona, pero lo que realmente queremos es ver la foto de un gatito, y no un simple
rectángulo.

Para hacer que el botón se vea como la foto del gatito debes hacer lo siguiente:
1. Primero, necesitamos descargar una imagen del gatito y guardarla en la computadora.
2. El área de Propiedades deberá mostrar las propiedades del botón. Si no es así,
seleccionamos el botón en el Visor para que así sea. En las propiedades del botón
presionamos el área bajo el texto “Imagen" (que actualmente dice “Ninguno").
3. Presionamos “Subir archivo", y luego presionamos “Seleccionar archivo" para
buscar en la computadora el archivo con la foto del gatito (si no usas tu propia imagen, el
nombre es gatito.png). Luego presionamos “Aceptar".
4. Luego que la imagen se suba, el nombre de archivo deberá estar disponible como una
opción para la propiedad Imagen del botón. Presionamos “Aceptar" para seleccionarla.
También verás el archivo listado en el área de Medios en la ventana del Diseñador.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Paso 3:
Agregar el Maullido

En la aplicación queremos que el gatito maúlle cuando el botón sea presionado.

Para esto, necesitaremos agregar el sonido del maullido, y programar el
comportamiento del botón para reproducir ese sonido cuando el botón es presionado:

1. Podemos descargar el sonido de algún motor de búsqueda de internet o lo podemos

tener almacenado en tu computadora
2. Ir a la Paleta, y seleccionamos la sección Medios. Arrastramos un componente
Sonido y lo colocamos en el Visor. Sin importar el lugar donde lo arrastrastemos, este
componente aparecerá en un área abajo del Visor, llamada “Componentes no
visibles". Los componentes no visibles son objetos que hacen cosas para la
aplicación pero que no aparecen en la interfaz visual del usuario de la aplicación.
3. Seleccionamos el componente Sonido1 para mostrar sus propiedades.
Seleccionamos su propiedad Origen y seguimos los pasos para subir el archivo
miau.mp3 que descargamos anteriormente. Una vez que finalicemos este paso,
deberemos ver los archivos gatito.png y miau.mp3 en el área de Medios en el Diseñador.

La tabla muestra los componentes que has agregado hasta ahora a la aplicación Hola
Gatito.

Tipo de Componente Sección en la Paleta Nombre Propósito

Botón Interfaz de usuario Botón1 Presionar para que el

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar
 gato maúlle.

Etiqueta Interfaz de usuario Etiqueta1 Muestra el texto

“Hola Gatito".

Sonido Medios Sonido1 Reproduce el sonido

del maullido

El diseño es una de las tres herramientas clave que se utilizarán en la creación de

aplicaciones. La segunda es el “Editor de bloques”. La tercera es el teléfono.

Editor de bloques
Paso 4:
Para asignar comportamiento a los componentes, lo que debe suceder cuando el
usuario de la aplicación pulse el botón. Al hacer clic en “Bloques” de la ventana de
Diseño, aparecerá la siguiente imagen a continuación:

Haciendo Maullar al Gatito

En la esquina superior izquierda de la ventana, debajo del encabezado “Bloques",
podemos ver una columna que incluye una sección “Integrados", y una sección para
cada componente de los que creamos en el Diseñador: Botón1, Etiqueta1, y Sonido1.
Presionamos el componente Botón1. Al hacerlo, se muestra una selección de los
bloques que puedes usar para decirle al botón que debe hacer; esta lista comienza con
el bloque Botón1.Click
Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar
Arrastramos el bloque Botón1.Click y lo arrastramos en el Visor (el espacio en blanco
para trabajar con los bloques). Podemos darnos cuenta de que la palabra cuando está
incluida en el bloque. En este caso, estamos interesados en el evento de que un usuario
de la aplicación presione el gatito (que en realidad es un botón).

Ahora seleccionamos el componente Sound1 y luego arrastramos el bloque llamar

Sonido1.Reproducir. Recuerda que anteriormente configuramos el Origen del
componente con el archivo miau.mp3. Observa ahora que el bloque llamar
Sonido1.Reproducir tiene una forma tal que es posible ensamblarlo con el espacio
marcado como “ejecutar" en el bloque Botón1.Click. Los dos bloques deben conectarse
para formar una sola unidad.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Paso 5:
Presionamos el botón en el dispositivo y deberemos escuchar el maullido.
Felicitaciones, tu primera aplicación se está ejecutando.
Llegado este punto es un buen momento para que guardemos todo el trabajo que hemos
hecho. Para ello sólo tenemos que pulsar el botón “Guardar” desde la ventana de
Diseño. Google guardará nuestro proyecto, de esta forma siempre estará accesible
desde cualquier computadora conectada a internet.

Paso 6:
Agregar el Ronroneo
Ahora vamos a hacer que el gato ronroneé y maúlle cuando presionamos el botón.
Simularemos el ronroneo haciendo vibrar el dispositivo. Eso puede sonar difícil, pero
en realidad es muy fácil porque el componente Sonido que usamos para reproducir el
maullido también puede hacer vibrar el dispositivo.

1. Ir al Editor de Bloques y seleccionamos el componente Sonido1.

2. Seleccionamos el bloque llamar Sonido1.Vibrar y lo arrastramos hacia abajo del
bloque llamar
Sonido1.Reproducir. El bloque deberá ajustarse en su lugar, como se muestra a
continuación

3. Observamos ahora que el bloque llamar Sonido1.Vibrar incluye el texto

“milisegundos".
En este caso, debemos decirle al bloque por cuánto tiempo debería vibrar. Necesitamos
agregar esta información en milésimas de segundo (milisegundos), lo que es
Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar
bastante común en muchos lenguajes de programación. Por lo tanto, para hacer que el
dispositivo vibre por medio segundo, tenemos que poner un valor de 500 milisegundos.
Para poner un valor de 500 necesitamos arrastrar un bloque numérico.

Cambia el 0 a 500 haciendo clic en el bloque y escribiendo el nuevo valor

Paso 7
Agitando el Dispositivo
Ahora agreguemos un elemento final que aprovecha otra
característica de Android: hacer que el gatito maúlle cuando
agitamos el dispositivo. Para hacer esto, usaremos un
componente llamado Acelerómetro que puede sentir cuando
agitamos o movemos el dispositivo.

1. En el Diseñador, expandimos la sección Sensores en la

Paleta y arrastramos un Acelerómetro hacia el Visor.
2. Vamos a querer manejar el que alguien agite el dispositivo
como un evento diferente y separado de cuando se presiona el botón. Eso significa que
necesitamos un nuevo controlador de eventos. Ir al Editor de Bloques, donde deberá

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

haber un nuevo componente Acelerómetro1. Lo seleccionamos y arrastramos el bloque
Acelerómetro1.Agitar.
3. De la misma forma que lo hicimos con el botón cuando es presionado, arrastramos un
bloque llamar Sonido1.Reproducir y lo conectamos en el espacio del bloque
Acelerómetro1.Agitar. Los bloques de la aplicación deben quedar como los que se
muestran a continuación. Prueba tu aplicación agitando el dispositivo

Compartir tu Aplicación

Podemos compartir la aplicación de varias maneras. Para compartir la aplicación

ejecutable (el archivo .apk que se instala directamente en un dispositivo), primero
presiona “Generar" y escoge “App (guardar archivo .apk en mi ordenador". Esto creará
un archivo con una extensión .apk en tu computadora. Solo debemos asegurarnos de
que las personas que quieran instalar la aplicación permitan las “fuentes
desconocidas" en la configuración del dispositivo, para permitir la instalación de
aplicaciones que no provienen de la tienda de aplicaciones de Android.
También podemos crear un código QR para la aplicación de manera que las personas
puedan escanear el código en sus dispositivos, desde la web o incluso desde algún
poster. Una vez que terminemos guardamos el proyecto y lo descargamos en nuestro
celular de la siguiente manera:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar

Entonces me genera un código QR para que yo lo pueda leer desde la aplicación
previamente instalada en mi celular “MIT AI2 Companion” y así probar la aplicación que
diseñamos.

Posibles mejoras:

1. Agrega un componente CasillaDeVerificación que indica si el gatito está durmiendo

o no. Si la casilla está chequeada, el gatito duerme, y si no, está despierto.
2. Modifica el comportamiento de la aplicación para tomar en cuenta si el gatito duerme
o no. Mientras el gatito duerme, el presionar el botón no emite ningún sonido ni hace
vibrar el dispositivo. Si el gatito duerme y se agita el dispositivo, entonces se despierta.

Inspirarse en otros proyectos

Existen muchos proyectos en Internet para inspirarse y experimentar. Sugerimos
recorrer los siguientes sitios con sus estudiantes para inspirarse y generar nuevos
proyectos
Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar
 http://nosinmiarduino.blogspot.com/p/videotutoriales-app-inventor.html

https://sites.google.com/site/appinventormegusta/primeros-pasos

Posibilidad de Adaptación en el aula:

En caso de que lo quieras implementar en el aula con tus
alumnos, a continuación, te dejamos una rúbrica de evaluación:

REQUERIMIENTOS PUNTOS
Maquetado de la aplicación en papel 25
Agregar archivos multimedia a la aplicación 25
Uso del acelerómetro 25
Conexión de la aplicación con el móvil 25
TOTAL

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - dav@sceu.frba.utn.edu.ar