Intro-AppInventor-v2.pdf
Transcript of 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.
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 haciendo Aprendizaje everywhere Aplicaciones interdisciplinares Comunidad 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
-
Instalacin
Curso de Programacin en Android on-line 9
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.
Curso de Programacin en Android on-line 10
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 .
Curso de Programacin en Android on-line 11
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
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 Trabajo
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 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.
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 Trabajo App Designer
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
-
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.
Curso de Programacin en Android on-line
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.
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.
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.
Curso de Programacin en Android on-line
APP INVENTOR DESIGNER COMPONENTS Y PROPERTIES
-
Entorno de Trabajo Blocks Editor
25
APP INVENTOR
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
APP INVENTOR BLOCKS EDITOR
Imagen de la interfaz Google
Curso de Programacin en Android on-line
-
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
APP INVENTOR BLOCKS EDITOR
-
Entorno de Trabajo Android Emulator
29
APP INVENTOR
Curso de Programacin en Android on-line
-
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
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 primer programa en AppInventor
32
APP INVENTOR
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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.
Cristina Rodriguez Sanchez y Juan Martnez Romo 35
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?
Curso de Programacin en Android on-line
-
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
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 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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
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 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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
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 J
Curso de Programacin en Android on-line
-
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
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
-
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
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
-
Puedes aadir una caja de Texto como en Hola Mundo a este inter faz.
52
Suena Imagen Diseo de la app
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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 .
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.
-
Para reproducir cualquier cancin s iempre debes pulsar un Play, pues aqu igual .
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 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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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
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
-
Ejemplos guiados
60
APP INVENTOR
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
Ejemplo 1: Zooloco
62
APP INVENTOR
Curso de Programacin en Android on-line
-
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)
Curso de Programacin en Android on-line
-
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 .
Cristina Rodriguez Sanchez y Juan Martnez Romo 64
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
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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:
Cristina Rodriguez Sanchez y Juan Martnez Romo 67
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!
Curso de Programacin en Android on-line
-
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
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 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
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
-
Finalmente, debe haberte quedado algo similar a la siguiente figura.
71
EJEMPLO 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
-
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 1: ZOO LOCO A FUNCIONAR!
Curso de Programacin en Android on-line
-
Ejemplo 2: English Test
73
APP INVENTOR
Curso de Programacin en Android on-line
-
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
Curso de Programacin en Android on-line
-
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 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
-
Ejemplo 3: Cronmetro
78
APP INVENTOR
Curso de Programacin en Android on-line
-
En este ejemplo debes hacer un interfaz para el mvil similar al de la siguiente figura.
79
EJEMPLO 3: CRONMETRO
Curso de Programacin en Android on-line
-
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 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
Curso de Programacin en Android on-line
-
Intenta hacer por ti mismo los siguientes bloques usando el block editor una vez que hayas generado el interfaz.
Cristina Rodriguez Sanchez y Juan Martnez Romo 81
EJEMPLO 3: CRONMETRO BLOCKS EDITOR
-
Ejemplo 4: Pinta Caras
82
APP INVENTOR
Curso de Programacin en Android on-line
-
En este ejemplo debes hacer un interfaz para el mvil similar al de la siguiente figura.
Cristina Rodriguez Sanchez y Juan Martnez Romo 83
EJEMPLO 4: PINTA CARAS
-
Intenta hacer por ti mismo los siguientes bloques usando el block editor una vez que hayas generado el interfaz.
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
Curso de Programacin en Android on-line
-
Intenta hacer por ti mismo los siguientes bloques usando el block editor una vez que hayas generado el interfaz.
Cristina Rodriguez Sanchez y Juan Martnez Romo 85
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
Curso de Programacin en Android on-line
-
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
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
-
Bubble Ball Desarrollada por Robert Nay, chico de 14 aos. Dos millones
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