Presentacin

http://kio4.com/appinventor/index.htm#indice

- Qu es Android?
Android es un sistema operativo gratuito que utiliza muchos telfonos
mviles actuales (telfonos inteligentes = smartphone), est basado
en LINUX. Android pertenece a Google.

Cada cierto tiempo aparecen nuevas versiones: 1.5 (Cupcake), 1.6

(Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2 (Honeycomb),
4.0 (Ice Cream Sandwich), 4.1 (Jelly Bean), 4.2 Jelly Bean (Gummy
Bear), 4.3 (Jelly Bean), 4.4 (KitKat), 4.5 (kit kat), 5.0 (Lollipop) ...

Tambin existen otros sistemas operativos para telfonos como el iOS

de Apple (20 %) y Windows Phone de Microsoft (2 %), pero en
Espaa se est imponiendo el Android (78 %).
(Ver grfico estadstico de como en Espaa se est imponiendo
el Android)

El Android lo podemos programar fcilmente y realizar programas de

frmulas matemticas, juegos, ubicacin en los mapas de Google,
mover un robot mediante Bluetooth, contestacin automtica de
SMS,...

Saber ms de Android en la Wikipedia.

- Para aprender a programar el
Android necesito tener un telfono
mvil con Android?
No. Solo necesitas un ordenador y conexin a Internet. En el
ordenador puedes hacer los programas y probarlos en un
emulador instalado en el mismo ordenador.
Si tienes un telfono mvil o tablet con Android puedes pasar los
programas realizados al mvil para ver cmo funcionan y utilizarlos.

- Qu programa se utiliza para

programar el Android?
Indico tres formas muy utilizadas de programacin:

1.- Con Android SDK y Eclipse . Se realizan los programas

escribiendo cdigos en Java. Es la forma que utilizan los buenos
programadores. Puedes ver ejemplos en este vdeo.

2.- Mediante una aplicacin de pago (40 aproximadamente)

llamada (B4A) BASIC4Android, para realizar programas de
manera parecida a como se hace con Visual Basic
IMPORTANTE: si te interesa esto de hacer programas sencillos para
Android consulta este tutorial de aprendizaje e iniciacin que he
realizado:

Error! Referencia de hipervnculo no vlida.

3.- Mediante App inventor. Es una forma intuitiva de hacer

programas situando convenientemente las instrucciones como si
fueran piezas de un puzzle. Utilizaremos App inventor para realizar
nuestros programas. Lo que s necesitas es estar conectado a
Internet para poder utilizar el App inventor.

- App Inventor apareci el 12 de julio de 2010, y se abri a todo el

pblico en 15 de diciembre de 2010.
- Lo desarrollaron entre Hal Abelson de MIT y los ingenieros de
Google Ellen Spertus y Liz Looney, junto con David Wolber profesor
de USFCA y divulgador de la aplicacin.
- A principo de agosto de 2011 Google anunci que ya no
mantendra esta aplicacin, pero que la hara cdigo libre destinado
a la educacin.
- Una semana despus el Instituto Tecnolgico de
Massachusetts (MIT), una institucin de educacin superior privada
situada en Cambridge, Massachusetts (EE.UU.), anunci que se
hara cargo del proyecto.
Ver web.
- El 31 de dicembre de 2011 App Inventor de Google dej de
funcionar.
- El 4 de marzo de 2012, el Instituto Tecnolgico de Massachusetts
(MIT) volvi a poner el proyecto en Internet.

- En diciembre de 2013, MIT saca AI 2, una nueva versin de App

Inventor: http://ai2.appinventor.mit.edu
- En noviembre de 2014 sale la opcin de idioma, con lo cual
podemos ver la mayora de los elementos en espaol.
- El 15 de julio de 2015 desaparece App inventor (el antiguo). Existe
una aplicacin web para pasar los proyectos .zip del App inventor al
.aia del App inventor 2. Aplicacin online.

- Cmo es el cdigo?
- En forma de Bloques...
Los programas se realizan mediante bloques, que son una especie de
piezas de puzzle.
No tiene programa fuente escrito en texto.

- De dnde me bajo el App

inventor?
El App inventor no es un programa que te tengas que bajar al
ordenador. Funciona en cloud computing, el programa funciona
mediante la conexin a Internet, tu trabajas con el programa
conectado directamente al servidor de App inventor. Es como una
pgina web y en ella realizas las operaciones. Solo necesitas una
cuenta de gmail.
NOTA: hay versiones para poderlas instalar en el ordenador y
trabajar sin estar conectado a internet (offline).

Para que funcione necesitas tener instalado JAVA. Tambin

necesitas una cuenta de Google Gmail.

http://appinventor.googlelabs.com

_____________________
____
- En qu direccin entro para
programar?

En estos momentos, si vas a estudiar App inventor

2, entra en esta direccin y te autentifica con
tu direccin de correo de gmail...

http://ai2.appinventor.
mit.edu
App inventor 2 en
espaol
http://beta.appinventor.mit.edu (versin antigua)

_____________________
____
Interface
- Podemos trabajar en espaol, en ingls, francs, italiano...
App inventor 2 en espaol offline
- Hemos visto que para trabajar con
AI2 debemos estar conectados a
Internet, se podra trabajar de
alguna manera offline, es decir sin
estar conectado?
- Pus s, para ello un equipo distinto al MIT ha creado un AI2
Ultimate con Personal Server. Esto instala el AI2 en nuestro
ordenador, utilizando JAVA. Luego en un navegador
escribimos http://localhost:8888 y podemos trabajar directamente
con nuestro ordenador sin estar conectado a Internet.
La versin ai2u 2.3 ya viene en espaol.

- App Inventor 2 Ultimate con Personal Server.

Instalar estos paquete en nuestro ordenador para
poder trabajar con A.I. offline, es decir sin estar
conectado a Internet. Dispone una nueva versin
de AI Starter. Ms detalles.

Bajar de aqu.
Arrancamos el Server, vamos a un navegador y
escribimos http://localhost:8888

Atencin, con esta forma de instalacin lo que

estamos haciendo es creando un servidor web
local con App inventor, de manera que los dems
ordenadores de tu red local puedes escribir en
un navegador tu ip local, por ejemplo
192.168.1.2:8888 y conectarn con tu servidor
web con App Inventor, ponen cualquier nombre
juanantonio@example.com y pueden entrar.
Estdialo.
Tutorial.

Ayuda.

- Tambin existe la opcin Portable, sin necesidad de instalacin.

- Hay otra versin offline llamada AILiveComplete (instalacin)

- En estas fechas App Inventor 2 online, solo permite cdigos de hasta

5 MB, en cambio si utilizar los mtodo offline los puede hacer de
mucho mayor tamao.

__________________________________________
__________________
__________________________________________
__________________
__________________________________________
__________________
__________________________________________
__________________
__________________________________________
__________________

EMPEZAMOS AQU...
_________________
1.- Nuestro primer proyecto.
Teorema de Pitgoras.
p1_pitagora Baja este archivo a tu ordenador y
luego sbelo a App inventor
s.aia (Proyectos / Importar proyecto)

- Vamos a crear un proyecto.

En nuestro caso va a ser el teorema de Pitgoras. Introducimos los
dos catetos, pulsamos un botn y obtendremos la hipotenusa.

Nota: cateto viene del latn cathetus, y este del griego ???et??,
significa: perpendicular.
- Pulsamos Proyectos / Comenzar un proyecto nuevo...
Le ponemos como nombre: pitagoras

_________________
Diseador
Screen1 es la pantalla de nuestro mvil.

En Paleta estn los elementos o componentes que podemos poner en

la pantalla de nuestro mvil. Botones, casilleros, imagenes,
etiquetas,...

Vamos a arrastrar desde la Paleta a la pantalla Screen1:

Una Etiqueta (Etiqueta1)

Un Campo de texto (CampoDeTexto1) NOTA: en sus Propiedades

marcamos "SoloNmeros". Borramos informacin de Pista

Otra Etiqueta (Etiqueta2)

Otro Campo de texto (CampoDeTexto2) NOTA: en sus Propiedades

marcamos "SoloNmeros". Borramos informacin de Pista

Un Botn (Botn1)

Otra Etiqueta (Etiqueta3)

Fjate a la derecha estn las Propiedades de cada elemento...

Si marcas Etiqueta1, en la derecha puedes ponerla en Negrita,

cambiar el Tamao de letra, el texto que quieres que aparezca en esa
etiqueta (Texto)

El Botn1, lo puedes poner que su ancho coincida con la

pantalla. Ancho: Ajustar al contenedor

Si pulsamos sobre Screen1, mediante las Propiedades podemos

cambiar el Ttulo de la pantalla, le pondremos Pitgoras.
Pongamos tambin en Screen1, OrientacinDeLaPantalla en
Vertical, para mantener esta posicin.
Cada cierto tiempo pulsamos en Proyecto / Guardar proyecto, para
guardar los cambios que vayas realizando...
(Aunque el realidad el proyecto se guarda automticamente, no hace
falta guardarlo "manualmente".)

Diseador y Bloques.
Para Disear nuestros controles pulsamos Diseador.
Para poner los Bloques del cdigo pulsamos Bloques.

_________________
Bloques
Pulsamos en Bloques para poner los Boques de cdigos...
En la parte izquierda tenemos los Bloques para
poner cdigos y los controles que hemos puesto en
la pantalla Screen1.

Vamos a utilizar 3 variables numricas: un cateto

(x), otro cateto (y), la hipotenusa (z). Las variables
que vayamos a utilizar las declaramos previamente.

- Se puede utilizar copiar y pegar bloques (Ctrl-C

y Ctrl V) y luego adaptar valores.
Mediante el bloque Variables creamos las variables
x, y, z.
Mediante el bloque Matemticas disponemos que
sean variables numricas iniciadas a 0.

Queremos que cuando

hagamos Click en el
Botn1, se realice la
frmula del teorema de
Pitgoras.
(cuando Botn1 Click
ejecutar)
En Botn1 sacamos Botn1_Click

Lo primero ser que las variables x, y tomen el valor

de los CampoDeTexto1 y CampoDeTexto2.
 Luego la variable z obtendr el valor obtenido en el
clculo.

Necesitamos operaciones como raz cuadrada,

cuadrado (^), suma... obtenemos estos bloques
pulsando el botn Matemticas.

Una vez que tenemos el resultado en la variable z, lo

ponemos en la etiqueta Etiqueta3.
Presentamos un texto unido con el valor z.

Dentro de Botn1.Click
- Tomamos el contenido del CampoDeTexto1.Text y lo asignamos a
la variable x
- Tomamos el contenido del CampoDeTexto2.Text y lo asignamos a
la variable y

- Hacemos la raiz cuadrada de x elevado a 2 ms y elevado a dos y

ese resultado lo asignamos a z

- Ponemos en el Etiqueta3.Texto la unin de "La hiponenusa

vale..." y el valor de z.

Las piezas de las operaciones matemticas las tomamos

de Integrados.
Los CampoDeTexto, Etiqueta, Botn y las variables establecidas las
tomamos de Screen1
IMPORTANTE: en AI2 algunas funciones matemticas estn un poco
escondidas, el logaritmo y e^, estn desplegando en el bloque neg
El acos, asen, atan... se encuentran pulsando en la flecha del bloque.

- Tened cuidado siempre con el separador decimal, a veces es el

punto y otras veces la coma. En el cdigo siempre es el punto:
pi = 3.1416, pero en los CamposDeTexto unas veces es el punto y
otra la coma, probad.
__________________________________________
_____________
__________________________________________
_____________
__________________________________________
_____________
__________________________________________
_____________

INSTALACIN EN EL MVIL para prueba y

depuracin (debug).
Ya lo tenemos, vamos a ver si funciona. Hay 3 formas de
comprobarlo:
_______________________________________
PRIMERA FORMA:
1.- Pasar el programa a tu mvil mediante WiFi y la aplicacin MIT
AI2 Companion App.
(Esta es la manera aconsejable).

- Conecta tu mvil a la misma red WiFi que tenga el ordenador donde

ests trabajando.
- Instala en tu mvil MIT AI2
Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi

- Arranca el programa MIT AI2 Companion que has instalado en tu

mvil.

- En el ordenador, pulsa Te saldr un QR y un cdigo.

en Conectar y luego en
AI Companion
 - En tu mvil saldr esta
pantalla.
Escribe el cdigo
anterior o bien escanea
el QR.

El programa pasar a tu
mvil.

- El programa quedar
conectado hasta que
los desconectemos
(Conectar / Reinciar
Conexin)

- Si cambiamos algo en
el Designer o en los
Bloques inmediatamen
te pasar al
programa del mvil.

- De esta manera
podemos depurar
(debug) los programas
que realicemos hasta
que funcionen
correctamente.

_______________________________________
SEGUNDA FORMA:
2.- Instalamos un EMULADOR en nuestro ordenador con
Windows (este emulador tambin vale para LINUX aunque es ms
difcil de instalar), de esta manera podemos hacer las pruebas de
funcionamiento en el emulador del ordenador y cuando funcione
correctamente lo pasaremos al mvil.
En este caso no nos hace falta mvil ni Wifi para probar nuestra
aplicacin.
(http://explore.appinventor.mit.edu/ai2/setup-emulator )
- Instalamos en nuestro ordenador con Windows el App Inventor
y aiStarter.
http://explore.appinventor.mit.edu/ai2/windows (100 MB)
(Tambin se puede instalar este programa en LINUX, pero es algo
ms complicado)

- Arranca en tu ordenador el aiStarter.

- En nuestro programa pulsamos en Conectar / Emulador

Al cabo de un rato saldr en nuestro Windows

un emulador de Android.

Igual que en los casos anteriores, si

cambiamos algo del Diseador o de los
Bloques, ese cambio pasar al Emulador.
NOTA: si quieres que el emulador se ponga de forma horizontal, pulsa
la combinacin de teclas Ctrl F11

NOTA: el Emulador es lento y necesita un buen ordenador para que

funcione bien.

___________________________________
TERCERA FORMA:
3.- En caso que no tengas WiFi, conectaremos nuestro programa
desde el ordenador al mvil mediante cable
USB. (http://appinventor.mit.edu/explore/ai2/setup-device-usb.html)

- Instalamos en nuestro ordenador con Windows el App Inventor

y aiStarter.
http://explore.appinventor.mit.edu/ai2/windows (100 MB)
(Tambin se puede instalar este programa en LINUX, pero es algo
ms complicado)

- Instala en tu mvil MIT AI2

Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi

- Arranca en tu ordenador el aiStarter y conecta por USB el ordenador

al mvil.

- Arranca el MIT A2 Companion en el mvil.

- Probar si estn funcionando la

conexin: http://appinventor.mit.edu/test/

- Ve al programa que ests realizando y pulsa Connect / USB

Tu aplicacin pasar al mvil y entrar en funcionamiento.
 El programa pasar a tu
mvil.

- El programa quedar
conectado hasta que los
desconectemos (Connect
/ Reset Connection)

- Si cambiamos algo en el
Designer o en los
Bloques inmediatamente
pasar al programa del
mvil.

- De esta manera
podemos depurar
(debug) los programas
que realicemos hasta que
funcionen correctamente.

___________________________________
___________________________________
___________________________________
___________________________________

Instalar el programa en nuestro

mvil para uso de usuario (compilacin)
- Para cargar los programas ya compilados en tu mvil, es
conveniente que ste tenga un escaneador de Cdigo QR, si tu mvil
no lo tiene baja e instala ste por ejemplo: ZXing BarCode Scanner

Hemos visto 3 formas de depurar (debug) el programa.

Si ya tenemos nuestro programa terminado lo podemos pasar al
ordenador y de ste al mvil.

Una cosa es depurar (debug) que lo hacemos mediante Conectar y

que realizamos el proceso de creacin, correccin de errores y
pruebas de la aplicacin.
Cuando ya tenemos la aplicacin totalmente terminada para su uso y
distribucin, lo que hacemos en compilarla, esto es Generar un
archivo de tipo pitagoras.apk que contiene la aplicacin preparada
para su instalacin.

En este caso copiaremos en nuestro ordenador el

archivo pitagoras.apk y desde nuestro ordenador por USB lo
podemos pasar al mvil.

Otra forma sera obtener en nuestro ordenador el cdigo QR de

nuestro programa, para luego escaneando el QR con el mvil pasarlo
a ste. Esta es la forma aconsejable.

Estas dos formas la podemos realizar mediante... Generar

As quedara el programa depurado, terminado y preparado para la
instalacin en cualquier mvil...

p1_pitagoras.apk
Lo puedes instalar en tu mvil escaneando este cdigo QR:
Cmo he creado este cdigo QR?
He pulsado en App (guarda archivo .apk en mi ordenador)

Luego el archivo obtenido: p1_pitagoras.apk lo he subido a mi

servidor web, concretamente a:

http://kio4.com/appinventor/aplicaciones/p1_pitagoras.apk

He entrado en esta web: http://goqr.me/

He escrito en el casillero la direccin donde se encuentra mi

archivo: http://kio4.com/appinventor/aplicaciones/p1_pitagoras.ap
k

Ha creado un cdigo QR y lo he bajado (DOWNLOAD)

___________________________________
Guardar el programa
- Como acabamos de ver, podemos crear nuestro programa y
obtendremos un archivo de la forma pitagoras.apk que podemos
guardar en nuestro ordenador y instalar en el mvil para su
funcionamiento.
El archivo pitagoras.apk se denomina programa compilado, es decir
preparado para instalarse y funcionar.

- Pero si queremos guardar el programa fuente para ms tarde

mejorarlo o para compartirlo, debemos pulsar en...

Mis Proyectos / Exportar a mi ordenador el proyecto (.aia)

seleccionado.
Obtendremos el archivo pitagoras.aia que podemos compartir.
El archivo pitagoras.aia sera el cdigo fuente, es decir podemos
ver de la manera que est realizado.

___________________________________
__
___________________________________
__
___________________________________
__
___________________________________
__
2.- MEJORAS.
- Colores, Centrado, Imagen
p1_pitagoras2 (varias pantallas - Screen)
Vamos a continuar con nuestro proyecto de pitagoras mejorndolo.

Primero vamos a guardar nuestro proyecto con otro nombre para tener
una copia de seguridad, para ello vamos a Mis Proyectos / Guardar
proyecto como...
y le ponemos de nombre pitagoras2

Continuamos con esta copia llamada pitagoras2.

- Mediante las Propiedades cmbiale el color de fondo y de letras de

las Etiquetas.
- En los CamposDeTexto, borra el texto de la Pista, este texto
aparece como fondo de casillero. BRRALO.

- En los CamposDeTexto, marca en Solo nmeros, para que salga el

teclado numerico.

- Vamos a poner una imagen en nuestro proyecto. Baja a tu ordenador

esta imagen.
Subimos esta imagen a nuestro Proyecto mediante...

Medios / Subir archivo...

Luego sacamos a la pantalla de nuestra aplicacin...

Medios / SelectorDeImagen

en su Propiedad
Imagen ponemos la imagen
de pitagoras.gif que acabamos
de subir.

Quitamos el texto de la Imagen.

Para centrar la imagen vamos

a Disposicin y sacamos a la
pantalla un

DisposicinHortizontal.

Luego introducimos la imagen

del SelectorDeImagen en
DisposicinHorizontal.

Ponemos DisposicinHorizontal
que ocupe todo el Ancho de su
contenedor.

Lo centramos.
Podemos centrar los controles
horizontalmente, verticalmente o
en tabla, de tal manera que
podemos poner varios controles
en cada una de esa disposicin.
__________________________________________
_

3.- Varias pantallas

p1_pitagoras2 (varias pantallas - Screen)
Continuamos con nuestro proyecto de Pitgoras, es decir el
mismo pitagoras2.aia que estamos realizando.
Vamos a crear otro formulario en otra pantalla, en este caso vamos a
realizar el clculo del rea del tringulo.

- Aadimos una nueva pantalla: Aadir ventana

- Le dejamos de nombre Screen2
- Mediante el Diseo situamos una Etiqueta1, un CampoDeTexto1,
otra Etiqueta2, otro CampoDeTexto2, un Botn y otra Etiqueta3

NOTA: en las Propiedades de

los CampoDeTexto marcamos "SoloNmeros". Borramos
informacin de Pista

- Mediante Bloques creamos esta disposicin:

- Pasamos el programa al emulador
- Pantalla de Men
Men vamos crear otra ventana, en este caso Screen3, con un
men.

Agregamos un VisorDeLista1.
Podemos agregar elementos al VisorDeLista1 mediante la
Propiedad ElementosDesdeCadena, separando los nombre de los
elementos mediante coma.

Ponemos: Uno,Dos,Tres
Vamos a Bloques

Aunque anteriormente en el Diseo hemos puesto varios elementos

en el VisorDeLista1, vamos a poner otros elementos pero mediante
cdigo.

Para ello utilizo dos tablas, en una figura el nombre de dos elementos
del VisorDeLista1 (Pitgoras, rea del tringulo)
en otra tabla establezco el nombre de dos pantallas (Screen1 y
Screen2).

Cuando se muestra la pantalla Screen3, se carga en

el VisorDeLista1 los elementos de la primera tabla.

Cuando pulsamos en un elemento, tomamos el ndice de ese

elemento y mostramos la pantalla referente a ese elemento segn
en emparejamiento en las dos tablas.

Para que una vez en una de las pantallas podamos volver el men,
vamos a crear en la Screen1 y Screen2 sendos botones
Botn2_Click, de manera que cuando los pulsemos se vuelva a la
pantalla Screen3.

Podemos hacer pruebas mediante Conectar, pero a veces no

funciona de esta manera en los emuladores, se aconseja compilar
el programa mediante Generar y pasarlo al mvil compilado. Se
puede hacer escaneando el QR obtenido.

__________________________________________
_

4.- Copiar y pegar bloques entre dos

pantallas. Mochila. Backpack.
- En julio de 2015 sale la posibilidad de copiar y pegar bloques entre
pantallas y entre proyectos.

- En la parte de bloques aparece una mochila "Backpack".

- Pulsando con el botn derecho del ratn sobre un bloque saldr

la posibilidad de Aadir bloques a la mochila.

- Una vez los bloques en la mochila, podemos ir a otra pantalla y

sacarlos de la mochila.
- Tambin se puede utilizar para copiar y pegar bloques de distintos
proyectos.

- Backpack.

_______________________________
____
_______________________________
_______________
Resumen de instalacin.
- Podemos trabajar online y offline.

Online, con conexin a Internet es la forma "oficial", nos creamos una

cuenta de correo, por ejemplo de gmail y creamos el cdigo mediante
la conexin a un sitio web.
Podremos ver el resultado de nuestro cdigo en un emulador instalado
en el ordenador, en el mvil/tablet mediante Wifi o en el mvil/tablet
mediante cable USB.
Para entrar en esa web vamos a... http://ai2.appinventor.mit.edu/

Offline, se trata de instalar en nuestro ordenador el "programa" App

Inventor 2 y trabajar con l sin necesidad de estar conectado a
Internet.
Podremos ver el resultado de nuestro cdigo en un emulador instalado
en el ordenador, en el mvil/tablet mediante Wifi o en el mvil/tablet
mediante cable USB.

Para bajar el "programa" App Inventor 2 vamos

a... http://sourceforge.net/projects/ai2u/files/

- Hay otra versin offline llamada

AiLiveComplete!: http://sourceforge.net/projects/ailivecomplete/files/
https://amerkashi.wordpress.com/page/3/
Pulsamos en WinStartBuildServer.cmd y luego escribimos en un
navegador localhost:8888

Portable, lo ponemos en un directorio o en un USB y trabajamos sin

necesidad de tenerlo instalado.

_________________________________

- Ejecucin de nuestro cdigo.

Tanto si estamos trabajando Offline como Online, hay varias formas

de comprobar cmo est funcionando nuestro cdigo:

- Instalando en el mvil/tablet una aplicacin bajada de la Play de

Google, llamada: MIT AI2 Companion, luego necesitamos que la red
donde trabajamos tenga Wifi. Es decir, que el mvil tenga Wifi
(siempre lo tiene) y nuestro ordenador est conectado a la misma red
Wifi. (NO es necesario que el ordenador est conectado a Wifi, puede
estar conectado con cable a la red, lo que quiero decir es que tanto el
mvil como el ordenador estn conectados a la misma red y que sta
tenga Wifi).
Pulsaremos en App Inventor AI Companion. Nos saldr en la pantalla
del ordenador un cdigo QR. Arrancamos MIT AI2 en nuestro mvil y
escaneamos ese QR para cargar la aplicacin que hemos realizado.

- Instalando en nuestro ordenador un Emulador, es decir una especie

de telfono mvil que acte como nuestro mvil. Para ello bajamos:
http://explore.appinventor.mit.edu/ai2/windows. Lo instalamos en
Windows, nos saldr un icono Ai2 Starter. Pulsamos ese icono para
arrancar este servidor. Luego en App Inventor pulsamos en: Emulador.
- Conectando el mvil al ordenador por cable USB. Instalamos en
nuestro ordenador el driver correspondiente a nuestro modelo de
mvil.
Despus instalamos http://appinventor.mit.edu/explore/ai2/setup-
device-usb.html
Arrancamos el Ai2 Starter. Luego en App Inventor pulsamos en: USB

_______________________________
Configuracin del Router
- Si tenemos un Router domstico en nuestro hogar, no es
necesario configurarle nada.

- Si estamos en un instituto o centro de trabajo:

Podemos
conectar un
Router con
WiFi a una
de los
puertos del
Switch, par
a crearnos
una
extensin
de la red.

Observa
que para
que este
Router est
en la misma
red, se
debe
conectar a
uno de sus
puertos
locales LAN
(color
amarillo en
la imagen),
NO al
conector de
Modem
WAN (color
azul en la
imagen).

Adems
debemos
entrar en la
configuraci
n del
Router,
ponerle una
contrasea
y DESHABI
LITAR su
DHCP.

_________
_______

Si
dispones
de Andared
, puedes
configurar
que tanto
el porttil
como el
mvil
funcionen
en esta
red.

_______________________________
___
Proyecto Integrado
(Introduccin a la
Programacin de Mviles)
Entrega Prctica 7:Galeria de
imgenes
La prctica consiste en hacer una aplicacin donde el usuario tiene una galera
de imgenes. Cuando pulses en la imagen aparecer una pantalla con la
imagen d

e la foto, un botn con un enlace para la pgina de la wikipedia y una imagen

para volver a la pantalla principal.

La prctica tiene un apartado para subir nota donde se perfeccionar

1. Abre el programa con tu cuenta de google y asocia tu mvil android

2. Utiliza un programa de retoque fotogrfico para reducir las 4 fotos
principales a 100px de ancho.El alto se ajustar automticamente con
respecto al nuevo ancho.
3. Utiliza el elemento CANVAS(Drawing and Animation) para contener a
las 5 imgenes. Agranda el elemento Canvas en ancho: Fill parent y
altura: ocupe casi toda la ventana
4. Coloca las imgenes utilizando el elemento ImageSprites (Drawing
and Animation).Slamente se podrn pulsar las 4 fotos pequeas
(100px de ancho).
5. Aade 4 screen (pantallas) nuevas para cada una de las 4 imgenes.
Ponle un nombre coherente con las fotos
6. Dentro dentro del men de bloques tendrs que indicar a que pantalla
ir cuando se pulse cada una de las 4 imgenes. Nota: open another
screenName (control).

1. Crea 4 pantallas diferentes con la imagen grande, un botn para

enlazar con una pgina web (Ej la pgina de wikipedia sobre el fruto
seco en concreto) y la imagen para volver a la pantalla principal. Para po

der entrar en la pgina web se

necesita un elemento(connectivity-ActivityStarter). La imagen de
volver atrs solamente tendr que cerrar la ventana actual (close
screen) y aparecer la principal.
2. El elemento ActivityStarter tenemos que configurarlo para que abra
pginas web de la siguiente forma
o
Action: android.intent.action.VIEW


DataUri: http://paginaweb


3. En el editor de bloques de cada pantalla quedara de la siguiente forma
Cuando se pulsa el botn ejecutar la funcin del activystarter y
abrir una pgina web. El botn de volver para atrs cerrara la
pgina actual y se quedar la principal en pantalla.
http://appinventor.mit.edu/explore/ai2/molemash-2.html
Mole Mash 2 with Sprite Layering for App Inventor 2
What You're Building

This tutorial shows you how to build a game similar to the Whac-A-MoleTM arcade game. Specifically,
your goal is to tap a mole that randomly pops out of one of five fixed holes. Every time you succeed,
your score is increased by one point.
In order to highlight new App Inventor features the Advanced tab and Sprite Z-layering this app
takes a different approach than the original Mole Mash tutorial, which you do not need to have
completed in order to do this one. You should, however, be familiar with the basics of App Inventor
using the Component Designer to build a user interface and using the Blocks Editor to specify event
handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before
continuing.
Introduction

This tutorial includes:

1. Creating a list of components
2. Using functionality from the Advanced section of the Blocks Editor to get and set properties of
arbitrary components
3. Having game events controlled by the Clock component
4. Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another
Getting Started

Connect to the App Inventor web site and start a new project. Set the screen's Title property to an
appropriate name, such as "Mole Mash". Open the Blocks Editor and connect it to the phone. Download
these image files (created by Yun Miao) by right-clicking on them, then add them to the project by
pressing the "Add..." button in the Media pane.
Set up the Components

The user interface will contain a total of 6 ImageSprites: 5 unmoving holes and 1 mole, which will move
on top of the holes. Use the component designer to create the user interface. When you are done, it
should look something like the picture below. Don't worry about lining up the holes evenly. You will
specify their locations through their X and Y properties. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer.

Component Type Palette Group What you'll name it Purpose of Compo

Canvas Drawing and Animation GameCanvas The game field

ImageSprite (5) Drawing and Animation Hole1 ... Hole5 Holes from which t

ImageSprite Drawing and Animation Mole The mole

HorizontalArrangement Layout ScoreArrangement To display the scor

Label User Interface ScoreTextLabel To hold "Score: "

Label User Interface ScoreValueLabel To hold the score (

Clock User Interface MoleClock To control the mol

Sound Media Buzzer To vibrate when th

Make the following changes to the components' properties:

Component Action
 Canvas1 Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.

Hole1 Set X to 20 and Y to 60 (upper left).

Hole2 Set X to 130 and Y to 60 (upper center).

Hole3 Set X to 240 and Y to 60 (upper right)

Hole4 Set X to 75 and Y to 140 (lower left).

Hole5 Set X to 185 and Y to 140 (lower right).

Mole Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which h

ScoreTextLabel Set Text to "Score: ".

ScoreTextValue Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks
Editor.
Add Behaviors to the Components

Here is an overview of what we need to create blocks to do:

1. Create global variable:
a. holes: a list of holes
2. When the app starts:
a. Populate the list of holes.
b. Set each hole's Picture property to "hole.png".
c. Call procedure MoveMole (below).
3. Create a procedure MoveMole to:
a. Set local variable currentHole to a random hole from the list holes.
b. Move the mole to the location of currentHole.
4. Make MoleClock call MoveMole whenever its timer goes off (every second).
5. Implement a handler that does the following when the mole is touched:
a. Add one to the score.
b. Make the phone briefly vibrate.

c. Call MoveMole .
To proceed, switch to the Blocks Editor.

Creating Variables

Create the variable holes. For now, we will give it a "dummy" initial value of an empty list; we'll set the
real initial value in the Screen1.Initialize event handler, which gets executed each time the app loads the
screen. (For technical reasons, components cannot be referred to in variable initialize blocks, which are
run before the app has started.) Here is a picture and list of the blocks you will need:
 Block type Drawer Purpose

initialize global holes to Variables Hold a list of holes.

create empty list Lists Create an empty list, to be filled in when the program sta
As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App

The first event to occur in any program in Screen1.Initialize , so we will put start-up code in that handler.
Specifically, we will add the hole components to the list holes, set each hole's Picture property to
"hole.png", and call MoveMole . Since we have not yet written MoveMole, we will create an empty
procedure with that name, which we will fill in later.
Below are a picture and table of the blocks you need to create. Note that the "Any ImageSprite" drawer
is found under the "Any component" tab at the bottom of the list of Blocks in the Blocks Editor.

Block type Drawer Purpose

Screen1.Initialize Screen1 Specify what should happen when the a

add items to list Lists Add the following values to...

 get global holes Variables ...the list of holes:

Hole1 Hole1 -the upper left hole

Hole2 Hole2 -the upper center hole

Hole3 Hole3 -the upper right hole

Hole4 Hole4 -the lower left hole

Hole5 Hole5 -the lower right hole

for each hole in list Control Specify that we would like a variable na

get global holes Variables ...to take on each of the values in the li

set ImageSprite.Picture of component ... to Any ImageSprite Set the Picture property of...

get global hole Variables ...the ImageSprite referred to by the va

" " (hole.png) Text ...to the picture of the empty hole.

to procedure (MoveMole) Procedures Create an procedure, to be filled in late

call MoveMole Procedures Call MoveMole to make the first placem

Compare the for each block to the equivalent blocks that would be necessary without it:

Not only is the left set of blocks shorter, it is less repetitious, sparing the programmer from semi-
mindless copy-and-pasting and making it easier to modify, for example, if the name of the picture is
changed.

Moving the Mole

Now let's fill in the body of the procedure MoveMole, which we'll call when the program starts, when
the mole gets touched, and when our timer goes off every second. What we want it to do is to pick a
random hole and move the mole on top of it. Here are a picture and list of the new blocks:
 Block type Drawer

initialize local currentHole to

(there are two types of 'initialize local': take the one that fits the procedure block) Variables

pick a random item Lists

get global holes Variables

call Mole.MoveTo Mole

ImageSprite.X Any ImageSprite

get local currentHole Variables

ImageSprite.Y Any ImageSprite

get local currentHole Variables

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just
need two blocks to accomplish that:

Block type Drawer Purpose

MoleClock.Timer MoleClock When the timer goes off...

call MoveMole Procedures ...move the mole.

Registering Touches
Finally, we need to specify what happens when the mole is touched. Specifically, we want to:
1. Increment the score.
2. Make the phone vibrate briefly.
3. Move the mole.
We can easily translate these to blocks:

Block type Drawer Purpose

Mole.Touched Mole When the mole is touched

set ScoreValueLabel.Text to ScoreValueLabel ...update the visible score

+ Math ...the result of adding...

1 Math ...1 [and]...

ScoreValueLabel.Text ScoreValueLabel ...the previous score.

call Buzzer.Vibrate Buzzer Make the phone vibrate f

100 Math ...100 milliseconds.

call MoveMole Procedures Move the mole to a new l

Final Program
 Variations

Here are some variations you might want to implement:

Adding a Reset button to set the score back to 0.

Having the score depend not just on the number of hits but also the number of misses and escaped
moles.
Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the
player is doing poorly.
Adding a second mole on a different timer.
You can see how to implement the first two variations in the original Mole Mash tutorial.
Review

Here are some of the ideas covered in this tutorial:

Putting components in a List.

Performing an operation on every component in a List using the for each block and Advanced features.
Placing an ImageSprite on top of another, using their Z properties to control which goes in front.
Using the Clock component to control game play.
Creating a procedure and calling it from multiple places.
Looking for more information about Mole Mash? Check out the Book Chapter for more explanation and
background information.

Done with MoleMash 2? Return to the other tutorials here.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.
 Or download the apk
Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then
open App Inventor, click Projects, choose Import project (.aia) from my computer..., and select the
source code you just downloaded.
Tutorial Version:

App Inventor 2
Tutorial Difficulty:

Intermediate
Tutorial Type:

Sprites
Clock Timer
Game
inShare

Home
About
About Us
Our Team
Sponsors
News & Stories
In The News
Stories
Team Blog
App of the Month
Resources
Get Started
Teach
Documentation
Tutorials
AI Classic
Resources
Forums
Troubleshooting

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
2012-2015 Massachusetts Institute of Technology
Contact Us