Web 2.0 teknolojilerinin hayatımıza girdiği günlerden beri web sitelerinin birbiri ile etkileşimleri artmakta, Web 2.0 felsefesi gereği facebook, friendfeed, digg, twitter gibi araçlardan verileri paylaşmak, bir araya getirmek çok revaçta, kendi sitelerine facebook, vimeo, twitter, digg gibi birçok Web 2.0 platformunda yayınladıklarını ekleyen birçok blog yazarı var. Bu anlamda twitter, friendfeed, bizim blogçularımız arasında en çok kullanılanlar sanırım. Ancak bu tür uygulamalar yazmak isteyen kodcular genelde PHP, JavaScript, RegExp, Asp, JSON, Ajax gibi birçok yapı hakkında bilgi sahibi olması gerekliği olduğu düşüncesiyle bu işi hazır kodlara bırakıyor, ben bugün yalnızca JQuery, JavaScript kullanarak Twitter etkinliklerimizi bloğumuza nasıl ekleriz ondan bahsetmek istiyorum. Bu yazı temelde Twitter uygulaması gibi gözükse de JSON verilerini okumayı, biçimlendirmeyi içeriyor. Hadi çok uzattım artık yazayım;

JSON Mantığını Anlamak!

AJAX uygulamalarında JSON JavaScriptler tarafından daha kolay okunabilen veri kaynakları olduğu için sıklıkla XML’ye tercih edilirler. Nispeten daha yalın bir görünüm sunduğu içinde anlaşılması gayet kolaydır. JSON hakkında daha fazla bilgi için http://www.json.org/json-tr.html adresine bakabilirsin.

Twitter bize XML ve JSON formatlarında veri kaynakları sunuyor. Bütün bu Twitter Api kaynaklarına buradan göz atabilirsin. Genellikle XML içerik bilgisi sunulmuş olsa da http://tiny.cc/rhRma bağlantısını kullanarak sonuçları JSON olarak görebilirsin. Şimdilik burada bir ara verelim.

JQuery Kullanarak JSON verilerini Okumak!

JQuery’nin zengin kütüphanesi içinde JSON biçimli verileri okumak için özel ve güzel bir fonksiyonumuz var.  JQuery.getJSON() bu fonksiyonu kullanarak AJAX işlemlerine hiç bulaşmadan JSON verilerini okuyabiliyoruz.

JQuery.getJSON(URL,[data],callback) şeklinde tanımlanan fonksiyonumuz ile URL parametresi olarak verilen sorgu sonucu geri dönen JSON verisini alıyoruz ve sonrasında bize bu verileri işlemek kalıyor.

Kullanımı:

$(document).ready(function(){
	var url = "http://twitter.com/status/user_timeline/bitlimakina.json?count=1&callback=?";
	$.getJSON(url, function(data){
		$.each(data, function(i,results){
			$("#icerik”).html(results.text);
 		});
  	});
});

Şimdi yukarıdaki kullanımdan kısaca bahsedelim;

URL kısmı; Bu sorgu sonucunda twitter.com’dan geriye bitlimakina kullanıcısına ait son durum bilgileri (ben twitter da ne paylaşmışsam o işte) JSON formatında geri gelecek. Gelen veriler function(data) içindeki data’ya aktarılmış olacak sonuçta. Data değişkeni bir array(dizi) dir. Daha sonra bir bu dizinin elemanları içinde $.each fonksiyonunu kullanarak geziniyoruz ve her elemanı da results diye bir değişkene kaydediyoruz ki içindeki verileri işleyebilelim.url değişkeninde verilen stringi http://tiny.cc/rhRma adresinde incelersen ne demek istediğimi daha iyi anlamış olacaksın. ?count=1 kısmı son twitter paylaşımımı ifade ediyor. 2-3-5, kaç tane istiyorsan buraya yazabilirsin.

URL de verdiğimiz sorgu sonucunu şimdi buraya yazalım.

Ben user sekmesine tıklamadım. Orada da bir sürü veri var aslında. Amacımız son twitimi almak bunun içinde $(“#icerik”).html(results.text); satırını kullanıyorum. Bu arada söylemeden geçmeyelim HTML sayfamda bir <div id=”icerik”></div> katmanı oluşturmuştum. Sonuç olarak HTML sayfamda bitlimakina kullanıcısının son twiti gözükmüş oldu.
Tek başına JQuery kullanarak JSON verilerini okumak bu kadar basit. Şimdi işleri biraz zorlaştıralım.
Önce sonuca bakalım.

Sonucu online olarak incelersen göreceksin ki linkler dahil her şey bir text ve linkler çalışmıyor. Şimdi bu sorunu çözmek için ihtiyacımız olan şey “Regular Expression” (düzenli ifadeler). Yazının başında demiştik ki her şey JavaScript ile olacak o zaman JavaScript kullanarak RegExp nasıl yaparız ona bakalım.

JavaScript ve RegExp Kavramlarını Harmanlamak!

RegExp işlemlerini gerçekleştirmek için aslında abarttığım kadar karmaşık bir şey yapmayacağız çünkü JavaScript bize her türlü imkanı vermiş. Biraz abartmazsak tadı çıkmaz dimi. JavaScript de metin içinde regexp kuralımıza uyan kısmı yenisi ile değiştirmek için replace () fonksiyonu kullanılıyor. Bundan da önce nasıl bir şeye ihtiyacımız var ona bakalım. Biz Twitter dan  verileri aldık öyleyse bu veri içindeki url leri düzenleyecek bir fonksiyona ihtiyacım var. Şöyle olsun;

function urldondur(metin){
//düzenli ifade tanımı yapayım,
//metin içinde bulayım,
//yerine <a href=”link”>link</a> yazayım
}

O zaman JQuery için yazalım;

var urldon = function(metin){
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/g
var result = metin.replace(regexp, function(url){
return '<a href='+url+'>'+url+'</a>';
});
return result;
}

Yukarıda yazdığım var regexp tanımını anlamamış olabilirsin, Bunun için birçok araç var. Unutmadan yukarıdaki regexp ifadesini de ben yazmadım.  Google söyledi…  Kullandığım programı buradan indirebilir veya buradan buradan online kullanabilirsin.
Son Not; Eğer JSON içersinde user sekmesi içinden bir veri almak istersen results.text satırını results.user.neyseo olarak değiştirmen yeterli.
Şimdi Son uygulamanın kodlarını verelim.
Head tagları arasına

body tagları arasına bunu yazalım;

İstersen hiç yazma indir.
Yukarıda verdiğim kodlamanın yorumunu sizlere bırakıyorum. Kıymetli yorumlarını okumaktan keyif alacağım!

Kaynaklar:

RegExp : http://bit.ly/tsPhv
RegExp : http://bit.ly/J7R18
JSON : http://www.json.org/json-tr.html
Twitter Api : http://apiwiki.twitter.com/Twitter-API-Documentation
Free RegExp App: http://www.gskinner.com/RegExr/desktop/