Cómo crear un Servicio Web en Drupal para consumir en Android

En la entrada anterior vimos como extraer tablas o listas de una web y utilizar esos datos en una app móvil. En esta ocasión, seremos nosotros los que crearemos esos datos mediante uno de los CMS más potentes, Drupal, para después recuperarlos y utilizarlos en esa u otra app móvil. Una vez más el potencial de estas tecnologías es enorme. Pongamos un ejemplo simple. Supongamos que somos los dignos poseedores de una biblioteca. Nuestra idea es crear una web que incluya información de todos los libros que tenemos (Título, autor, foto de portada, año de publicación, etc.) y posteriormente crearemos una aplicación para Android en la que se pueda ver el catálogo completo y actualizado con todos los datos de cada libro. La aplicación puede completarse más añadiendo un sistema de reservas, marcado de favoritos etc., Eso quizá sea objeto de otro post. Veamos los pasos necesarios para llevar a cabo estas tareas

  1. Instalación del Drupal y del módulo Services y creación de un tipo de contenido Libro con todos los campos que necesitemos.
  2. Configuración del Webservices y de la views que muestre los datos.
  3. Determinar la url para hacer la llamada al Servicio Web.
  4. Procesamiento y visualización de los datos mediante Javascript para incorporarlos a la app.

[nota]Nos pararemos poco en los puntos 1 y 2  ya que damos por supuesto que tu dominio del Drupal es lo suficientemente avanzado como para hacerlo sin dificultades. En todo caso, si tienes dudas puedes preguntar en los comentarios.[/nota]

Instalación del Drupal y del módulo Services, creación de tipo de contenido y vista

Precederemos a instalar Drupal 7 y a efectuar las configuraciones iniciales, tales como idiomas, maquetación y diseño, usuarios, permisos y todo lo relativo a nuestra web.  Luego crearemos el tipo de de contenido Libro pinchando en Structure Content types y cubriendo el formulario inicial. Pincharemos en Save y add fields y añadiremos todos los campos que necesitemos. Por ejemplo:

campos

 

Ahora podemos crear contenidos tipo libro en Add content, seleccionando el tipo Libro y cubriendo los campos con los datos de cada libro:

libro ejemplo

Libro de ejemplo

Hasta ahora, todo lo que vimos forma parte del uso normal de Drupal. cualquiera que conozca este potente CMS podrá realizar estas tareas sin demasiada dificultad.

Configuración del Webservices

Cuando todo esté a nuestro gusto procederemos a instalar el módulo Services que es el que nos permitirá crear el servicio web. Además necesitaremos el módulo Services Views ya que, como hemos dicho, utilizaremos una vista para generar los datos. Lo instalaremos del modo habitual ya sea mediante Drush o por el método manual. El módulo Services incluye REST y XMLRPC como  interfaces web. En este caso usaremos REST así que debemos activar tanto el módulo Services como REST Server (además del Services views).  La configuración del modulo Services es sencilla pero, en este punto, nos pararemos un poco más: En primer lugar nos dirigimos a Administration Structure /Services y clicamos en Add. Veremos un formulario con varios campos que completaremos de la siguiente forma:

  • Machine-readable name of the endpoint: Nombre del servicio, no debe contener ni símbolos ni números ni letras en mayúsculas.
  • Server: Elegiremos REST.
  • Path to endpoint: pondremos un nombre descriptivo ya que habrá que incluirlo posteriormente en la URL del servicio web. Por ejemplo si completamos este campo con el texto “catalogo”, entonces a nuestra API la llamaremos desde http://www.tudominio.com/catalogo
  • Authentication: Este campo permite nos permitiría crear un servicio web que sólo pueda ser utilizado por usuarios autentificados. En este caso no marcaremos esta opción de forma que cualquier usuario podrá acceder a los datos del servicio web.

Quedaría de esta forma: servicio   Pinchamos en Save para guardar los datos. Ahora procederemos a crear la vista de la que se nutrirá el webservices. En ella añadiremos los campos que necesitamos y los ordenaremos como nos interese. Para ello pincharemos en Administration /Structure Add new view. Completaremos los campos como una vista normal tipo page. Cuando la editemos tenemos que tener estos parámetros en cuenta:

  • Pincharemos en Add y luego en services para crear una vista modo services
  • Añadiremos todos los campos (fields) de tipo de contenido libro. Debemos fijarnos que todos tengan un Custom value key
  • Asignaremos una ruta (path),En este caso services_biblioteca
  • Probablemente la preview no muestre los resultados correctos. No hay problema, es un fallo del módulo.

Esta podría ser la configuración de la vista:

view_service

Ahora ya podemos volver a nuestro Services mediante Administration Structure /Services para añadir la vista. Pincharemos en Edit Resources y marcaremos la casilla de services_biblioteca.

La llamada al servicio Web

Estos son los datos que definimos para nuestro Webservices:

  • Dominio: el de nuestra web drupal “http://www.tudominio.com”
  • Endpoint: definido en la configuracion del Services “apicatalogo”
  • Display: “views”
  • Path de la vista: “services_biblioteca”
  • ID de cada libro: podemos acceder a los datos de cada elemento conociendo su id utilizando “?args=id_del_libro”

Con estos datos la URL para llamar a nuestro servicio web sería:

http://www.tudominio.com/apicatalogo/views/services_biblioteca

Si queremos acceder a un libro determinado  del catálogo podemos hacerlo conociendo su id mediante esta url:

http://www.tudominio.com/apicatalogo/views/services_biblioteca?args=”id_del_libro”

  [nota]Existen varios servicios online que permiten visualizar de forma clara y ordenada un JSON. Recomiendo Jsonviewer online  [/nota]

Procesamiento y visualización de los datos

Una vez tenemos el Servicio Web activo, ya podemos tratar de recuperar esos datos. en este caso lo haremos con Javascript. El código sería el siguiente:

$(document ).ready(function() {
	var url = 'http://www.tudominio.com/apicatalogo/views/services_biblioteca';
	$.ajax({
		type: "GET",
		url: url,
		data: "{}",
		contentType: "application/json; charset=utf-8",
		dataType: "jsonp",
		success: function(data) {
			$(data).each(
				function(){
					titulo = $(this)[0].titulo;
					autor = $(this)[0].autor;
					descripcion = $(this)[0].descripcion;		
					nid= $(this)[0].nid;	
					fecha = $(this)[0].fecha;	
					portada = $(this)[0].portada;	

						var html ='<div><h3>'+titulo+'</h3>'; 
						html += '<p><strong>Descripción: </strong>' + descripcion + '</p>';	
						html += '<p><strong>Año de publicación: </strong>' + fecha + '</p>';	
						html += '<p>' + autor + '</p>';
						html += '<p>' + portada +'</p>';						
						html += '</div><div class="clear"></div>';
					$('#catalogo').append(html);
				}
             );
		},
		error: function() { console.log('Uh Oh!'); }
	});
});

Hagamos unas consideraciones:

  • Partimos de la base de que usamos Jquery mobile asi que Jquery debe estar presente en nuestra app.
  • El datatype debe ser siempre JSONP para evitar el “error Cross domain”
  • Debemos fijarnos en los datos del servicio para saber exactamente cuales son los nombres de los objetos. En este caso “titulo”, “autor”, “descripcion”,  etc.
  • Creamos una variable html que contenga el html y las variables que nos interesan y lo añadimos (append) al elemento html cuyo id es “catalogo”

Como en el post anterior solo faltaría crear el archivo html que incluya todo lo necesario para mostrar los datos y compilar los archivos HTML, CSS y Javacript mediante Phonegap para generar el apk. Veremos como hacerlo en una próxima entrada.