Ir directamente al contenido de esta página

Probamos Zippopotam.us

¿Al lector le suena Zippopotam.us? Ciertamente a nosotros no hasta que hace unas horas nos hemos encontrado la referencia en esta entrada de CSS-Tricks. Básicamente se trata de una API que devuelve datos asociados a un código postal en formato JSON. Y hemos querido probarla.

¿Y para qué sirve?

La aplicación más obvia es la que se indica en la entrada del blog que hemos vinculado: rellenar campos de un formulario para ahorrarle el esfuerzo al usuario. Lo que la API hace es devolver a una petición como api.zippopotam.us/ES/01001 un documento con este contenido:


{
  "post code": "01001",
  "country": "Spain",
  "country abbreviation": "ES",
  "places": [
    {
      "place name": "Vitoria-Gasteiz",
      "longitude": "-2.6667",
      "state": "Pais Vasco",
      "state abbreviation": "PV",
      "latitude": "42.85"
    }
  ]
}

En nuestra demo simplemente hacemos la petición cuando el usuario introduce cinco caracteres de código postal, y con los datos recibidos rellenamos los demás campos. Lo de incluir un mapa de Google no era más que por aprovechar la información acerca de la latitud y la longitud.

El script es el que sigue, que por agilizar hemos basado en jQuery:


$(document).ready(function(){
  $('input').val('');
  $('#mapa').html('');
  $('#cp').keyup(function(){
    if($('#cp').val().length==5){
      $.ajax({
        url: 'zippo.php',
        cache: false,
        type: 'GET',
        data: 'cp='+$('#cp').val(),
        success: function(datos){
          datos = $.parseJSON(datos);
          if(datos.places){
            $('#poblacion').val(datos.places[0]['place name']);
            $('#provincia').val(datos.places[0]['state']);
            if(GBrowserIsCompatible()){
              var mapa = new GMap2(document.getElementById('mapa'));
              mapa.setCenter(new GLatLng(datos.places[0]['latitude'],datos.places[0]['longitude']),13);
              mapa.addOverlay(new GMarker(new GLatLng(datos.places[0]['latitude'],datos.places[0]['longitude']))); 
            }
          } else {
            $('#poblacion').val('');
            $('#provincia').val('');
            $('#mapa').html('<p id="error">No parece que haya datos para ese CP</p>');
          }
        }
      });
    }
  });
});

Un apunte: la llamada por AJAX no la estamos haciendo directamente a la dirección de la API porque no funciona, ni siquiera en la prueba de la propia página de Zippopotam.us; pensamos que puede ser porque el documento que devuelve no cuenta con extensión, aunque no estamos seguros. Para solventar este problema, cargamos zippo.php, que proporciona a nuestro script el contenido del documento, y cuyo código es éste:


<?php
  $c = curl_init();
  curl_setopt($c,CURLOPT_RETURNTRANSFER,1);
  curl_setopt($c,CURLOPT_HEADER,0);
  curl_setopt($c,CURLOPT_URL,'http://api.zippopotam.us/ES/'.$_GET['cp']); 
  $json = curl_exec($c);
  curl_close($c);
  echo $json;
?>

Caveat lector

Para finalizar, queremos indicar que hemos hecho esta prueba por contar con una herramienta más en nuestro haber, pero de cara a aplicarla en un proyecto real habría que tener en cuenta algunas limitaciones:

Esta entrada se publicó el 4 de mayo de 2012, se archivó en JavaScript, y fue etiquetada como . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012