Windows 7 Mobile - Usando a API do Twitter

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 ao lado 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 esta tarefa você encontrar 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 estamos usando a seguinte requisição:
http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + txttweet.Text)

A utilização da API é bem simples:

O usuário é autenticado; (existem métodos que não necessitam autenticação)
Uma requisição é enviada;
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 no link: http://apiwiki.twitter.com/Twitter-API-Documentation mas de forma geral todas as requisições envidas a 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# e 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:

</Grid>

Na seção  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;
- Ainda no StackPanel 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 com é 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...

Referências:

José Carlos Macoratti

Twitter - Usando a API do Twitter

WPF - Usando um DataTemplate

SilverLight - Primeira Aplicação Windows 7 Mobile