Está en la página 1de 91

INTRODUCCIN A

APPINVENTOR
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
Curso de Programacin en Android on-line 2
NDICE
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
Curso de Programacin en Android on-line 3
NDICE
Curso de Programacin en Android on-line 4
APP INVENTOR
! Aplicacin web
! Proporcionar herramientas bsicas a cualquier usuario
para crear un software, en principio bsico.
! Permite construir aplicaciones mviles sin ningn tipo de
experiencia tcnica
! Open Source (de uso gratuito)
! nicamente disponible en ingles
! Basada en Open Blocks Java library.
! Similar to Scratch y StarLogo TNG, primeros entornos que
permiten desarrollar programas sin conocimientos de
programacin.
Curso de Programacin en Android on-line 5
QU ES APPINVENTOR?
! Aprender haci endo
! Aprendi zaj e everywhere
! Apl i caci ones i nterdi sci pl i nares
! Comuni dad de Apps de Centro
Curso de Programacin en Android on-line 6
OBJETIVOS DE APPINVENTOR
Curso de Programacin en Android on-line 7
APPINVENTOR, UN POCO DE CONTEXTO
Scratch es un entorno para ensear conceptos bsicos de
programacin a los nios. Fue desarrollado en el MIT, y
permite comenzar a entender conceptos como ciclos, control
de flujo, seales, etc.
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
Curso de Programacin en Android on-line 8
NDICE
Instal aci n
Curso de Programacin en Android on-line 9
APP INVENTOR
! Para acceder a l os recur sos del AppI nventor debes tener una cuenta en
googl e. Esto es porque AppI nventor no es un programa que i nstal es en
el ordenador, si no que puedes programar desde una pgi na Web,
desde cual qui er l ugar en el que ests.
! Para usarl o, te l ogeas con tu cuenta de googl e y l i sto. Aunque al gunos
requi si tos que debe cumpl i r el ordenador en el que ests. Te l os
expl i camos a conti nuaci n:
Requi si tos
! Si stemas Operati vos
! Ordenador Macintosh (con procesador Intel): Mac OS X 10.5, 10.6
! Windows: Windows XP, Windows Vista, Windows 7
! GNU/Linux: Ubuntu 8+, Debian 5+
! Navegador Mozi l l a Fi refox 3. 6 o superi or.
! Appl e Safari 5. 0 o superi or. Googl e Chrome 4. 0 o superi or. Mi crosof t
I nternet Expl orer 7 o superi or.

Curso de Programacin en Android on-line 10
INSTALACIN DE APPINVENTOR - APUNTES
! Si gue l os pasos ms det al l ados de conf i gur aci n e I nst al aci n en el documento
adj unto del cur so
! Par a i nst al ar el pr ogr ama, r eg st r ate en el si t i o of i ci al de App I nventor. Reci bi r s l a
autor i zaci n de Googl e par a ut i l i zar l a apl i caci n.
! Debes tener i nst al ado Java 1. 6. Haz cl i c ht t p: //www. j ava. com/es/
! Tu Smar t phone debe f unci onar baj o el si stema oper at i vo Andr oi d.
! Par a poder ut i l i zar t u apl i caci n gener ada, conect a t u Smar t phone al PC con el
cabl e USB y ej ect al a. Si no l o r econoce deber s i nst al ar te l os dr i ver s de t u mvi l .
Puedes encont r ar ms i nf or maci n en
ht t p: //appi nventor. mi t . edu/expl or e/
( l uego pi ncha en l a par te der echa: I nvent Go to MI T AppI nventor )
! Puedo ut i l i zar App I nventor si n tener un Smar t phone?
S , App I nventor di spone de un emul ador que permi te si mul ar un tel fono mvi l .

Esto te per mi te cr ear una apl i caci n si n necesi dad de tener t u tel f ono mvi l
a l a mano.
! Cmo f unci ona?
App I nventor f unci ona baj o una i nter f az WYSI WYG ( What you see i s what you
get ) que te per mi te ver automt i camente en pant al l a l os r esul t ados de t u
apl i caci n. Uni endo una ser i e de bl oques el usuar i o podr cr ear apl i caci ones
par a Andr oi d.

Curso de Programacin en Android on-line 11
INSTALACIN DE APPINVENTOR - PASOS
! Tutori al de i nstal aci n:
! http://appinventor.mit.edu/explore/learn.html
! http://www.youtube.com/watch?v=5QEMY_VJlNM
! http://www.youtube.com/watch?v=75vWjhkQqno

Curso de Programacin en Android on-line 12
INSTALACIN OTROS VIDEO
TUTORIALES
Selecciona tu sistema operativo
(Windows, Mac o Linux).
Lo siguiente:
Pulsa en la opcin de Setup y sigue los
pasos del instalador.
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
Curso de Programacin en Android on-line 13
NDICE
Entorno de Trabaj o
Curso de Programacin en Android on-line 14
APP INVENTOR
! Antes de empezar Qu vas a encontrarte en App Inventor?
! El entorno de trabajo es totalmente grfico
! Tienes una serie de bloques con funcionalidades, que simplemente tienes que
elegir y combinarlos para que hagan algo. Por ejemplo:
! Bloque Foto + Bloque Sonido => Hacen que una foto tenga sonido
! Los bloques con los que trabajas equivalen a insertar cdigo fuente (mira el
siguiente ejemplo). No hace falta que escribas cdigo fuente, lo hace internamente,
slo tienes que preocuparte de colocar los bloques en el orden adecuado para que
hagan su cometido
Curso de Programacin en Android on-line 15
ENTORNO DE TRABAJO
! El entorno de trabaj o est formado por tres herrami entas:
App Inventor Designer (Aplicacin web)
http://www.appinventorbeta.com/ode/Ya.html
App Inventor Blocks Editor (Aplicacin instalada en el
ordenador).
Es un programa adicional que permite que puedas depurar la
aplicacin desde tu ordenador y configurar su funcionalidad,
pero es como una pgina web, slo que se ejecuta en tu
ordenador.
Android Emulator
Esta herramienta es un mvil simulado que se ejecuta en tu
ordenador, te permite hacer todas las operaciones de un mvil
sin mvil. Servir para probar tus aplicaciones primero en
este emulador, y luego, en tu mvil.
Curso de Programacin en Android on-line 16
ENTORNO DE TRABAJO - HERRAMIENTAS
Curso de Programacin en Android on-line 17
ENTORNO DE TRABAJO
" En esta imagen tienes un ejemplo de las tres
herramientas descritas en la transparencia anterior.
Entorno de Trabaj o App Desi gner
Curso de Programacin en Android on-line 18
APP INVENTOR
! El App Inventor Designer es la parte de la
herramienta donde seleccionamos los componentes
de la aplicacin.
! Te permite disear la interfaz de la aplicacin (su
aspecto).
! La herramienta esta compuesta por 5 bloques (ver
siguiente transparencia):

My Projects
Paleta (Palette)
Visor (viewer)
Componentes (components)
Propiedades (Properties)
Curso de Programacin en Android on-line 19
APP INVENTOR DESIGNER
Curso de Programacin en Android on-line
20
APP INVENTOR DESIGNER BLOQUES
2 3 4 5
1
! Este bloque te permite gestionar tus proyectos o
crear nuevos proyectos.
! New: Crear nuevo proyecto.
! Delete: selecciona el proyecto para eliminar.
! Download All Projects: descargarte el proyecto a tu ordenador.
! More Actions: si pinchas saldr:
! Download source: te permite descargarte el cdigo del
proyecto seleccionado.
! Upload source: te permite subir un proyecto que tengas
hecho en AppInventor.
Para volver a tu entorno de trabajo tienes que
seleccionar Design en la opcin de Projects.
Curso de Programacin en Android on-line 21
APP INVENTOR DESIGNER PROJECTS
! Pal ette ti ene di ferentes opci ones de botones y
funci onal i dades que puedes i nsertar en tu apl i caci n:
! Basic: botones, cajas de texto, imgenes, etc.
! Media: cmara (hacer fotos), sonidos, video, etc.
! Animation: animaciones asociadas a las imgenes, etc.
! Social: twitter, llamados, contactos, mensajes de texto, etc.
! Otras opciones de ms nivel: control del acelermetro y
sensores del mvil, configuraciones de pantalla, Lego
Mindstorms, Barcode, Bluetooth, Reconocedor de voz (en Other
Stuff)
! Adems, si no sabes para que si r ve al go a l a derecha de
cada opci n hay un s mbol o ? que te expl i ca para qu
si r ve y cmo se usa. Uti l i za Googl e traductor si no
sabes qu si gni fi ca.
Curso de Programacin en Android on-line
22
APP INVENTOR DESIGNER - PALETTE
! Este bl oque te permi te poner i mgenes, texto, botones,
navegador, rel oj , acceso a redes soci al es, si mpl emente
arrastrando desde el bl oque Pal ette l a opci n que qui eras a
tu apl i caci n.

! As puedes ver como
quedar de aspecto vi sual .
Curso de Programacin en Android on-line
APP INVENTOR DESIGNER - VIEWER
! Components:
! En esta seccin de componentes irn
apareciendo todos los componentes de
imgenes, botones, etc que vayas
incorporando a tu aplicacin.

! Properti es:
! En esta seccin aparecern las propiedades
de cada elemento. Podrs indicar de qu
color es el texto, cul es la imagen o sonido
que quieres insertar, tipo de letra, etc
ms adelante vers cmo se hace en los
ejemplos de este curso.
Curso de Programacin en Android on-line
APP INVENTOR DESIGNER COMPONENTS Y
PROPERTIES
Entorno de Trabaj o Bl ocks Edi tor
25
APP INVENTOR
Curso de Programacin en Android on-line
! El App Inventor Bl ocks Edi tor es l a parte de l a herrami enta
donde especi fi camos l o que deben hacer l os componentes.
! Uni mos grfi camente pi ezas para dar l gi ca a l a apl i caci n.
! E s p o s i b l e u n i r f u n c i o n a l i d a d e s s i mp l e s c o mo u n
rompecabezas: botones, zonas de texto, i mgenes, audi o,
l ocal i zaci n, sel ecci n de contactos o nmeros tel efni cos,
acceso a una mi ni base de datos, l ector de cdi go de barras,
etc.
! Y l i sto, muy senci l l o, ya ti enes tu puzzl e que es un programa.
26
APP INVENTOR BLOCKS EDITOR
Curso de Programacin en Android on-line
! Para uti l i zarl o, en l a par te i zqui erda de l a pantal l a ti enes dos
opci ones: Bui l t- i n y My Bl ocks.
! Bui l t- i n: son l os componentes defi ni dos por AppI nventor que
puedes uti l i zar en tu apl i caci n: operaci ones matemti cas, l gi ca,
bucl es, col ores, vectores, etc
! My Bl ocks: son l os componentes que has sel ecci onado en el
Desi gner, l os botones, i mgenes, caj as de texto, etc que hayas
sel ecci onado para tu i nter faz.
27
APP INVENTOR BLOCKS EDITOR
Imagen de la interfaz Google

Curso de Programacin en Android on-line
! Aqu ti enes un ej empl o de di ferentes bl oques que se han
sel ecci onado para formar una apl i caci n. Es bastante i ntui ti vo, si
ves el ej empl o AddButton. cl i ck si gni fi ca que cuando hagas Cl i ck
en el botn denomi nado AddButton acti ves el escaneador de
Barcode.
Cristina Rodriguez Sanchez y Juan Martnez Romo 28
APP INVENTOR BLOCKS EDITOR
Entorno de Trabaj o Androi d Emul ator
29
APP INVENTOR
Curso de Programacin en Android on-line
! Aqu ti enes el tel fono sobre
el que podrs probar l as
apl i caci ones, se arrancarn
automti camente.
! Tambi n, podrs i r a l a par te
de apl i caci ones del tel fono
emul ado y pul sar sobre tu
apl i caci n, i gual que en un
tel fono de verdad.
30
ANDROID EMULATOR
Curso de Programacin en Android on-line
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
31
NDICE
Curso de Programacin en Android on-line
Pasos para tu pri mer programa en AppInventor
32
APP INVENTOR
Curso de Programacin en Android on-line
! En este pri mer ej empl o haremos un Hol a Mundo. Para el l o:
! Incluiremos un texto que se llame Hola Mundo.

A continuacin, te exponemos los pasos para crearlo t
mismo

33
TU PRIMER PROGRAMA EN APPINVENTOR
Curso de Programacin en Android on-line
! Pri mer Paso en App I nventor Desi gner Sel ecci onar MyProj ects
! Pul sa l a opci n New
! I ntroduci r nombre del Proyecto: Hol aMundo y pul sa OK ( no pongas
espaci os en el nombre del proyecto porque no te dej ar Appi nventor) .
! En cuanto pul ses OK se te abr i r el entor no de t r abaj o par a que per sonal i ces
el i nter f az de l a app.
34
Hola Mundo Crear proyecto
HolaMundo
Curso de Programacin en Android on-line
! Segundo Paso en App I nventor Desi gner, debes escoger del bl oque
Pal ette una caj a de texto ( Basi c # TextBox) . Arrstral a hasta el
i nter faz como en l a si gui ente fi gura, vers que te aparece en bl anco el
conteni do de l a caj a de texto.
! En el bl oque Proper ti es ( zona derecha) , pi ncha sobre el campo Text y
escri be Hol a Mundo.
! Aparecer como en l a si gui ente fi gura.
Cristina Rodriguez Sanchez y Juan Martnez Romo 35
Hola Mundo Diseo de la app
! Esto es que ol vi daste i nst al ar te el pr ogr ama, o bi en, dar l e per mi sos par a
abr i r l o. Si mpl emente en l a si gui ente vent ana dal e a acept ar y per mi t i r
si empr e.
36
POSI BLES PROBLEMAS CUANDO USAS EL APPI NVENTOR, AL ABRI R
EL ENTORNO DE TRABAJO TE PUEDE SALI R UN PROBLEMA COMO EL
SI GUI ENTE, SI GUE LOS PASOS QUE TE I NDI CAMOS PARA
SOLUCI ONARLO.
" Pulsas en aceptar y lo que necesita es saber donde est el plugin instalado
! A conti nuaci n, te expl i camos l as opci ones para subi r al mvi l
l a apl i caci n:
! Enviarte la aplicacin a travs del clave que usas para conectar tu
Android a tu PC.
! Enviarte la aplicacin por Qrcode.
! Enviarte la aplicacin por Bluetooth o e-mail.
! A continuacin, te explicamos los pasos para hacerlo.
37
CMO SUBIR AL MVIL?
Curso de Programacin en Android on-line
1. Tendrs que descargarte l a apl i caci n.
2. Col oca el ratn en el App Inventor Desi gner (ventana
pri nci pal de tu proyecto).
3. Al l , en l a parte de l a derecha vers l a si gui ente opci n:
Package for Phone.
4. Es un despl egabl e, si l e pi nchas aparecern l as si gui entes
opci ones:
a. Show BarCode # Te muestra un cdigo qrcode
b. Download to this computer# Te descarga el ejecutable de la
aplicacin a tu ordenador cuya extensin de fichero es .apk. Por
ejemplo: Miaplicacion.apk
c. Download to Connected Phone# Te descarga el ejecutable
directamente en tu telfono.
5. En l a si gui ente fi gura se muestran estas opci ones.
38
SUBE AL MVIL PASOS PREVIOS
Curso de Programacin en Android on-line
39
SUBE AL MVIL PASOS PREVIOS (CONT.)
Pulsa en la opcin
que desees
Curso de Programacin en Android on-line
1. Conecta el mvi l y confi gura en Aj ustes el modo depuraci n.
2. Pi ncha sobre l a opci n Downl oad to Connected Phone, que
permi te conectar tu mvi l al ordenador con tu cabl e para
Androi d usb.
3. Li sto!
Ahora te expl i camos l as otras opci ones
40
SUBE AL MVIL CON EL CABLE
Curso de Programacin en Android on-line
1. Mi ra l a ventana de l a transparenci a anteri or,
2. Pi ncha sobre Show Barcode.
3. Te podrs descargar este Qrcode a tu ordenador.
4. Tarda un poqui to ten paci enci a.
5. Una vez descargado para i nstal arl o uti l i zando esta
funci onal i dad, deber as tener en tu mvi l Androi d l a
apl i caci n de l ector de cdi gos (Barcode, por ej empl o).
6. Lo si gui ente que puedes hacer es con esa apl i caci n enfocar
al cdi go Qrcode con tu cmara del mvi l y l i sto, se te
i nstal ar automti camente l a apl i caci n.

41
SUBE AL MVIL CON UN QRCODE
Curso de Programacin en Android on-line
1. Mi r a l a vent ana de l a t r anspar enci a anter i or,
2. Pi ncha sobr e Downl oad to t hi s computer par a descar gar t u apl i caci n
Andr oi d a t u PC.
3. Tar da un poqui to ten paci enci a.
4. Una vez descar gado el ar chi vo . apk ( ver s que t i ene esa extensi n) , ut i l i za el
Bl uetoot h de t u or denador par a envi ar te l a apl i caci n. Si t u or denador no t i ene
Bl uetoot h, puedes ut i l i zar una mochi l a usb- bl uetoot h par a hacer l o.
5. Envi ar te l a apl i caci n por Bl uetoot h es i gual que envi ar te una f oto por
Bl uetoot h. Par a el l o, act i va el Bl uetoot h y l a vi si bi l i dad de t u tel f ono Andr oi d
en l a opci n aj ustes.
6. Ahor a envi ar te el ar chi vo a t u tel f ono
Par a mac ( este pr oceso puede t ar dar 30 segundos y 1 mi nuto) :
1. Pul sar el i cono de Bl uetooth, y dar a Envi ar archi vo por Bl uetooth.
2. Sel ecci ona el archi vo . apk descargado.
3. A conti nuaci n, aparecer una l i sta de mvi l es, sel ecci ona el tuyo.
Par a wi ndows
1. Vete a l a carpeta donde te hayas descargado l a apl i caci n y pul sa sobre el botn
derecho en l a apl i caci n.
2. Sel ecci ona envi ar archi vo por Bl uetooth.
3. A conti nuaci n, buscar tu tel fono mvi l , sel ecci nal o y l i sto.

Ahor a sl o t i enes que abr i r el ar chi vo envi ado par a poder i nst al ar t u apl i caci n
hecha con el AppI nventor.
42
SUBE AL MVIL CON BLUETOOTH
Curso de Programacin en Android on-line
1. Mi ra l a ventana de l a transparenci a anteri or,
2. Pi ncha sobre Downl oad to thi s computer para descargar
tu apl i caci n Androi d a tu PC.
3. Tarda un poqui to ten paci enci a.
4. Una vez descargado el archi vo .apk (vers que ti ene esa
extensi n) abre tu corre el ectrni co.
5. Env ate un correo y adj ntal e como archi vo el apk
descargado.
43
SUBE AL MVIL CON TU MAIL
Curso de Programacin en Android on-line
Pasos para tu segundo programa en AppInventor
44
APP INVENTOR
Curso de Programacin en Android on-line
! En este segundo ej empl o, haremos un programa que vi sual i ce
una i magen y reproduzca un soni do al pul sar sobre el l a. Para
el l o, hay que:
! Incluir una imagen
! Incluir un botn
! Incluir un sonido
! Hacer que cuando pulses el botn funcione el sonido
Adems, a conti nuaci n, te exponemos l os pasos para crearl o t
mi smo con unas transparenci as gui adas.
( Si qui eres ver el v deo de cmo real i zar esta apl i caci n pi ncha en:
http://www.youtube.com/watch?v=8ADwPLSFeY8&feature=player_embedded)

45
TU SEGUNDO PROGRAMA EN APPINVENTOR
Curso de Programacin en Android on-line
! Pri mer Paso en App I nventor Desi gner Sel ecci onar MyProj ects
! Pul sa l a opci n New
! I ntroduci r nombre del Proyecto: Suenai magen y pul sa OK
46
Suena Imagen Crear proyecto
Suenaimagen
Curso de Programacin en Android on-line
! Segundo Paso en App I nventor Desi gner, debes escoger del bl oque
Pal ette un botn. Pi ncha sobre Button y arrstral o hasta el i nter faz
como en l a si gui ente fi gura.
47
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
! Vol vemos de momento al App I nventor Desi gner
En l a par te de l a i zqui erda de l a si gui ente ventana, despl i ega en l a
pal eta l a opci n Basi c y arrastra un botn Button al i nter faz
48
Suena Imagen Diseo de la app
Puedes
seleccionar
una imagen
como botn.
Pincha y
Selecciona tu
imagen
Curso de Programacin en Android on-line
49
Suena Imagen Diseo de la app
Vers, que ahora aparece la nueva imagen $
Curso de Programacin en Android on-line
! En l a par te de l a i zqui erda de l a si gui ente ventana, despl i ega en l a
pal eta l a opci n Medi a y arrastra l a opci n Sound al i nter faz
50
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
! Ver s que apar ece debaj o de t u i magen un i cono Sound. Ahor a es necesar i o
deci r qu soni do qui er es r epr oduci r, par a el l o: en l a par te de l a der echa, donde
pone Sour ce el i ge el ar chi vo del soni do que qui er es r epr oduci r.
51
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
! Puedes aadi r una caj a de Texto como en Hol a Mundo a este i nter faz.
52
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
! Ahor a vamos a dar l e i ntel i genci a a l os botones, par a el l o en el entor no de
t r abaj o, a l a der echa pi ncha sobr e Open Bl ock Edi tor y se te abr i r una vent ana
como l a de l a si gui ente f i gur a ( Bl ocks Edi tor ) .
! Ahor a, si mpl emente i r emos aadi endo l os botones que sel ecci onaste antes con
el soni do ( But ton1) .
! Par a el l o, pul sa en l a par te i zqui er da en MyBl ocks.
53
Suena Imagen Blocks Editor
Curso de Programacin en Android on-line
! Quer emos que cuando se pul se el But t on suene el soni do, par a el l o, i ndi camos con l a
opci n Cl i ck que quer emos que escuche el event o y act e haci endo l o que se l e i ndi ca.
Cristina Rodriguez Sanchez y Juan Martnez Romo 54
Suena Imagen Blocks Editor
1
2
1 Pinchas en Button1 en
la zona de MyBlocks
Aparecern muchas opciones de
Button1

2 Pincha SLO en
Button1.Click

Te quedar algo como la
ltima figura de esta
transparencia.

Ahora falta meter dentro
de Button1.click la orden
de que suene el sonido.

! Par a r eproduci r cual qui er canci n si empr e debes pul sar un Pl ay, pues aqu
i gual .
55
Suena Imagen Blocks Editor
3 Pinchas en Sound1en
la zona de MyBlocks y
seleccionas Sound1.Play

4 Arrastras Soun1.Play
dentro de Button1.Click
hasta que encaje y suene
click

Te quedar algo como la
ltima figura de esta
transparencia.

3
4
4
! A l a hora de ej ecutar una apl i caci n desde App Inventor ti enes
dos opci ones:
! Ejecutar la aplicacin en un Emulador
! Ejecutar la aplicacin en tu dispositivo mvil Android (esta opcin
est explicada a partir de la transparencia Cmo subir al mvil?
Nmero T.36)
56
LISTO! AHORA PRUEBA TU APLICACIN
Curso de Programacin en Android on-line
! En l a par t e der echa del Bl ock Edi t or ver s New Emul at or ( mi r a l a si gui ent e i magen)
! Pi ncha ah par a cr ear un nuevo emul ador. Bsi cament e es como un t el f ono que se ej ecut a en
t u or denador y que per mi t e pr obar que t u apl i caci n f unci ona si n baj ar l a al mvi l .
57
EJECUTA TU APLICACIN EN UN EMULADOR
Pulsa aqu para
crear un nuevo
emulador

1
2
Para bajar al emulador,
tu aplicacin, pulsa en
emulator-5554, si creas
varios emuladores, te
aparecern ms
opciones. Si tienes tu
mvil configurado
tambin te permitir
hacerlo sobre tu mvil

Curso de Programacin en Android on-line
! Una vez que hayas pul sado en
Connect to Emul ator tardar
un poco en arrancar, en
funci n del ordenador puede
tardar entre 30 segundos y 2
mi nutos.

! En esta fi gura, ti enes un
ej empl o del tel fono que se
arrancar y sobre el que
podrs probar l as
apl i caci ones.
! Tambi n, podrs i r a l a par te
de apl i caci ones del tel fono
emul ado y pul sar sobre tu
apl i caci n, i gual que en un
tel fono de verdad.
58
EJECUTA TU APLICACIN EN UN EMULADOR
Curso de Programacin en Android on-line
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
59
NDICE
Curso de Programacin en Android on-line
Ej empl os gui ados
60
APP INVENTOR
Curso de Programacin en Android on-line
Ahora haremos 4 ej empl os para que desarrol l es fci l mente:
! Zoo l oco: vari as i mgenes de ani mal es que reproduci rn un
soni do o se pararn con sl o pul sar sobre l a i magen.
! Pi ntar caras: permi ti r pi ntar sobre i mgenes l o que qui eras,
guardar l a i magen y borrar l o que hayas hecho.
! Cronmetro: aprenders a medi r di stanci as y a hacer un
contador para que puedas usarl o en tus carreras.
! Engl i sh test: un curi oso si stema donde podrs i ncl ui r un audi o
en i ngl s, y hacer di versas preguntas ti po test para que qui en
pruebe tu apl i caci n practi que su i ngl s.

61
EJEMPLOS PARA QUE DESARROLLES
Curso de Programacin en Android on-line
Ej empl o 1: Zool oco
62
APP INVENTOR
Curso de Programacin en Android on-line
! Este es un r epaso del ej empl o del gato hecho anter i or mente.
! Sel ecci ona l a vent ana de Pr oj ect s y Cr ea un nuevo pr oyecto y l l mal e: zool oco
! Se te abr i r t u entor no de t r abaj o ( App I nventor desi gner ) .
! Ahor a necesi t ar s i nser t ar 6 botones en el mvi l del entor no de t r abaj o, y
poner l es una i magen a cada bot n ( ver ej empl o del posi bl e i nter f az en l a
si gui ente i magen)
! En l as si gui entes t r anspar enci as te damos un poco de ayuda par a que r epases.

63
EJEMPLO 1: ZOO LOCO
Zoo Loco
Para insertar las imgenes: ves arrastrando
en la parte izquierda del App Inventor
Designer, la opcin Button tantas veces
como botones de animales quieras insertar.
Por ejemplo,
te proponemos que insertes 6 botones. Una
vez arrastrados los 6 botones al mvil del
appinventor, selecciona una foto para cada
botn de un elefante, un oso, un mono, un
gato, una rana y una oveja
(recuerda hacerlo como en el ejemplo
anterior del gato, como se ha seleccionado
la imagen del gato para un botn,
transparencia 20)
Curso de Programacin en Android on-line
! El oso ser el botn 1, el el efante ser el 2, el mono ser el 3, el
gato ser el 4, l a rana el 5 y l a ovej a el 6.
! En l a si gui ente fi gura, aparece un ej empl o para l a pri mera i magen.
Si qui eres que l as i mgenes se aj usten, se centren, o cambi arl es el
tamao puedes sel ecci onar l a opci n Wi dth ( tamao) en l a par te
i nferi or derecha de l a si gui ente fi gura.
! No hace fal ta que todos l os ani mal es sal gan de dos en dos, puedes
di sponerl os como qui eras en el mvi l .
Cristina Rodriguez Sanchez y Juan Martnez Romo 64
EJEMPLO 1: ZOO LOCO - BOTONES
! Ahor a vamos a cambi ar l e el nombr e de l os botones par a que nos sea ms f ci l
asi gnar l es f unci onal i dades. Cada bot n tendr el nombr e del ani mal asoci ado.
! Par a el l o, en l a par te de Component s ( ver si gui ente f i gur a de l a i zqui er da,
sel ecci ona de el pr i mer bot n, y l uego pul sa donde pone Rename en l a mi sma
vent ana ( mi r a el cuadr ado r oj o) .
! Rel l ena en l a vent ana que te par ece en New name con el nombr e del bot n oso
que ser bear u oso.
! A cont i nuaci n ver s que cambi a el nombr e del bot n ( ver f i gur a de l a der echa)
! Repi te l o mi smo par a el r esto de botones i ndi cando el nombr e cor r espondi ente a
cada ani mal .
65
EJEMPLO 1: ZOO LOCO - BOTONES
Curso de Programacin en Android on-line
! Vamos a pr ct i ca ot r a f or ma de i nt r oduci r soni do en l as apl i caci ones con el
obj eto Pl ayer .
! Par a el l o, ut i l i za en l a par te i zqui er da l a Pal et te donde pone Medi a#
Pl ayer , ar r st r al o al i nter f az de t u apl i caci n ( mi r a el r ecuadr o azul de l a f i gur a
donde debes col ocar el pl ayer ) . Est a opci n nos per mi te i nser t ar var i os soni dos
ut i l i zando sl o un obj eto Pl ayer .
! En l a par te de l a der echa, tenemos que i r aadi endo todos l os soni dos de
nuest r os ani mal es. Debe quedar al go como en l a si gui ente f i gur a, f j ate en l a
par te der echa ( r ecuadr o r oj o) . Tendr s que i r pul sando el bot n Add y
aadi endo t antos soni dos, como ani mal es tenga t u apl i caci n.

66
EJEMPLO 1: ZOO LOCO - SONIDO
Curso de Programacin en Android on-line
! Abri mos el Bl ocks Edi tor.
! En l a par te de MyBl ocks ( par te i zqui erda) ves arrastrando l os 6 botones
de l os ani mal es de tu apl i caci n, sel ecci onando l a opci n Cl i ck para
cada botn.
! Debe quedar te al go si mi l ar a l o que aparece en l a si gui ente fi gura:

Cristina Rodriguez Sanchez y Juan Martnez Romo 67
EJEMPLO 1: ZOO LOCO ASIGNAR
FUNCIONES
! En l a si gui ente fi gura, se muestran todos l os eventos que ti enes que
control ar.
! A conti nuaci n, te recordamos cmo i nser tarl os, y te expl i camos el
evento pl ayer.

68
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
Pasos par a i nser t ar l a f unci onal i dad de cada bot n ( pul sa y suena)
! Vamos a i ndi car que cuando pul ses un ani mal suene el soni do que hayas
el egi do par a cada ani mal ( se har con l as opci ones Pl ayer 1. source y
Pl ayer 1. St ar t )
! Cuando vuel vas a pul sar, se par ar el soni do ( opci n Pl ayer 1. stop)
Par a el bot n del oso, por ej empl o, r eal i za estos pasos:
! Sel ecci ona de My bl ocks el evento cl i ck del obj eto bot n bear #
bear. cl i ck.
! Recuerda, sel ecci onas en My bl ocks el componente y te aparecen todas l as opci ones, pues
pul sa sobre l a opci n deseada, en el caso del botn bear sobre bear. cl i ck, y as con l o
dems botones.
! Recuerda que puedes mover los elementos sobre tu escritorio del blocks editor
como quieras.
! Sel ecci ona ahor a del evento pl ayer #pl ayer 1. stop, pl ayer 1. source,
pl ayer 1. st ar t . Col cal os dent ro de Bear. cl i ck ( obser va l a si gui ente fi gur a
par a que veas cmo debe quedar ) .

69
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Cada vez que pongas
un elemento dentro de
click, y encaje, sonar
un click
Curso de Programacin en Android on-line
! El evento pl ayer1. source permi te i ndi car el archi vo de audi o que se
reproduci r, pero debes i ndi cr sel o con el obj eto Text.
! Para el l o, vete a l a par te i zqui erda de l a ventana, para i ndi carl e el
soni do, en vez de en My bl ocks, sel ecci ona Bui l t- i n # text
! Arrastra el obj eto Text dentro de Bear1. cl i ck, y pul sa sobre l a pal abra
text, borral a y escri be el nombre del audi o que qui eres reproduci r
( mi ra l a si gui ente fi gura para ver cmo debe quedar)
! El obj eti vo de esta l ti ma opci n de Text, es i ndi car el nombre del
archi vo de soni do que subi ste previ amente en l a transparenci a 44.

70
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
! Fi nal mente, debe haber te quedado al go si mi l ar a l a si gui ente
fi gura.

71
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
! Si t i enes pr obl emas con el audi o, puede ser por l a opci n pl ayer 1. stop,
puedes qui t ar l a.
! Ya puedes subi r l a apl i caci n ut i l i zando l a opci n Connect to Devi ce en l a
mi sma vent ana de Bl ocks Edi tor , puedes emul ar l o pr i mer o, y l uego puedes
sel ecci onar, una vez que te sal ga en el emul ador, t u tel f ono Andr oi d.

72
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
Ej empl o 2: Engl i sh Test
73
APP INVENTOR
Curso de Programacin en Android on-line
! En este ej empl o debes hacer un i nterfaz para el mvi l si mi l ar
al de l a si gui ente fi gura.


74
EJEMPLO 2: ENGLISH TEST
! Intenta hacer por ti mi smo l os si gui entes bl oques usando el
bl ock edi tor una vez que hayas generado el i nter faz.
! La si gui ente transparenci a te muestra todos l os bl oques que
debes usar y el orden.
! Antes, i ntenta pensar en el di seo y ten en cuenta l as si gui entes
pautas.
! Necesitars los siguientes componentes
! Botn Pl ayButton # para que suene el audi o en i ngl s
! Botn de reseteo del audi o, que empi ece a sonar otra vez desde el pri nci pi o.
! Tantas caj as de texto como preguntas qui eras hacer (en el ej empl o son 4)
! Vari abl e score o puntuaci n (i ni ci al mente a 0) #acumul ar y guardar l a puntuaci n
del test.
! Botn chequear el test.
! Cuando la primera opcin sea False es que el usuario ha acertado, y se le sumar un punto ms en score
! Opcionalmente puedes hacer que el fondo de la caja de texto donde se indica la respuesta se ponga en rojo si es correcta la
respuesta, y en verde si no es correcta.
! rdenes condi ci onal es (IF, ELSE)
! Eti queta con el val or de score # se mostrar en esa eti queta el val or de l a vari abl e
score


75
EJEMPLO 2: ENGLISH TEST BLOCKS EDITOR
Curso de Programacin en Android on-line
! Cmo uti l i zar l as vari abl es condi ci onal es
! Para el l o, en bui l t- i n sel ecci ona
Control
! Te aparecern di ferentes opci ones para
uti l i zar l os Ifs, recuerda que son rdenes
que hacen al go si se cumpl e l a condi ci n
que se i ndi ca en el campo text
76
EJEMPLO 2: ENGLISH TEST BLOCKS EDITOR
Curso de Programacin en Android on-line
Cristina Rodriguez Sanchez y Juan Martnez Romo 77
EJEMPLO 2: ENGLISH TEST BLOCKS EDITOR
Ej empl o 3: Cronmetro
78
APP INVENTOR
Curso de Programacin en Android on-line
! En este ej empl o debes hacer un i nterfaz para el mvi l si mi l ar
al de l a si gui ente fi gura.


79
EJEMPLO 3: CRONMETRO
Curso de Programacin en Android on-line
! Intenta hacer por ti mi smo l os si gui entes bl oques usando el
bl ock edi tor una vez que hayas generado el i nterfaz.
! La si gui ente transparenci a te muestra todos l os bl oques que
debes usar y el orden de conexi n.
! Antes, i ntenta pensar en el di seo y ten en cuenta l as
si gui entes pautas.
! Necesitars los siguientes componentes
! Botn para empezar la cuenta
! Botn para parar la cuenta
! Botn para resetear la cuenta
! Cronmetro ( Palette # Basic)
! rdenes condicionales (IF, ELSE)
! Variables para contar los segundos, decenas de segundos
y minutos.


80
EJEMPLO 3: CRONMETRO BLOCKS EDITOR
Curso de Programacin en Android on-line
! Intenta hacer por ti mi smo l os si gui entes bl oques usando el
bl ock edi tor una vez que hayas generado el i nterfaz.


Cristina Rodriguez Sanchez y Juan Martnez Romo 81
EJEMPLO 3: CRONMETRO BLOCKS EDITOR
Ej empl o 4: Pi nta Caras
82
APP INVENTOR
Curso de Programacin en Android on-line
! En este ej empl o debes hacer un i nterfaz para el mvi l si mi l ar
al de l a si gui ente fi gura.


Cristina Rodriguez Sanchez y Juan Martnez Romo 83
EJEMPLO 4: PINTA CARAS
! Intenta hacer por ti mi smo l os si gui entes bl oques usando el
bl ock edi tor una vez que hayas generado el i nter faz.
! Se trata de acti var l a cmara de tu mvi l , abri r una foto,
guardarl a, pi ntarl a o borrarl a.
! La si gui ente transparenci a te muestra todos l os bl oques que
debes usar y el orden.
! Antes, i ntenta pensar en el di seo y ten en cuenta l as si gui entes
pautas.
! Necesitars los siguientes componentes
! Botn Para hacer l a foto.
! Botn para borrar l a foto.
! Cmara del mvi l .
! Tambin para esta parte, debes incluir Canvas en tu aplicacin, para ello
debes seleccionar en Blocks Editor # Built In la opcin Canvas
! Utiliza de Built in tambin la opcin de Color para dibujar rayitas en
colores.


84
EJEMPLO 4: PINTA CARAS BLOCKS EDITOR
Curso de Programacin en Android on-line
! Intenta hacer por ti mi smo l os si gui entes bl oques usando el
bl ock edi tor una vez que hayas generado el i nterfaz.


Cristina Rodriguez Sanchez y Juan Martnez Romo 85
EJEMPLO 4: PINTA CARAS BLOCKS EDITOR
! Para fami l i ari zarte con App Inventor, si gue paso a paso l os
si gui entes vi deos:
! Descripcin del entorno de App Inventor
! http://www.youtube.com/watch?v=9nmLf5CisqQ
! Configurar App Inventor (Ingls)
! http://www.youtube.com/watch?v=HkvUTYF0vTI&feature=related
! Primer vistazo y familiarizndonos con el editor de bloques
! http://www.youtube.com/watch?v=1Fy5W4LtZK4
! Creacin de mltiples pantallas
! http://www.youtube.com/watch?v=VDCVj7LbvbQ
! Twitter en App Inventor
! http://www.youtube.com/watch?v=jKA4eumaFkw&feature=related
! Si ti enes un Mac, si gue paso a paso el si gui ente ej empl o:
! http://www.youtube.com/watch?v=xKThvmNovV8
86
VIDEOS TUTORIAL
Curso de Programacin en Android on-line
! Ej erci ci o 1) Real i zar un programa que tenga dos botones, si pul sas un
botn el col or de fondo cambi a a un col or ( rosa) , y si pul sas el otro
cambi a a otro col or ( verde)
! Ej erci ci o 2) Se debe real i zar un programa Escaneo_Codi gos para cdi gos
bi di mensi onal es. La apl i caci n ofrecer al usuari o l a posi bi l i dad de
escanear un QR- Code, y tras obtener el texto conteni do, real i zar una
bsqueda en Googl e.
! Ej erci ci o 3) Ser vi ci o de manos l i bres para SMS. Se i ntroduce el uso de
l os mdul os SpeechRecogni zer ( texto a voz) y Texti ng ( env o de SMS) . La
apl i caci n const a de 3 pasos: i nt r oduci r el nmer o de t el f ono
( medi ante voz) , i ntroduci r el conteni do del sms ( mednai te voz) , y env o
del sms.
! Ej erci ci o 4) Se har uso de l os sensores del tel fono y el uso de canvas.
El usuari o puede di buj ar en canvas uti l i zando el acel ermetro que trae el
di sposi ti vo. Di spone de 4 botones que l e permi ten cambi ar el col or de l a
l nea o borrar l o di buj ado hasta el momento, y de unos campos de texto
a modo de depuraci n.
87
EJERCICIOS PARA PRACTICAR LO
APRENDIDO
Curso de Programacin en Android on-line
Qu es AppInventor?
Instalacin.
Entorno de Trabajo.
Tus primeros programas paso a paso.
Ejemplos guiados.
Ejercicios.
Curiosidades
88
NDICE
Curso de Programacin en Android on-line
! Qu se puede hacer con Android?
! Angry Birds
! Juego + vendido de la historia en soportes mviles Multiples
plataformas: Maemo, iOS, Symbian y Android. 12 millones
de descargas en 2010.
89
EJEMPLOS DE APLICACIONES EN ANDROID
Curso de Programacin en Android on-line
! Bubbl e Bal l
! Desarrol l ada por Robert Nay, chi co de 14 aos. Dos mi l l ones
de descargas en 2 semanas.
90
EJEMPLO DE APLICACIONES
Curso de Programacin en Android on-line
91
EJEMPLOS DE GUIADO
Curso de Programacin en Android on-line