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

Expression Blend 4 & Windows Phone 7

Realizando una serie de aplicaciones de Windows Phone 7 con Visual Studio 2010, sentí la necesidad de otorgarles un toque más dinámico. Como ya había trabajado con Expressión Blend en Silverlight y WPF, seguí la misma senda para diseñar y desarrollar aplicaciones Windows Phone 7 de forma sencilla y rápida. Para un uso correcto de ambas herramientas deberás instalar los siguientes complementos en el orden que menciono a continuación:

  1.  Microsoft Expression Blend 4 RC
  2. Herramientas de desarrollo de Windows Phone 7(SDK)
  3. SDK de Expression Blend 4 para Windows Phone 7
  4. Add-in de Windows Phone 7 para Expression Blend 4

Una vez tengamos instalado el software dispondremos de las plantillas de Windows Phone 7 y toda la capacidad de diseño de esta excelente herramienta.

image

image

Nota:Aunque la versión final de Expression Blend 4 ha sido lanzada, el SDK de Windows Phone 7 funciona de forma correcta solo en la versión RC.

Silverlight+Excel 2010+Power Pivot= Análisis dinámico de datos

Power Pivot es un complemento que nos permite realizar el análisis de datos a través de Excel 2010, tomando como fuentes de datos un blog,un servidor, una base de datos, un sitio web público, otro libro de Excel… cualquier origen que pueda establecer una conexión remota.

Esta capacidad que otorga Power Pivot para poder trabajar con gran volumen de datos, es posible gracias al aprovechamiento de  las capacidades multi core de los nuevos equipos y toda la memoria RAM instalada en el sistema, sobre todo cuando contamos con equipos que corren versiones de 64 bits del sistema operativo Windows.

Una vez que hemos explicado que es Power Pivot, vamos a centrarnos en la utilización de este complemento tomando como fuente de datos una aplicación Silverlight 4. Para ello, tendremos que tener creada una aplicación de Silverlight 4 ,en el que utilicemos R.I.A. Services, como hemos podido el artículo que publicado con anterioridad. También deberemos tener instalado Excel 2010 y el complemento Power Pivot para dicha plataforma.

Una vez establecidos los requisitos vamos a meternos en materia.Vamos a utilizar el protocolo OData, para que los usuarios puedan tener acceso a los datos contenidos en la aplicación Silverlight y así poder analizarlos de forma sencilla y dinámica.  Para poder usar el protocolo lo podemos hacer de dos formas, la primera es, cuando añadimos un nuevo servicio de dominio, al establecer las directrices de los servicios R.I.A de Silverlight. En este caso debemos marcar la casilla de Expose OData EndPoint como podemos ver en la siguiente imagen:

image

De esta forma ya podríamos importar a Excel 2010  los datos de nuestra aplicación Silverlight.

El segundo caso es cuando ya tenemos creado el servicio de dominio, en este caso simplemente debemos acceder al archivo Web.config de nuestra aplicación Silverlight. En la sección <system.serviceModel> añadimos el siguiente fragmento de código:

  1. <domainServices>
  2.  
  3.       <endpoints>
  4.         <add name=«OData« type=«System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35« />
  5.  
  6.       </endpoints>
  7.  
  8.     </domainServices>

 

De esta forma estamos permitiendo el acceso a las diferentes entidades contenidas en el servicio de dominio (NorthwindDomainService en mi caso). Seguidamente vamos asignamos las entidades del servicio de domino que queremos que tengan acceso los usuarios. Para ello nos situamos en el servicio de dominio (NorthwindDomainService.cs). Como queremos tener acceso a las entidades City,Customers, Employees y Orders que están contenidas en la más que conocida base de datos Northwind. Para ello precediendo a los métodos de las entidades nombradas con anterioridad debemos introducir la siguiente sentencia de código:

[Query(IsDefault = true)]

 

 

 

 

image

El paso siguiente es comprobar que tenemos acceso a los métodos nombrados con anterioridad. Para ello incluimos en el navegador la siguiente URL: http://Nombre_del_Servidor/Nombre_de_la_Aplicación-Web-Nombre_del_servicio_de_dominio.svc/OData/, en  mi caso esta es la url que utilizo para acceder a las distintas entidades del proyecto(http://localhost:52063/SilverlightBusinessApplication-Web-NorthwindDomainService.svc/OData/). Siendo el resultado el de la siguiente imagen:

image

Cómo podemos observar los datos devueltos del servidor son en formato XML, para que estos datos sean legibles por el usuario vamos abrir Excel 2010 y el complemento Power Pivot. En un nuevo libro de Excel 2010 acedemos a la pestaña Power Pivot, después presionamos en la sección Ventana de Power Pivot

image

Al realizar dicha acción emergerá una nueva ventana, que nos permitirá elegir la fuente de datos. Elegimos Fuentes de datos Externos image

image

La siguiente ventana que nos es presentada, nos pedirá la url o ubicación de la fuente de datos. Debemos introducir la url que hemos utilizado con anterioridad para interactuar con las diferentes entidades de la fuente de datos(http://Nombre_del_Servidor/Nombre_de_la_Aplicación-Web-Nombre_del_servicio_de_dominio.svc/OData/)

image 
En la siguiente ventana aparecen las diferentes entidades. Como podemos observar podemos seleccionar aquellas que creamos oportunas. En mi caso elegiré todas las entidades.

 

 

 

 

 

 

image

por otro lado también tenemos la posibilidad de editar los nombres por los que vamos a reconocer las diferentes entidades.

image

Por otro lado tenemos la posibilidad de vista previa y de filtrado.

image

 

 

Deseleccionamos los diferentes campos que creamos oportunos, presionamos Aceptar y Finalizar.

Como podemos observar se cargan las diferentes tablas, con sus respectivas filas:

image

Al presionar Cerrar, vemos como los datos son adquiridos, separando cada una de las tablas en una hoja.
De este modo podemos además de Importar Datos de nuestra aplicación presentarlos de una forma más dinámica y legible al usuario. 
Nos situamos en la hoja Pedidos y accedemos a la sección PivotTable y elegimos la opción Gráfico y tabla Horizontal.
image 
Seguidamente elegimos los campos que queremos que aparezcan en la tabla, para este apartado elegimos Freight en la entidad Pedidos y CityName en la entidad Ciudad.
Por último presionamos sobre crear y los datos serán importados en la tabla.
image 
Repetimos exactamente los mismos pasos en el gráfico y el resultado final es el siguiente:

image

 

 

 

En resumen , los usuarios pueden tener en todo momento acceso a los datos de la aplicación Silverlight, de una manera rápida y dinámica. Consiguiendo con ello, un mayor control de los datos, para realizar una gestión eficiente de las acciones llevadas a cabo en su empresa.. También podemos tener Business Intelligence, conectando Power Pivot con SharePoint 2010 o SQL Server 2010 siendo la actualización de datos en tiempo real, consiguiendo con ello una plena integración de las herramientas ofimáticas con las plataformas nombradas con anterioridad.