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.
Francisco García Muñoz 2

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).
Francisco García Muñoz 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).
Francisco García Muñoz 4

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.
Francisco García Muñoz 5

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
Francisco García Muñoz 6

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.
Francisco García Muñoz 7

Parte Dos: Clic en el botón, coger predicción + reproducir

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)
Francisco García Muñoz 8

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.
Francisco García Muñoz 9

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.
Francisco García Muñoz 10

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:

Francisco García Muñoz 11

¡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.
Francisco García Muñoz 12

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!
Francisco García Muñoz 13

¡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.
Francisco García Muñoz 14

Licencia

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