Archivo de la etiqueta: API

Crear marcadores en Google Maps con la API

Otra de las cosas muy interesantes que nos permite la API de google maps es poder utilizar los marcadores que queramos y situarlos a nuestro antojo dentro de un mismo mapa. Incluso podemos vincular este marcador con una url de tal modo que al hacer click sobre él nos lleve a otro contenido dentro de Internet.

Obtener la capa y asignarle al objeto «mapa»

En un principio deberás tener colocada dentro de tu página una capa vacía donde querrás ubicar el mapa. Lo normal será rellenar el mapa en el momento que carguemos la página.


...

<div id="map_canvas"></div>

...

Con jquery podemos utlizar el evento onload de la ventana para realizar todas las operaciones del mapa.


window.onload = function () {  

//Creamos las opciones que estarán asignadas al mapa

var options = {
 mapTypeControlOptions: {
 mapTypeIds: ['Styled']
 },
 center: new google.maps.LatLng(39.644024, -3.185656),
 zoom: 5,
 disableDefaultUI: true,
 mapTypeId: 'Styled'
 };
 var div = document.getElementById('map_canvas');  //En esta línea obtenemos la capa donde se ubicará nuestro mapa

//Creamos el objeto mapa de google con las opciones y asignamos la capa div html
 var map = new google.maps.Map(div, options); 

}

 

Cómo crear el marcador

Para crear un marcador es necesario dos objetos de google que son:

  • google.maps.Marker, será el propio marcador.
  • google.maps.LatLng, objeto que representa las coordenadas dentro del mapa.

Primero creamos un objeto LatLng , en él fijaremos la longitud y latitud del marcador.


var gijon = new google.maps.LatLng(43.532362, -5.661588);

Posteriormente creamos el marcador:


var marker_gijon = new google.maps.Marker({
 position: gijon,
 url: '/sedes/sede-gijon/',
 title: 'Gijón',
 map: map
 });

En este punto podemos ver en la propiedad «position» le asignamos la variable de tipo LatLng establecido previamente.

Title, será la cadena que se mostrará al pasar el ratón por encima.

Y «map» es el objeto mapa creado anteriormente.

La propiedad url no existe como tal en el objeto de google marker pero la creamos nosotros para establecer la dirección a la que se dirigirá posteriormente.

Para tratar esta dirección podemos utilizar el siguiente código:


google.maps.event.addListener(marker_gijon, 'click', function() {
window.location.href = marker_gijon.url;
});

Este ha sido un pequeño tutorial para crear marcadores en Google Maps con la API. Seguro que existen más posibilidades pero esto es solo una manera sencilla de empezar.

Consumir una API con jQuery y AJAX

En este post intentaremos aprender a consumir una API con jQuery y AJAX.

Nota: en el ejemplo que vamos a desarrollar partimos con que nuestro servicio API se encuentra en la misma web donde vamos a desarrollar el cliente.

Partimos también con que existen dos métodos en la API: obtención de una lista de todos los productos (URI: «/api/products») y seleccionar un producto por un identificador (URI: «/api/products/id«). La URI podrá cambiar dependiendo donde se ubique el servicio… en muchos casos puede ser del tipo «http://…»

Usaremos jQuery para realizar llamadas AJAX y actualizar la página con los resultados.

Empezamos por crear nuestro archivo vacío HTML. En él escribiremos lo siguiente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Product App</title>
</head>
<body>

<div>
 <h2>All Products</h2>
 <ul id="products" />
 </div>
 <div>
 <h2>Search by ID</h2>
 <input type="text" id="prodId" size="5" />
 <input type="button" value="Search" onclick="find();" />
 <p id="product" />
 </div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
 <script>
 var uri = 'api/products';

$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(uri)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
 });

function formatItem(item) {
 return item.Name + ': $' + item.Price;
 }

function find() {
 var id = $('#prodId').val();
 $.getJSON(uri + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
 }
 </script>
</body>
</html>

Nota: Existen muchas maneras de obtener jQuery, en este caso lo obtenemos de un recurso compartido en Internet (http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js)

Obtener la lista de productos

Para obtener la lista de productos se envía una petición HTTP (GET) a la uri donde se encuentra el servicio API. (/api/products).

La función de jQuery getJSON envía una petición asíncrona AJAX. La respuesta esperará por tanto un array de objetos JSON.  La función «done» especifica que la respuesta ha llegado. Cuando llegue la respuesta actualizaremos el DOM con la información que hemos recibido.


$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(apiUrl)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
});

Obtener un elemento pasando un identificador

Para obtener un producto por un un identificador, enviaremos un petición HTTP GET a «/api/products/id«, donde id es el identificador de producto.


function find() {
 var id = $('#prodId').val();
 $.getJSON(apiUrl + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
}

Programar una API con ASP.NET

Como sabemos el protocolo HTTP no sirve únicamente para servir páginas Web sino que también puede actuar como APIs que exponen servicios y datos. Estos servicios pueden ser consumidos por una gran cantidad de clientes como pueden ser navegadores, aplicaciones de escritorio, etc.

Crear un proyecto ASP.NET Web API

Centrándonos un poco más en ASP.NET, con Visual Studio 2013 existe la posibilidad de crear de una manera extremadamente fácil un proyecto API. Se hará a través de una plantilla.

Web API
Nuevo proyecto Web
Web API 2
Asignar plantilla Web API a la creación del proyecto

Gracias a esta plantilla Visual Studio nos creará automáticamente un esqueleto que nos permitirá poder añadir elementos de servicio que darán funcionalidad a nuestra API. En la anterior imagen creamos un proyecto vacío pero si nos fijamos también hemos marcado más abajo que queremos que nos añada los directorios y las referencias necesarias en el proyecto.

Como siempre las cosas se pueden hacer de distintas maneras… en este caso también se puede afrontar la creación de la API con MVC. En nuestro caso continuaremos sin utilizar MVC.

Añadir  un modelo

A continuación añadiremos un modelo. El modelo es un objeto que representa los datos de tu aplicación. ASP.NET Web API puede serializar automáticamente tu modelo a JSON, XML o cualquier otro formato y entonces escribir los datos serializados dentro del cuerpo de la respuesta HTTP. Además el cliente siempre puede indicar que formato quiere fijando la cabecera en la petición del servicio.

En este ejemplo añadiremos un modelo que represente un producto. Para ello haremos click derecho encima de la carpeta Models y añadiremos una clase.

Web API Modelo

Nombraremos la clase como «Product» y escribiremos el siguiente código:

namespace ProductsApp.Models
{
 public class Product
 {
 public int Id { get; set; }
 public string Name { get; set; }
 public string Category { get; set; }
 public decimal Price { get; set; }
 }
}

Añadir un controlador

En Web API, un controlador es un objeto que maneja peticiones HTTP. Añadiremos un controlador que devuelva una lista de productos o un único producto especificado por un Identificador.

Para añadir un controlador haremos click derecho sobre el directorio «Controllers» dentro de la solución y seleccionaremos «Controller».

Web API Controlador

En la nueva ventana elegiremos Web API Controller – Empty. Pulsaremos añadir.

Web API Controlador 2

Le podremos llamar «ProductsController» por ejemplo. Insertaremos el siguiente código dentro de este fichero:


using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
 public class ProductsController : ApiController
 {
 Product[] products = new Product[]
 {
 new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
 new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
 new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
 };

public IEnumerable<Product> GetAllProducts()
 {
 return products;
 }

public IHttpActionResult GetProduct(int id)
 {
 var product = products.FirstOrDefault((p) => p.Id == id);
 if (product == null)
 {
 return NotFound();
 }
 return Ok(product);
 }
 }
}

Si nos fijamos existen 2 métodos: GetAllProducts y GetProduct. Gracias a ASP.NET Web API podremos acceder a cada uno de estos métodos a través de las siguientes URIs: /api/products y /api/products/id.

Como vemos es muy sencillo programar una API con ASP.NET. En otro post hablaremos de cómo se puede consumir un servicio de este tipo con AJAX y jQuery.

Obtener imágenes desde Instagram para mostrarlas en tu Web

Si deseas obtener en tu Web las imágenes que tienes desde tu cuenta de Instagram estos son los pasos a seguir:

  1. Primero debes entrar en tu cuenta de instagram y en el pie de página buscar el enlace al desarrollo de la API
  2. Deberás crear un nuevo cliente, es decir tu aplicación web. Para ello existe un botón llamado «Gestionar Clientes». Una vez dentro deberás «Registrar un nuevo cliente».
  3. Aparecerá un formulario que deberás rellenar con el nombre de la aplicación (cualquiera vale), una descripción (la que desees), la url de tu sitio web y una url que se encuentre dentro de tu sitio  a donde redirigirá instagram para comprobar que te has autenticado correctamente. En realidad en este paso estamos registrando la aplicación, pero deberás registrar también el cliente para poder obtener el ClientID que es necesario para poder seguir adelante.
  4. Con esto hecho deberás ir a tu web y colocar el siguiente código sustituyendo el [clientid] y [callbackuri] por tus datos.
    var access_token = location.hash.split('=')[1];
     if (location.hash) {
     } else {
     location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
     }
  5. Con un navegador escribirás la url donde hayas colocado este código y si todo sale correctamente serás redirigido a la url que escribiste como callbackuri. Atento aquí a la url porque si todo es correcto se pasará como parámetro el access-token. Copialo y guárdalo porque lo necesitarás más tarde. En este punto puedes quitar el código anterior porque tu aplicación ya está autenticada.
  6. Ya queda menos… para el siguiente paso necesitas obtener tu identificador de usuario que no es lo mismo que tu identificador de cliente. Para obtenerlo puedes utilizar este tool de Instagram.
  7. Ya podemos obtener las fotos de Instagram con el siguiente código, sustituyendo claro está tu [userid] y tu [access_token]:
    $(function() {
     $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
     success: function(data) {
     for (var i = 0; i < 6; i++) {
     if(data.data[i]) { // to prevent a bug with non missing images
     $(".instagram").append("
    <div class="instagram-placeholder"><a href="&quot; + data.data[i].link +&quot;" target="_blank"><img class="instagram-image" alt="" src="&quot; + data.data[i].images.thumbnail.url +&quot;" /></a></div>
    ");
     }
     }
     }
     });
     });
  8. Para que esto funcione debes de tener una capa con la clase «instagram» ya que es ahí donde añade los elementos con jquery.