Enviando Tweets desde Windows Phone 7

En los últimos días he estado jugando con aplicaciones para Windows Phone 7. Leyendo una serie de blogs, en los que se interactuaban con Twitter desde Windows Phone 7, me animé a desarrollar una sencillísima aplicación que te permitiera la creación y envió de un nuevo Tweet desde el el mencionado dispositivo.

image

Comenzaremos instalando las herramientas de desarrollo de Windows Phone, también nos ayudará Expressión Blend 4  para diseñar nuestra aplicación. Como ya habréis podido leer en un artículo anterior, Expressión Blend4  necesita una serie de complementos para diseñar aplicaciones en Windows Phone 7. Por otro lado es necesario que cuentes con una cuenta de Twitter para poder publicar un Tweet en tu perfil.

Ahora que ya tenemos el instrumental necesario, vamos a empezar a desarrollar la aplicación. Abrimos Visual Studio 2010, nos situamos en la sección Silverlight para Windows Phone y elegimos la plantilla Aplicación de Windows Phone.

 

image

Como podemos observar, si estamos habituados a trabajar con Silverlight, la disposición tanto de la interfaz de usuario como el código Behid es exactamente igual. La interfaz de usuario de la aplicaciónque nos ocupa, constará de una cabecera con el título e imagen de la aplicación. Un control  TextBlock que nos indicará los caracteres que vamos introduciendo en un nuevo TextBlock (como es lógico un máximo de 140), este será el Tweet que se enviará a tu cuenta de Twitter.Como últimos elementos añadiremos un botón para el envío del Tweet y un TextBlock  que avisará al usuario del envío del Tweet. El resultado visual es el siguiente:

image

Para conseguir dicha interfaz de usuario debemos abrir el archivo Mainpage.xaml e introducir el siguiente código:

 

Interfaz Usuario
  1. <navigation:PhoneApplicationPage
  2.     x:Class="EnviarTweet.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:navigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     SupportedOrientations="Portrait"
  9.     mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
  10.  
  11.     <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}">
  12.         <Grid.RowDefinitions>
  13.             <RowDefinition Height="170"/>
  14.             <RowDefinition Height="*"/>
  15.         </Grid.RowDefinitions>
  16.  
  17.         <!–This is the name of the application and page title–>
  18.         <Grid Grid.Row="0" x:Name="TitleGrid">
  19.             <TextBlock x:Name="ApplicationName" Style="{StaticResource PhoneTextPageTitle1Style}" Margin="210,6,-202,18" FontSize="32" FontFamily="Arial Black"><Run Text="Actualizar "/><LineBreak/><Run Text="el estado"/><Run Text=" "/><Run Text="del"/><LineBreak/><Run Text="Usuario"/></TextBlock>
  20.             <Image x:Name="ImgTweet" Margin="22,10,0,6" Source="Imagenes/tweet.png" Stretch="Fill" HorizontalAlignment="Left" Width="158"/>
  21.         </Grid>
  22.  
  23.         <!–This section is empty. Place new content here Grid.Row="1"–>
  24.         <Grid Grid.Row="1" x:Name="ContentGrid">
  25.             <TextBlock x:Name="Caracteres" Height="34" Margin="108,8,102,0" TextWrapping="Wrap" FontFamily="Arial Black" FontSize="18.667" Foreground="White" Text="Te quedan 140 Caracteres" VerticalAlignment="Top" d:LayoutOverrides="Width"/>
  26.             <TextBox x:Name="Entrada" Margin="22,42,28,208" TextWrapping="Wrap" Foreground="#FF1BA1E2" Background="White" FontFamily="Arial Black" FontSize="21.333" TextChanged="Entrada_TextChanged" KeyDown="Entrada_KeyDown" MaxLength="140" />
  27.             <Button Content="ACTUALIZAR" Height="83" Margin="108,0,102,121" VerticalAlignment="Bottom" Click="Button_Click" Name="Actualizar" IsEnabled="True" />
  28.             <TextBlock Height="131" Margin="169,0,124,0" TextWrapping="Wrap" VerticalAlignment="Bottom" FontFamily="Arial Black" FontSize="24" Foreground="Red" Name="Envio" Visibility="Collapsed" Text="El Tweet fue actualizado exitosamente" HorizontalAlignment="Center" Width="187" />
  29.             
  30.         </Grid>
  31.     </Grid>
  32. </navigation:PhoneApplicationPage>

A continuación vamos a lanzar el evento del Botón Actualizar.Para ello, hacemos doble clic sobre el mismo creándose el controlador del mismo en el código Behind de la aplicación(MainPage.xaml.cs). Dicho evento, llama a un método que se encarga de acceder la URI de publicación del estado de un usuario a través de la API de Twitter,  además le pasamos los credenciales de tu cuenta de Twitter para autorizar dicha publicación, como podemos ver en el siguiente fragmento de código:

Evento click
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             ActualizarEstado();
  4.         }
  5.         void ActualizarEstado()
  6.         {
  7.             HttpWebRequest req = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml?status=" + Entrada.Text);//uri para publicar entrada
  8.             req.Method = "POST";//método de la API Twitter para publicar Nuevo Tweet
  9.             req.Credentials = new NetworkCredential("Usuario", "contraseña");//credenciales
  10.             req.ContentType = "application/x-www-form-urlencoded";
  11.             req.BeginGetResponse(new AsyncCallback(GetResponseCallback), req);//Llamada asincrona para realizar las correspondientes acciones
  12.         }

Como hemos podido observar la ultima instrucción realiza la llamada al método GetResponseCallback de forma asincrona, debido a que la API de Twitter se basa en REST, Silverlight realiza sus acciones de forma asincrona.

Llamada asincrona
  1. void GetResponseCallback(IAsyncResult asynchronousResult)
  2.         {
  3.  
  4.             HttpWebRequest request = (HttpWebRequest)asynchronousResult.AsyncState;
  5.             HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(asynchronousResult);
  6.             response.Close();
  7.             Dispatcher.BeginInvoke(() => Entrada.Text = "");//Limpia el Texblock al enviar Tweet
  8.             Dispatcher.BeginInvoke(() => Envio.Visibility = Visibility.Visible);//Visibiliza que el Tweet a sido enviado
  9.             Dispatcher.BeginInvoke(() => Envio.Text = "El Tweet fue actualizado exitosamente");//Rellena el control con el mensaje deseado
  10.         }

Se completa la llamada asincrona y mientras realizamos esta acción,para realizar el cambio de propiedades de elementos de la interfaz de usuario debemos utilizar el método Dispatcher.BeginInvoke().

El siguiente paso es limitar el número máximo de caracteres que el usuario puede introducir en el control TextBlock. Para ello seleccionamos dicho objeto y cambiamos la propiedad  MaxLength a el valor 140.

image

También vamos a controlar el número de caracteres que va introduciendo el usuario, a fin de aportarle información sobre el estado de su nuevo Tweet. Seleccionamos el objetos TextBlock, donde introduce el usuario el nuevo Tweet y lanzamos el evento TextChanged añadiendo el siguiente código al mismo:

TextChanged
  1. private void Entrada_TextChanged(object sender, TextChangedEventArgs e)
  2.       {
  3.           if (Entrada.Text.Length != 0)
  4.           {
  5.               Envio.Text = "";
  6.           }
  7.  
  8.           Caracteres.Text = "Te quedan " + (140 – Entrada.Text.Length).ToString() + " caracteres";
  9.  
  10.       }

Por último vamos a darle al usuario la posibilidad de publicar el nuevo Tweet cuando este presione Intro, para agilizar dicha acción. Seleccionando el mismo objeto Texblock que antes, le agregamos el evento KeyDown, de este modo controlaremos que el usuario presione la citada tecla del teclado y publique el Tweet, como podemos observar a continuación:

KeyDown
  1. private void Entrada_KeyDown(object sender, KeyEventArgs e)
  2.       {
  3.           if (e.Key == Key.Enter)
  4.           {
  5.  
  6.               ActualizarEstado();
  7.  
  8.           }
  9.       }

Ya tenemos nuestra sencilla aplicación, aprovechando la versatilidad que nos otorgan las diferentes herramientas mencionadas. Ahora queda de mano de tu creatividad, que le des un diseño más dinámico a la funcionalidad que proporciona el API de Twitter.

image

image

2 comentarios en “Enviando Tweets desde Windows Phone 7”

  1. Podrias ayudarme con un error me marca que no encuentra el servidor remoto en el

    (HttpWebResponse)request.EndGetResponse(asynchronousResult);

    Todo lo demas esta funcionando lo mando a llamar desde un panorama y cuando kiero hacer el tweet me marca el error

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *