Bola 8 Mágica Lección Uno: Bola 8 Mágica que predice el futuro
Este módulo introductorio le guiará guiará a través de la construcción de de un aplicación "Bola 8 Mágica" Mágica" con App Inventor. Cuando se activa, el “Bola 8 mágica” entregará una de sus predicciones clásicas, como "Es decididamente lo que debes hacer" o
"Respuesta dudosa, inténtelo de nuevo."
Objetivos de Aprendizaje Después de completar esta aplicación, usted será capaz de: ● ●
Navegar por el entorno de App Inventor: diseñador, editor de bloques, emulador y / o teléfono físico Utilizar correctamente los siguientes componentes de App Inventor: acelerómetro sensor, imagen, list-picker
Materiales ● ● ●
Una selección de las imágenes y los sonidos están disponibles en la Mediateca App Inventor . Materiales opcionales de soporte de copias originales, como las App Inventor general Folletos. Folletos . Basic App Inventor tutorial - moverse [ vídeo vídeo]]
Perfilar 1. 2. 3. 4. 5.
Configurar los ordenadores y los teléfonos o emuladores. (Sugerencia: haga esto antes) Primera parte: Haga clic en un botón, escuchará un sonido Segunda parte: Haga clic en el botón, Obtener una predicción + escuchar un sonido Tercera parte: Agitar el teléfono, obtener una predicción + escuchar un sonido Sugerencias para una exploración más profunda: Texto a voz, imagen giratoria, listas de predicción personalizados
Primera parte: Haga clic en un botón, escuchará un sonido La magia definitiva! “Bola 8 mágica” entregará una predicción de una lista que usted ha diseñado. Para empezar, primero
haremos un botón con una imagen en el mismo, y el programa para reproducir un sonido cuando se hace clic en el botón. DISEÑO: App Inventor Diseñador 1. abrir la ventana del Diseñador de App Inventor, vaya a http://appinventor.mit.edu y haga clic en "inventar". Ver las instrucciones de configuración anterior si no está seguro. 2. Si ya ha realizado una aplicación, automáticamente se le dirigirá al diseño 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 mágica" (nota: no se permiten espacios).
3.
4. Descarga una imagen y un archivo de sonido de abajo para ser utilizado en su aplicación. Haga clic derecho (controlclic) en el enlace de la imagen o el sonido, y luego elegir la opción "Descargar" o "Guardar como". Guarde los archivos de medios a una ubicación 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 básica y arrastre un componente Button a la Viewer (# 1). 6. Ajuste la imagen del botón a una imagen de “Bola 8 mágica”: 7. Haga clic en el botón 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 pequeña ventana de selección aparecerá (n º 2). Haga clic en el botón "Add" y vaya a donde guardó la imagen “Bola 8 mágica”. Seleccione el archivo y haga clic en "Aceptar" para cerrar la ventana de selección. Haga clic en "Aceptar" de nuevo en el panel de propiedades para cerrar la pequeña ventana emergente (# 3). 8. Ir al campo de texto en el panel Propiedades y elimine el texto de la pantalla de su componente de botón (# 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 aplicación, 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 pequeño cuadro de la palabra "Nada ..." y una pequeña ventana de selección aparecerá (n º 2). Haga clic en el botón "Add" y vaya a donde guardó el archivo de sonido. Seleccione el archivo de sonido, haga clic en "OK" para cerrar la ventana de selección. Haga clic en "Aceptar" de nuevo e n el panel de propiedades para cerrar la pequeña ventana emergente (# 3).
14. 15. Ya ha completado el trabajo en el diseño para la primera parte de esta aplicación. 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 Diseñador, haga clic en el botón 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 e l ordenador. (Asegúrese de buscar en la parte inferior muy superior o muy de su navegador para ver si se le está indicando que acepta.) Si ti ene problemas para cargar el Editor de bloques, se remontan a las Instrucciones de instalación para obtener ayuda. Ahora usted va a decirle a su aplicación como comportarse cuando se hace clic en el botón. Esto es realmente muy simple en App Inventor, ya que el "código" para el programa sólo 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 cajón Button1. Arrastre el Button1.Click al bloque en el área de trabajo (# 1).Desde la paleta Mi Blocks , haga clic en el Sound1 cajón, arrastre el Sound1.Play bloque en el área de trabajo y la inserta en la que Button1.Click bloque (# 2). Ellos se encajarán como piezas de un rompecabezas magnéticos.
Sus bloques deberían ser similar a esto:
Eso es todo! Usted ha escrito el pro grama de “Bola 8 mágica”. Ahora es el momento de probar que está funcionando bien. TEST: Teléfono / emulador Ahora que ha creado una aplicación! Para probar que funciona, o bien tiene que lanzar un emulador, o conectarse a un teléfono(Instrucciones de instalación) Emulador : haga clic en la imagen, se oye el sonido se reproduzca. Teléfono : pulse la imagen, se oye el sonido se
reproduzca. Nota: Si usted no escucha el sonido, primero asegúrese de que tiene el volumen esté alto en su dispositivo (o computadora si se utiliza emulador). También, asegúrese de que su dispositivo tiene una tarjeta SD. App Inventor almacena archivos multimedia en la tarjeta SD. En algunos dispositivos, el componente de reproducción no funciona correctamente. Usted tendrá que utilizar el componente reproductor en lugar del componente de sonido.
Segunda parte : La salida de Predicción Ahora que nos hemos metido en el botón para realizar una acción (reproducir un sonido), queremos extender esta actividad a la que da al usuario una predicción. En primer lugar vamos a necesitar dos etiquetas: Label1 donde se mostrará la instrucciones y Label2 mostrará la predicción 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 botón, la aplicación va a cambiar el texto de Label2 para mostrar la predicción elegido.
DISEÑO: App Inventor Volver a la ventana de diseño en su navegador y añadir algunas cosas nuevas para su aplicación. 1. Desde la paleta Disposición de pantalla, arrastre el componente disposición vertical (# 1). Al principio sólo se verá como una caja vacía, pero cuando se pone las cosas en él, App Inventor sabrá que usted quiere alinearlos verticalmente (una encima de la o tra).
2. 3. Desde la paleta básica, arrastre un componente Label (# 2) y colóquelo dentro del componente de disposición vertical. En el panel Propiedades, cambie la propiedad "Texto" de Label1 a "Hazle una pregunta a “Bola 8 mágica”. (# 3)
4. 5. Desde la paleta básica, arrastre otro componente Label (Label2) en el cuadro de disposición vertical de manera que se encuentre justo debajo de Label1. Cambie la propiedad "Texto" del Label2 a "Toque la Bola 8 Mágica para recibir su respuesta." Ahora arrastra la imagen 8-Ball para que también se encuentra dentro del componente de disposición vertical en la parte superior de las dos etiquetas. Esto hará que se alineen entre sí en una línea 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 botón para elegir un elemento de la lista y mostrarlo dentro Label2. El botón también sigue reproduciendo el sonido que usted haya programado en la primera parte. He aquí cómo 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 automática más grande para acomodar el nuevo bloque.
2. 3. Desde la paleta Built-In, haga clic en el cajón de las listas. Arrastre el elemento aleatorio de selección y conectarlo a la toma abierta del Label2.Text.
4. 5. Desde la paleta Built-In, haga clic en Listas de nuevo, a continuación, arrastre el elemento hacer una lista y conectalo a la toma de "lista" en la parte derecha del elemento aleatorio de selección. 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 continuación, puede escribir el texto nuevo allí. Piensa en las palabras que usted quiere en su lista de predicciones para el Bola 8 Mágica. Escriba la primera predicción en este nuevo bloque de texto. 7. Observe que cuando se conecta un nuevo texto, al elemento haga una lista crea automáticamente un nuevo socket. Repita el paso anterior para cada una de las opciones de predicción que desee programar en el App Bola 8
Magica. Conecte cada bloque de texto en el elemento aleatorio de selección 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 aplicación es completamente funcional y predecir el futuro con certeza absoluta. TEST: Emulador o teléfono Emulador : Haga clic en la foto de la 8-Ball, debería 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, debería ver uno de sus respuestas se muestran en el campo Label2.Text, seguidos por el sonido.
Tercera parte : agitar el teléfono, obtener una predicción A pesar de que ya tiene una aplicación mágica de predicción, hay una manera para que sea aún más divertida. Usted puede utilizar el componente acelerómetro para que el teléfono responda a temblar en lugar de responder a un clic de botón. Esto hará que la aplicación sea mucho más parecida a una verdadera Bola 8 Mágica. Nota: Esta parte sólo se puede hacer con un teléfono real o tablet equipado con un acelerómetro. Si usted está usando un emulador, salte esta parte e ir al Desafío 1 vez.
DISEÑO: App Inventor De la paleta de Sensores, arrastre sobre una AccelerometerSensor componente sensor. Note que cae automáticamente 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 continuación, 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 más a la izquierda y arrastrándolo. Los bloques conectados vendrán con él.
3. Elimine el Button1.Click bloque para mantener su área de trabajo ordenada. Los bloques deben ser algo como esto:
TEST: Teléfono / emulador Teléfono : cuando se agita el teléfono debe mostrar una respuesta y reproducir un sonido. Emulador : por desgracia, no
se puede simular agitando el teléfono cuando se utiliza el emulador. Empaquete la aplicación para tu teléfono! Su aplicación podría desaparecer si tuviera que desconectar el teléfono desde el Editor de bloques. Esto se debe a que la aplicación está siendo almacenado en el servidor App Inventor y no en el teléfono. Siga estas instrucciones para empaquetar su aplicación para el teléfono o para hacer un archivo ". apk" que se puede instalar en cualquier teléfono Android. O, si usted quiere que su aplicación aún más frío, pruebe los retos siguientes.
Reto 1: Hacer que el Magic 8-Ball Hable En lugar de (o además de) hacer la predicción 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 diseñador. Nota: La mayoría 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.
