magic 8-ball para app inventor 2 · francisco garcía muñoz 1 magic 8-ball para app inventor 2...

Francisco García Muñoz 1

Magic 8-ball para App Inventor 2

Este programa construye el Magic 8-Ball, con App Inventor 2. Consiste en activar la bola para que produzca una predicción del estilo: “Decididamente hazlo”, “Yo de ti lo haría”…

NOTA: Algunas de las capturas de las imágenes y de los nombres de componentes están en inglés y otras en español, ya que no sé que idioma vas a utilizar, así aprenderemos a asociar el componente en inglés con la versión española, ya que la gran mayoría de la documentación que vamos a encontrar en la Web va a ser siempre con el programa en inglés.

Aprenderemos A navegar en el entorno de App Inventor: Diseñador, Editor de bloques, emulador y/o teléfono físico.

El uso correcto de los componentes: sensor acelerómetro, botón y sonido.

El uso correcto de los conceptos: construir lista y usar una lista así como a responder ante eventos.

Materiales Una selección de imágenes y sonidos están disponibles en App Inventor Media Library.


Parte Uno: Clic en un Botón, Producir un sonido

El Magic 8-Ball App 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 dicho botón.

DISEÑO: Diseñador de App Inventor

1. Para abrir la ventana del Diseñador de App Inventor, acceda a App Inventor validándose con su contraseña de Google. 2. Si ya ha realizado una aplicación anteriormente, es posible que automáticamente se dirija al diseñador con el último proyecto con el que trabajó. Para generar un nuevo proyecto, haga clic en "Proyectos" en la esquina superior izquierda de la pantalla y luego en "Mis proyectos", lo que le llevará a su lista de proyectos. Haga clic en "Nuevo proyecto" y el nombre de su proyecto escriba "Magic8Ball" (o Bola8) (Nota: sin espacios)

Descarga los recursos para tu aplicación.

En la columna izquierda del Diseñador, la paleta de Interfaz de usuario debe estar abierta. Si no lo está, haga clic para abrirlo. Arrastre un componente Botón al Viewer (visor) (# 1).

Ajuste de la imagen del botón para una imagen de 8-Ball: 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 "Ninguna ..." y una pequeña ventana de selección aparecerá (# 2). Haga clic en el botón "Subir Archivo" (upload file) y vaya donde guardó la imagen de 8-Ball. Seleccione el archivo, y a continuación, 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 ventana emergente pequeña (# 3).


Vaya al campo de texto en el panel Propiedades y elimine el texto de la pantalla de su componente de botón (# 4).

En la paleta (Palette) dentro de “Medios” (Media), arrastre un componente de sonido en el panel del visor (# 1). Observe que puesto que el sonido no será una parte visible de la aplicación, aparece en la parte inferior del panel del visor, como un "componente no visible".

Establecer archivo de origen del componente de sonido: Haga clic en su componente de sonido que acaba de agregar para ver sus propiedades en el panel Propiedades de la derecha. En "Fuente", haga clic en la pequeña caja en la palabra "ninguna ..." y una pequeña ventana de selección se abrirá (# 2). Haga clic en el botón "Subir Archivo" y vaya a la ubicación donde guardó el archivo de sonido. Seleccione el archivo de sonido, 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 ventana emergente pequeña (# 3).


Ya ha completado el trabajo en el Diseñador que es la primera parte de esta aplicación. Es tiempo ahora para pasar al Editor de bloques para programar el comportamiento de estos componentes.


Construir: Editor de bloques (Blocks Editor)

En la esquina superior derecha del Diseñador, haga clic en el botón de Bloques (Blocks). Ahora usted va a decir a su aplicación cómo comportarse cuando se hace clic en el botón. Esto es en realidad muy simple en App Inventor, porque el "código" para el programa sólo se compone de dos bloques! Una vez que el editor de bloques está abierto, hay varias opciones que se ejecutan a lo largo del lado izquierdo de la pantalla. Nos referimos a estos como "Paletas" con "cajones".

Desde la paleta de bloques situado bajo Screen1, haga clic en el cajón Button1(botón1 o como haya llamado al botón). Arrastre el bloque “cuando Button1.Click” al área de trabajo (# 1). Desde la paleta de bloques, haga clic en el cajón SONIDO1, arrastre el bloque “Sound1.Play” al área de trabajo e insértalo en el bloque “cuando Button1.Click” (# 2). Se encajarán como piezas de un rompecabezas magnético.

Deberías ver esto:

¡Eso es todo! Usted ha creado el Magic 8-Ball básico. Ahora es el momento de probar que está funcionando bien.

TEST: Teléfono/Emulador

¡Ya ha creado una aplicación! Para probar que funciona, o bien tienen que lanzar un emulador, o conectarse a un teléfono. Puede leer las instrucciones de


instalación, si usted no tiene un teléfono o un emulador. Emulador: haga clic en la imagen, se oirá el sonido de reproducción. Teléfono: pulse en la imagen, se escuchará el sonido de reproducción.

Nota: Si usted no oye el sonido, primero asegúrese de que tiene el volumen encendido en su dispositivo (o el ordenador si se utiliza el 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 Sonido (Sound) no funciona correctamente. Usted tendrá que utilizar el componente reproductor en lugar del componente de sonido.


Parte Dos: Clic en el botón, coger predicción + re producir sonido

Ahora que nos hemos metido en el botón para realizar una acción (reproducir un sonido), queremos extender esa función añadiendo una predicción. En primer lugar vamos a necesitar dos etiquetas: Label1 mostrará las instrucciones, y Label2 mostrará la predicción elegida. Usaremos bloques para programar una lista de donde elegir entre una lista de predicciones. Cada vez que se hace clic en el botón, la aplicación va a cambiar el texto de Label2 para mostrar la predicción elegida.

Diseño: App Inventor

Vuelve atrás al Diseñador en tu navegador y añade algunas cosas a tu app.

En la paleta Layout (Disposición), arrastre sobre el componente verticalArrangement (# 1). Al principio sólo se verá como una caja vacía, pero cuando se ponga cosas en ella, App Inventor sabrá que usted quiere alinearlos verticalmente (una encima de la otra).

Desde la paleta de User Interface (Interfaz de Usuario) arrastra un Label (Etiqueta) dentro del VerticalArragement del punto anterior (#2). En el panel Properties (Propiedades), cambia el “Text” de Label1 a “Pregunta a Magic-8”. (#3)


Desde la paleta de User Interface (Interfaz de Usuario), arrastre sobre otro componente Label (Label2 dentro del VerticalArragement de modo que se encuentre justo debajo de Label1. Cambie la propiedad "Texto" de la Label2 a "Toque el Magic 8-Ball para recibir su respuesta." Ahora arrastre la imagen de la bola con el número 8 para que también esté dentro del componente VerticalArragement en la parte superior de las dos etiquetas. Esto hará que se alineen entre sí en una línea vertical. (Nota: esto puede ser un trabajo de ratón complicado, pero conseguirá que podamos adaptar mejor el diseño)

Ahora es el momento de volver a entrar en el Editor de bloques para programar los componentes que acaba de agregar a su proyecto.


Construir: Editor de Bloques

¡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 de Label2. El botón también reproducirá el sonido que añadió en la primera parte. He aquí cómo hacerlo...

Desde la paleta de bloques, haga clic en Label2 para ver sus bloques asociados. Arrastre el bloque verde set Label2.BackgroundColor e insértelo justo encima del bloque Sound1.Play . Note que el bloque when

Button1.Click automáticamente se adapta al tamaño del bloque más grande.

Haga clic en la palabra "BackgroundColor" verá que le permite elegir otra propiedad que es la que quiere cambiar. Elegiremos Text (Texto) y tendremos set Label2.Text .

Desde la paleta Built-In, haga clic sobre el elemento Lisas (Listas). Arrastre el bloque pick Ransom ítem (toma un elemento al azar de la lista) y conéctelo al hueco de set Label2.Text block.


Desde la paleta Built-In, haga clic en Lisas otra vez, y arrastre fuera el bloque make a list y conéctelo con el hueco de la derecha del bloque pick Ransom ítem.

Desde la paleta Built-In, haga clic n la imagen de la palabra Text, y arrastre fuera el bloque " " conectándolo con el bloque make a list . Haga clic

directamente dentro del espacio que hay entre las comillas. Puede escribir el texto aquí. Escriba la primera de sus predicciones.

Construya el resto de predicciones de la misma forma. Para ir añadiendo más huecos de predicciones pulse sobre el botoncito azul que aparece junto a “make a list”.

Te quedará algo similar a esto:

O si lo estás haciendo en inglés:


¡Ya tiene un Magic 8-Ball App! Ahora su aplicación es completamente funcional y puede predecir el futuro con certeza absoluta. Pruebe que esto funciona, y luego vuelva para hacer el programa todavía más divertido.

TEST: Emulador o Teléfono

Emulador: Haga clic sobre la imagen de la bola 8, debería ver una que una de sus respuestas se muestran en el campo Label2.Text, seguido por el sonido. Teléfono: Toque sobre la imagen de la bola 8, debería ver una que una de sus respuestas se muestra en el campo Label2.Text, seguido por el sonido.


Parte Tres: Agitar el teléfono, coger predicción + reproducir sonido

A pesar de que usted ya tiene una aplicación acabada muy buena, 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 las sacudidas en lugar (o además) de responder a un clic de botón. Nota: Esta parte sólo se puede hacer con un teléfono real o tableta equipada con un acelerómetro. Si está usando un emulador, salte esta parte.

DISEÑO: App Inventor

Desde la paleta de Sensors (Sensores), arrastre un componente sensor AccelerometerSensor. Note que se aparece en el área de la ventana Visor en el apartado “Non-visible components” (Componentes no visibles). Este es el único Nuevo componente que necesita ahora.

Construir: Editor de bloques

En los bloques haga clic en AccelerometerSensor, y arrastre el bloque when AccelerometerSensor.Shaking .

Desconecte todos los bloques de Button1.Click y muévalos dentro del bloque AccelerometerSensor.Shaking . NOTA: Puedes mover bloques

completos arrastrando el bloque que contiene a otros (que es el más a la izquierda), los bloques conectados ser moverán con él. Si en lugar de arrastrar haces una copia (Control +C o botón derecho duplicate) podrás hacer que funcione tanto al hacer clic sobre la imagen como al agitar el móvil.

Borra el bloque Button1.Click (o no lo hagas si quieres que también funcione

esa opción).

Deberías tener algo así:

¡Pruébalo y agita tu móvil para obtener una respuesta a algo que quieras saber!


¡Instala la App en tu teléfono!

Tu App debería desaparecer de tu móvil cuando cierres App Inventor. Esto es así porque la aplicación está almacenada en el servidor de App Inventor y no en el móvil. Consulta el documento “Compartir y Empaquetar aplicaciones” para construir el fichero “.apk” e instalártelo en tu móvil Android.

Ejercicio 1: Haga que el Magic Ball hable

En lugar de (o como complemento) puedes hacer que tu predicción sea hablada. Para eso usa el componente text-to-speech (Texto a voz) en la paleta Media del Diseñador.

Nota: La mayoría de los dispositivos Android tienen la capacidad de conversión de texto a voz (TTS), pero si usted tiene problemas con el componente de TTS de App Inventor en su móvil, puede que tenga que averiguar cómo instalar TTS y / o habilitar el TTS en su dispositivo.

Sugerencias de posibles modificaciones:

Hacer una aplicación similar, pero con un propósito diferente. El teléfono podría ser utilizado en lugar de dados. Podría simular un lanzamiento de moneda o un número o color generado aleatorio para investigar la probabilidad.

Puede hacer que esta app sea un "servidor" para que cualquier persona que envía un texto reciba un mensaje de una predicción a cambio.

Cambio total de la lista con opciones de humor (por ejemplo, una aplicación para el profesor que podrá utilizar cuando un estudiante ponga una excusa por no haber hecho una tarea), o con fines útiles, como la selección aleatoria de un nombre de entre los alumnos de la clase.


Licencia

Magic 8-Ball de App Inventor 2, por Francisco García Muñoz basado de:

magic 8-ball para app inventor 2 · francisco garcía muñoz 1 magic 8-ball para app inventor 2...

Documents