Consumir Gravatar API con Kendo UI MVVM

Hola a todos, en esta entrada escribiré algo corto y simple. Lo que haremos hoy es consumir la JSON API de Gravatar para que partiendo del User Name poder sacar información del usuario. Si no sabes que es Gravatar, no sé que haces aquí 😛 (Es broma, lee un poco aquí). Es muy útil que las aplicaciones Web que regularmente uso usen Gravatar, con tan solo mi Email ya sacan mi foto de perfil y si es necesario mi biografía (todo depende de cuanto le digas a Gravatar).

El código lo subí a este fiddle. Trabajos de puro Javascript seguro los estaré subiendo a mi cuenta de Fiddle para que si lo usan, estén al pendiente.

HTML

Primero tendremos que agregar las librerías que vamos a usar, vamos a usar las mismas que el post pasado y tendremos la siguiente base:

Screen Shot 2015-05-02 at 8.45.39 PM

Y dentro de body agregaremos nuestra vista de MVVM:
Screen Shot 2015-05-02 at 8.48.06 PM

Lo que hay que explicar aquí son los bindings, el div#container tiene un binding que se casa con su estilo in-line y la propiedad css background-color. Esto porque Gravatar me puede dar el background color que el usuario tiene personalizado. Los demas bindings son como ya lo hemos visto antes, vinculos con propiedades de nuestro View Model. Es importante hablar del span que tiene el binding “text: getGravatarData”, aquí es un truquito para ejecutar una función de mi View Model cada cuando la propiedad gravatarName cambie en el input. En realidad este no mostrará nada. La cosa aquí es que cualquier binding que se ponga en el HTML se van a evaluar nuevamente cada vez que una propiedad cambie.

Javascript

Agregamos dentro del load function de jQuery que ya agregamos el siguiente código javascript:

Screen Shot 2015-05-02 at 8.52.29 PM

getGravatarData consume la api de Gravatar. El URL de la api de gravatar es http://en.gravatar.com/{userName}.json, pueden usar un REST client para probarlo y ver los datos que manda (o simplemente ponerlo en el navegador funciona). So, le concatenamos el user name al url para obtener la información del usuario que queremos, así de fácil.

La api nos regresa un hash MD5 del email del usuario, y lo necesitamos para obtener la imagen de perfil del tamaño que queramos. Por eso usamos el URL http://www.gravatar.com/avatar/{has-md5}?s={size}.

Y el resultado es como lo hemos visto en el fiddle que he subido.

Screen Shot 2015-05-02 at 8.57.28 PM Screen Shot 2015-05-02 at 8.58.49 PM

Saludos!

Anuncios

Crear un API con .NET y consumirla desde Android

Bueno, en esta entrada vamos a tener dos videos en donde realizo lo que dice el título, crear un API ( o esa, un webservice REST) y consumir ese webservice desde Android/Java.

El vídeo, recomiendo que lo vean en HD y en pantalla completa, el audio no me fijé, pero no quedo del todo bien, espero y les sea de utilidad.

Crear un Webservice REST con WCF y C#

Consumir el WebService JSON desde Android

Código fuente: https://github.com/isaacOjeda/AndroidAPIConsumer

Crea tu propia API con WCF Restful Service [C#]

Que tal!, ahora vengo de nuevo escribiendo buenos tutoriales como siempre!. En esta ocasión vamos a intentar crear una API para las aplicaciones que tengan las posibilidades de ofrecer servicios a aplicaciones de otros desarrolladores.

Primero que nada, debemos de tener Visual Studio 2010 (o en dado caso las versiones express). Para los que no tengan este software y son estudiantes, traten de registrarse en DreamSpark si es que tienen un correo que tenga dominio .edu.tuPais, si tienen un correo pueden registrarse en DreamSpark y bajar un sin fin de software para desarrollo.

En fin, comencemos.

Crear el proyecto

Para empezar crearemos un nuevo proyecto en Visual Studio

image

Y tendremos una solución por default

image

Definir y crear nuestro servicio WCF Restful

Continuar leyendo “Crea tu propia API con WCF Restful Service [C#]”