Windows 7 Mobile – Criando um cliente SilverLight com a API do Twitter

Este artigo foi baseado no artigo de


Dhananjay Kumar e usa a API do Twitter para criar uma pequena

aplicação SilverLight para Windows Phone
Mobile
no Visual Studio 2010 Express for Windows Phone.

Para reproduzir o
artigo,
você vai precisar do
Visual Studio 2010 Express for Windows Phone instalado no seu
computador.

Veja abaixo como
deverá
ficar a aplicação em funcionamento no emulador do Visual Studio 2010
Express for
Windows Phone:

Nesta aplicação você deve
digitar
o nome de um usuário do Twitter e clicar  no botão Tweets

para obter a relação de tweets postados pelo usuário. Na imagem acima, você vê os todos os tweets

postados para o usuário macorati (você pode rolar a tela usando o
mouse).

Os fundamentos para entender como
conseguimos
realizar essa tarefa você encontra no meu artigo


Twitter – Usando a API do

Twitter

Na verdade, estamos usando a API do
Twitter
para obter uma certa informação de um usuário.

No nosso exemplo usamos a
seguinte
requisição: http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=”

+ txttweet.Text)

A utilização da API é bem simples:

1. O usuário é autenticado

   (existem métodos que não necessitam autenticação);

2. Uma requisição é
   enviada;
3. O retorno é um arquivo
   XML (ou
   outro formato especificado) com os dados da requisição ou mensagem
   de
   erro.

Obs: resumindo, podemos dizer que a API é
REST e
devolve dados no formato XML, JSON, RSS e ATOM.

REST

(Representantion State TransfeR): Atualmente pode ser entendido como um conjunto de regras usadas para descrever uma interface web que utiliza HTTP e XML (JSON,ATOM). Os sistemas que seguem os princípios REST são conhecidos como RESTfull.O padrão REST se baseia nas requisições HTTP: POST , PUT , GET e DELETE.

A documentação completa pode ser acessada aqui, mas, de forma
geral,
todas as requisições enviadas à API do Twitter seguem o seguinte 
formato:

http://[URL]/[Função].[Formato]?[Parâmetros]

onde:

• URL –
  http://twitter.com
• função – nome da função (veja a

  documentação);

• formato – formato do arquivo a
  ser
  retornado (XML, JSON, RSS, ATOM);
• parâmetros – parâmetros
  adicionais; (opcionais).

Nota: Você pode
obter
diversos tutoriais, dicas e truques neste link :
http://www.newwebplatform.com/tips-and-tutorials/Twitter

Vejamos então como
criar o
nosso cliente Twitter para Windows 7 Phone
Mobile…

Criando um projeto
para
Windows 7 Phone Mobile

Abra o
Visual Studio 2010 Express for Windows Mobile
no
menu FIle -> New Project.

A seguir, selecione
o
template SilverLight for Windows Phone -> Windows Phone
Application – Visual
C#, informe o nome mTwitter e clique em OK.

Selecione o
arquivo
MainPage.xaml e no descritor localize a seção :

<!–TitleGrid…-> e altere a propriedade Text
dos controles
TextBlock conforme abaixo:

<!--TitleGrid is the name of the application and page title-->

<Grid x:Name="TitleGrid" Grid.Row="0">

<TextBlock Text="Twitter Mobile" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

<TextBlock Text="Twitter" x:Name="Windows7Twitter" Style="{StaticResource PhoneTextPageTitle2Style}"/>

</Grid>

Na seção <!–ContentGrid

is empty…–> insira o código abaixo:

<!--ContentGrid is empty. Place new content here-->
<Grid x:Name="ContentGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0">
<TextBox x:Name="txttweet" Height="10" Width="325" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="10"
Style="{StaticResource PhoneTextBoxStyle}" />
<Button x:Name="btnTwiiter" Content="Tweets" Height="60" Width="150" Style="{StaticResource PhoneButtonBase}"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Height="Auto" Margin="10,0,0,0" Name="listBox1" Width="476" Style="{StaticResource PhoneListBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding Usuario}" Foreground="#FFC8AB14" FontSize="28" />
<TextBlock Text="{Binding Mensagem}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding CriadoEm}" FontSize="20" Foreground="#FFC8AB14" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="Adaptado por www.macoratti.net" Style="{StaticResource PhoneTextAccentStyle}" Grid.Row="1"/>
</Grid>
</Grid>

Neste código XAML temos :

• Um Controle StackPanel. No interior do StackPanel temos o controle TextBox de
  nome
  txttweet, onde será digitado o nome do usuário. Também  temos o controle Button, de nome Tweets,

  que será clicado para fazer a chamada a API to Twitter;

• Um controle ListBox. Definimos um controle DataTemplate, onde
  estamos usando os recursos de databinding para exibir as
  seguintes
  informações do usuário: Usuario, Mensagem e CriadoEm.

Para dar suporte ao DataBinding,
temos que
criar uma classe que representa os dados de um usuário do Twitter.
Para
isso, no menu Project, selecione Add Class e informe o nome

Twitter.cs como nome do arquivo da classe.

A seguir, defina o seguinte código da classe

Twitter:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace mTwitter
{
public class Twitter
{
public string Usuario { get; set; }
public string Mensagem { get; set; }
public string Imagem { get; set; }
public string CriadoEm { get; set; }
}
}

Agora temos que criar o código no arquivo
code-behind MainPage.xaml.cs para tratar o evento Click do
botão
do emulador (btnTwiitter).

Note que usamos o namespace
System.Xml.Linq no projeto. Para poder ativá-lo, temos que
incluir
uma referência ao projeto, clicando com o botão direito do mouse sobre o
nome do
projeto e selecionando o item Add Reference.

A seguir, na janela Add Reference,
selecione a
referência System.Xml.Linq conforme abaixo:

Em seguida, digite o seguinte código no
arquivo
MainPage.xmal.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;

namespace mTwitter
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
btnTwiiter.Click += new RoutedEventHandler(btnTwiiter_Click);
}

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

void client_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 Twitter
{
Imagem = tweet.Element("user").Element("profile_image_url").Value,
Mensagem = tweet.Element("text").Value,
Usuario = tweet.Element("user").Element("screen_name").Value,
CriadoEm = tweet.Element("created_at").Value
};
Windows7Twitter.Text = txttweet.Text;
}
}
}

No código, ao clicar no botão do projeto no
emulador com o nome do usuário, estamos chamando a API do Twitter com

a seguinte requisição usando serviço REST:

client.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + txttweet.Text));

que irá retornar os tweets postados pelo usuário ao término do
processamento; estamos usando os recursos do LINQ to XML para
obter o
resultado e exibir no controle ListBox.

O resultado final já foi mostrado no início
do
artigo.

Este é mais um artigo com o objetivo de
mostrar como
é fácil desenvolver para Windows 7 Mobile
usando
uma ferramenta gratuita.

Pegue o projeto completo aqui: 
mTwitter.zip

Aguarde mais artigos sobre Windows 7
Mobile…