Advertisement
  1. Code
  2. PhoneGap

Crea un reproductor de audio con PhoneGap: Ajustes de la aplicación

Scroll to top
Read Time: 7 min

Spanish (Español) translation by steven (you can also view the original English article)

Esta es la tercera y última parte de la serie sobre Audero Audio Player. En este artículo, repasaré los archivos restantes para que puedas terminar el proyecto y jugar con él.


Descripción general de la serie


Ajustes del estilo

jQuery Mobile hace gran parte del trabajo por ti mejorando los elementos de las páginas para dispositivos con pantallas más pequeñas. Sin embargo, hay algunos que no me interesan, y los ajustaremos en nuestro archivo style.css. Esto también se usa para diseñar el marcado del reproductor.

De forma predeterminada, incluso si no tienes botones dentro del encabezado o pie de página de una página, el framework aún reserva algo de espacio en ambos lados de los elementos y trunca los títulos largos. Este comportamiento también se aplica a otros elementos. Podemos cambiarlo simplemente aplicando la regla white-space: normal !important; a nuestros elementos específicos como .ui-title.

La fuente de la hoja de estilos se muestra aquí:

Configuración personalizada de jQuery Mobile

jQuery Mobile tiene una configuración predeterminada que debería ser lo suficientemente buena para la mayoría de los proyectos con requisitos simples. Sin embargo, habrá ocasiones en las que querrás modificar o tomar el control de algún comportamiento predeterminado. Puedes lograr esto escribiendo un archivo de configuración. El archivo jquery.mobile.config.js es exactamente donde tendremos la configuración. Ten en cuenta que debes incluir el archivo de configuración antes de los archivos de jQuery Mobile. Cuando se inicia jQuery Mobile, activa el evento mobileinit, que es el que debes vincular para anular la configuración predeterminada.

Realizaremos el cambio asignando valores a las propiedades del objeto $.mobile. No cambiaré muchas propiedades. En cambio, modificaré la opción para que el texto se muestre en el widget del cargador de páginas y el tema.

La fuente completa del archivo se enumera a continuación:

Configuración de compilación

El servicio Adobe PhoneGap Build te brinda la capacidad de especificar los metadatos de una aplicación, como el autor y la descripción, mediante el uso de un archivo de configuración. Este archivo se llama config.xml. Explicar el formato en profundidad está fuera del alcance de esta serie, pero te daré una breve descripción general. Si deseas leer más sobre este tema, consulta la página de documentación oficial.

El archivo config.xml sigue la especificación del widget de W3C y debe permanecer dentro de la raíz de la aplicación, al mismo nivel que el archivo index.html. Su primera línea es la declaración XML y la raíz del documento es una etiqueta <widget> que tiene varios atributos posibles. Los más importantes son id (el identificador único para tu proyecto) y version (que especifica la versión de la aplicación). Dentro de la etiqueta <widget>, puedes escribir los metadatos de tu aplicación. En nuestro archivo usaremos muchos de ellos, pero los más importantes son los siguientes:

  • name (obligatorio): El nombre de la aplicación. No tiene por qué ser único.
  • description (obligatorio): La descripción de la aplicación. Es particularmente importante porque se mostrará en la lista del mercado de la aplicación.
  • icon (opcional): El icono que se mostrará en los dispositivos que instalarán tu aplicación. Si no lo especificas, se utilizará el logo de Cordova.
  • splash (opcional): Esta etiqueta establece la pantalla de bienvenida de la aplicación, que es la imagen que se muestra durante la carga.
  • feature (opcional): Especifica las funciones que deseas utilizar. Por ejemplo, Android, antes de instalar cualquier aplicación, muestra al usuario los permisos que requiere y, si el usuario está de acuerdo, continúa.
  • preference (opcional): Un conjunto de preferencias que deseas aplicar a tu aplicación. Es una etiqueta cerrada y puedes tener cero o más etiquetas <preference> dentro del archivo. Tiene dos atributos y ambos son obligatorios: name y value. Hay muchas preferencias que puedes definir, pero la más importante en mi opinión es especificar la versión de Cordova utilizada.

La etiqueta <access> también es muy importante porque, para citar la documentación, le brinda a tu aplicación acceso a recursos en otros dominios; en particular, permite que tu aplicación cargue páginas de dominios externos que pueden ocupar toda tu vista web. Recordando lo que discutimos en la sección Gestión de enlaces externos de la publicación anterior, para abrir los enlaces externos en Cordova WebView, debemos agregarlos a la lista blanca de la aplicación. Dado que nuestra aplicación no obtendrá enlaces de fuentes externas e inseguras, podemos acortar el proceso para permitir cualquier recurso externo usando el carácter especial *. Por ejemplo:

<access origin="*" />

He señalado los puntos clave del formato y ahora puedes comprender la fuente del archivo de configuración. El archivo completo está a continuación:


Ejecutando la aplicación

En la última sección, se construyeron todos los archivos de la lógica del negocio, HTML y CSS para la aplicación, por lo que ahora es el momento de configurar las funciones de entrada para la aplicación y ejecutarla. La función objetivo será el método initApplication() de la clase Application. Se ejecutará una vez que Cordova esté completamente cargado, lo que garantiza que puedas llamar de forma segura a las API de Cordova. Para hacer esto, configuraremos initApplication() como una función de devolución de llamada para el evento deviceready agregando el siguiente código al archivo index.html. Puedes ver esto mirando el siguiente fragmento:


Posibles mejoras

Ahora estás al final del proyecto. Dicho esto, cada proyecto tiene espacio para mejoras y nuevas características, por lo que antes de concluir la serie, me gustaría sugerirte algunas de estas.

La primera característica que puedes agregar es la internacionalización (i18n) de la aplicación. Nuestro reproductor no tiene mucho texto, por lo que traducirlo a otros idiomas debería ser muy fácil. Para traducir la aplicación, puedes utilizar la API de globalización, una API agregada al núcleo a partir de la versión 2.2.0. Además, una biblioteca jQuery específica como jquery-i18n-properties o jQuery-i18n seguramente sería útil para esta función.

Otras sugerencias menores son:

  • Permitir al usuario crear lista de reproducción.
  • Crear un botón "Reproducir todo" para reproducir todas las canciones de la lista.
  • Crear un sistema de calificaciones del audio para que el usuario pueda filtrar y ordenar canciones por su clasificación.
  • Agregar un botón "Repetir" para que el usuario pueda seguir escuchando la canción actual.

Estas sugerencias son solo algunas de las posibles mejoras que puedes realizar en el reproductor de audio Audero. Con la información de este tutorial y tus propias habilidades, puedes hacer mucho, mucho más.


Conclusión

Como has visto a lo largo de esta serie, puedes crear aplicaciones potentes y útiles utilizando tecnologías web y frameworks populares. Ahora es tu turno de jugar con este proyecto. ¡Intenta iniciar tu propio proyecto para probar lo que aprendiste en esta serie!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.