En este día Jeff usa el ahora clásico ejemplo de un cliente de Twitter para demostrar el acceso a un servicio de web desde el teléfono.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #25: Talking To External APIs por Jeff Blankenburg publicado el 25 de octubre del 2010

 

Este artículo es el Día #25 de una serie llamada los 31 días de Windows Phone.

Ayer escribí sobre cómo incorporar fuentes, vídeos e imágenes en nuestras aplicaciones para Windows Phone. Hoy vamos a hablar sobre cómo obtener información de un servicio de web para uso de nuestra aplicación.

 

La interface de programación de Twitter

En caso de que todavía no hayan experimentado con ella, yo suelo referirme a las aplicaciones de Twitter como el nuevo “¡Hola Mundo!” El por qué es obvio, casi toda aplicación hoy día necesita conectarse a un servicio de web, y la interface de programación (Application Programming Interface o API) de Twitter es fácil de usar, gratis y ni siquiera requiere que uno se registre. En otras palabras, no hay obstáculos de entrada, haciéndola excelente para aprender una nueva tecnología.

La mayor parte de la interfase de programación se encuentra acá: http://dev.twitter.com

Vamos a usar una parte de la API dedicada a la cronología usando este URL específico de modelo: http://api.twitter.com/1/user_timeline.xml?screen_name=jeffblankenburg, pudiendo sustituir mi nombre con el de cualquier otro usuario.

Si hacen clic en el URL van a ver un extenso documento en XML. El documento contiene los mensaje más recientes que he enviado a Twitter además de otros datos adicionales que los acompañan. Este es un nodo de muestra:

 

<status>
  <created_at>Sun Oct 24 13:30:04 +0000 2010</created_at>
  <id>28594986565</id>
  <text>Day #24: Embedding Fonts in Windows Phone 7
        http://bit.ly/wp7day24 #wp7 #wp7dev #31daysofwp7</text>
  <source>
    <a href="http://www.tweetdeck.com" rel="nofollow">
       TweetDeck</a>
  </source>
  <truncated>false</truncated>
  <favorited>false</favorited>
  <in_reply_to_status_id />
  <in_reply_to_user_id />
  <in_reply_to_screen_name />
  <retweet_count />
  <retweeted>false</retweeted>
  <user>
    <id>5688882</id>
    <name>Jeff Blankenburg</name>
    <screen_name>jeffblankenburg</screen_name>
    <location>Columbus, OH</location>
    <description>I'm a passionate technologist, husband, and
                 father in Columbus, OH. I work for a small
                 software company located in Redmond, WA.
                 #wp7 http://blankensoft.com</description>
     <profile_image_url>http://a3.twimg.com/profile_images/396764567/jeffblankenburgheadshot_normal.jpg</profile_image_url>
    <url>http://www.jeffblankenburg.com</url>
    <protected>false</protected>
    <followers_count>1962</followers_count>
    <profile_background_color>131516</profile_background_color>
    <profile_text_color>333333</profile_text_color>
    <profile_link_color>994700</profile_link_color>
    <profile_sidebar_fill_color>cccccc</profile_sidebar_fill_color>
    <profile_sidebar_border_color>999999</profile_sidebar_border_color>
    <friends_count>652</friends_count>
    <created_at>Tue May 01 15:54:53 +0000 2007</created_at>
    <favourites_count>201</favourites_count>
    <utc_offset>-18000</utc_offset>
    <time_zone>Eastern Time (US & Canada)</time_zone>
    <profile_background_image_url>http://s.twimg.com/a/1287010001/images/themes/theme14/bg.gif</profile_background_image_url>
    <profile_background_tile>true</profile_background_tile>
    <profile_use_background_image>true</profile_use_background_image>
    <notifications>false</notifications>
    <geo_enabled>true</geo_enabled>
    <verified>false</verified>
    <following>true</following>
    <statuses_count>5664</statuses_count>
    <lang>en</lang>
    <contributors_enabled>false</contributors_enabled>
    <follow_request_sent>false</follow_request_sent>
    <listed_count>151</listed_count>
    <show_all_inline_media>false</show_all_inline_media>
  </user>
  <geo />
  <coordinates />
  <place />
  <contributors />
</status>

 

El punto es que el contenido no es más que XML. Nada exótico ni particular. La mayoría de los servicios de web suplen XML por lo que, en general, podemos tratarlos de la misma forma.

 

Pasando datos en XML de la Web a nuestra aplicación

Es sumamente simple (3 líneas) obtener un documento XML para nuestra aplicación en el teléfono. Lo que sí hay que tener en mente es que nos toca a nosotros asegurarnos de que el usuario tenga una conexión de datos. La manera fácil es usar Microsoft.Phone.NetworkInformation:

 

if (NetworkInterface.GetIsNetworkAvailable())

 

Dentro del if vamos a crear un objeto WebClient y hacer una llamada asincrónica al URL que cité anteriormente. Primero tengo que crear un controlador para el evento disparado cuando los datos están listos, y luego hacer la llamada. (En mi ejemplo, notarán que obtengo la cuenta de Twitter usando un campo en el que el usuario puede digitar.)

 

 

if (NetworkInterface.GetIsNetworkAvailable())
{
  WebClient twitter = new WebClient();

  twitter.DownloadStringCompleted +=
              twitter_DownloadStringCompleted;
  twitter.DownloadStringAsync(new Uri(
      "http://api.twitter.com/1/statuses/user_timeline.xml?" +
      "screen_name=" +  TwitterNameBox.Text));
}

 

Cuando llegan los resultados, nuestro controlador es llamado y tenemos que hacer algo con ellos. Veamos esa parte ahora.

 

Usando XML en nuestra aplicación

La idea es desplegar en la pantalla la información que recibimos. En varios otros ejemplos he demostrado cómo enlazar un valor a un control en XAML. Por eso no vamos a enfocarnos en ese punto (pero el ejemplo descargable sí demuestra los enlaces)  sino que más bien veamos cómo interpretar los datos usando LINQ.

Para eso necesitamos otro espacio de nombres: System.Xml.Linq. Luego de incluirlo, el proceso es simple. Necesitamos un nuevo XElement que contenga la información.

 

XElement xmlTweets = XElement.Parse(e.Result);

 

Ahora que nuestros datos están en xmlTweets podemos enlazarlos a un ListBox y usar LINQ para crear objetos de tipo TwitterItem al vuelo.

 

TwitterList.ItemsSource =
        from tweet in xmlTweets.Descendants("status")
        select new TwitterItem
        {
          message = tweet.Element("text").Value
        };

 

En el código descargable encontrarán una clase llamada TwitterItem que contiene una propiedad llamada message.

¡Eso es todo! Obtuvimos datos corrientes de una fuente XML  y los procesamos en nuestra aplicación para desplegarlos en una lista. Para ver el ejemplo completo lo pueden descargar abajo.

 

Descargando el código

El ejemplo es un cliente de Twitter completo (aunque no sofisticado). Pueden digitar el nombre de una cuenta y la aplicación obtendrá la información usando la interfase de programación de Twitter para desplegarla en la pantalla.

 

Jeff Blankenburg