Usando la API de Twitter en una Aplicacion Windows Phone 7 (WP7) con C#

Hola amigos, después de ya bastante tiempo sin escribir aquí en el blog hoy les traemos una aplicación bastante interesante y que está relacionada con el auge que hoy en día están teniendo los dispositivos móviles.

En esta sencilla aplicación lo único que haremos sera ingresar el nombre de alguna cuenta de Twitter (Que no esté protegida) y le solicitaremos los últimos tweets de esa cuenta directamente a la API de Twitter. Para realizar este ejemplo debemos tener instalado “VS2010 For Windows Phone” y crearemos un proyecto de tipo “Aplicación de Windows Phone”

Primero que nada es necesario construir la interfaz que en nuestro caso es la siguiente:

<phone:PhoneApplicationPage
    x:Class="Ejercicio_Twitter.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot es la cuadrícula raíz donde se coloca todo el contenido de la página-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contiene el nombre de la aplicación y el título de la página-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F&amp;A Software Dev." Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="TweePhone 7" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" TextAlignment="Center" />
        </StackPanel>

        <!--ContentPanel. Colocar aquí el contenido adicional-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox Height="72" Margin="6,23,6,0" Name="txtTweet" Text="" VerticalAlignment="Top" />
            <Button Content="Traer Tweets!" Height="72" HorizontalAlignment="Left" Margin="112,95,0,0" Name="btnTwitter" VerticalAlignment="Top" Width="230" Click="btnTwitter_Click_1" />

            <ListBox HorizontalAlignment="Right" Margin="0,179,6,18" Name="listBox1" Width="438">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Height="132">
                            <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,9,0" />
                            <StackPanel Width="370">
                                <TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
                                <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

    <!--Código de ejemplo que muestra el uso de ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Botón 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Botón 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Elemento de menú 1"/>
                <shell:ApplicationBarMenuItem Text="Elemento de menú 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

Los datos que nos devuelva la API de Twitter los vamos a depositar en una ListBox, es por eso que entre las etiquetas DataTemplate de la ListBox hemos declarado tres diferentes Bindings los cuales programaremos mas adelante.

Lo siguiente que debemos hacer es agregar las referencias e importar las librerías necesarias para consultar los datos que nos devolverá la API de Twiter. Dichas librerías son las siguientes:

using System.Xml.Linq;

Para organizar y gestionar mejor los datos recibidos es necesario crear una clase la cual nombraremos TwitterItem. Es importante que los nombres de las propiedades que asignemos en esta clase sean idénticos a los Bindings que especificamos en el código XAML.

public class TwitterItem
    {

        public string UserName
        {
            get;
            set;
        }

        public string Message
        {
            get;
            set;
        }

        public string ImageSource
        {
            get;
            set;
        }
    }

Ahora es el momento de programar la parte interesante ya que será la encargada de hacer la petición a la API y por medio de LINQ consultará y depositará los datos en la ListBox

private void btnTwitter_Click_1(object sender, RoutedEventArgs e)
        {
            WebClient twitter = new WebClient();
            twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
            twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + txtTweet.Text));
        }

public void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                return;
            }
            XElement xmlTweets = XElement.Parse(e.Result);
            listBox1.ItemsSource = from tweet in xmlTweets.Descendants("status") select new TwitterItem
                                       {
                                           ImageSource = tweet.Element("user").Element("profile_image_url").Value,
                                           Message = tweet.Element("text").Value,
                                           UserName = tweet.Element("user").Element("screen_name").Value
                                       };
        }

Una vez realizado todo lo anterior debemos ser capaces de acceder a los Tweets de ciertas cuentas de Twitter desde nuestro teléfono Windows Phone. Esperamos que este ejemplo les haya servido y si tienen alguna duda estamos para ayudar.

Si quieren descargar la solución de VS2010 del ejemplo anterior la pueden encontrar aquí:
http://www.mediafire.com/?dv7x7itfpzqty51

3 comentarios en “Usando la API de Twitter en una Aplicacion Windows Phone 7 (WP7) con C#

  1. hola como puedo guardar el nombre de usuario , contenido del tweet como favoritos a una base de datos… ya lo guarde pero al momento de eliminar un favorito me dice que SQL Server does not handle comparison of NText, Text, Xml, or Image data types.

  2. Hola! como hago para q cargue el twitter de una vez cuando inicie la app? claro colocando el usuario como string directamente en el codigo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s