Márcio Silva

Olá Pessoal,

Nesta primeira parte será mostrado a construção de um plugin/extensão do Mootools para recuperar tweets do twitter desejado. Para o correto funcionamento deste tutorial você deverá baixar a versão 1.2 ou superior do mootools.

Agora, crie um arquivo chamado Twitter.js, é nele que o plugin será desenvolvido. Utilizando o ferramental disponilizado pelo mootools a implementação inicia-se com a definição da classe Twitter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var Twitter = new Class ({
 
	Implements : [Options,Events],
 
	getOptions : function()
	{
		return {
			url :  "http://localhost/twitter.php?user_timeline=", //proxy para carregar os tweets
			refreshTime : 5000, //intervalo de tempo para atualizar os tweets
			user : 'mapsiva', //login do usuário
			count : 2, //quantidade de tweets que devem ser retornados
			container : $('twitterContainer') //elemento HTML que onde os tweets serão listados
		};
	},
 
	initialize: function (options)
	{
		this.setOptions(this.getOptions(), options);
	},

No trecho de código acima apenas definimos a classe Twitter, é informado que será estendido as classes Events e Options do mootools.

O método initialize(), é o construtor da classe Twitter, portanto quando fizermos new Twitter() este método será invocado. Nele apenas são recuperados os opções como parâmetro.
O método getOptions() servirá para retornar as opções configuráveis de nosso plugin.

20
21
22
23
24
25

        getPublicTimeLine : function ()
	{
		var url = this.options.url + this.options.user ;
 
		this._ajax (url);
	},

Por opção própria, adotei todos os métodos “privados” ou internos começados por ‘_’ (anderline). O método getPublicTimeLine() é responsável por requisitar os tweets do usuário configurado.

26
27
28
29
30
31
32
33
34
35
36
37
38

        _ajax : function (_url)
	{
		new Request(
		{ 
			method: 'get', 
			url: _url,
			data: {'count' : this.options.count},
			onRequest: this._onRequest.bind(this), 
			onComplete: this._onComplete.bind(this),
			onFailure: this._onFailure.bind(this)
 
		}).send(); 
	},

O método _ajax() faz uma requição via Ajax para o proxy de tweets configurado, por que não podemos fazer requisições direto ao site do twitter via javascript por razões de segurança. Algumas funcões Handler são informadas.

39
40
41
42
43
44

        _onComplete : function (response)
	{
		var tweets = JSON.decode (response);
 
		tweets.each (this._showTweet.bind(this));
	},

O método _onComplete() será invocado quando a requisição resultar em sucesso, a requisição feita pelo proxy ao Twitter retornará um conjunto de dados no formado JSON, portanto devemos decodifiá-los utilizando a JSON do mootools. Logo após, a função _showTweet() se responsabiliza por mostrar os tweets no HTML.

45
46
47
48

	_onRequest : function (response)
	{
		//TODO
	},

O método _onRequest() é invocado quando a requisição de tweets é iniciada, com ela possível mostrar um gif com um aguarde para o usuário, que posteriormente pode ser removido no método _onComplete().

49
50
51
52

	_onFailure : function (xhr)
	{
		//TODO
	},

O método _onFailure() será invocado quando ocorrer um erro na requisição.

53
54
55
56
57
58
59
60

        _showTweet : function (item, index, array)
	{
		if (!$defined(this.options.container))
			return;
 
		var tweet = new Element ('div').addClass('tweetItem').set('html', item.text).injectInside(this.options.container);
	}
});

Para mostrar um tweet, o método _showTweet() verifica a existência do container onde os tweets serão inseridos. Um elemento DIV é criado com o atributo class setado para tweetItem, dessa forma você poderá construir seu CSS para formatá-lo da forma que desejar.

Twitter.implement(new Options);
Twitter.implement(new Events);

Logo após a definição da classe os objetos da classe Options e Events utilizando o implement do mootools são instanciados.

Para executar a busca de tweets logo após o seu site carregar basta colocar o código ao fim do arquivo Twitter.js ou logo após a inclusão do mesmo na página HTML.

1
2
3
4
5
6

window.addEvent('domready', function()
{
	var twitter = new Twitter();
 
	twitter.getPublicTimeLine ();
});

O proxy PHP chamado twitter.php tem a finalidade de buscar os tweets recebendo a quantidade de tweets a serem buscados e de que usuário eles são. Para realizar essa busca será utilizado a biblioteca CURL do PHP, verifique se seu servidor Web possui esta biblioteca instalada, caso contrário deverá instalá-la.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php	
$ch = curl_init();  
 
if(!isset($_GET["count"]))
	curl_setopt($ch,CURLOPT_URL,"http://twitter.com/statuses/user_timeline/".$_GET["user_timeline"].".json");
else
	curl_setopt($ch,CURLOPT_URL,"http://twitter.com/statuses/user_timeline/".$_GET["user_timeline"].".json?count=".$_GET["count"]);
 
curl_setopt($ch,CURLOPT_GET,1);  
 
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
 
$result = curl_exec ($ch);  
 
curl_close($ch);
 
echo $result;    
 
?>

Um exemplo de utilização deste plugin é mostrado no código HTML abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.: Twitter:.</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Twitter.js"></script>
</head>
 
<body>
<div id="twitterContainer">
 
</div>
</body>
</html>

Pronto, com isso é possível recuperar os tweets de usuários via JS. Na parte 2 iremos definir os métodos que irão ‘parsear’ cada tweet incluindo os links, link para perfils como @mapsiva ou para #topics.

Gostaria de ajudar no desenvolvimento deste plugin? Acesse http://code.google.com/p/mootwitter/ ou mande email para marcio arroba marciosilva ponto net.

Baixe os arquivos fontes deste tutorial.
Twitter Mootools

Um ótimo artigo de  Aaron Newton of Clientcide e traduzido por Fabio Zendhi Nagao onde você tem uma boa visão de dois dos Frameworks de Javascript mais populares, ele é bom guia para você se decidir entre um ou outro. Leia o artigo completo no link abaixo.

http://imasters.uol.com.br/artigo/12943