1. Programación Móvil para Redes
Nro. DD-106
Página 1 de 15
CODIGO DEL CURSO: II3401
Alumno(s): Nota
Grupo: Ciclo: III
Criterio de Evaluación
Excelente
(4pts)
Bueno (3pts) Regular (2pts)
Requiere
mejora (1pts)
No acept.
(0pts)
Cumple con todo
lo requerido por
el criterio
Cumple con la
mayoría de lo
requerido por el
criterio
Cumple con
algo de lo
requerido por el
criterio
Cumple con muy
poco de lo
requerido por el
criterio
No cumple
con nada de
lo requerido
por el criterio
Reconoce el uso de
componente reproductor y
TaifunFile
Reconoce el uso de
propiedades y eventos
Realiza los ejercicios
propuestos
Realiza observaciones y
conclusiones que aporten un
opinión crítica y técnica
Muestra orden y respeto en el
laboratorio y redacta el informe
ordenadamente, sin copias de
otros autores
Programación Móvil para Redes
LABORATORIO N° 09
Uso de reproductor con App Inventor
2. Programación Móvil para Redes
Nro. DD-106
Página 2 de 15
I.- OBJETIVOS:
• Uso de eventos y propiedades del componente reproductor y TaifunFile
• Uso de extensiones de manejo de archivos
II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.
III.- FUNDAMENTO TEÓRICO:
• Revisar el texto guía que está en el campus Virtual.
• Revisar información proporcionada en Canvas
IV.- NORMAS EMPLEADAS:
• No aplica
V.- RECURSOS:
• En este laboratorio cada alumno trabajará con un equipo con sistema operativo
Windows.
• Para el uso de la plataforma de desarrollo App Inventor debe poseer conexión a
internet
VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:
• El desarrollo del laboratorio es individual.
VII.- PROCEDIMIENTO:
Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las
herramientas de desarrollo en un equipo externo.
CONSIDERACIONES
1. Se usará el software de desarrollo App Inventor 2
3. Programación Móvil para Redes
Nro. DD-106
Página 3 de 15
1. DISPOSICIÓN DE ELEMENTOS
1.1En este proyecto desarrollaremos 3 Screen. En el primer Screen mostraremos una lista de
opciones a seleccionar, en el segundo Screen se mostrará una ventana donde se podrá agregar
y reproducir emisoras online, y en el tercer Screen se mostrará una ventana donde se listará los
archivos multimedia de su dispositivo para poder reproducirlos.
2. DISEÑO DE INTERFACES Y LOGICA DE PROGRAMACION
2.1Cree un proyecto en AppInventor denominado: usoReproductor
2.2Se utilizarán los componentes del grupo “Medios”,
2.3Diseñe la siguiente interfaz mostrada siguiendo la vista de componentes mostrada
2.4Solo se muestra la configuración de los elementos a utilizar, configure los demás
componentes a su criterio para que quede como muestra la imagen de arriba
Objeto Propiedad
Screen1 Dejar todo por defecto
Etiqueta 1 Configure según su criterio
Botón 1 Nombre Variable: btnEmisoras
Texto: Radio
Botón 2 Nombre Variable: btnReproductor
Texto: Reproductor
4. Programación Móvil para Redes
Nro. DD-106
Página 4 de 15
2.5Diseñe la programación para el botón “RADIO” permita mostrar el Screen2
2.6Agregue una nueva ventana llamada: Screen2
2.7Diseñe la siguiente interfaz mostrada siguiendo la vista de componentes mostrada
2.8Solo se muestra la configuración de los elementos a utilizar, configure los demás
componentes a su criterio para que quede como muestra la imagen de arriba
Objeto Propiedad
Screen2 Dejar todo por defecto
Etiqueta1 Texto: Radios Online
Boton 1 Nombre Variable: btnSalir
Texto: Salir
Boton 2 Nombre Variable: btnReproductor
Texto: vacio
Imagen: pause.png
Deslizador1 ValorMaximo: 100
ValorMinimo: 0
PosiciónDelAngular: 50
Etiqueta2 Nombre Variable: lblEmisora
Texto: (EMISORA)
Boton 3 Nombre Variable: btnAgregar
Texto: Agregar Emisora
5. Programación Móvil para Redes
Nro. DD-106
Página 5 de 15
Boton 4 Nombre Variable: btnLimpiar
Texto: Limpiar Lista
VisorDeLIsta1 Nombre Variable: lstEmisoras
Notificador1 Dejar todo por defecto
Notificador2 Dejar todo por defecto
TinyBD1 Dejar todo por defecto
Reproductor1 Dejar todo por defecto
2.9Todas las emisoras las guardaremos localmente usando el componente TinyBD. Para
esto crearemos un procedimiento para listar las emisoras guardadas en TinyBD
2.10 Ahora programaremos la función de poder agregar emisoras que luego
guardaremos en TinyBD
6. Programación Móvil para Redes
Nro. DD-106
Página 6 de 15
2.11 Ahora veremos la forma de poder agregar emisoras online. El reproductor de App
Inventor permite reproducir música de manera local o remota. Usaremos esta
segunda funcionalidad para lo cual necesitaremos brindar al componente
Reproductor la URL de la radio online. Veremos una forma de obtener estos enlaces
remotos
2.11.1 Diríjase a Chrome e ingrese a la siguiente página: https://radios.com.pe. Se le
mostrara una lista emisoras, elegiremos una, para este caso elija “Oxigeno”.
Haga clic en la imagen de Play mostrado.
2.11.2 En el navegador Chrome haga clic en los 3 puntos al lado derecho→Más
herramientas → Herramientas del desarrollador(esta sección permite ver
todos los comandos enviados y recibidos al realizar una consulta a una página
web)
2.11.3 Haga clic en la pestaña Network y en la parte inferior se mostrará la lista de
recursos consumidos. Debemos buscar cuál de ellas tiene el enlace remoto,
será sencillo ubicarlo ya que la mayoría de elementos terminan en formato
JPG o PNG. En nuestro caso el enlace es RADIO_OXIGENO_SC,
7. Programación Móvil para Redes
Nro. DD-106
Página 7 de 15
2.11.4 Haga clic derecho sobre este y seleccione Abrir en nueva pestaña (Se
mostrará el reproductor, lo que indica que esta es la ruta remota de la radio).
Copie la dirección remota para agregarla al reproductor de App Inventor:
https://18323.live.streamtheworld.com/RADIO_OXIGENO_SC
2.11.5 OJO: usted puede obtener el enlace desde cualquier página, solo deberá
probar hasta encontrar el enlace del sitio remoto.
2.11.6 De manera alternativa, se alcanza la siguiente tabla con diferentes enlaces a
emisoras de radio
Emisora URL
Kiss FM http://kissfm.kissfmradio.cires21.com/kissfm.mp3.m3u
Onda Cero Málaga http://icecast-streaming.nice264.com/malaga
Los 40 http://22533.live.streamtheworld.com:80/LOS40_SC
Rock FM http://flucast-b04-05.flumotion.com/cope/rockfm-
low.mp3
Europa FM http://icecast-streaming.nice264.com/europafmback
Xtra Hits https://srv1.multiesfera.com:8020/hd
2.12 Vamos a agregar la funcionalidad de poder determinar qué acción deseamos
realizar al seleccionar un elemento de la lista de emisoras. Si deseas reproducir o
eliminar el elemento
8. Programación Móvil para Redes
Nro. DD-106
Página 8 de 15
2.13 Ejecute su aplicativo y verifique que puede agregar y reproducir una emisora
remota
2.14 Siguiendo lo visto en el punto 2.11 agregue otras 2 emisoras. Muestre sus
resultados
Funciona con cualquier URL identificado como radio o que reproduzca
sonido y cuando se sale de la interface sigue tocando la música.
10. Programación Móvil para Redes
Nro. DD-106
Página 10 de 15
2.15 Vamos a programar la funcionalidad de poder pausar y volver a reproducir una
emisora, además de controlar el volumen escuchado
2.16 Ahora agregue la funcionalidad de poder limpiar la lista de emisoras, cargar lista
de emisoras al iniciar la actividad y salir de la ventana
2.17 Ejecute su proyecto y verifique la funcionalidad de poder reproducir, pausar,
controlar volumen. Muestre los resultados a continuación.
2.18 Agregue una nueva ventana llamada: Screen3
2.19 Antes de empezar con el diseño vamos a agregar una extensión para el manejo
de archivos, para nuestro caso nos servirá para listar los archivos de una carpeta
2.19.1 Diríjase a en la Paleta→Extensión y haga clic en Import extension
11. Programación Móvil para Redes
Nro. DD-106
Página 11 de 15
2.19.2 Busque el archivo com.puravidaapps.TaifunFile.aix el cual será
proporcionado por el docente e impórtelo. Una vez importado debe figurar el
nuevo componente
2.20 Diseñe la siguiente interfaz mostrada siguiendo la vista de componentes mostrada
2.21 Solo se muestra la configuración de los elementos a utilizar, configure los demás
componentes a su criterio para que quede como muestra la imagen de arriba
12. Programación Móvil para Redes
Nro. DD-106
Página 12 de 15
Objeto Propiedad
Screen3 Dejar todo por defecto
Boton 1 Nombre Variable: btnListar
Texto: Cargar Lista . . .
Boton 2 Nombre Variable: btnSalir
Texto: Salir
VisorDeLIsta1 Nombre Variable: lstMusicas
TaifunFile1 Dejar todo por defecto
Reproductor1 Dejar todo por defecto
2.22 Vamos a programar para que nos permita listar todos los archivos de audio
localizados en nuestro dispositivo (file:///storage/emulated/0/Download) de nuestro
dispositivo, además de poder salir de la aplicación
2.23 Modifique Screen1 para que el botón de “Reproductor” permita mostrar a
Screen3
2.24 Ejecute su aplicativo y verifique que puede listar todos los archivos de audio
localizados en la carpeta Descargas
13. Programación Móvil para Redes
Nro. DD-106
Página 13 de 15
3. EJERCICIOS PROPUESTOS
a. Investigue y modifique la funcionalidad del Screen3, para, por ejemplo:
i. Agregar las funcionalidades de pausar, detener y reproducir un archivo de
música
ii. Debe permitir controlar el volumen
b. Agregue funcionalidad al botón “SALIR”.
c. Adjunte capturas del proyecto realizado
15. Programación Móvil para Redes
Nro. DD-106
Página 15 de 15
OBSERVACIONES (5 mínimo):
(Las observaciones son las notas aclaratorias, objeciones y problemas que se pudo presentar en el
desarrollo del laboratorio)
• El usuario tiene la amplia gama de elegir que radio escuchar por medio del url que añada.
• Podemos usar no solo url de radios nacionales sino también de otros países siempre y cuando
tenga cobertura suficiente.
• El nivel del volumen puede varía según la pulsación que le asignemos y los parámetros dados.
• Podemos tener interacción con el usuario añadiendo imágenes a los botones e
intercambiándolos según requiera la situación.
• Dentro de unas ideas podríamos usar este reproductor de enlaces url como reproductor de
lectura de artículos que deseemos escuchar sin necesidad de leer, con identificadores o algo
por el estilo.
CONCLUSIONES (5 mínimo):
(Las conclusiones son una opinión personal sobre tu trabajo, explicar cómo resolviste las dudas o
problemas presentados en el laboratorio. Además de aportar una opinión crítica de lo realizado)
• Se concluye que el uso del reproductor tiene posibilidades de hacer uso tanto de la web como
del dispositivo que lo contiene.
• Podemos decir que todas las aplicaciones que desarrollemos estarán formadas por un conjunto
de eventos y sus respectivas respuestas.
• Algunas aplicaciones se comunican a través de internet enviando peticiones hacia servicios
web
• Si no disponemos de ningún dispositivo adecuado, podremos probar nuestras aplicaciones
utilizando el emulador de Android, el cual viene integrado dentro del sistema.
• Las variables son como las propiedades, pero no están asociadas a ningún componente en
particular.
• Las variables almacenan datos temporalmente mientras la aplicación se está ejecutando,
pueden ser globales o locales
