JSON serimizin ilk iki bölümünde, JSON'lar nedir, ne işe yarar, nasıl işlenir gibi konulara değinerek, basit JSON API uygulamaları tasarlamıştık. Bu bölümümüzde, önceki tasarladığımız uygulamalardan biraz daha karışık yapıda olan, İngilizce - Türkçe sözlük uygulaması tasarlayacağız. Elbetteki verilerimiz JSON formatında API hizmeti veren bir siteden gelecek.

JSON'larla ilgili önceki bölümlere bu linklerden ulaşabilirsiniz. Bölüm 1 Bölüm 2

Tasarlayacağımız İngilizce - Türkçe sözlük için çevir.com sitesinin API'sinden yararlanacağız. Bu uygulamanın daha önce tasarladığımız uygulamalardan farkı, göndereceğimiz sorgu kullanıcının istekleri doğrultusunda oluşturulacak. İlk olarak linke tıklayıp API sayfasını incelediyseniz, sorgumuzun nasıl oluşturulması gerektiği gayet basit bir şekilde açıklanmış. Sorguda dikkat etmemiz gereken tek şey q= ve l= değişkenlerini kullanıcının tercihine göre oluşturmak. Bunun için HTML yapısında dil seçimi için bir "select" elemanı, aranacak kelimelerin yazılması için bir "input" elemanı ve sonuçları göstermek için bir liste elemanına ihtiyacımız var. Dil seçimi ile uğraşmak istemezseniz q=all seçeneğini kullanabilirsiniz. Daha kesin sonuçlar için biz bu seçimi kullanıcıya bırakalım.

<select name="" id="sozluk-dil-secimi">
<option value="tr">Türkçe</option>
<option value="en">İngilizce</option>
</select>
<input type="search" name="" id="arama-alani"  placeholder="Kelime yazınız" />
<div id="sonuclar"></div>

Elemanlar için CSS stil yapılarımızı oluşturalım.

#sozluk-dil-secimi, #arama-alani{
	padding: 15px;
	display: inline-block;
	padding: 10px;
	border:1px solid #ccc;
}

#sozluk-dil-secimi{width: 100px;}

#sonuclar>ul{
	background:#fff;
	list-style: none;
}

#sonuclar>ul>li{
	border:1px solid #ccc;
	padding: 10px;
	line-height: 25px;
}

#sonuclar>ul>li>span{color:red;}

Son olarak JQuery ile AJAX metodumuzu yazalım ve sorgumuzu göndererek, gelen cevabı işleyelim. Bunu yapabilmek için öncelikle nasıl bir cevabın geldiğini görmemiz gerekiyor. Buradan gelen cevabı ve tanımlı değişkenleri görbilirsiniz. AJAX yöntemindeki "success" fonksiyonunu, cevaptaki değişkenlere ve cevabın yapısına göre oluşturacağız.

function veri_al(){
	if ($("#arama-alani").val()!=""){
		$("#sonuclar").html('<ul><li>Yükleniyor...</li></ul>');
		var ara = encodeURI($("#arama-alani").val());
		var liste='',i=0;
		$.ajax({
			url:"http://cevir.ws/v1?q="+ara+"&m=25&p=exact&l="+$("#sozluk-dil-secimi").val(),
			dataType:"json",
			type:"get",
			success:function(veri){
				if (veri.control.results!=0){
					$.each(veri.word,function(){
						liste+='<li><span>'+veri.word[i].title+'</span> : '+veri.word[i].desc+'</li>';
						i++;
					});
					$("#sonuclar").html('<ul>'+liste+'</ul>');
				}else{
					$("#sonuclar").html('<ul><li>Sonuç Yok...</li></ul>');
				}
			},
			error:function(){
				$("#sonuclar").html('<ul><li>Bağlantı Hatası...</li></ul>');
			}
		});
	}else{
		$("#sonuclar").html('<ul><li>Aramak istediğiniz kelimeyi yazınız...</li></ul>');
	}
}

$("#arama-alani").on("keyup",function(e){
	if (e.keyCode == 13){
		veri_al();
	}
});

Kodlarımızı açıklamaya başlayım. İlk olarak yapının çok karışık olmaması için veri_al isimli bir fonsiyon oluşturduk. Fonksiyonumuz ilk olarak arama yapılan alanı kontrol ediyor. Eğer fonksiyon çalıştığında arama alanı boş ise kullanıcıya bunu bildiriyoruz. Aksi takdirde sorguda göndereceğimiz q= değeri boş olacağından, gelen cevap, sorgunun hatalı olduğunu söyleyecektir. Fonksiyon çalıştığında arama alanına bir şeyler yazılmışsa, ilk olarak "sonuclar" katmanında yükleniyor yazısını kullanıcıya gösteriyoruz. Daha sonra arama alanına yazılan bilgileri alıp URL formatına dönüştürüyoruz. Arama alanına yazılan bilgiler sorguda gönderileceğinden boşluk veya Türkçe karakterler gibi link yapısına uymayan elemanları "encodeURI()" fonksiyonu ile uygun formata dönüştürüyoruz. "success" fonksiyonunda kullanacağımız değişkenleri de (liste ve i değişkenleri) tanımladıktan sonra AJAX metodumuz çalışmaya hazır. AJAX metodunda sorgumuzu göndereceğimiz adresi yazıyoruz. Burada kullanıcının aramak istediği kelimeler ve sözlük seçimi sorguya ekleniyor. Cevap almada bir sorun oluşmuşsa, "error" fonksiyonuna yazdığımız komutlar çalışıyor ve kullanıcıya "bağlantı hatası" şeklinde bir uyarı gösteriyoruz. Herşey yolunda gitmiş ve bir cevap gelmişse "success" fonksiyonu çalışıyor. Burada sonuçlarımızı derleyip, uygun şekilde kullanıcıya gösteriyoruz. Daha önce de dediğim gibi, gönderdiğimiz sorgunun cevabı bizim için önemli. Daha önce bahsettiğim örnek cevabı incelediyseniz, gelen cevapta iki önemli değişkeni "success" fonksiyonunda kullanacağız. Bunlardan ilki "result" değişkeni diğeri ise "word" dizisi. "result" değişkeni, kaç sonucun bulunduğunu gösteriyor. Eğer "result" değeri sıfır ise hiçbir sonuç bulunmamış anlamına gelir ve bu durumda kullanıcıya "sonuç yok" diye bir uyarı gösteriyoruz. Eğer bu değer sıfırdan farklı ise, sonuçlar "word" dizisinin içinde "desc" değişkenine atanmış durumda bize iletiliyor. "each" döngüsü ile "word" dizisinin sayısı kadar döngü oluşturuyoruz. Böylece bütün sonuçları elde ediyoruz. Elde ettiğimiz sonuçları daha önce tanımladığımız "liste" isimli değişkene HTML kodları oluşturarak ekliyoruz. Döngü bittiğinde bütün sonuçlar "sonuclar" isimli katmana ekleniyor ve kullanıcıya gösteriliyor.

Son olarak HTML yapısına baktığımızda bir butonumuz yok. Kullanıcı aramak istediği kelimeleri yazıp "enter" tuşuna basınca aramanın gerçekleşmesini istiyorum. O yüzden arama alını için "keyup" fonksiyonu oluşturduk (enter tuşunun kodu 13'tür). Kullanıcı enter tuşuna basarsa veri_al isimli fonksiyonumuz çalışıyor. Örnek uygulamamızı aşağıda inceleyebilrisiniz. Bu arada böyle bir hizmeti bizlere sunduğu için çevir.com sitesine de teşekkür etmek isterim.

JSON'larla ilgili sonraki bölümde anlık arama motoru örneği tasarlayacağız.

Sonraki bölüme buradan ulaşabilirsiniz.