MarcoGallen.com

HTML, CSS, JS, SEO y UX

Category: Jquery Mobile

App móvil de artistas similares con JQuery Mobile y Phonegap

Continuando con nuestros post, les dejo un demo completo de la aplicación que hicimos con JQuery Mobile para buscar artistas similares.
Esta versión corre en cualquier dispositivo con Android usando Phonegap.

En un post próximo explicare como instalar Phonegap y portar nuestro código para poder usarlo en dispositivos móviles de forma nativa.

Puedes descargar la app completa aquí:

https://github.com/marcogallen/MusicaSimilarMovil

El cariño esta en compartir...

Un buscador de artistas similares con JQuery Mobile

Pantalla de artistas similaresAquí dejo un ejemplo de una página hecha con JQuery Mobile. Es un buscador de artistas similares  usando la API de LastFM (LIGA) solamente necesitan agregar su API_KEY  en los URLs de $.getJSON en el parámetro API_KEY y pueden probarla (actualmente usa el API_KEY de los ejemplos de la documentación de LAST.FM).

Es solo un ejemplo de lo que se puede hacer con JQuery Mobile y algunas llamadas AJAX.

Nota: No es el código más limpio o más eficiente, no lo recomiendo para usar en un ambiente productivo. Aun le faltan validaciones caso por caso entre otras cosas.

Si te gusto este artículo compártelo e inscríbete a nuestro newsletter para mantenerte actualizado.



El cariño esta en compartir...

Creando paginas en JQuery Mobile

En un post anterior hice un ejemplo de una lista de JQuery Mobile con el origen de los datos de un JSON. En este post ampliamos sobre ese tema haciendo que al dar clic en cualquier elemento de la lista la aplicación navegue a otra pantalla mostrando más información.

Vamos a darle.

Lo primero es continuar donde nos quedamos, si no tienes el código de post anterior lo puedes descargar o hacer el ejercicio completo.

En el HTML que teníamos al principio teníamos un div con id=“home” y un data-role=“page”. Ahora vamos a crear un nuevo div con id=“show” y también un data-role=“page”.

Agregamos los 3 divs que crean un widget tipo page (data-role=“header” data-role=“content”, data-role=“footer”).

En el div de contenido (data-role=“content”) agregamos unos labels para mostrar la información del artista, mostraremos el nombre, el genero y a que dedada pertenecen.
En la sección del footer agregaremos dos botones. Uno para ir al siguiente artista y otro para ir al anterior.
Nuestro HTML terminado se ve así:
Ahora el JavaScript

Como el contenido de la segunda pagina será dinámico creado a partir del JSON que traíamos tenemos que hacer unos cambios a nuestro código original.

Lo primero que debemos hacer es tener disponible el array de artistas desde cualquier función y como sabemos que las variables globales pueden dar problemas lo primero es hacer un objeto o un namespace para ese arras.

Lo llamaremos datum y tendrá una propiedad data.

Dentro de nuestra llamada para traer el JSON, en la función de respuesta basta que asignemos el valor de los datos de la respuesta a la propiedad data de nuestro objeto.
El siguiente cambio es crear el URL para cada elemento de la lista, dentro del for – in modificamos el LI para incluir un link.
El href del link se crea con esta estructura #+pagina + parámetros de la url.

Así quedaría nuestra llamada por el JSON:

Ahora que ya podemos acceder a los datos desde cualquier función vamos a hablar un poco de como funciona las paginas en JQuery Mobile (JQM).

Todas las paginas en JQM tiene un identificador que sirve para saber a que librería vamos. Si creamos una liga con un hash + id (#identificador) JQM sabe que debe de mostrar esa pagina, también podemos usar una URL tradicional.

Antes de dirigir a la pagina solicitada JQM dispara un evento que le notifica a donde debería de mandarla. Ese evento es el que nos permitida crear el contenido de la pagina antes de mostrarla.

Esto se hace en 3 partes.

Primero capturar el evento “pagecontainerbeforechange”:

Segundo, dentro de la captura del evento:

Verificamos que estamos solicitando una pagina interna y que es la pagina que queremos (podríamos tener diferentes contenidos para diferentes paginas).

Solo queremos modificar el contenido si llamamos la pagina desde un URL (también es posible llamarlo desde objetos).

Y solo queremos generar el contenido de la pagina especifica (#show):

Parseamos el URL y vemos si existe la pagina a la que queremos mandamos a llamar a la función para poblar la pagina y detenemos el evento (e.preventDefault())

Función show Artist

La función recibe dos parámetros, el URL a donde queremos dirigir y un listado de opciones (que heredamos desde el evento anterior).

Extraemos el id del artista que queremos y si existe poblamos los labels con los datos del array.

Agregamos la lógica para los botones y actualizamos las opciones.

Por último mandamos a llamar el vengo para cambiar la página con la pagina de destino y las opciones.

Aqui el código completo.

Listo, con esto ya podemos llamara a una siguiente pagina y procesarla dinamicamente.
El poder tener varias paginas abre todo un espacio de posibilidades, podemos hacer paginas externas que se conecten a algún servicio o podemos tener paginas internas para contenido estático.

El cariño esta en compartir...

3 pasos para una lista de JQuery Mobile desde JSON

3 pasos para una lista de JQuery Mobile desde JSON

Crear una lista de Jquery Mobile desde un JSON es muy sencillo, no se necesita mucho código y puedes tenerla lista en 5 minutos.

Primer paso: Agregar los Scripts

Yo en lo personal prefiero usar el CDN de Google para todos los CSS y JS de los frameworks que utilizo. Google tiene una gran selección y tiene varias ventajas: Google tiene servidores por todo el mundo lo cual las hace más rápida, el versionamiento es muy sencillo y ademas como muchos utilizan ese CDN es probable que el cliente ya lo tenga en cache.

 

Segundo paso: Crear el HTML

JQuery Mobile ya viene con un set de eventos definidos que nos permiten crear paginas (en el mismo html o en distintos *.htmls) eso nos da mucha flexibilidad para nuestra demo.

Iniciamos con el template básico de una página html5 (descarga el template).

Esto ya incluye la declaración del DOCTYPE, el meta de encoding y los tags básicos (HTML, HEAD,TITLE,BODY).

Y este es el HTML que vamos a utilizar:

 

Este div debe de estar dentro del tag BODY o algún otro TAG que uses para tu contenido.

Rapidamente:

El DIV principal (id=“home”) tiene un data-role=“page” eso hace que JQuery Mobile sepa que es una página y la trate como tal.

Dentro tiene 3 elementos cada uno con su respectiva función:

data-rol=“header”: Es el encabezado de la pagina, aquí puedes incluir botones de navegación o el nombre del sitio o app.

data-rol=“content” aquí va el contenido principal de la pagina.

data-rol=“footer” es el pie de pagina, ahi se incluyen o navegación o algún copyright.

Dentro del DIV data-rol=“content” vamos a incluir un UL (Unordered list)

 

El UL tiene un ID “list_view” este ID es como mas adelante localizaremos nuestro elemento y le agregaremos los puntos de la lista. El atributo data-rol=“listview” es lo que le permite verse como una lista tradicional de dispositivos móviles y le agrega la funcionalidad para transicionar. El atribúto data-theme=“a” nos permite modificar el estilo de la lista de unos predeterminados que ya tiene JQuery Mobile.

Tercer paso: Agregar el Javascript

Este paso en realidad son dos pasos, el primero es conseguir el JSON desde la fuente de nuestra elección. Para nuestro ejemplo usare el API de MusicGraph que es un buscador de artistas. (¿Porqué esta API? Es gratuita, la puedes usar sin registro y su documentación incluye API_KEY)

El tres el JSON es muy sencillo:

$.getJSON(URL, callback) es una función de JQuery que agrupa  $.ajax pero con menos opciones, funciona muy bien cuando quieres hacer algo rápido, para algo más eficiente recomiendo usar $.ajax.

La función getJSON recibe dos parámetros: el URL de donde queremos tomar el JSON, en nuestro caso:  http://api.musicgraph.com/api/v2/artist/search?api_key=c8303e90962e3a5ebd5a1f260a69b138&similar_to=Flogging+Molly y un callback, que es una función que llamara cuando termine de recibir el JSON de forma exitosa, esta recibe un parámetro con los resultados.

Agregando los datos a la lista:

Como vamos a manipular varias veces la lista UL id list_view es mejor guardar el identificador en una variable y no tener que buscarlo cada que lo necesitemos:

Para agregar los datos a la lista solo tenemos que procesar el resultado de la función de callback de getJSON. De esta forma:
 

el objeto result contiene propiedades, la propiedad data es un array con la información que queremos, por eso asignamos var data = result.data (En JSON las propiedades se pueden acceder usando punto(.) o como diccionario).

Iteramos sobre nuestro array con un for – in y tomamos el titulo del artista: var title = data[item].name, dado que data es un array de objetos lo que regresa es un objeto con una propiedad title.

Después creamos el LI que vamos a insertar:

y lo agregamos a nuestra UL con id list_view:
Como el UL se creo antes que cargáramos nuestro JSON tenemos que refrescarla usando:
Cuando la lista se refresca ya podemos ver los títulos de los artistas en nuestra lista.

Código javascript completo:

Aquí el código completo de la página:

 

Como ven es muy fácil crear una lista para JQuery Mobil a partir de un JSON, sobretodo si nos apoyamos e el mismo framework de JQuery.  En otro post les mostrare como al dar clic en el elemento de la lista puedes mostrar otra pantalla con más información del artista.

¿Completaste la lista? Deja una liga con tu comentario.



El cariño esta en compartir...

© 2017 MarcoGallen.com

Theme by Anders NorenUp ↑