Plugin Twitter para o Mootools – Parte 1

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:

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.

        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.

        _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.

        _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.

	_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().

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

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

        _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.

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.

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

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

Leia também:

• Layout com 100% de altura
• E se o legendas.tv fosse assim?
• Rap do Webdesign
• jQuery vs MooTools
• Acessando uma função Javascript de um iframe