Web ve Mobil uygulamalar için JSON kullanımı

12 Kasım 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It


Günümüz web ve mobil teknolojilerinde farklı ortamlarda veri alış verişi için sıklıkla kullanılan JSON’un, bu ortamlarda nasıl kullanıldığına bir göz atalım.

JSON Nedir?

Kelime olarak “JavaScript Object Notation/JavaScript Nesne Gösterimi” nin kısaltılmış halidir. Programlama dilinden bağımsız olarak kullanabileceğiniz bir veri değişim formatı olarak tanımlayabiliriz. Bir ortamdan farklı bir ortama veri aktarmayı planlıyorsanız, aklınıza gelecek ilk seçeneklerden biri JSON olmalı. Zira bugün mobil uygulamaların önemli bir bölümünde JSON kullanılıyor.

XML’e ne oldu? Neden XML değil de JSON?

Uzun yıllar web ve mobil teknolojilerde XML formatı kullanıldı ve halen de kullanılmaya devam ediyor. Peki JSON neden XML’e göre bir tercih sebebi oldu? Şimdi bu sorunun cevaplarına bir göz atalım..

En önemli sebeplerden biri hiç şüphesiz boyut farkı. XML’in kullandığı etiketleme sistemi JSON’da bulunmadığından dolayı aynı veriye sahip XML ve JSON dosyaları arasında önemli bir boyut farklı oluşuyor.

Tabiki daha kolay okunma, daha az tekrar! JSON, C temelli dillerin yazım şekline sahip olduğundan dolayı C, C#, Java, JavaScript vb.. dilleri ile haşır neşir olanlar için okunması ve öğrenmesi oldukça kolay ve basittir. Bunun yanında etiket isimlerini kendiniz belirliyor olsanız da XML’in kendine has bir yazım şekli olup, buna uymak zorundasınız. Bunların dışında pek çok teknik farklılık sayılabilir ama şimdiye kadar bahsettiğimiz iki farklılık bile JSON tercihi için yeterli sebepler. Hele ki mobil uygulama geliştiriyorsanız!

Bu arada yazı içerisinde XML’e yüklendik ama hakkını da verelim. XML’in aktif olarak kullanılmaya başladığı dönemde aynen bugün JSON’un yaptığı etkiyi hatta odan bile fazla yaparak geliştiricilerin dünyasına girdi. Neticede JSON, aslında XML’in problemlerine daha kolay çözümler getirmek maksadı ile üzere üretildi.

Şimdi gelin iş konuşalım!

Javascript ile bir nesne oluştururken kullandığımız yazım şekillerinden birinin aşağıdaki gibi olduğunu hatırlayalım.

var nesnem = {};

Bu nesne yapımızı JSON yazım şekli ile oluşturalım.

var nesnem = { "ad" : "Egemen" };

Bu yazım şekli ile artık elimde “nesnem” isminde bir JSON nesnesine sahibim. İçerisinde de key/value şeklinde kullanılmış bir “ad” tanımlaması ve bu tanıma ait “Egemen” isimli bir değere sahibim.

Peki bu değeri nasıl elde edeceğim?

İşlemimiz gayet basit. “ad” anahtarıyla tanımladığımız alan “nesnem” in bir özelliği gibi davranır. Bu sebeple “ad” içerisindeki değeri elde etmek istediğimizde bunu şu şekilde kullanabiliriz.

var nesnem = { "ad" : "Egemen" };
alert(nesnem.ad);

 

Şimdi verilerimizi biraz daha arttıralım..

JSON ile birlikte Number, String, Boolean, Array, Object ve null veri tiplerini kullanabilirsiniz. Bu veri tipleri kullanmak için JSON nesnemizin içeriğini aşağıdaki gibi değiştirelim.

var nesnem = {
    "ad"        : "Egemen",
    "soyad"     : "Mede",
    "meslek"    : "Yazılım",
    "yil"       : 2013,
    "calisma"   : true,
    "online"    : null,
    "diller"    : [
        {"dil": "İngilizce", "seviye": "orta"},
        {"dil": "İspanyolca", "seviye": "zayıf"},
        {"dil": "Fransızca", "seviye": "mükemmel"}
    ],
    "favoriler": {
        "renk": "Mavi",
        "spor": "Futbol"
    }
};

console.log("ad: " + nesnem.ad);
console.log("soyad: " + nesnem.ad);
console.log("meslek: " + nesnem.soyad);
console.log("yil: " + nesnem.yil);
console.log("calisma: " + nesnem.calisma);
console.log("online: " + nesnem.online);
console.log("diller: " + nesnem.diller);
console.log("favoriler: " + nesnem.favoriler);

Dikkat edeceğiniz üzere “diller” kısmındaki çıktımız aşağıdaki gibi oluştu.

diller: [object Object],[object Object],[object Object]

Yani verimizi alamadık. Çünkü bu alan bir Array/Dizi tipinde olduğu halde biz onu normal bir değer gibi elde etmeye çalıştık. Bu şekilde bize bir Array nesnesi döndüğü için içerisindeki değerleri de elde edememiş olduk. O halde bu hatamızı düzeltmek için yazım şeklimizi aşağıdaki gibi değiştirelim.

console.log("diller: " + nesnem.diller[0].dil);

Bu yazım şekli ile -“nesnem” altındaki “diller” dizisinin “0”. elemanına ait “dil” değerini getir- demiş olduk.

Aynı durumu “favoriler” kısmı için de yaşıyoruz.

favoriler: [object Object]

Fakat yazım şeklinden de anlayabileceğimiz gibi bu bir dizi değil, nesne. Bu sebeple bir değişiklikte buradaki yazım şekli için yapmak gerekiyor. O halde bu hatamızı düzeltmek için yazım şeklimizi aşağıdaki gibi değiştirelim.

console.log("renk: " + nesnem.favoriler.renk);
console.log("spor: " + nesnem.favoriler.spor);

Son değişikliklerimizden sonra artık ekran görüntümüz aşağıdaki gibi oluşacaktır.

Daha da fazla kayıt!..

Örneğimizdeki JSON datasının içeriğine aşağıdaki gibi bir kayıt daha ekleyelim. Dikkat edecek olursak artık kayıtlarımızı “personel” anahtarı altında topladık ve bunu bir Array objesi olarak kullandık.

var nesnem = {
    "personel": [
    {
        "ad"        : "Egemen",
        "soyad"     : "Mede",
        "meslek"    : "Yazılım",
        "yil"       : 2013,
        "calisma"   : true,
        "online"    : null,
        "diller"    : [
            {"dil": "İngilizce", "seviye": "orta"},
            {"dil": "İspanyolca", "seviye": "zayıf"},
            {"dil": "Fransızca", "seviye": "mükemmel"}
        ],
        "favoriler": {
            "renk": "Mavi",
            "spor": "Futbol"
        }
    },
    {
        "ad"        : "Zeynep",
        "soyad"     : "Mede",
        "meslek"    : "Öğrenci",
        "yil"       : 2012,
        "calisma"   : false,
        "online"    : null,
        "diller"    : [
            {"dil": "İngilizce", "seviye": "orta"},
            {"dil": "Almanca", "seviye": "harika"}
        ],
        "favoriler": {
            "renk": "Pembe",
            "spor": "Basketbol"
        }
    }
    ]
};

console.log("ad: " + nesnem.personel[0].ad);
console.log("soyad: " + nesnem.personel[0].soyad);
console.log("meslek: " + nesnem.personel[0].meslek);
console.log("yil: " + nesnem.personel[0].yil);
console.log("calisma: " + nesnem.personel[0].calisma);
console.log("online: " + nesnem.personel[0].online);
console.log("diller: " + nesnem.personel[0].diller[0].dil);
console.log("diller: " + nesnem.personel[0].favoriler.renk);
console.log("diller: " + nesnem.personel[0].favoriler.spor);

Yeni örneğimize göre kodumuzun okuma şeklinde de aşağıdaki gibi değişiklik yapalım. “personel” anahtarını bir Array nesnesi gibi tanımladığımızı belirtmiştik. Dolayısı ile yeni yazım şeklimizde aynen bir önceki örneğimizde “diller” bölümünde olduğu gibi değiştirdik.

console.log("ad: " + nesnem.personel[0].ad);
console.log("soyad: " + nesnem.personel[0].soyad);
console.log("meslek: " + nesnem.personel[0].meslek);
console.log("yil: " + nesnem.personel[0].yil);
console.log("calisma: " + nesnem.personel[0].calisma);
console.log("online: " + nesnem.personel[0].online);
console.log("diller: " + nesnem.personel[0].diller[0].dil);
console.log("diller: " + nesnem.personel[0].favoriler.renk);
console.log("diller: " + nesnem.personel[0].favoriler.spor);

Aşağıdaki göründüğü gibi çıktımızda hiç bir değişiklik olmadan çalıştı.

Çok daha fazla kayıt!..

Örneğimizde yalnıca 2 personel kaydımız bulunuyordu ve bunlara erişmek için dizi indislerini “0 ya da 1” olarak belirterek alabiliyorduk. Peki yüzlerce kaydın bulunduğu bir JSON verisini nasıl alacağız? Bunun için de döngülerden faydalanacağız. Şimdi aynı JSON verisini kullanarak veri aldığımız yazım şeklimizi aşağıdaki gibi düzenleyelim.

var ekranaBas="<ul>";
for (var i in nesnem.personel) {
ekranaBas+="<li>" + nesnem.personel[i].ad + "-" + nesnem.personel[i].soyad + "-" +
nesnem.personel[i].meslek+ "-" + nesnem.personel[i].yil + "-" + "-" + nesnem.personel[i].calisma + "-" +
nesnem.personel[i].online+ "-" + nesnem.personel[i].diller[0].dil +"-"+ nesnem.personel[i].favoriler.renk + "-" + nesnem.personel[i].favoriler.spor +
"</li>";
}
ekranaBas+="</ul>";

document.getElementById("goster").innerHTML = ekranaBas;

Buna göre ekran çıktımızda aşağıdaki gibi oluşacaktır.

Houston, bir sorunumuz var!

Bir sorunumuz var dedik çünkü “diller” anahtarını her kayıt için yalnızca ilk dili yazdırdık. Oysa her kaydın altındaki diller tekrar listelenmeliydi. Aynı zamanda buraya kadar yalnızca ilk kaydımıza ait olan bilgileri yazdırmış olduk. Şimdi tüm kayıtlarımıza ait bilgileri görüntüleyebilmek için kodumuzu tekrar düzenleyelim.

var ekranaBas="<ul>";
for (var i in nesnem.personel) {
    ekranaBas+="<li>" + nesnem.personel[i].ad + "-" + nesnem.personel[i].soyad + "-" +
    nesnem.personel[i].meslek+ "-" + nesnem.personel[i].yil + "-" + "-" + nesnem.personel[i].calisma + "-" +
    nesnem.personel[i].online+ "-" + nesnem.personel[i].favoriler.renk + "-" + nesnem.personel[i].favoriler.spor + "</li>";

    var ekranaDilBas="<ul>";
    for (var j in nesnem.personel[i].diller) {
        ekranaDilBas+="<li>" + nesnem.personel[i].diller[j].dil + "</li>";
    }
    ekranaDilBas+="</ul>";
    ekranaBas += ekranaDilBas;
}
ekranaBas+="</ul>";

document.getElementById("goster").innerHTML = ekranaBas;

Buna göre son durum aşağıdaki gibi olacaktır.

Yazı içerisindeki örnekleri buradan indirebilirsiniz.

Bir sonraki yazıda görüşmek üzere..

KAYNAKLAR
http://json.org
http://www.jsonexample.com
http://www.tutorialspoint.com/json/
http://www.jsontest.com

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. Mehmet
    12 Kasım 2013 - 00:12

    Merhabalar,

    Anlatımın sadece giriş kısmındaki JSON & XML kıyaslamasını okudum, anlatım için teşekkür ederim. (Şimdilik sadece bu kısmıyla ilgileniyorum, zamanım olduğunda hepsini okuyacağım.)

    Ben Mobil uygulamalar için serviste JSON veri kullanıyorum. Fakat değişken isimlerini örnek olarak UserHomeAddress gibi uzun ve anlaşılır şekilde tanımlıyorum. Sizce bu yanlış bir kullanım mı olur yoksa performansa etkisi bile olmayacak düzeyde önemsiz midir ?

    • :DeliPenguen
      12 Kasım 2013 - 00:48

      Merhaba Mehmet,

      Değişken isimlerini anlaşılır yapmak önemli. Ancak bunu yaparken de çok uzun olmamasını mümkün olduğunca dikkat edersen daha iyi olur. Zira artık pek çok mobil cihaz oldukça güçlü olsa da mobil internet hızı halen çok iyi değil.

  2. 12 Kasım 2013 - 15:50

    gerçekten başarılı bir şekilde akıcı olarak anlatılmış okuyarak zevk aldığuımı belirtirim.

    • :DeliPenguen
      12 Kasım 2013 - 16:27

      Çok teşekkürler Yakup, umarım faydalı olmuştur.

  3. shumel
    17 Şubat 2014 - 08:54

    Teşekkürler eline emeğine sağlık. Çok faydalı oldu, yazı hiç sıkmadan baştan sona kendini okutturuyor.

    • :DeliPenguen
      17 Şubat 2014 - 09:00

      Çok teşekkürler shumel.