Há poucos dias me deparei com uma situação que ainda não havia encontrado: um cliente pediu que o site dele possuísse um pequeno painel exibindo os últimos tweets da conta de sua empresa. Saí então a “caça” de materiais que pudessem me auxiliar no processo de construção desse pequeno aplicativo.
Este artigo (que na verdade tem mais um jeito de tutorial) tem como objetivo apresentar o processo de construção de um pequeno leitor de tweets para ser apresentado em um Web User Control em seu website com ASP.NET e C#. Bom, mãos à obra!
Criando o projeto
Abra o Visual Studio 2010. Vá em File > New > Project. Na janela que se abre, selecione a opção Web à esquerda. A direita, nas opções que se apresentam, selecione “ASP.NET Empty Web Application“. Abaixo, selecione a pasta onde deseja salvar o projeto e especifique um nome para o mesmo. A Figura 1 apresenta este processo.
Figura 1: Janela de criação de um novo projeto no Visual Studio 2010
Bom, criado nosso projeto, o primeiro passo consiste definir o local de nossa página onde iremos apresentar/exibir nossos tweets. Para este exemplo, criarei uma estrutura de página de 3 colunas, um cabeçalho e um rodapé, conforme apresenta a Figura 2.
Figura 2: Modelo de página utilizado no exemplo
Construindo o layout de exemplo
Definida a estrutura e o local onde iremos exibir nossos tweets, vamos agora a implementação desta estrutura.
Para criar a estrutura apresentada na Figura 2, iremos utilizar dois recursos que todo web developer precisa dominar: HTML e CSS. Se você não domina estes conceitos, aconselho o estudo dos mesmos antes de prosseguir com a leitura deste artigo. Sobre HTML uma boa leitura pode ser encontrada no site do ICMC/USP (http://www.icmc.usp.br/ensino/material/html/). Sobre CSS uma boa leitura pode ser encontrada no Maujor (http://maujor.com/).
Para que possamos criar a estrutura com o HTML correspondente a Figura 2, vá a Solution Explorer do projeto que criamos, clique com o botão direito sobre o Projeto (no exemplo MeusTweets). No menu que se abre clique em Add… e em seguida New Item…. Em seguida selecione a opção Web Form, nomeie o arquivo conforme sua vontade e pressione Add. A Figura 3 apresenta este processo graficamente.
Figura 3: Adicionando um novo Web Form ao projeto
Com a página ASP.NET adicionada, vamos então a construção da estrutura apresentada na Figura 2. A Listagem 1 apresenta o HTML correspondente a estrutura apresentada.
Listagem 1: HTML básico da estrutura apresentada na Figura 2
Não entrarei em detalhes sobre o código da Listagem 1 por se tratar de algo bastante simples e, além disso, os próprios comentários inseridos no fonte já indicam a utilização de cada div.
Muito embora nossa estrutura já esteja criada (HTML definido), precisamos agora configurar esses elementos definidos no HTML de forma que eles fiquem dispostos conforme apresenta a Figura 2. Para isso, utilizaremos a pseudo-linguagem CSS. A Listagem 2 apresenta o CSS que configura os elementos definidos na Listagem 1.
body
{
margin:50px;
background-color:White;
font-family:"Lucida Sans Unicode", Arial;
}
#Geral
{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Cabecalho
{
width:100%;
height:200px;
font-size:130%;
color:Black;
font-weight:bold;
text-align:center;
line-height:200px;
border:1px solid #000;
}
#CorpoGeral
{
width:100%;
height: 400px;
}
#Menu
{
width:200px;
float:left;
height:400px;
line-height:400px;
font-size:130%;
color:Black;
font-weight:bold;
border:1px solid #000;
text-align:center;
}
#Conteudo
{
width:500px;
height:400px;
text-align:center;
line-height:400px;
float:left;
font-size:130%;
color:Black;
font-weight:bold;
border:1px solid #000;
}
#Tweets
{
width:294px;
height:400px;
float:right;
text-align:left;
border:1px solid #000;
}
#Rodape
{
width:100%;
height:100px;
text-align:center;
line-height:100px;
font-size:130%;
color:Black;
font-weight:bold;
border:1px solid #000;
}
Listagem 2: CSS para configurar os elementos HTML do Layout
Evidentemente que este código CSS apresentado na Listagem 2 está inserido em nosso projeto em um arquivo a parte com a extensão .css. Para adicionar um arquivo CSS ao projeto, basta proceder da mesma forma à apresentada na Figura 2, com a diferença de que deve ser escolhido na última janela um arquivo StyleSheet.
O resultado da integração entre a Listagem 1 e a Listagem 2 pode ser visto na Figura 4:
Figura 4: Resultado da aplicação do CSS sobre o HTML
A Fugura 4 apresenta o resultado da aplicação do CSS sobre o HTML. Vale notar que apenas uma parte da estrutura está sem qualquer tipo de informação dentro dela. Esta parte é a coluna da direita. Esta coluna está sem texto em suas dependências propositalmente pois, é esta região que irá exibir os tweets.
Lendo os Tweets com C# e ASP.NET
Após definirmos a estrutura da página onde apresentaremos os tweets, precisamos agora implementar os processos internos que farão a leitura e a exibição dos mesmos. Utilizaremos linguagem C# e os controles do ASP.NET para efetuar a exibição dos tweets.
Vá a Solution Explorer, clique no símbolo [ > ] a frente do arquivo no qual a estrutura HTML foi criada. Na sublista que se abre, dê um duplo clique no arquivo com a extensão .aspx.cs.
Neste arquivo iremos implementar toda a lógica da aplicação. Deixe este arquivo aberto e volte a página com a estensão .aspx.
O que vamos fazer agora é inserir a estrutura responsável por exibir os tweets que iremos ler. Para executar esta tarefa, vamos utilizar uma tabela de 2 linhas e 1 coluna e, dentro de uma destas linhas, vamos adicionar outra tabela de 1 por duas colunas. O passo seguinte, consiste em repetir a linha que contém esta subtabela por intermédio de um repeater (em um artigo futuro, vamos falar especificamente deste componente).
A Listagem 3 apresenta a div responsável pelos tweets com o código das tabelas respectivas.
| Meus tweets | ||
|
Listagem 3: Tabela responsável por exibir os tweets
Voltamos agora ao arquivo com a extensão .aspx.cs. Vamos criar dois métodos: GetTweet() e DateTime(). Basicamente o que o método GetTweet fará é, como o próprio nome já diz, ler os tweets do arquivo XML gerado pelo twitter do usuário e retornar uma string que é o tweet formatado. Já o método DateTime retorna uma string com a Data e Hora do tweet. As Listagens 4 e 5 apresentam a implementação destes métodos:
public string GetTweets(string tweets)
{
string newStr = null;
tweets = tweets.Replace("&", "&");
tweets = tweets.Replace("<", "<");
tweets = tweets.Replace(">", ">");
tweets = tweets.Replace(""", "");
int count = tweets.Length;
newStr = tweets.Substring(15, count - 15);
int i = newStr.IndexOf("http://bit");
if (i != -1)
{
string firstPart = newStr.Substring(0, i);
int newStrLen = newStr.Length;
int firstPartLen = firstPart.Length;
int endPartlen = newStrLen - firstPartLen;
string strUrl = newStr.Substring(i, endPartlen);
strUrl = "" + strUrl + "";
newStr = firstPart + strUrl;
return newStr;
}
else
{
return newStr;
}
}
Listagem 4: Implementação do método GetTweets
public string DateTime(string dateTime)
{
int i = dateTime.IndexOf("+0000");
return dateTime.Substring(0, i - 1);
}
Listagem 5: Implementação do método DateTime
Não entrarei em detalhes de implementação dos métodos pois ambos são extremamente simples e este não é o foco do artigo. Volte a página com a extensão .aspx e, na linha que desejamos exibir os tweets adicione o componente Repeater do ASP.NET. A Listagem 6 apresenta o fonte da tabela com o Repeater adicionado.
| Meus tweets | ||
|
Listagem 6: Adicionando o Repeater a tabela de exibição dos dados
Muito bem, nossa tabela já está pronta para exibir os tweets. Basta agora chamarmos os métodos GetTweets e DateTime, no método Page_Load de nossa página .aspx.cs carregar o RSS do usuário que queremos exibir os tweets e exibir essas informações no HTML. Para isso, voltemos a página com a extensão .aspx.cs e no método Page_Load, implementamos o código apresentado na Listagem 7:
XmlDocument twitter = new XmlDocument();
twitter.Load(@"http://twitter.com/statuses/user_timeline/83414064.rss");
XmlNodeList twitterNodes = twitter.SelectNodes("/rss/channel/item");
for (int i = 0; i <= 5; i++)
{
RepeaterTwitter.DataSource = twitterNodes;
RepeaterTwitter.DataBind();
}
Listagem 6: Carregando o RSS do Twitter do usuário em questão
Basicamente o que o código da Listagem 7 faz é: carregar o RSS do usuário e fornecer estes dados como fonte para o Repeater, que neste exemplo, chamamos de RepeaterTwitter. O que precisamos fazer agora é finalmente exibir as informações na tabela criada para este propósito. Para isso, voltemos então à página com a extensão .aspx e exibamos as informações. O código final de exibição dos dados pode ser visto na Listagem 8.
| Meus tweets | ||
|
Listagem 7: Tabela que exibirá os tweets configurada com todos os parâmetros
O que é importante notar na Listagem 7 são as linhas 23, 24 e 25 onde os métodos GetTweets e DateTime executam um Bind dos dados nas células da subtabela. Como este bloco está dentro do Repeater todos os tweets que se encontram dentro do intervalo especificado pelo for na (Listagem 6) serão exibidos. O resultado final do processo pode ser visto na Figura 5:
Figura 5: Exibindo os tweets no local adequado
Bom pessoal, por enquanto é só. Espero ter contribuído com este pequeno tutorial. Por favor, deixe seu feedback com respeito a este artigo/tutorial para que eu possa cada vez mais melhorar a qualidade dos assuntos e dos textos. 😉
Você pode baixar o projeto utilizado nesta página clicando AQUI.
Facebook
Twitter
Instagram
LinkedIn
RSS