Intro-AppInventor-v2.pdf

INTRODUCCIÓN A APPINVENTOR

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or? ② Instalación. ③ Entorno de Trabajo. ④ Tus primeros programas paso a paso. ⑤ Ejemplos guiados. ⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

2

ÍNDICE

② Instalación. ③ Entorno de Trabajo. ④ Tus primeros programas paso a paso. ⑤ Ejemplos guiados. ⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

3

APP INVENTOR

Curso de Programación en Android on-line

4

¿QUÉ ES APPINVENTOR? !

!

!

! ! ! !

Aplicación web Proporcionar herramientas básicas a cualquier usuario para crear un software, en principio básico. Permite construir aplicaciones móviles sin ningún tipo de experiencia técnica 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 programación. Curso de Programación en Android on-line

5

OBJETIVOS DE APPINVENTOR ! ! ! !

Aprender haciendo Aprendizaje everywhere Aplicaciones interdisciplinares Comunidad de Apps de Centro


6

APPINVENTOR, UN POCO DE CONTEXTO

Scratch es un entorno para enseñar conceptos básicos de programación a los niños. Fue desarrollado en el MIT, y permite comenzar a entender conceptos como ciclos, control de flujo, señales, etc.


7

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or?

③ Entorno de Trabajo. ④ Tus primeros programas paso a paso ⑤ Ejemplos guiados. ⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

8

APP INVENTOR

Instalación


9

INSTALACIÓN INST ALACIÓN DE APPINVENTOR - APUNTES Para acceder a los recur sos 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 página Web, desde cualquier lugar en el que estés. Para usarlo, te logeas con tu cuenta de google y listo. Aunque algunos requisitos que debe cumplir el ordenador en el que estés. Te los explicamos a continuación: 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+ !

!

!

!

!

Navegadorr Mozilla Firefox 3.6 o superior. Navegado Apple Safari 5.0 o superior. Google Chrome 4.0 o superior. Microsoft Internet Explorer 7 o superior.


10

INSTALACIÓN INST ALACIÓN DE APPINVENTOR AP PINVENTOR - PASOS !

!

! ! !

Sigue lo s paso s más detallado s de co nfiguració n e Instalació n en el do c umento adjunto del curso Para instalar el pro grama, regístrate en el sitio o ficial de A pp Invento r. Recibirás Recibi rás la auto rizació n de Go o gle para utilizar la aplicació n. Debes t ener instalado Java 1.6 . Haz clic http://www.java.co m/es/ Tu Smartpho ne debe funcio nar bajo el sistema o perat ivo Andro id. Para po der utilizar tu aplicació n generada, generada , co necta tu Smartpho ne al PC co n el cable USB y ejecútala. Si no l o reco no ce deberás in stal arte lo s drivers de tu mó vil. Puedes enco ntra r más info rmació n en http://appinvento http://appinve nto r.mit.edu/explo r.mit.edu/explo re/ (luego pincha en la parte derecha: Invent – Go to MIT AppInvento AppInvent o r)

!

Sí, App Inventor dispone de un emulador que permite simular un teléfono móvil. Esto te permite crear una aplicació n sin necesidad de tener tu teléfo no mó vil a la mano . !

App Invento r funcio na bajo una interfaz (What yo u see is what yo u get) que te permite ver auto mát icamen te en pantalla lo s resultado s de tu aplicació n. Uniendo una serie de blo ques el usuario po drá crear aplicacio nes para Andro id.


11

INSTALACIÓN INST ALACIÓN – OTROS VIDEO V IDEO TUTORIALES !

Tutorial de instalación: ! ! !

http://appinventor.mit.edu/explore/learn.html http://www.youtube.com/watch?v=5QEMY_VJlNM http://www.youtube.com/watch?v=75vWjhkQqno Selecciona tu sistema operativo (Windows, Mac o Linux). Lo siguiente: Pulsa en la opción de “Setup” y sigue los pasos del instalador.


12

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or? ② Instalación.

④ Tus primeros programas paso a paso. ⑤ Ejemplos guiados. ⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

13

APP INVENTOR

Entorno de Trabajo


14

ENTORNO DE TRABAJO !

Antes de empezar ¿Qué vas a encontrarte en App Inventor? ! !

!

El entorno de trabajo es totalmente gráfico 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 código fuente (mira el siguiente ejemplo). No hace falta que escribas código fuente, lo hace internamente, sólo tienes que preocuparte de colocar los bloques en el orden adecuado para que hagan su cometido


15

ENTORNO DE TRABAJO - HERRAMIENT HERRAMIENTAS AS !

El entorno de trabajo está formado por tres herramientas: ①

App Inventor Designer (Aplicación web)

http://www.appinventorbeta.com/ode/Ya.html ②

App Inventor Blocks Editor (Aplicación instalada en el ordenador).

Es un programa adicional que permite que puedas depurar la aplicación desde tu ordenador y configurar su funcionalidad, pero es como una página web, sólo que se ejecuta en tu ordenador. ③

Android Emulator

Esta herramienta es un móvil simulado q ue se ejecuta en tu ordenador, te permite hacer todas las operaciones de un móv il “sin móvil”. Servirá para probar tus aplicaciones primero en este emulador, y luego, en tu móvil. Curso de Programación en Android on-line

16

ENTORNO DE TRABAJO "

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


17

APP INVENTOR

Entorno de Trabajo – App Designer


18

APP INVENTOR DESIGNER !

!

!

El App Inventor Designer es la parte de la herramienta donde seleccionamos los componentes de la aplicación. Te permite diseñar la interfaz de la aplicación (su aspecto). esta compuesta por 5 bloques (ver siguiente transparencia): ① ② ③ ④ ⑤

My Projects Paleta (Palette) Visor (viewer) Componentes (components) Propiedades (Properties) Curso de Programación en Android on-line

19

APP INVENTOR DESIGNER – BLOQUES 20

1

2

3 Curso de Programación en Android on-line

4

5

APP INVENTOR DESIGNER – PROJECTS !

Este bloque te permite gest ionar tus proyectos o crear nuevos proyect proyectos. os. ! ! ! !

: Crear nuevo proyecto. proyecto. : selecciona el proyecto para eliminar. : descargarte el proyect proyecto o a tu ordenador. : si pinchas saldrá: ! Download source: te permite descargarte el código del proyectoo selecci onado. proyect ! Upload source: te permite subir un proyecto que tengas hecho en AppInventor AppInventor..

Para volver a tu entorno de trabajo tienes que seleccionar “Design” en la opción de Projects. Curso de Programación en Android on-line

21

APP INVENTOR DESIGNER - PALETTE 22 !

Palette tiene diferentes opciones de botones y funcionalidades que puedes insertar en tu aplicación: ! ! ! ! !

!

Basic: botones, cajas de texto, imágenes, etc. Media: cámara (hacer fotos), sonidos, video, etc. Animation: animaciones asociadas a las imágenes, etc. Social: twitter, llamados, contactos, mensajes de texto, etc. Otras opciones de más nivel: control del acelerómetro y sensores del móvil, configuraciones de pantalla, “Lego Mindstorms, Barcode, Bluetooth, Reconocedor de voz (en Other Stuff)…

Además, si no sabes para que sirve algo a la derecha de cada opción hay un símbolo “ ? ” que te explica para qué sirve y cómo se usa. Utiliza “Google traductor” si no sabes qué significa. Curso de Programación en Android on-line

APP INVENTOR DESIGNER - VIEWER !

Este bloque te permite poner imágenes, texto, botones, navegador,, reloj, acceso a redes sociales, … simplemente navegador arrastrando desde el bloque “Palette” la opción que quieras a tu aplicación.

Así puedes ver como quedará de aspecto visual.

!


APP INVENTOR DESIGNER – COMPONENTS Y PROPERTIES !

Components: !

!

En esta sección de componentes irán apareciendo todos los componentes de imágenes, botones, etc… que vayas incorporando a tu aplicación.

Properties: !

En esta sección aparecerán las propiedades de cada elemento. Podrás indicar de qué color es el texto, cuál es la imagen o sonido que quieres insertar, tipo de letra, etc… más adelante verás cómo se hace en los ejemplos de este curso.


APP INVENTOR Entorno de Trabajo – Blocks Editor


25

APP INVENTOR BLOCKS EDITOR !

!

!

!

El App Inventor Blocks Editor es la parte de la herramienta donde especificamos lo que deben hacer los componentes. Unimos gráficamente piezas para dar lógica a la aplicación. Es posible unir funcionalidades simples como un rompecabezas: botones, zonas de texto, imágenes, audio, localización, selección de contactos o números telefónicos, acceso a una mini base de datos, lector de código de barras, etc. Y l i s t o , m u y s e n c i l l o , y a t i e n e s t u p u z z l e q u e e s u n p r o g r a m a . Curso de Programación en Android on-line

26


!

!

Para utilizarlo, 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 utilizar en tu aplicación: operaciones matemáticas, lógica, bucles, colores, vectores, etc… “My Blocks”: son los componentes que has seleccionado en el Designer, los botones, imágenes, cajas de texto, etc… que hayas seleccionado para tu interfaz.

Imagen de la interfaz ©Google


27


Aquí tienes un ejemplo de diferentes bloques que se han seleccionado para formar una aplicación. Es bastante intuitivo, si ves el ejemplo “AddButton.click” significa que cuando hagas Click en el botón denominado “AddButt “AddButton” on” actives el escaneador de Barcode.

Cristina Rodriguez Sanchez y Juan Martínez Romo

28

APP INVENTOR

Entorno de Trabajo – Android Emulator


29

ANDROID EMULATOR !

!

Aquí tienes el teléfono sobre el que podrás probar las aplicaciones, se arrancarán automáticamente. También, podrás ir a la par te de aplicaciones del teléfono emulado y pulsar sobre tu aplicación, igual que en un teléfono de verdad.


30

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or? ② Instalación. ③ Entorno de Trabajo.

⑤ Ejemplos guiados. ⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

31

APP INVENTOR

Pasos para tu primer programa en AppInventor


32

TU PRIMER PROGRAMA EN APPINVENTOR !

En este primer ejemplo haremos un Hola Mundo. Para ello: !

Incluiremos un texto que se llame Hola Mundo.

A continuación, te exponemos los pasos para crearlo tú mismo


33

Hola Mundo – Crear proyecto ! ! !

!

Primer Paso en App Invento Inventorr Designer Seleccionar “MyProjects” Pulsa la opción “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 abrirá el entorno de trabajo para que personalices el interfaz de la app.

HolaMundo


34

Hola Mundo – Diseño de la app !

!

!

Segundo Paso en App Inventor Designer, Designer, debes escoger d el bloque “Palette” una caja de texto (Basic # TextBox). Arrástrala hasta el interfaz como en la siguiente figura, verás que te aparece en blanco el contenido de la caja de texto. En el bloque “Properties” (zona derecha), pincha sobre el campo “Text” y escribe “Hola Mundo”. Aparecerá como en la siguiente figura.


35

P O S I B L E S P R O B L E M A S C U A N D O U S A S E L A P P I N V E N TO TO R , A L A B R I R EL ENTORNO DE TRABAJO TE PUEDE SALIR UN PROBLEMA COMO EL SIGUIENTE, SIGUE LOS PASOS QUE TE INDICAMOS PARA SOLUCIONARLO.

"

!

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

Esto es que o lvidaste insta larte el pro grama, o bien, darle permiso s pa ra abrirlo . Simplemente Simplement e en la siguiente v ent ana dale a aceptar y permitir siempre.

36

¿CÓMO SUBIR AL MÓVIL? !

A continuación, te explicamos las opciones para subir al móvil la aplicación:

!

Enviarte la aplicación a través del clave que usas para conectar tu Android a tu PC. Enviarte la aplicación por Qrcode. Enviarte la aplicación por Bluetooth o e-mail.

!

A continuación, te explicamos los pasos para hacerlo.

! !


37

SUBE AL MÓVIL – PASOS PREVIOS 1. 2. 3. 4.

Tendrás que descargarte la aplicación. Coloca el ratón en el “App Inventor Designer” (ventana principal de tu proyecto). Allí, en la par te de la derecha verás la siguiente opción: “Package for Phone”. Es un desplegable, si le pinchas aparecerán las siguientes opciones: a. b. c.

5.

Show BarCode # Te muestra un código qrcode Download to this computer # Te descarga el ejecutable de la aplicación a tu ordenador cuya extensión de fichero es “.apk”. Por ejemplo: “Miaplicacion.apk” Download to Connected Phone # Te descarga el ejecutable directamente en tu teléfono.

En la siguiente figura se muestran estas opciones. Curso de Programación en Android on-line

38

SUBE AL MÓVIL – PASOS PREVIOS (C ONT.)

Pulsa en la opción que desees


39

SUBE AL MÓVIL CON EL CABLE 1. 2.

3.

Conecta el móvil y configura en Ajustes el modo depuración. Pincha sobre la opción “Download to Connected Phone”, que permite conectar tu móvil al ordenador con tu cable para Android usb. ¡Listo!

Ahora te explicamos las otras opciones


40

SUBE AL MÓVIL CON UN QRCODE 1. 2. 3. 4. 5.

6.

Mira la ventana de la transparencia anterior, Pincha sobre “Show Barcode”. Te podrás descargar este Qrcode a tu ordenador. Tarda un poquito… ten paciencia. Una vez descargado para instalarlo utilizando esta funcionalidad, deberías tener en tu móvil Android la aplicación de lector de códigos (Barcode, por ejemplo). Lo siguiente que puedes hacer es con esa aplicación enfocar al código Qrcode con tu cámara del móvil y listo, se te instalará automáticamente la aplicación.


41

SUBE AL MÓVIL CON BLUETOOTH 1. 2.

Mira la ventana de la transparencia ant er io r, Pincha so bre “Do wnlo ad to this co mputer” par a des ca rgar tu aplic ació n Andro id a tu PC. Tarda un poquito… ten paciencia. Una vez descargado el archivo “.apk” (verás que tiene esa extensió n), utiliza el Blueto o th de tu o r denado r para env iarte la aplicaci ó n. Si tu o rdena do r no ti ene Blueto o th, puedes utilizar una mo chila usb-blueto o th para ha cer lo . Enviarte la aplicació n po r Blueto o th es igual que e nviarte una f o to po r Bluetooth. Para ello, activa el Bluetooth y la visibilidad de tu teléfono Android en la o pció n “ajus tes”. Aho ra enviarte el archivo a tu teléfo no

3. 4. 5. 6.

Para mac (este pro ceso puede tardar 30 s egu ndo s y 1 minut o ): 1. 2. 3.

Pulsar el icono de Bl uetooth, y dar a “Enviar archivo por Bl uetooth”. Selecciona el archivo “.apk” descargado. A continuación, aparecerá una lista de móviles, selecciona el tuyo.

Para windows 1. 2. 3.

Vete a la carpeta donde te hayas descargado la aplicación y pulsa sobre el botón derecho en la aplicación. Selecciona enviar archivo por Bl uetooth. A continuación, buscará tu teléfono móvil, selecciónalo y listo.

Aho ra só lo tienes que abrir el archivo enviado para po der instala r tu aplicaci ó n hecha con el AppInventor. Curso de Programación en Android on-line

42

SUBE AL MÓVIL CON TU MAIL 1. 2. 3. 4. 5.

Mira la ventana de la transparencia anterior anterior,, Pincha sobre “Download to this computer” para descargar tu aplicación Android a tu PC. Tarda un poquito… ten paciencia. Una vez descargado el archivo “.apk” (verás que tiene esa extensión) exte nsión) abre tu corre electrónico. Envíate un correo y adjúntale como archivo el apk descargado.


43

APP INVENTOR

Pasos para tu segundo programa en AppInventor


44

TU SEGUNDO PROGRAMA EN APPINVENTOR !

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 botón Incluir un sonido Hacer que cuando pulses el botón funcione el sonido

Además, a continuación, te exponemos los pasos para crearlo tú mismo con unas transparencias guiadas. ( Si quieres ver el vídeo de cómo realizar esta aplicación pincha en: http://www.youtube.com/w http://www .youtube.com/watch?v=8ADwPLSFeY8&fe atch?v=8ADwPLSFeY8&feature=playe ature=player_embedded) r_embedded)


45

Suena Imagen – Crear proyecto ! ! !

Primer Paso en App Invento Inventorr Designer Seleccionar “MyProjects” Pulsa la opción “New” Introducir nombre del Proyecto: “Suenaimagen” y pulsa “OK”

Suenaimagen


46

Suena Imagen – Diseño de la app !

Segundo Paso en App Inventor Designer, Designer, debes escoger d el bloque “Palette” un botón. Pincha sobre “Button” y arrástralo hasta el interfaz como en la siguiente figura.


47


Volvemos de momento al App Invento Inventorr Designer En la parte de la izquierda de la siguiente ventana, despliega en la paleta la opción “Basic” y arrastra un botón “Button” al interfaz

Puedes seleccionar una imagen como botón. Pincha y Selecciona tu imagen


48

Suena Imagen – Diseño de la app Verás, que ahora aparece la nueva imagen $


49


En la parte de la izquierda de la siguiente ventana, despliega en la paleta la opción “Media” y arrastra la opción “Sound” al interfaz


50


Verás que aparece deba jo de tu imagen un ico no “So und”. Aho ra es necesario decir qué so nido quieres repro ducir, para ello : en la parte de la derecha, do nde po ne “So urce” elige el archivo del so nido que quieres repro ducir. ducir .


51


Puedes añadir una caja de Texto Texto como en “Hola Mundo” a este interfaz.


52

Suena Imagen – Blocks Editor !

!

!

Aho ra vamo s a darle i nt eligencia a lo s bo to nes, par a ello en el ento rno de trabajo , a la derecha pincha so bre “ Open Blo ck Edito r” y se t e abrirá una ventana co mo la de la siguiente figura (Blo cks E dit o r). Aho ra, simplemente iremo s aña diendo lo s bo to nes que seleccio naste antes co n el so nido (Butto n1). Para ello , pulsa en la parte izquier da en MyBlo cks.


53


Queremos que cuando se pulse el “Button” suene el sonido, para ello, indicamos con la opción Click que queremos que escuche el evento y actúe haciendo lo que se le indica.

1º Pinchas en Button1 en la zona de MyBlocks Aparecerán muchas opciones de Button1

1

2º Pincha SÓLO en Te quedará algo como la última figura de esta transparencia. 2


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


Para reproducir cualquier canción siempre debes pulsar un Play, pues aquí igual.

3º Pinchas en Sound1en la zona de MyBlocks y seleccionas 4º Arrastras Soun1.Play dentro de Button1.Click hasta que encaje y suene “click” 3

4 4

Te quedará algo como la última figura de esta transparencia.

55

¡LISTO! AHORA PRUEBA TU APLICACIÓN !

A la hora de ejecutar una aplicación desde App Inventor tienes dos opciones: ! !

Ejecutar la aplicación en un Emulador Ejecutar la aplicación en tu dispositivo móvil Android (esta opción está explicada a partir de la transparencia ¿Cómo subir al móvil? Número T.36)


56

EJECUTA EJECUT A TU APLICACIÓN EN UN E MULADOR ! !

En la parte derecha del “Block Editor” verás “New Emulator” (mira la siguiente imagen) Pincha ahí para crear un nuevo emulador. Básicamente es como un teléfono que se ejecuta en tu ordenador y que permite probar que tu aplicación funciona sin bajarla al móvil.

1 Pulsa aquí para crear un nuevo emulador 2 Para bajar al emulador, tu aplicación, pulsa en emulator-5554, si creas varios emuladores, te aparecerán más opciones. Si tienes tu móvil configurado también te permitirá hacerlo sobre tu móvil Curso de Programación en Android on-line

57

EJECUTA EJECUT A TU APLICACIÓN EN UN E MULADOR !

!

!

Una vez que hayas pulsado en “Connect to Emulator” tardará un poco en arrancar, en función del ordenador puede tardar entre 30 segundos y 2 minutos. En esta figura, tienes un ejemplo del teléfono que se arrancará y sobre el que podrás probar las aplicaciones. También, podrás ir a la par te de aplicaciones del teléfono emulado y pulsar sobre tu aplicación, igual que en un teléfono de verdad. Curso de Programación en Android on-line

58

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or? ② Instalación. ③ Entorno de Trabajo. ④ Tus primeros programas paso a paso.

⑥ Ejercicios. ⑦ Curiosidades Curso de Programación en Android on-line

59

APP INVENTOR

Ejemplos guiados


60

EJEMPLOS PARA QUE DESARROLLES Ahora haremos 4 ejemplos para que desarrolles fácilmente: Zoo loco: varias imágenes de animales que reproducirán un sonido o se pararán con sólo pulsar sobre la imagen. !

!

!

!

Pintar caras: permitirá pintar sobre imágenes lo que quieras, guardar la imagen y borrar lo que hayas hecho. Cronómetro: aprenderás aprenderás a medir distancias y a hacer un contador para que puedas usarlo en tus carreras. English test: un curioso sistema donde podrás incluir un audio en inglés, y hacer diversas preguntas tipo test para que quien pruebe tu aplicación practique su inglés.


61

APP INVENTOR

Ejemplo 1: Zooloco


62

EJEMPLO 1: ZOO LOCO ! ! ! !

!

Este es un repaso del ejemplo del gato hecho anterio rmente. Seleccio na la ventana de Pro jects y Crea un Se te abrirá tu ento rno de trabajo (A pp Invento r designer). Aho ra necesitarás ins ertar 6 bo to nes en el mó vil del ento rno de trabajo , y po nerles una imagen a cada bo t ó n (ver ejemplo del po sible interfaz en la siguiente imagen) En la s siguientes transparencias te damo s un po co de ayuda para que repases. Zoo Loco

Para insertar las imágenes: ves arrastrando en la parte izquierda del “App Inventor Designer”, la opción “Button” tantas veces como botones de animales quieras insertar. Por ejemplo, te proponemos que insertes 6 botones. Una vez arrastrados los 6 botones al móvil del appinventor, selecciona una foto para cada botón 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 botón, transparencia 20)


63

EJEMPLO 1: ZOO LOCO - BOTONES !

!

!

El oso será el botón 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 imágenes se ajusten, se centren, o cambiarles el tamaño puedes seleccionar la opción “Width” (tamaño) 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 móvil.


64

EJEMPLO 1: ZOO LOCO - BOTONES !

!

!

! !

Aho ra vamo s a cambiarle el no mbre de lo s bo to nes pa ra que no s sea más fácil asignarles funcio nalidades. nalidade s. Cada bo tó n tendrá el no mbre del animal aso ciado . Para ello , en la par te de “Co mpo nents” (ver siguiente figur a de la izqu ierda, seleccio na de el primer bo tó n, y luego pulsa do nde po ne “Rename” en la misma ventana (mira el cuadrado ro jo ). Rellena en la ventana que te parece en “ New name” co n el no mbre del bo tó n o so que será “bear” u “o so ”. A co nt inuació n verás que cambia el no mbre del bo tó n (ver figura de la derecha) Repite lo mismo para el resto de bo to nes indicando el no mbre co rrespo ndiente a cada animal.


65

EJEMPLO 1: ZOO LOCO - SONIDO !

!

!

Vamo s a práct ica o tra fo rma de intro ducir so nido en las aplicacio nes co n el objeto “Player”. Para ello , utiliza en la pa rte izquierda la “Palette” do nde po ne “M edia ” # “Player”, arrástralo al interfaz de tu aplicació n (m ira el recuadro azul de la figura do nde debes co lo car el pl ayer ). Esta o pció n no s permite insertar var io s so nido s utilizando só lo un o bjeto “Player”. En la parte de la der echa , tenemo s que ir añadiendo to do s lo s so ni do s de nuestro s animales. Debe quedar algo co mo en la siguiente figur a, fíjate en la parte der ech a (recuadro ro jo ). Tendrás qu e ir pulsa ndo el bo tó n “Add” y añadiendo tanto s so nido s, co mo animales tenga tu aplicació n.


66

EJEMPLO 1: ZOO LOCO – ASIGNAR FUNCIONES ! !

!

Abrimos el “Blocks Editor”. En la parte de MyBlocks (parte izquierda) ves arrastrando los 6 b otones de los animales de tu aplicación, seleccionando la opción Click para cada botón. Debe quedarte algo similar a lo que aparece en la siguiente figura:


67

EJEMPLO 1: ZOO LOCO – ¡A FUNCIONAR! !

!

En la siguiente figura, se muestran todos los eventos que tienes que controlar. A continuación, te recordamos cómo inserta rlos, y te explicamos el evento player.


68

EJEMPLO 1: ZOO LOCO – ¡A FUNCIONAR! Pasos para insertar la funcionalidad de cada botón (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.Start) Cuando vuelvas a pulsar, se parará el sonido (opción Player1.stop) Para el botón del oso, por ejemplo, realiza estos pasos: Selecciona de “My bloc ks” el evento click del objeto botón “bear” # “bear.click”. !

!

!

!

!

Recuerda, seleccionas en “My blocks” el componente y te aparecen todas las opciones, pues pulsa sobre la opción deseada, en el caso del botón “bear” sobre “bear.click”, y así con lo de m ás botones.

!

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

Selecciona ahora del evento “player” # “player1.stop”, “player1.source”, “player1.start”. Colócalos dentro de “Bear.click” (observa la siguiente figura para que veas cómo debe quedar).

Cada vez que pongas un elemento dentro de click, y encaje, sonará un “click” Curso de Programación en Android on-line

69


!

!

!

El evento “player1.source” permite indicar el archivo de audio que se reproducirá, pero debes indicárselo con el objeto “Text”. Para ello, vete a la parte izquierda de la ventana, para indicarle el sonido, en vez de en “My blocks”, selecciona “Built-in” # “text” Arrastra el objeto Text T ext dentro de “Bear1.click”, y pulsa sobre la palabra “text”, borrala y escribe el nombre del audio que quieres reproducir (mira la siguiente figura para ver cómo debe quedar) El objetivo de esta última opción de Te Text, xt, 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 pro blemas co n el audio , puede ser po r la o pció n player1.s to p, puedes quitarla. Ya p u e d e s s u b i r l a a p l i c a c i ó n u t i l i z a n d o l a o p c i ó n “ C o n n e c t t o D e v i c e ” e n l a misma ventana de “Blo cks Edit o r”, puedes emula rlo p rimero , y luego puedes seleccion ar, una vez que te salga en el emulador, tu teléfono Android.


72

APP INVENTOR

Ejemplo 2: English Test


73

EJEMPLO 2: ENGLISH TEST !

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

74

EJEMPLO 2: ENGLISH TEST – BLOCKS EDITOR !

!

!

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 diseño y ten en cuenta las siguientes pautas. !

Necesitarás los siguientes componentes ! ! ! ! !

Botón “PlayButton” # para que suene el audio en inglés Botón de reseteo del audio, que empiece a sonar otra vez desde el principio. Tantas cajas de texto texto como preguntas quieras hacer (en el ejemplo son 4) Variable “score” o puntuación (inicialmente a 0) # acumulará y guardará la puntuación del test. Botón chequear el test. ! !

! !

Cuando la primera opción sea “False” es que el usuario ha acertado, y se le sumará un punto más 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” Curso de Programación en Android on-line

75

EJEMPLO 2: ENGLISH TEST – BLOCKS EDITOR !

!

!

Cómo utilizar las variables condicionales Para ello, en “built-in” selecciona “Control” Te aparecerán diferentes opciones para utilizar los Ifs, recuerda que son órdenes que hacen algo si se cumple la condición que se indica en el campo “text”


76

EJEMPLO 2: ENGLISH TEST – BLOCKS EDITOR


77

APP INVENTOR

Ejemplo 3: Cronómetro


78

EJEMPLO 3: CRONÓMETRO !



79

EJEMPLO 3: CRONÓMETRO – BLOCKS EDITOR !

!

!

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 conexión. Antes, intenta pensar en el diseño y ten en cuenta las siguientes pautas. !

Necesitarás los siguientes componentes Botón para empezar la cuenta ! Botón para parar la cuenta ! Botón para resetear la cuenta ! Cronómetro ( “Palette” # Basic) ! Órdenes condicionales (IF, ELSE) ! Variables para contar los segundos, decenas de segundos y minutos. !


80

EJEMPLO 3: CRONÓMETRO – BLOCKS EDITOR !

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


81

APP INVENTOR

Ejemplo 4: Pinta Caras


82

EJEMPLO 4: PINT P INTA A CARAS !



83

EJEMPLO 4: PINTA CARAS – BLOCKS EDITOR !

!

!

!

Intenta hacer por ti mismo los siguientes bloques usando el block editor una vez que hayas generado el interfaz. Se trata de activar la cámara de tu móvil, 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 diseño y ten en cuenta las siguientes pautas. !

Necesitarás los siguientes componentes ! ! !

! !

Botón Para hacer la foto. Botón para borrar la foto. Cámara del móvil.

También para esta parte, debes incluir “Canvas” en tu aplica ción, para ello debes seleccionar en “Blocks Editor” # “Built In” la opción “Canvas” Utiliza de “Built in” también la opción de “Color” para dibujar rayitas en colores.


84

EJEMPLO 4: PINTA CARAS – BLOCKS EDITOR !

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


85

VIDEOS TUTORIAL !

Para familiarizarte con App Inventor, Inventor , sigue paso a paso los siguientes videos: !

Descripción del entorno de App Inventor !

!

Configurar App Inventor (Inglés) !

!

http://www.youtube.com/watch?v=VDCVj7LbvbQ

Twitter Twitt er en App Inventor !

!

http://www.youtube.com/watch?v=1Fy5W4LtZK4

Creación de múltiples pantallas !

!

http://www.youtube.com/watch?v=HkvUTYF0vTI&feature=related

Primer vistazo y familiarizándonos con el editor de bloques !

!

http://www.youtube.com/watch?v=9nmLf5CisqQ

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

EJERCICIOS PARA PRACTICAR LO APRENDIDO !

!

!

!

Ejercicio 1) Realizar un programa que tenga dos botones, si pulsas un botón el color de fondo cambia a un color (rosa), y si pulsas el otro cambia a otro color (verde) Ejercicio 2) Se debe realizar un programa Escaneo_Codigos para códigos bidimensionales. La aplicación ofrecerá al usuario la posibilidad de escanear un QR-Code, y tras obtener el texto contenido, realizar una búsqueda en Google. Ejercicio 3) Servicio de manos libres para SMS. Se introduce el uso de los módulos SpeechRecognizer (texto a voz) y Te Texting xting (envío de SMS). La aplicación consta de 3 pasos: introducir el número de telé fono (mediante voz), introducir el contenido del sms (mednaite voz), y envío del sms. Ejercicio 4) Se hará uso de los sensores del teléfono y el uso de canvas. El usuario puede dib ujar en canvas utilizando el acelerómetro que trae el dispositivo. 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 depuración.


87

ÍNDICE ① ¿Qué es A ppInvent ppInventor? or? ② Instalación. ③ Entorno de Trabajo. ④ Tus primeros programas paso a paso. ⑤ Ejemplos guiados. ⑥ Ejercicios.


88

EJEMPLOS DE APLICACIONES EN ANDROID ! !

¿Qué se puede hacer con Android? Angry Birds ! Juego

+ vendido de la historia en soportes móviles Multiples plataformas: Maemo, iOS, Symbian y Android. 12 millones de descargas en 2010.


89

EJEMPLO DE APLICACIONES ! !

Bubble Ball Desarrollada por Robert Nay, chico de 14 años. Dos millones de descargas en 2 semanas.


90

EJEMPLOS DE GUIADO


91

Intro-AppInventor-v2.pdf

Recommend Documents