Bola 8 Mgica

Leccin Uno: Bola 8 Mgica que predice el futuro

Este mdulo introductorio le guiar a travs de la construccin de un aplicacin "Bola 8 Mgica" con App Inventor. Cuando
se activa, el Bola 8 mgica entregar una de sus predicciones clsicas, como "Es decididamente lo que debes hacer" o
"Respuesta dudosa, intntelo de nuevo."

Objetivos de Aprendizaje
Despus de completar esta aplicacin, usted ser capaz de:

Navegar por el entorno de App Inventor: diseador, editor de bloques, emulador y / o telfono fsico
Utilizar correctamente los siguientes componentes de App Inventor: acelermetro sensor, imagen, list-picker

Materiales
Una seleccin de las imgenes y los sonidos estn disponibles en la Mediateca App Inventor .
Materiales opcionales de soporte de copias originales, como las App Inventor general Folletos.
Basic App Inventor tutorial - moverse [ vdeo]

Perfilar
1. Configurar los ordenadores y los telfonos o emuladores. (Sugerencia: haga esto antes)
2. Primera parte: Haga clic en un botn, escuchar un sonido
3. Segunda parte: Haga clic en el botn, Obtener una prediccin + escuchar un sonido
4. Tercera parte: Agitar el telfono, obtener una prediccin + escuchar un sonido
5. Sugerencias para una exploracin ms profunda: Texto a voz, imagen giratoria, listas de prediccin personalizados

Primera parte: Haga clic en un botn, escuchar un sonido

La magia definitiva! Bola 8 mgica entregar una prediccin de una lista que usted ha diseado. Para empezar, primero
haremos un botn con una imagen en el mismo, y el programa para reproducir un sonido cuando se hace clic en el botn.

DISEO: App Inventor Diseador

1. abrir la ventana del Diseador de App Inventor, vaya a http://appinventor.mit.edu y haga clic en "inventar". Ver las
instrucciones de configuracin anterior si no est seguro.
2. Si ya ha realizado una aplicacin, automticamente se le dirigir al diseo con el ltimo proyecto en el que trabaj.
Haga clic en "Mis proyectos" en la esquina superior izquierda de la pantalla, que le llevar a su lista de proyectos.
Haga clic en "Nuevo" y el nombre su proyecto algo as como "Bola 8 mgica" (nota: no se permiten espacios).

3.
4. Descarga una imagen y un archivo de sonido de abajo para ser utilizado en su aplicacin. Haga clic derecho (control-
clic) en el enlace de la imagen o el sonido, y luego elegir la opcin "Descargar" o "Guardar como". Guarde los
archivos de medios a una ubicacin que pueda recordar.
ChaChing Sound
Tintinean Sound Cucharita
Tada Sound
Magic 8 Ball Imagen
Blank 8 Ball Imagen
5. En la columna izquierda del Designer, abra la paleta bsica y arrastre un componente Button a la Viewer (# 1).
6. Ajuste la imagen del botn a una imagen de Bola 8 mgica:
7. Haga clic en el botn que acaba de agregar para ver sus propiedades en el panel Propiedades de la derecha. En
"Imagen", haga clic en la palabra "Nada ..." y una pequea ventana de seleccin aparecer (n 2). Haga clic en el
botn "Add" y vaya a donde guard la imagen Bola 8 mgica. Seleccione el archivo y haga clic en "Aceptar" para
cerrar la ventana de seleccin. Haga clic en "Aceptar" de nuevo en el panel de propiedades para cerrar la pequea
ventana emergente (# 3).
8. Ir al campo de texto en el panel Propiedades y elimine el texto de la pantalla de su componente de botn (# 4).

9.
10.
11. Desde la paleta Media, arrastre sobre un componente de sonido en el panel Viewer (# 1). Observe que, dado que
el sonido no ser una parte visible de la aplicacin, que aparece en la parte inferior del panel del visor, como un
"componente no visible".
12. Establecer archivo de origen del componente de sonido:
13. Haga clic en el componente de sonido que acaba de agregar para ver sus propiedades en el panel Propiedades de la
derecha. Bajo click "Fuente" en el pequeo cuadro de la palabra "Nada ..." y una pequea ventana de seleccin
aparecer (n 2). Haga clic en el botn "Add" y vaya a donde guard el archivo de sonido. Seleccione el archivo de
sonido, haga clic en "OK" para cerrar la ventana de seleccin. Haga clic en "Aceptar" de nuevo en el panel de
propiedades para cerrar la pequea ventana emergente (# 3).

14.
15. Ya ha completado el trabajo en el diseo para la primera parte de esta aplicacin. Ya es hora de ir a la Editor de
 bloques para programar el comportamiento de estos componentes.
CONSTRUIR: Bloques Editor

En la esquina superior derecha del Diseador, haga clic en el botn Editor de bloques. Espere un momento mientras se
carga el editor de bloques. Esto toma un poco de tiempo, y con frecuencia requiere que haga clic en "aceptar", "ok", o
"mantener", como las descargas de programas Java en el ordenador. (Asegrese de buscar en la parte inferior muy
superior o muy de su navegador para ver si se le est indicando que acepta.) Si tiene problemas para cargar el Editor de
bloques, se remontan a las Instrucciones de instalacin para obtener ayuda.

Ahora usted va a decirle a su aplicacin como comportarse cuando se hace clic en el botn. Esto es realmente muy simple
en App Inventor, ya que el "cdigo" para el programa slo se compone de dos bloques!

Una vez que el editor de bloques es abierta, hay varias opciones de funcionamiento a lo largo del lado izquierdo de la
pantalla. Nos referimos a estos como "Paletas" con "cajones".

Desde la paleta Mi Blocks, haga clic en el cajn Button1. Arrastre el Button1.Click al bloque en el rea de trabajo (#
1).Desde la paleta Mi Blocks, haga clic en el Sound1 cajn, arrastre el Sound1.Play bloque en el rea de trabajo y la
inserta en la que Button1.Click bloque (# 2). Ellos se encajarn como piezas de un rompecabezas magnticos.

Sus bloques deberan ser similar a esto:

Eso es todo! Usted ha escrito el programa de Bola 8 mgica. Ahora es el momento de probar que est funcionando bien.

TEST: Telfono / emulador

Ahora que ha creado una aplicacin! Para probar que funciona, o bien tiene que lanzar un emulador, o conectarse a un
telfono(Instrucciones de instalacin)

Emulador : haga clic en la imagen, se oye el sonido se reproduzca. Telfono : pulse la imagen, se oye el sonido se
reproduzca.

Nota: Si usted no escucha el sonido, primero asegrese de que tiene el volumen est alto en su dispositivo (o computadora
si se utiliza emulador). Tambin, asegrese de que su dispositivo tiene una tarjeta SD. App Inventor almacena archivos
multimedia en la tarjeta SD. En algunos dispositivos, el componente de reproduccin no funciona correctamente. Usted
tendr que utilizar el componente reproductor en lugar del componente de sonido.
Segunda parte : La salida de Prediccin
Ahora que nos hemos metido en el botn para realizar una accin (reproducir un sonido), queremos extender esta actividad
a la que da al usuario una prediccin. En primer lugar vamos a necesitar dos etiquetas: Label1 donde se mostrar la
instrucciones y Label2 mostrar la prediccin elegido. Vamos a utilizar los bloques para programar una "lista de
selector" para elegir entre una lista de predicciones. Cada vez que se pulsa el botn, la aplicacin va a cambiar el texto de
Label2 para mostrar la prediccin elegido.

DISEO: App Inventor

Volver a la ventana de diseo en su navegador y aadir algunas cosas nuevas para su aplicacin.

1. Desde la paleta Disposicin de pantalla, arrastre el componente disposicin vertical (# 1). Al principio slo se
ver como una caja vaca, pero cuando se pone las cosas en l, App Inventor sabr que usted quiere alinearlos
verticalmente (una encima de la otra).

2.
3. Desde la paleta bsica, arrastre un componente Label (# 2) y colquelo dentro del componente de disposicin
vertical. En el panel Propiedades, cambie la propiedad "Texto" de Label1 a "Hazle una pregunta a Bola 8 mgica.
(# 3)
 4.
5. Desde la paleta bsica, arrastre otro componente Label (Label2) en el cuadro de disposicin vertical de manera
que se encuentre justo debajo de Label1. Cambie la propiedad "Texto" del Label2 a "Toque la Bola 8 Mgica para
recibir su respuesta." Ahora arrastra la imagen 8-Ball para que tambin se encuentra dentro del componente de
disposicin vertical en la parte superior de las dos etiquetas. Esto har que se alineen entre s en una lnea vertical.
Ahora es el momento de volver a entrar en el Editor de bloques para programar los componentes que acaba de agregar a
su proyecto. (Recuerde, el Editor de bloques se ejecuta en una ventana exterior de su navegador web, representado por el
icono de Java que se parece a una taza de caf.)

CONSTRUIR: Bloques Editor

Ahora viene la parte divertida! Usted va a hacer una lista de predicciones y programar el botn para elegir un elemento de
la lista y mostrarlo dentro Label2. El botn tambin sigue reproduciendo el sonido que usted haya programado en la
primera parte. He aqu cmo hacerlo ...

1. Desde la paleta Mi Blocks, haga clic en Label2 para ver todos sus bloques asociados. Arrastre el Label2.Text e
insertarlo justo por encima del Sound1.Play. Observe que el en Button1.Click cambia de forma automtica ms
grande para acomodar el nuevo bloque.
2.
3. Desde la paleta Built-In, haga clic en el cajn de las listas. Arrastre el elemento aleatorio de seleccin y
conectarlo a la toma abierta del Label2.Text.

4.
5. Desde la paleta Built-In, haga clic en Listas de nuevo, a continuacin, arrastre el elemento hacer una lista y
conectalo a la toma de "lista" en la parte derecha del elemento aleatorio de seleccin.
6. Desde la paleta Built-In, haga clic en texto, arrastre un texto y conectarlo a la toma de punto del elemento
lista. Haga clic directamente en la palabra "texto" de modo que queda resaltado. A continuacin, puede escribir el
texto nuevo all. Piensa en las palabras que usted quiere en su lista de predicciones para el Bola 8 Mgica. Escriba la
primera prediccin en este nuevo bloque de texto.
7. Observe que cuando se conecta un nuevo texto, al elemento haga una lista crea automticamente un nuevo
socket. Repita el paso anterior para cada una de las opciones de prediccin que desee programar en el App Bola 8
 Magica. Conecte cada bloque de texto en el elemento aleatorio de seleccin de bloques. (Ideas para las
respuestas:http://en.wikipedia.org/wiki/Magic_8-Ball)
Los bloques deben ser algo como esto:

(Nota:. Es normal que haya un espacio de "item" en blanco al final de la lista de bloqueo marca)

Usted tiene una magia! 8-Ball! Ahora su aplicacin es completamente funcional y predecir el futuro con certeza absoluta.

TEST: Emulador o telfono

Emulador : Haga clic en la foto de la 8-Ball, debera ver una de sus respuestas se muestran en el campo Label2.Text,
seguido por el sonido. Phone : Pulse en la foto de la 8-Ball, debera ver uno de sus respuestas se muestran en el campo
Label2.Text, seguidos por el sonido.

Tercera parte : agitar el telfono, obtener una prediccin

A pesar de que ya tiene una aplicacin mgica de prediccin, hay una manera para que sea an ms divertida. Usted puede
utilizar el componente acelermetro para que el telfono responda a temblar en lugar de responder a un clic de botn.
Esto har que la aplicacin sea mucho ms parecida a una verdadera Bola 8 Mgica. Nota: Esta parte slo se puede hacer
con un telfono real o tablet equipado con un acelermetro. Si usted est usando un emulador, salte esta parte e ir al
Desafo 1 vez.

DISEO: App Inventor

De la paleta de Sensores, arrastre sobre una AccelerometerSensor componente sensor. Note que cae automticamente a
los "componentes no visibles" rea de la ventana del Visor. Este es el nico componente nuevo que necesita, por lo que ir
en largo con el Editor de bloques para cambiar su programa.

CONSTRUIR: Bloques Editor

1. De los bloques de cajones mi, haz click AccelerometerSensor, a continuacin, arrastre el bloque para cuando
AccelerometerSensor.Shaking .
2. Desconecte todos los componentes del interior de la Button1.Click bloques y moverlos dentro
delAccelerometerSensor.Shaking bloque. NOTA: puede mover secciones completas de bloques conectados haciendo
clic en el bloque superior o ms a la izquierda y arrastrndolo. Los bloques conectados vendrn con l.
 3. Elimine el Button1.Click bloque para mantener su rea de trabajo ordenada.
Los bloques deben ser algo como esto:

TEST: Telfono / emulador

Telfono : cuando se agita el telfono debe mostrar una respuesta y reproducir un sonido. Emulador : por desgracia, no
se puede simular agitando el telfono cuando se utiliza el emulador.

Empaquete la aplicacin para tu telfono!

Su aplicacin podra desaparecer si tuviera que desconectar el telfono desde el Editor de bloques. Esto se debe a que la
aplicacin est siendo almacenado en el servidor App Inventor y no en el telfono. Siga estas instrucciones para
empaquetar su aplicacin para el telfono o para hacer un archivo ". apk" que se puede instalar en cualquier telfono
Android. O, si usted quiere que su aplicacin an ms fro, pruebe los retos siguientes.

Reto 1: Hacer que el Magic 8-Ball Hable

En lugar de (o adems de) hacer la prediccin aparece como texto, puede hacer que el 8-Ball hablar en voz alta?
Sugerencia: el componente de texto a voz est bajo Stuff Otros paleta en el diseador. Nota: La mayora de dispositivos
Android tienen la capacidad de texto a voz (TTS), pero si usted tiene problemas para obtener el componente de TTS en App
Inventor para trabajar , puede que tenga que encontrar la manera de instalar TTS y / o habilitar TTS en el dispositivo.