Yalnızca JQuery Kullanarak Twitter İşlemek!

jsonregexp

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.

json&xml

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.

json

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.
JSON Twitter Sonucu

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/

  • http://yedincisenol.com yedincisenol

    Güzel yazı, lakin ben çözemedim meseleyi :) tavsiye edeceğin bir javascript kitabı (Türkçe) var mı?

  • http://www.bitlimakina.com bitlimakina

    JavaScript konusunda bildiğim bir kitap yok. Ben genellik CheatSheet lere bakarım. Keşke anlamadığın yeri yazsaydın.

  • http://www.eburhan.com eburhan

    JSON’ı tanıtmak ve onun jQuery ile birlikte nasıl işlenebileceğini göstermek açısından güzel bir yazı olmuş. Teşekkürler.

  • http://siteniz.org siteniz

    oldukça faydalı bir makale olmuş teşekkürler

  • CeRBeR

    Güzel açıklayıcı bir yazı olmuş teşekkür ederim

  • http://www.scriptype.tr.gg Scriptype

    benim gibi javascriptle dünyalar yapabileceği günlerin hayalini kuran biri için yol açıcı oldu

  • http://cihanokyay.wordpress.com cihann

    jquery ve json kullanımı açısından güzel bir örnek. elinize sağlık…

    • http://www.bitlimakina.com bitlimakina

      Teşekkürler :)

  • http://www.doatasarim.com doatas

    denemek için indirmiştim ama h**p://twitter.com/status/user_timeline/doatasarim.json?count=5&callback=? yazdığım zaman kullanici adı şifre soruyo sorun nerdedir acaba.

    • http://www.bitlimakina.com bitlimakina

      doatas verdiğin link tarayıcıya yazdığında çalışmaz geriye json dönüren bir bağlantıdır, anlatımda bahsettiğim şekilde kullanmalısın. http://tiny.cc/rhRma adresini kullanarak yazdığın linki deneyerek sonuçlara bakabilirsin. Kolay gelsin.

  • http://www.doatasarim.com doatas

    yok zaten tarayıcıya yazdığımı demiyorum indirdiğim dosyada sizin twitter hesabınız yerine kendiminkini yazınca bu hatayı alıyorum acaba twitterda bi ayarmı yapmamız lazım 1-2 arkadaşımın profili yazdım onda çalışıyodu. kullanıcı adi ve şifre girince çalışıyo ondan sordum

    • http://www.bitlimakina.com bitlimakina

      doatas twitter hesabın protected olduğu için bu sorunu yaşıyor olmalısın :)

  • Tufan Tunç

    Güzel ve açıklayıcı bir yazı olmuş, çok işime yaradı teşekkürler.

  • http://www.arla2010.com akıllı ev sistemleri

    tşkler

  • http://www.serhantanitim.com Logo Tasarım

    Güzel açıklayıcı bir yazı olmuş teşekkür ederim