tema 2.- i have a dream(2)

8/18/2019 Tema 2.- I Have a Dream(2)

1/13

I H a v e

a

D r e a m

1Juan Francisco Fuster

Tema 2

I Have a Dream

Introducción

Esta aplicación está pensada para introducir al alumno en el manejo de distintos

tipos de archivos multimedia, en concreto usaremos tres imágenes distintas de

Martin Luther King y Malcom X y dos archivos de sonido distintos en formato MP3,

uno de Martin Luther King con el famoso discurso que pronunció ante más de

250.000 personas a los pies del monumento a Lincoln en 1963 y otro con un discurso

de Malcolm X. La idea fundamental es que al tocar la imagen de cada uno de ellos,

comience la reproducción de su discurso pero evitando que uno y otro discurso sesolapen en el tiempo.

La app I Have a Dream

Qué vamos a aprender

• Usaremos el componente Player para reproducir sonidos de larga duración.

• Aprenderemos a cambiar el nombre automático que asigna App Inventor a los

componentes de nuestra app por otros que sean más significativos.

• Ajustaremos la disposición de los componentes en la pantalla del dispositivo

usando el componente HorizontalArrangement .

•

Usaremos el componente Label.


2/13

I H a v e

a

D r e a m


• Usaremos el bloque de control if-then-else para tomar decisiones durante la

ejecución de la app.

Primeros pasos

Conéctate a la web de App Inventor con tu navegador en

http://ai2.appinventor.mit.edu. Abre un proyecto nuevo y asígnale el nombre

IhaveAdream. Haz clic en Connect y configura tu dispositivo (o emulador) para poder

hacer pruebas en vivo (ya hablamos de cómo hacerlo en el tema cero: Requisitos

Previos).

Una vez conectado, desde la ventana de diseño, en el panel de propiedades, cambia

el título de la Screen1 por I Have a Dream. En pocos segundos podrás ver el cambio en

tu dispositivo o emulador.

Antes de continuar, debes descargar a tu ordenador los archivos multimedia que

vamos a usar en esta app. Todos ellos están disponibles en la carpeta de Recursos del

tema. Recuerda que son un total de 5 archivos: tres imágenes y dos archivos de

sonido en formato MP3.

Ahora, en la web de App Inventor, utiliza el botón Upload File para subir los archivos a

la web. Recuerda que deberás subirlos uno a uno y que al finalizar el proceso, podrás

comprobar que todos se encuentran disponibles en la sección llamada Media.

Ya hemos subido a la web todos los archivos necesarios

Diseño de componentes

En primer lugar, selecciona el componente Button desde la categoría de User Interface

y arrástralo hasta la pantalla de la app. Necesitamos cambiar un par de propiedades

del Button1:

• La propiedad Text vamos a dejarla en blanco, así que borra el texto que aparece

allí de modo automático para cada botón.

• A la propiedad Image le vamos a asignar una de las imágenes que hemos subido,

concretamente la llamada mlk.jpg y que se corresponde con una fotografía de

Martin Luther King.


3/13

I H a v e

a

D r e a m


Antes de continuar, selecciona el componente Screen1 de nuestra app y cambia su

propiedad AlignHorizontal al valor center , de este modo todos los componentes de la

interfaz aparecerán centrados horizontalmente.

Observa las propiedades que hemos modificado para el botón en la imagen

siguiente:

Estableceremos las propiedades adecuadas para el botón

También tenemos que añadir un componente para reproducir el discurso de Luther

King, pero en lugar de utilizar el componente Sound como ya hicimos en el tema

anterior, en este caso tendremos que usar el componente Player puesto que permite

reproducir sonidos mucho más largos que el anterior. Así que, en la lista de

categorías, haz clic en Media, ahora haz clic sobre el componente Player y arrástralo

hasta la pantalla. En este caso, tal y como ya sucedía con el componente Sound , el

nuevo componente se situará en la parte inferior de la pantalla. Recuerda que este es

el lugar donde aparecerán todos los componentes no visibles que usemos en la app.


4/13

I H a v e

a

D r e a m


Creamos un componente Player para reproducir el discurso

Selecciona el componente Player1 y asigna a su propiedad llamada Source el archivo

King.mp3 que es el que contiene el discurso de Luther King.

Prueba tu app

Antes de continuar, recuerda los pasos que debes seguir para poder probar la app en la que

estamos trabajando en tu propio móvil o tableta Android.

1. En tu dispositivo, ejecuta la app MIT Ai2 Companion que ya deberías tener

descargada e instalada. Si aún no lo has hecho, revisa nuevamente el tema 0 para

obtener todos los detalles de cómo hacerlo.

2. En la web de App Inventor, haz clic en Connect y después en AI Companion.

3. Escanea el código que verás en pantalla desde tu dispositivo, o bien, introduce

manualmente el código que verás al lado del código QR bajo el epígrafe Your

code is en la casilla SixDigitCode.

Si todo ha ido como es debido, al cabo de unos segundos podrás ver la app en tu

dispositivo. Sin embargo, ten presente que aunque toques el botón con la imagen deLuther King todavía no escucharás nada… Aún tenemos que definir el código

necesario para que esto suceda.

Nota

Como ya explicamos en el tema 0, este procedimiento sólo es válido si tu ordenador y tu

dispositivo Android están conectados a la misma red Wi-Fi. Si este no es el caso, por favor,

revisa nuevamente el tema 0 para conocer otras formas de poder probar la app en tu

dispositivo.


5/13

I H a v e

a

D r e a m


Reproducir el discurso de Martin Luther King

Para que el discurso de Luther King comience a reproducirse cuando el usuario toca

la fotografía tendremos que definir algunos bloques:

Creamos el bloque que gestionará lo que debe hacer la app cuando se toca el botón

1. En primer lugar, cambia a la ventana de edición de bloques haciendo clic sobre el

botón Blocks.

2. Selecciona el Button1 de la lista de bloques del panel izquierdo.

3. Busca ahora el evento when Button1.Click , selecciónalo y arrástralo a un lugar en

blanco del área de trabajo.

El método call Player1.Start hace que comience la reproducción del discurso

4. Selecciona el bloque Player1, busca el método call Player1.Start en la lista, haz clic

sobre él y arrástralo hasta el área de trabajo hasta hacerlo encajar dentro del

bloque anterior (when Button1.Click ).


6/13

I H a v e

a

D r e a m


Prueba tu app

¿Tienes tu dispositivo conectado todavía? Ha llegado el momento de comprobar si tu app

reproduce el discurso. Toca sobre la imagen de Luther King y compruébalo.

Añadir la imagen de Malcolm X

Vamos a modificar la app para que también pueda reproducir el discurso de Malcom

X y para conseguirlo, tendremos que modificar la interfaz de nuestra app desde la

vista de diseño. También tendremos que introducir nuevos bloques de código desde

la vista de edición de bloques, pero además, tendremos que tener mucho cuidado

para que el discurso de uno y otro líder no se solapen en el tiempo.

En primer lugar, para poder colocar el botón nuevo para Malcolm X justo a la derecha

del anterior tendremos que organizar el espacio horizontal usando un componenteespecial que se encuentra en la categoría Layout :

1. Vuelve a la vista de diseño haciendo clic en el botón Designer .

2. Haz clic sobre la categoría Layout.

3. Selecciona el componente HorizontalArrangement y arrástralo hasta la pantalla.

4. Haz clic sobre el Button1 (la imagen de Luther King) y arrástrala hasta dejarla

dentro del HorizontalArrangement .

Ahora ya podemos añadir un botón nuevo. Desde la categoría de User Interface haz

clic sobre Button y arrástralo dentro del HorizontalArrangement justo a la derecha del

botón de Luther King.

Añadimos un segundo botón para Malcolm X

Después, siguiendo el mismo método que ya habíamos aplicado al primer botón,

selecciona Button2, elimina el texto que aparecerá en su propiedad Text y asigna a su

propiedad Image el archivo Malcolm.jpg.


7/13

I H a v e

a

D r e a m


Para mejorar un poco la interfaz de nuestra app, introduciremos una imagen más

que en esta ocasión situaremos por encima del HorizontalArrangement y, por tanto,

aparecerá por encima de los botones existentes.

Añadimos una imagen a la app

Esta nueva imagen no se corresponderá con ningún botón, así pues, en la categoría

User Interface haremos clic sobre el componente Image y lo arrastraremos hasta la

pantalla. Además, tendremos que cambiar su propiedad Picture y asignarle el archivo

llamado MLK_malcolmX.jpg.


8/13

I H a v e

a

D r e a m


Añadir el discurso de Malcolm X

Siguiendo en la vista de diseño:

Añadimos un segundo Player para el discurso de Malcolm X

1. Abre la categoría Media de la Paleta. Haz clic sobre un nuevo componente de tipo

Player y arrástralo hasta la pantalla. Igual que sucedió antes, tendremos un nuevo

componente llamado Player2 en el área reservada a los componentes no visibles.

2. Cambia la propiedad Source del Player 2 al archivo malcolmx.mp3 .

3.

Para terminar, usando el botón Rename cambia el nombre de los componentespara que tengan nombres más apropiados:

a. Selecciona el componente Player1 y renómbralo a MLKPlayer .

b. Selecciona el componente Button1 y renómbralo a MLKButton.

c. Selecciona el componente Player2 y renómbralo a MalcolmPlayer .

d. Selecciona el componente Button2 y renómbralo a MalcolmButton.

Para terminar con el diseño de la interfaz, selecciona el componente Screen1, cambia

su propiedad BackgroundColor (color de fondo) a negro. Cambia también lapropiedad Title (título) al texto I Have a Dream, para que dicha frase aparezca como

título de la app.

Añade un componente Label por encima de la primera imagen. Cambia su propiedad

Text a la frase “Martin Luther King y Malcolm X”. Cambia también su propiedad

TextColor a blanco (White). Aumenta el tamaño del texto a 16 puntos usando la

propiedad FontSize y por último activa la negrita desde la casilla FontBold .

Añade una etiqueta más por debajo de la primera imagen que pueda ayudar al

usuario a reconocer las funciones de la app. Cambia su propiedad Text a “Pulsa sobre

la foto para escuchar el discurso”, cambia también su propiedad TextColor a blanco.


9/13

I H a v e

a

D r e a m


Ajustamos algunas propiedades de Screen1

Pausar / reproducir el discurso de M. Luther King

Para continuar, debemos volver al editor de bloques haciendo clic en el botón Blocks.

Comprobarás que los bloques que ya teníamos han cambiado de nombre debido a

las modificación es que antes hemos hecho en la vista de diseño. Así, el bloque que

antes se llamaba when Button1.Clic ahora se llamará when MLKButton.Click, y lo

mismo sucederá con los demás.

Primero, empezaremos por el botón de Luther King. Nuestro objetivo es que la

primera vez que se toca el botón comience la reproducción del discurso, la siguiente

vez que se pulse el botón la reproducción se pondrá en pausa, y la siguiente vez,

continuará desde el punto en el que se había detenido, y así sucesivamente. Para

poder programar este comportamiento necesitaremos usar un bloque de tipo if-else

puesto que nos permitirá comprobar si la reproducción ya está en marcha o aún no.

Este bloque permite la definición de ramas u opciones. En nuestro caso solamente

tendremos dos opciones distintas: el discurso ya ha comenzado a reproducirse o aún

no.

En resumen, desde la ventana de edición de bloques, haz clic sobre la categoría

Control, selecciona el bloque if-then y arrástralo hasta un espacio en blanco del área

de trabajo. Una vez allí, haz clic sobre un pequeño botón azul que hay en su esquina

izquierda, haz clic en la rama (u opción) else y sitúala dentro del bloque if . Al final

deberías poder ver lo mismo que aparece en la imagen siguiente:


10/13

I H a v e

a

D r e a m


Creamos el bloque if-then-else

Tendremos que modificar el bloque when MLKButton.Click para que quede como el

que puedes ver a continuación:

Reproducción o pausa del discurso

Vamos por partes:

1. Haz clic en el bloque call MLKPlayer.Start y sácalo fuera del bloque when.

2. Haz clic en el bloque if-then-else y sitúalo dentro del bloque when.

3. Vuelve a hacer clic sobre el bloque call MLKPlayer.Start y encájalo dentro de la

parte else del bloque if-then-else .

4. Haz clic en componente MLKPlayer , busca en la lista el método Pause, haz clic

sobre él y arrástralo hasta encajarlo en la parte del then.

5. Haz clic otra vez en el componente MLKPlayer y busca una propiedad llamada

IsPlaying, selecciónala y sitúala en la ranura correspondiente al if . Esta propiedad

devolverá el valor true (verdadero) si el sonido se está reproduciendo, en otro

caso, devolverá el valor false (falso).


11/13

I H a v e

a

D r e a m


En resumen, si se está reproduciendo el sonido entonces (opción then) la

reproducción se pausará. En otro caso (opción else) la reproducción comenzará o se

reanudará.

Prueba tu app

Es el momento más adecuado para comprobar si los cambios introducidos en la app

funcionan como es debido en tu dispositivo. ¡Haz la prueba!

Pausar / reproducir el sonido de Malcolm X

A estas alturas seguro que has advertido que tendríamos que hacer exactamente lo

mismo en el caso del botón del MalcolmX y del sonido con su discurso, pero, en lugar

de hacerlo todo de nuevo otra vez te vamos a proponer otra forma de hacerlo: copiary pegar bloques completos de código.

En la ventana de edición de bloques, haz clic con el botón derecho sobre el bloque

when MLKButton.Click y después selecciona la opción Duplicate. Después, selecciona

la copia del bloque original y desplázala a otro lugar del área de trabajo para mayor

claridad.

Duplicar un bloque completo de código

Ahora sólo tendremos que sustituir el nombre de los distintos componentes, y

podremos hacerlo fácilmente usando la pequeña flecha que aparece a la derecha de

cada uno de los nombres y seleccionando el valor adecuado en cada caso. Al final,

debería quedarte así:


12/13

I H a v e

a

D r e a m


Ajustes en el bloque duplicado para la reproducción / pausa del discurso de Malcolm X

Prueba tu app

Si realizas una prueba más en tu dispositivo, comprobarás que puedes pausar y reanudar

uno y otro discurso sin dificultad. Pero, ¿has comprobado qué sucede si olvidas pausar un

discurso antes de reanudar el otro? ¿Se produce solapamiento entre ellos?

Mejorar la app

Si has hecho la comprobación que te proponíamos justo antes de este apartado

seguro que ya sabes que, en el supuesto mencionado anteriormente, los sonidos de

uno y otro discurso se solapan.

Para mejorar la app te proponemos que sea la propia app, de forma automática

quién, cuando el usuario inicia la reproducción de un discurso pause de inmediato la

reproducción del otro y justo después inicie la reproducción del discursoseleccionado. Así, haremos que el funcionamiento de la app sea mucho más sencillo

e intuitivo para cualquier usuario.

Aquí tienes una gran pista para conseguirlo, ¡inténtalo!

Reproducción / pausa del discurso automática

Resumen

Algunos de los puntos tratados en este tema son:


13/13

I H a v e

a

D r e a m


• El componente Player permite reproducir archivos multimedia cuya duración sea

mayor de unos pocos segundos (para ese caso tenemos el componente Sound ).

• El aconsejable usar nombres significativos para los distintos componentes de

nuestra app. Aunque se pueden usar los nombres automáticos que asigna App

Inventor, lo cierto es que en la ventana de edición de bloques el trabajo se hace

más sencillo si cada componente tiene un nombre adecuado.

• Una estructura básica en programación es el bloque if-then. En su versión más

sencilla, si se cumple una condición (if ) se ejecutarán los bloques incluidos en el

grupo entonces (then). En su versión completa (if -then-else) existen dos opciones,

si la condición es cierta se realizarán los bloques del grupo entonces (then) y de lo

contrario se ejecutarán los bloques del grupo si no (else).

tema 2.- i have a dream(2)

Documents