Pequeña versión móvil con Jquery Mobile

Jquery mobile app

Como vimos en: Habilitando servicios Web en Drupal 8

Podemos exponer todos los contenidos de Drupal como endpoints de REST y crear representaciones de vista que permitan publicar los resultados como servicios Web, estos servicios podemos usarlos desde otros sitios, desde aplicaciones Web o, como en este caso, para hacer un web desacoplada de Drupal. Este tipo de webs permiten más libertad creativa, más ligereza y adaptaciones para dispositivos móviles.

Para ello, utilizaremos Jquery Mobile, que nos permite crear interfaces HTML5 adaptados a dispositivos móviles de forma muy sencilla.

Para hacer nuestra versión móvil, creamos un directorio mobile dentro de la estructura de Drupal (para evitar durante el desarrollo que el bloqueo de referencias entre sitios (CORS) nos de guerra durante el desarrollo), de esta forma, todas las peticiones a nuestrositio/mobile/ irán a nuestro sitio móvil y no a Drupal.

El "corazón" de nuestra web será un fichero html extremadamente sencillo:

index.html



<!doctype html>
<head>
<title>Praderas: Donde pastan los enredos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
</html>

¡Ala! Básicamente, lo único que hacemos en el index.html es cargar las versiones de jquery y jquery mobile desde el CDN de jquery (ojo, jquery 3 no soporta jquery mobile en estos momentos, ha de ser una versión 2 de jquery). Lo único que hacemos en el body de nuestro html es cargar app.js que es el script que carga los datos y genera la estructura de la web.

Vamos a ver el script completo y luego lo vamos explicando poco a poco:

js/app.js


$(document).on('pagechange',function(event, o){
  var id = getURLParameter("id");
  var nid = getURLParameter("nid");
  $('#principal').remove();
  var template = $('<div id="principal" data-role="main" class="ui-content">'+
    '<div id="pagina" data-role="page">'+
    '<div data-role="header">'+
    '<h1>Praderas Mobile</h1>'+
    '<a href="https://praderas.org/mobile/" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>'+
    '</div>'+
    '<div data-role="content">'+
    '<h3 class="ui-bar ui-bar-a ui-corner-all"></h3>'+
    '<div class="ui-body ui-body-a ui-corner-all" id="contenido">'+
    '</div>'+
    '</div>'+
    '<div data-role="footer" id="piedepagina">'+
    '<h4>Made with JQM</h4>'+
    '</div>'+
    '</div>'+
    '</div>');
  $('body').append(template);
  switch(id){
    case 'node':
    var request = 'https://praderas.org/node/'+nid+'?_format=json'
    $.getJSON(request,
      function (data) {
      $("h3").text(data.title[0].value);
      $("#contenido").html(data.body[0].processed);
      });
      break;

  case 'home':
  default:
    $.getJSON('https://praderas.org/listar_content?_format=json',
    function (data) {
    $("h3").text("Indice");
    var listado ='<ul data-role="listview" data-count-theme="c" data-inset="true" id="lista">';
      $.each(data, function(index, value) {
      listado+='<li><a href="'+window.location.href+'?id=node&nid='+value['nid']+'">'+value['title']+'</a></li>';
      });
    listado+='</ul>';
    $("#contenido").html(listado);
    $('#lista').listview().listview('refresh');
    });
    break;
    }
  $('body').enhanceWithin();
  $('#pagina').show();
});

function getURLParameter(name) {
  return decodeURI(
  (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}

Paso a paso, en el código hay dos funciones, una función auxiliar getURLParameter que nos sirve para cargar los parámetros de la llamada HTTP y así servir una cosa u otra y una segunda función que es la que lleva el peso de la aplicación que se dispara con el evento 'pagechange', es decir, cada vez que se cambie la página.

Lo primero que hacemos es cargar los parámetros "id" y "nid" de la llamada al script que luego usaremos en un switch.

Posteriormente, eliminamos el elemento de id '#principal' (si existe), esto lo hacemos, porque si no, en sucesivas llamadas Jquery nos crearía una y otra vez la misma estructura. Después de eliminarlo creamos la estructura de la página como un objeto de Jquery (template) y lo añadimos al cuerpo de la página, esta pequeña plantilla html no crea un área de encabezado con un icono de home, un área de contenido con una barra de título y un área de contenido y un footer:

Estructura de la web móvil

En el switch tenemos dos opciones, una es node (nos carga un nodo) y la otra es home, que es la entrada por defecto, empezaremos por home:

Las peticiones a los servicios se realizan mediante la función getJSON, recibimos los datos y creamos un objeto listado, este objeto usa el role "listview" que permitirá a jquery mobile convertir la lista no ordenada html en un widget listview adaptado para dispositivos móviles.

Iteramos sobre la respuesta para añadir todos los elementos de la lista, al terminar el lazo cerramos la lista y añadimos el listado a nuestro contenido. Aquí, al haber creado el contenido de forma dinámica, es necesario necesario llamar al método listview para convertir el objeto en una listview y posteriormente refrescarlo.

Con esta pequeña funcioncilla tenemos creado un widget listview adaptado para móviles, que será responsive y se adapta a la pantalla:

Listado en formato listview

Una vez que tenemos el listado de la página principal, creamos la vista de los nodos, para ello, simplemente cargamos los campos de título y de body (usamos la versión processed de body) en sus correspondientes objetos. Fuera del switch hay que hacer un par de truquillos, primero, llamamos al método "enhanceWithin" de body para que realice todas las modificaciones necesarias en el código que hemos inyectado, es importante que se haga desde el elemento padre (el body en este caso) y posteriormente nos aseguramos que la página se muestra con show(), ya que tras enhance Jquery va a dejar la página oculta, con esto, ya tenemos la vista de nuestros nodos:

Articulo en version rest

Y con solo este poquito hemos hecho una web que muestra los contenidos de nuestro sitio, con una navegación muy simple y sin adaptar el aspecto, pero que funciona y puede utilizarse para leer nuestros artículos en movilidad sin necesidad de cargar todo el sitio y con una usabilidad adaptada.

Aquí podemos ver qué cargamos en el caso de nuestra app mobile:

Datos carga front mobile

y aquí vemos qué cargamos en el caso de usar directamente Drupal:

Datos carga Front Drupal

Aunque Drupal hace un trabajo excepcional en móviles, sobre todo con un tema tan limpio como el que usamos (mbase) y con una estructura tan simple, se ve la diferencia de consumo de uno y del otro de forma clara.

En el próximo artículo veremos como darle un poco de estilo a esta pequeña app para llevarla a otra dimensión.

Adecentando la versión móvil con Jquery Mobile