Intro-AppInventor-v2.pdf

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.


Ejemplos guiados.

Ejercicios.


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.


QU ES APPINVENTOR?

Aprender haciendo Aprendizaje everywhere Aplicaciones interdisciplinares Comunidad de Apps de Centro


OBJETIVOS DE APPINVENTOR


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.


Ejemplos guiados.

Ejercicios.


NDICE

Instalacin


APP INVENTOR

Para acceder a los recursos del AppInventor debes tener una cuenta en google. Esto es porque AppInventor no es un programa que instales en el ordenador, si no que puedes programar desde una pgina Web, desde cualquier lugar en el que ests.

Para usarlo, te logeas con tu cuenta de google y l isto. Aunque algunos requisitos que debe cumplir el ordenador en el que ests. Te los explicamos a continuacin:

Requisitos Sistemas Operativos 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 Mozil la Firefox 3.6 o superior.

Apple Safari 5.0 o superior. Google Chrome 4.0 o superior. Microsoft Internet Explorer 7 o superior.


INSTALACIN DE APPINVENTOR - APUNTES

Sigue los pasos ms detal lados de conf igurac in e Insta lac in en e l documento adjunto del curso

Para insta lar e l programa, regst rate en e l s i t io of ic ia l de App Inventor. Recib i rs la autor izac in de Google para ut i l i zar la apl icac in.

Debes tener insta lado Java 1 .6 . Haz c l ic ht tp ://www. java.com/es/ Tu Smar tphone debe funcionar bajo e l s is tema operat ivo Android . Para poder ut i l i zar tu apl icac in generada, conecta tu Smar tphone a l PC con e l

cable USB y e jectala . S i no lo reconoce debers insta lar te los dr ivers de tu mvi l . Puedes encontrar ms informacin en

ht tp ://appinventor.mit .edu/explore/ ( luego p incha en la par te derecha: Invent Go to MIT AppInventor )

Puedo ut i l i zar App Inventor s in tener un Smar tphone? S , App Inventor dispone de un emulador que permite simular un telfono mvil . Esto te permite crear una apl icac in s in necesidad de tener tu te lfono mvi l

a la mano. Cmo funciona?

App Inventor funciona bajo una inter faz WYSIWYG (What you see is what you get ) que te permite ver automt icamente en pantal la los resul tados de tu apl icac in. Uniendo una ser ie de b loques e l usuar io podr crear apl icac iones para Android .


INSTALACIN DE APPINVENTOR - PASOS

Tutorial de instalacin: http://appinventor.mit.edu/explore/learn.html http://www.youtube.com/watch?v=5QEMY_VJlNM http://www.youtube.com/watch?v=75vWjhkQqno


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.


Ejemplos guiados.

Ejercicios.


NDICE

Entorno de Trabajo


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


ENTORNO DE TRABAJO

El entorno de trabajo est formado por tres herramientas: 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.


ENTORNO DE TRABAJO - HERRAMIENTAS


ENTORNO DE TRABAJO

En esta imagen tienes un ejemplo de las tres herramientas descritas en la transparencia anterior.

Entorno de Trabajo App Designer


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)


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.


APP INVENTOR DESIGNER PROJECTS

Palette tiene diferentes opciones de botones y funcionalidades que puedes insertar en tu aplicacin: 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 sirve algo a la derecha de cada opcin hay un smbolo ? que te explica para qu sirve y cmo se usa. Util iza Google traductor si no sabes qu significa.


22

APP INVENTOR DESIGNER - PALETTE

Este bloque te permite poner imgenes, texto, botones, navegador, reloj, acceso a redes sociales, simplemente arrastrando desde el bloque Palette la opcin que quieras a tu aplicacin.

As puedes ver como quedar de aspecto visual.


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.

Properties: 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.


APP INVENTOR DESIGNER COMPONENTS Y PROPERTIES

Entorno de Trabajo Blocks Editor

25

APP INVENTOR


El App Inventor Blocks Editor es la parte de la herramienta donde especificamos lo que deben hacer los componentes.

Unimos grficamente piezas para dar lgica a la aplicacin.

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 m p l e s c o m o u n rompecabezas: botones, zonas de texto, imgenes, audio, localizacin, seleccin de contactos o nmeros telefnicos, acceso a una mini base de datos, lector de cdigo de barras, etc.

Y listo, muy sencillo, ya tienes tu puzzle que es un programa.

26

APP INVENTOR BLOCKS EDITOR


Para util izarlo, en la parte izquierda de la pantalla tienes dos opciones: Built - in y My Blocks.

Built - in: son los componentes definidos por AppInventor que puedes util izar en tu aplicacin: operaciones matemticas, lgica, bucles, colores, vectores, etc

My Blocks: son los componentes que has seleccionado en el Designer, los botones, imgenes, cajas de texto, etc que hayas seleccionado para tu interfaz.

27


Imagen de la interfaz Google


Aqu tienes un ejemplo de diferentes bloques que se han seleccionado para formar una aplicacin. Es bastante intuitivo, si ves el ejemplo AddButton.click significa que cuando hagas Click en el botn denominado AddButton actives el escaneador de Barcode.

Cristina Rodriguez Sanchez y Juan Martnez Romo 28


Entorno de Trabajo Android Emulator

29

APP INVENTOR


Aqu tienes el telfono sobre el que podrs probar las aplicaciones, se arrancarn automticamente.

Tambin, podrs ir a la parte de aplicaciones del telfono emulado y pulsar sobre tu aplicacin, igual que en un telfono de verdad.

30

ANDROID EMULATOR


Qu es AppInventor?

Instalacin.

Entorno de Trabajo.


Ejemplos guiados.

Ejercicios.

Curiosidades 31

NDICE


Pasos para tu primer programa en AppInventor

32

APP INVENTOR


En este primer ejemplo haremos un Hola Mundo. Para ello: Incluiremos un texto que se llame Hola Mundo.

A continuacin, te exponemos los pasos para crearlo t mismo

33

TU PRIMER PROGRAMA EN APPINVENTOR


Primer Paso en App Inventor Designer Seleccionar MyProjects Pulsa la opcin New Introducir nombre del Proyecto: HolaMundo y pulsa OK (no pongas

espacios en el nombre del proyecto porque no te dejar Appinventor) . En cuanto pulses OK se te abr i r el entorno de trabajo para que personal ices

el inter faz de la app.

34

Hola Mundo Crear proyecto

HolaMundo


Segundo Paso en App Inventor Designer, debes escoger del bloque Palette una caja de texto (Basic TextBox) . Arrstrala hasta el inter faz como en la siguiente f igura, vers que te aparece en blanco el contenido de la caja de texto.

En el bloque Proper t ies (zona derecha), pincha sobre el campo Text y escribe Hola Mundo.

Aparecer como en la siguiente f igura.


Hola Mundo Diseo de la app

Esto es que o lv idaste insta lar te e l programa, o b ien, dar le permisos para abr i r lo . S implemente en la s iguiente ventana dale a aceptar y permit i r s iempre.

36

POSIBLES PROBLEMAS CUANDO USAS EL APPINVENTOR, AL ABRIR EL ENTORNO DE TRABAJO TE PUEDE SALIR UN PROBLEMA COMO EL

S IGUIENTE, S IGUE LOS PASOS QUE TE INDICAMOS PARA SOLUCIONARLO.

Pulsas en aceptar y lo que necesita es saber donde est el plugin instalado

A continuacin, te explicamos las opciones para subir al mvil la aplicacin: 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?


1. Tendrs que descargarte la aplicacin. 2. Coloca el ratn en el App Inventor Designer (ventana

principal de tu proyecto). 3. All, en la parte de la derecha vers la siguiente opcin:

Package for Phone. 4. Es un desplegable, si le pinchas aparecern las siguientes

opciones: 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 la siguiente figura se muestran estas opciones.

38

SUBE AL MVIL PASOS PREVIOS


39

SUBE AL MVIL PASOS PREVIOS (CONT.)

Pulsa en la opcin que desees


1. Conecta el mvil y configura en Ajustes el modo depuracin. 2. Pincha sobre la opcin Download to Connected Phone, que

permite conectar tu mvil al ordenador con tu cable para Android usb.

3. Listo!

Ahora te explicamos las otras opciones

40

SUBE AL MVIL CON EL CABLE


1. Mira la ventana de la transparencia anterior, 2. Pincha sobre Show Barcode. 3. Te podrs descargar este Qrcode a tu ordenador. 4. Tarda un poquito ten paciencia. 5. Una vez descargado para instalarlo utilizando esta

funcionalidad, deberas tener en tu mvil Android la aplicacin de lector de cdigos (Barcode, por ejemplo).

6. Lo siguiente que puedes hacer es con esa aplicacin enfocar al cdigo Qrcode con tu cmara del mvil y listo, se te instalar automticamente la aplicacin.

41

SUBE AL MVIL CON UN QRCODE


1. Mira la ventana de la t ransparencia anter ior, 2. Pincha sobre Download to th is computer para descargar tu apl icac in

Android a tu PC. 3. Tarda un poqui to ten paciencia . 4. Una vez descargado e l archivo .apk (vers que t iene esa extensin) , ut i l i za e l

B luetooth de tu ordenador para env iar te la apl icac in. S i tu ordenador no t iene Bluetooth, puedes ut i l i zar una mochi la usb-b luetooth para hacer lo .

5. Enviar te la apl icac in por B luetooth es igual que env iar te una foto por B luetooth. Para e l lo , act iva e l B luetooth y la v is ib i l idad de tu te lfono Android en la opcin a justes .

6. Ahora env iar te e l archivo a tu te lfono

Para mac (este proceso puede tardar 30 segundos y 1 minuto) : 1. Pulsar el icono de Bluetooth, y dar a Enviar archivo por Bluetooth. 2. Selecciona el archivo .apk descargado. 3. A continuacin, aparecer una lista de mviles, selecciona el tuyo.

Para windows 1. Vete a la carpeta donde te hayas descargado la aplicacin y pulsa sobre el botn

derecho en la aplicacin. 2. Selecciona enviar archivo por Bluetooth. 3. A continuacin, buscar tu telfono mvil, seleccinalo y listo.

Ahora s lo t ienes que abr i r e l archivo env iado para poder insta lar tu apl icac in hecha con e l AppInventor.

42

SUBE AL MVIL CON BLUETOOTH


1. Mira la ventana de la transparencia anterior, 2. Pincha sobre Download to this computer para descargar

tu aplicacin Android a tu PC. 3. Tarda un poquito ten paciencia. 4. Una vez descargado el archivo .apk (vers que tiene esa

extensin) abre tu corre electrnico. 5. Envate un correo y adjntale como archivo el apk

descargado.

43

SUBE AL MVIL CON TU MAIL


Pasos para tu segundo programa en AppInventor

44

APP INVENTOR


En este segundo ejemplo, haremos un programa que visualice una imagen y reproduzca un sonido al pulsar sobre ella. Para ello, hay que: Incluir una imagen Incluir un botn Incluir un sonido Hacer que cuando pulses el botn funcione el sonido

Adems, a continuacin, te exponemos los pasos para crearlo t mismo con unas transparencias guiadas. (Si quieres ver el v deo de cmo real izar esta apl icacin pincha en: http://www.youtube.com/watch?v=8ADwPLSFeY8&feature=player_embedded)

45

TU SEGUNDO PROGRAMA EN APPINVENTOR


Primer Paso en App Inventor Designer Seleccionar MyProjects Pulsa la opcin New Introducir nombre del Proyecto: Suenaimagen y pulsa OK

46

Suena Imagen Crear proyecto

Suenaimagen


Segundo Paso en App Inventor Designer, debes escoger del bloque Palette un botn. Pincha sobre Button y arrstralo hasta el inter faz como en la siguiente f igura.

47

Suena Imagen Diseo de la app


Volvemos de momento al App Inventor Designer En la par te de la izquierda de la siguiente ventana, despl iega en la paleta la opcin Basic y arrastra un botn Button al inter faz

48


Puedes seleccionar una imagen como botn. Pincha y Selecciona tu imagen


49


Vers, que ahora aparece la nueva imagen J


En la par te de la izquierda de la siguiente ventana, despl iega en la paleta la opcin Media y arrastra la opcin Sound al inter faz

50



Vers que aparece debajo de tu imagen un icono Sound . Ahora es necesar io deci r qu sonido quieres reproduci r, para e l lo : en la par te de la derecha, donde pone Source e l ige e l archivo del sonido que quieres reproduci r.

51



Puedes aadir una caja de Texto como en Hola Mundo a este inter faz.

52



Ahora vamos a dar le inte l igencia a los botones, para e l lo en e l entorno de t rabajo , a la derecha p incha sobre Open Block Edi tor y se te abr i r una ventana como la de la s iguiente f igura (B locks Edi tor ) .

Ahora, s implemente i remos aadiendo los botones que selecc ionaste antes con e l sonido (Button1) .

Para e l lo , pulsa en la par te izquierda en MyBlocks.

53

Suena Imagen Blocks Editor


Que re m os que cuando s e pu l s e e l B u t ton s ue ne e l s on ido , pa ra e l l o , i nd i cam os con la opc in C l i c k qu e que remos que escuc h e e l eve nto y ac te hac iendo lo qu e se l e i nd i ca .



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.

Para reproducir cualquier cancin s iempre debes pulsar un Play, pues aqu igual .

55


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 la hora de ejecutar una aplicacin desde App Inventor tienes dos opciones: 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


En la pa r te de re c ha de l B loc k Ed i to r ve rs New Em ula to r ( m i ra la s ig u ie n te im ag e n) P inc h a ah pa ra c re a r un nuevo e m ulado r. B s i c am e nte e s c o m o un te l fo no que s e e je c u t a e n

t u o rde nador y que pe rm i te p robar que t u ap l i cac in f unc iona s in ba ja r la a l m v i 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


Una vez que hayas pulsado en Connect to Emulator tardar un poco en arrancar, en funcin del ordenador puede tardar entre 30 segundos y 2 minutos.

En esta figura, t ienes un

ejemplo del telfono que se arrancar y sobre el que podrs probar las aplicaciones.

Tambin, podrs ir a la parte de aplicaciones del telfono emulado y pulsar sobre tu aplicacin, igual que en un telfono de verdad.

58

EJECUTA TU APLICACIN EN UN EMULADOR


Qu es AppInventor?

Instalacin.

Entorno de Trabajo.


Ejemplos guiados.

Ejercicios.

Curiosidades 59

NDICE


Ejemplos guiados

60

APP INVENTOR


Ahora haremos 4 ejemplos para que desarrolles fcilmente: Zoo loco: varias imgenes de animales que reproducirn un

sonido o se pararn con slo pulsar sobre la imagen.

Pintar caras: permitir pintar sobre imgenes lo que quieras, guardar la imagen y borrar lo que hayas hecho.

Cronmetro: aprenders a medir distancias y a hacer un contador para que puedas usarlo en tus carreras.

English test: un curioso sistema donde podrs incluir un audio en ingls, y hacer diversas preguntas tipo test para que quien pruebe tu aplicacin practique su ingls.

61

EJEMPLOS PARA QUE DESARROLLES


Ejemplo 1: Zooloco

62

APP INVENTOR


Este es un repaso del e jemplo del gato hecho anter iormente. Selecc iona la ventana de Pro jects y Crea un nuevo proyecto y l lmale : zooloco Se te abr i r tu entorno de t rabajo (App Inventor des igner) . Ahora necesi tars inser tar 6 botones en e l mvi l de l entorno de t rabajo , y

poner les una imagen a cada botn (ver e jemplo del pos ib le inter faz en la s iguiente imagen)

En las s iguientes t ransparencias te damos un poco de ayuda para que repases.

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)


El oso ser el botn 1 , el elefante ser el 2, el mono ser el 3, el gato ser el 4, la rana el 5 y la oveja el 6.

En la siguiente figura, aparece un ejemplo para la primera imagen. Si quieres que las imgenes se ajusten, se centren, o cambiarles el tamao puedes seleccionar la opcin Width (tamao) en la parte inferior derecha de la siguiente figura.

No hace falta que todos los animales salgan de dos en dos, puedes disponerlos como quieras en el mvil .


EJEMPLO 1: ZOO LOCO - BOTONES

Ahora vamos a cambiar le e l nombre de los botones para que nos sea ms fc i l as ignar les funcional idades. Cada botn tendr e l nombre del animal asociado.

Para e l lo , en la par te de Components (ver s iguiente f igura de la i zquierda, se lecc iona de e l pr imer botn, y luego pulsa donde pone Rename en la misma ventana (mira e l cuadrado ro jo) .

Rel lena en la ventana que te parece en New name con e l nombre del botn oso que ser bear u oso .

A cont inuacin vers que cambia e l nombre del botn (ver f igura de la derecha) Repite lo mismo para e l resto de botones indicando e l nombre correspondiente a

cada animal .

65

EJEMPLO 1: ZOO LOCO - BOTONES


Vamos a prct ica ot ra forma de int roduci r sonido en las apl icac iones con e l objeto Player .

Para e l lo , ut i l i za en la par te izquierda la Palet te donde pone Media P layer , ar rstra lo a l inter faz de tu apl icac in (mira e l recuadro azul de la f igura donde debes colocar e l p layer ) . Esta opcin nos permite inser tar var ios sonidos ut i l i zando slo un objeto Player .

En la par te de la derecha, tenemos que i r aadiendo todos los sonidos de nuestros animales . Debe quedar a lgo como en la s iguiente f igura, f jate en la par te derecha ( recuadro ro jo) . Tendrs que i r pulsando e l botn Add y aadiendo tantos sonidos , como animales tenga tu apl icac in.

66

EJEMPLO 1: ZOO LOCO - SONIDO


Abrimos el Blocks Editor . En la par te de MyBlocks (par te izquierda) ves arrastrando los 6 botones

de los animales de tu apl icacin, seleccionando la opcin Cl ick para cada botn.

Debe quedar te algo similar a lo que aparece en la siguiente f igura:


EJEMPLO 1: ZOO LOCO ASIGNAR FUNCIONES

En la siguiente figura, se muestran todos los eventos que tienes que controlar.

A continuacin, te recordamos cmo insertarlos, y te explicamos el evento player.

68

EJEMPLO 1: ZOO LOCO A FUNCIONAR!


Pasos para inser tar la funcional idad de cada botn (pulsa y suena) Vamos a indicar que cuando pulses un animal suene el sonido que hayas

elegido para cada animal (se har con las opciones Player1 .source y Player1 .Star t )

Cuando vuelvas a pulsar, se parar el sonido (opcin Player1 .stop) Para el botn del oso, por ejemplo, real iza estos pasos: Selecciona de My blocks el evento c l ick del objeto botn bear

bear.c l ick . Recuerda, seleccionas en My blocks el componente y te aparecen todas las opciones, pues

pulsa sobre la opcin deseada, en el caso del botn bear sobre bear.click, y as con lo dems botones.

Recuerda que puedes mover los elementos sobre tu escritorio del blocks editor como quieras.

Selecciona ahora del evento playerplayer1 .stop, player1 .source, player1 .star t . Colcalos dentro de Bear.c l ick (observa la s iguiente f igura para que veas cmo debe quedar) .

69


Cada vez que pongas un elemento dentro de click, y encaje, sonar un click


El evento player1 .source permite indicar el archivo de audio que se reproducir, pero debes indicrselo con el objeto Text .

Para el lo, vete a la par te izquierda de la ventana, para indicarle el sonido, en vez de en My blocks, selecciona Built - in text

Arrastra el objeto Text dentro de Bear1 .cl ick, y pulsa sobre la palabra text , borrala y escribe el nombre del audio que quieres reproducir (mira la siguiente f igura para ver cmo debe quedar)

El objet ivo de esta lt ima opcin de Text, es indicar el nombre del archivo de sonido que subiste previamente en la transparencia 44.

70



Finalmente, debe haberte quedado algo similar a la siguiente figura.

71



Si t ienes problemas con e l audio , puede ser por la opcin p layer1 .stop, puedes qui tar la .

Ya puedes subi r la apl icac in ut i l i zando la opcin Connect to Device en la misma ventana de Blocks Edi tor , puedes emular lo pr imero, y luego puedes se lecc ionar, una vez que te salga en e l emulador, tu te lfono Android .

72



Ejemplo 2: English Test

73

APP INVENTOR


En este ejemplo debes hacer un interfaz para el mvil similar al de la siguiente figura.

74

EJEMPLO 2: ENGLISH TEST

Intenta hacer por ti mismo los siguientes bloques usando el block editor una vez que hayas generado el interfaz.

La siguiente transparencia te muestra todos los bloques que debes usar y el orden.

Antes, intenta pensar en el diseo y ten en cuenta las siguientes pautas. Necesitars los siguientes componentes

Botn PlayButton para que suene el audio en ingls Botn de reseteo del audio, que empiece a sonar otra vez desde el principio. Tantas cajas de texto como preguntas quieras hacer (en el ejemplo son 4) Variable score o puntuacin (inicialmente a 0) acumular y guardar la puntuacin

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 condicionales (IF, ELSE) Etiqueta con el valor de score se mostrar en esa etiqueta el valor de la variable

score

75

EJEMPLO 2: ENGLISH TEST BLOCKS EDITOR


Cmo utilizar las variables condicionales

Para ello, en built-in selecciona Control

Te aparecern diferentes opciones para utilizar los Ifs, recuerda que son rdenes que hacen algo si se cumple la condicin que se indica en el campo text

76



Ejemplo 3: Cronmetro

78

APP INVENTOR



79

EJEMPLO 3: CRONMETRO



La siguiente transparencia te muestra todos los bloques que debes usar y el orden de conexin.

Antes, intenta pensar en el diseo y ten en cuenta las siguientes 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




EJEMPLO 3: CRONMETRO BLOCKS EDITOR

Ejemplo 4: Pinta Caras

82

APP INVENTOR




EJEMPLO 4: PINTA CARAS


Se trata de activar la cmara de tu mvil, abrir una foto, guardarla, pintarla o borrarla.

La siguiente transparencia te muestra todos los bloques que debes usar y el orden.

Antes, intenta pensar en el diseo y ten en cuenta las siguientes pautas. Necesitars los siguientes componentes

Botn Para hacer la foto. Botn para borrar la foto. Cmara del mvil. 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




EJEMPLO 4: PINTA CARAS BLOCKS EDITOR

Para familiarizarte con App Inventor, sigue paso a paso los siguientes videos: 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 tienes un Mac, sigue paso a paso el siguiente ejemplo: http://www.youtube.com/watch?v=xKThvmNovV8

86

VIDEOS TUTORIAL


Ejercicio 1) Realizar un programa que tenga dos botones, s i pulsas un botn el color de fondo cambia a un color (rosa), y s i pulsas el otro cambia a otro color (verde)

Ejercicio 2) Se debe real izar un programa Escaneo_Codigos para cdigos bidimensionales. La apl icacin ofrecer al usuario la posibi l idad de escanear un QR-Code, y tras obtener el texto contenido, real izar una bsqueda en Google.

Ejercicio 3) Servicio de manos l ibres para SMS. Se introduce el uso de los mdulos SpeechRecognizer (texto a voz) y Texting (envo de SMS). La ap l icac in consta de 3 pasos : in t roduc i r e l nmero de te l fono (mediante voz) , introducir el contenido del sms (mednaite voz) , y envo del sms.

Ejercicio 4) Se har uso de los sensores del telfono y el uso de canvas. El usuario puede dibujar en canvas uti l izando el acelermetro que trae el disposit ivo. Dispone de 4 botones que le permiten cambiar el color de la l nea o borrar lo dibujado hasta el momento, y de unos campos de texto a modo de depuracin.

87

EJERCICIOS PARA PRACTICAR LO APRENDIDO


Qu es AppInventor?

Instalacin.

Entorno de Trabajo.


Ejemplos guiados.

Ejercicios.

Curiosidades 88

NDICE


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


Bubble Ball Desarrollada por Robert Nay, chico de 14 aos. Dos millones

de descargas en 2 semanas.

90

EJEMPLO DE APLICACIONES


91

EJEMPLOS DE GUIADO


Documents

Intro-AppInventor-v2.pdf