Eyl.26

HTML5 API’leri ile Çalışmak – Ders 13 : IndexedDB API ve Dexie.JS – PART 1

İsmine bakıldığında pek de anlaşılmayan yeni bir veritabanı sistemidir. Yine tarayıcı üzerinde çalışmaktadır. Bir önceki konumuzda WebSQL’i işlerken normal bir MySQL veritabanında nasıl çalışıyorsak aynı şekilde SQL sorgularını kullanarak verilerimizi yönettik. Ancak, WebSQL de bazı durumlarda yavaş kalabiliyor ve bir takım güvenlik sorunları da oluşturabiliyor (Gerçi kullanıcı tarafındaki verileri zaten korumanız mümkün değil). Özellikle verileri okuma konusunda hız ihtiyacından dolayı WebSQL’in yerine JSON tabanlı çalışan ve NoSQL (yani SQL sorguları olmadan) verileri yönetebilmemizi sağlayan yeni bir veri yönetim sistemi geliştirilmiştir. JSON’da key-value mantığı kullanılarak veriler kaydedilebilir, okunabilir, silinebilir ve güncellenebilir (CRUD).

IndexedDB’nin kullanımı biraz karmaşık olduğunu düşünen geliştiriciler tarafından Dexie.js isimli bir kütüphane geliştirilmiştir. Bu kütüphane ile IndexedDB daha rahat bir şekilde yönetilebiliyor. Alternatif olarak DB.js, YDN, IDB Wrapper, JQuery IndexedDB Plugin kütüphaneleri de bulunmaktadır. Biz IndexedDB’yi Dexie.js ile nasıl kullanacağımıza bakacağız.

Dexie.js

İlk olarak basitçe bir Dexie.js ile IndexedDB pratiği yapalım ve sonrasında da asıl uygulama örneğimize geçelim…

<!doctype html>
<html>
  <head>
      <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
      <script>
          var veritabani = new Dexie("indexedveritabani_pratik");
          veritabani.version(1). stores({
              kisiler: 'isim,yas'
          });
          // Veri kaydediliyor.
          veritabani.kisiler.put({isim: "Uğur GELİŞKEN", yas: 35}).then (function(){
              // Veri kaydedildikten sonra okunuyor
             return veritabani.kisiler.get('Uğur GELİŞKEN');
          }).then(function (kisiler) {
              // Sonuç konsolda gösteriliyor
              console.log("Seçilen kişinin ismi " + kisiler.isim + " ve yaşı :" + kisiler.yas);
          }).catch(function(hata) {
             // Eğer bir hata olursa bu blokta işleyebiliriz.
             console.log("Hata oldu: " + hata);
          });
      </script>
  </head>
</html> 

Yaptıklarımızı inceleyelim…

İlk olarak Dexie.js kütüphanesini projeye ekledik. Sonrasında ilk işimiz bir veritabanı oluşturmak oldu.

var veritabani = new Dexie("indexedveritabani_pratik");

veritabani isminde yeni bir Dexie nesnesi tanımlayıp, veritabanı ismini indexedveritabani_pratik olarak girdik. Bu isimde veritabanımız oluşturuldu. Eğer zaten varsa da oluşturulmadan direkt olarak bağlantı kuruldu. Ardından veritabanında key’leri tanımlıyoruz. Bu key’ler, tablolarda sütunlar gibi de düşünülebilir.

veritabani.version(1). stores({
      kisiler: 'isim,yas'
});

Öncelikle veritabanı versiyonu .version(1) ile tanımlanıyor. Şu an version 2 de bulunmaktadır. Sonrasında da Dexie’nin stores() metodu ile key’leri tanımlıyoruz. Key’ler birer Objet olarak tanımlanıyor. Objede kisiler adında bir tablo açarak isim ve yas key’leri tanımlanıyor. Burada farklı alanlar da tanımlayabilirsiniz.

Son olarak veritabanına yeni bir kayıt ekliyoruz. Kayıt eklerken kullanacağımız yapı aşağıdaki gibidir.

veritabani_ismi.tablo_ismi.put().then(function(){          
}).then(function (kisiler) {
}).catch(function(hata) {
});

Yapıya bakıldığında ilk olarak veritabanının ismi, sonra tablo ismi ve Dexie’nin put() metodu kullanılıyor. put() metodu, Object olarak eklemek istediğiniz verileri key-value olarak alır ( {isim: “Uğur GELİŞKEN”, yas: 35} ). İlk .then metodu parametre olarak fonksiyon alıyor ve kayıt işlemi başarılı olduğunda yapılacak işlemleri tanımlıyor. İkinci .then ise birinci blokta yapılan işlemlerden sonra çalışıyor, parametre olarak tablo ismini alıyor. Catch ise bir bir hata olması durumunda çalışıyor, parametre olarak da hata bilgisi fonksiyon içindeki hata değişkeni ile geliyor. Şimdi bizim kodlarımıza bakalım…

veritabani.kisiler.put({isim: "Uğur GELİŞKEN", yas: 35}).then (function(){
          // Veri kaydedildikten sonra okunuyor
             return veritabani.kisiler.get('Uğur GELİŞKEN');
          }).then(function (kisiler) {
              // Sonuç konsolda gösteriliyor
              console.log("Seçilen kişinin ismi " + kisiler.isim + " ve yaşı :" + kisiler.yas);
          }).catch(function(hata) {
             // Eğer bir hata olursa bu blokta işleyebiliriz.
             console.log("Hata oldu: " + hata);
          });
}

Kodlarımızda put() metodu ile bir string ve bir de number değeri yazdırılıyor. String olan tırnak işaretleriyle, number olan da tırnaksız yazdırılıyor. Kayıt başarılı olunca ilk fonksiyona giriyor ve return ile bir işlem yaptırıyoruz. Burada istersek herhangi bir işlem yaptırmadan direkt olarak kayıt başarılı gibi bir mesaj da yazdırabiliriz. Örneğimizde return olarak bir işlem yapılıyor. Bu işlemde Dexie’nin get() metodu kullanılarak “Uğur GELİŞKEN” isimli değerin olduğu kayıt grubu getirilsin diyoruz. Bu da çalışınca sonraki fonksiyona kisiler tablo ismi parametresi ile giriliyor. O fonksiyon içinde de kisiler.isim ve kisiler.yas ile değerler okunarak bir mesaj içerisinde gösteriliyor.

Google Chrome’dan da sayfayı Inspect edip Application sekmesine geldiğimizde, sol tarafta IndexedDB grubu içinde veritabanımızı, tablomuzu ve girilen JSON kaydını görebiliriz.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum