Selamlar bu yazıda size PouchDB ile Tarayıcı Tabanlı Veri Tabanı hakkında bilgiler vereceğim. Bir öncedeki yazıda Elasticsearch hakkında karalamalarım olmuştu. Bu yazı diğer veri tabanlarından farklı bir konsepti anlatıyor olacak.
PouchDB ile Tarayıcı Tabanlı Veri Tabanı
PouchDB, Apache CouchDB’den esinlenerek tarayıcıda iyi çalışacak şekilde tasarlanmış açık kaynaklı bir JavaScript veritabanıdır. Bu veri tabanı ayrıca Apache CouchDB ile senkronize olabilme özelliğine de sahip. Bu anlamda bir avantaja sahip.
Bu veri tabanının yaratılma hedefi web developerlar için online ve offline bir sistem tasarlamaya yardımcı olmakmış. Buna en basit örnek devasa bir form verisinin post edilmesini gösterilebilir. İnternet bağlantısı gittiğinde bu veriler karşı taraya gitmeyecektir ya da CouchDB sunucusunun o an erişilebilir olmayışı da bir başka örnektir. Tabi siz verilerin bir şekilde gönderilebilir olmasını istiyorsunuz.
İnternet bağlantısı geldiği anda ulaştırılmamış olan tüm veriler CouchDB sunucusu ile senkronize edilir. En basit durumda şöyle bir senaryonuz olabilir:
window.addEventListener('online', () => {
// burada gerçek senkronizasyon
});
window.addEventListener('offline', () => {
// burada internet bağlantısı yokken
});
Kısa bir açıklamadan sonra nasıl kurulur gibi bilgilere bakalım.
PouchDB Nasıl Kurulur?
Birçok yöntem var. JavaScript veri tabanı olduğunu söylediğimize göre tarayıcı üzerinde çalışması gerektiğinin bilincindeyiz. Tarayıcı tarafında script etiketleri arasında sisteme dahil edelim:
<script src="https://unpkg.com/[email protected]/dist/pouchdb.min.js"></script>
Diğer yöntem ise yarn ya da npm kullanmak. Normalde tüm denemelerimi yarn ile yapsam da bu anlatımda resmi siteye bağlı kalıp npm üzerinden kurulumu gerçekleştireceğim. PouchDB’nin npm üzerinden kurulumu şöyle yapılmakta:
npm install pouchdb
Yukarıdaki yöntemde direkt tarayıcıya dahil edildiği için ekstra bir şey yapmak zorunda değiliz ama bu yöntemde işlemleri yapacağımız JavaScript dosyasına require ile çağırmalıyız.
const PouchDB = require('pouchdb')['default'];
Bu saf haliyle PouchDB bir JavaScript nesnesi. Yani erişilebilirliği anahtar – değer durumunda. Versiyon bilgisini şöyle alabiliriz:
console.log(PouchDB['default'].version);
Temel kurulum bilgisine de aldığımıza göre veri tabanı oluşturalım
PouchDB Veri Tabanı Oluşturma
Bu aşamada ben articles adında bir veri tabanı oluşturacağım. Siz kendinize ait farklı isimler verebilirsiniz.
const PouchDB = require('pouchdb')['default'];
const db = new PouchDB('articles');
Eğer uzak sunucuda bulunan bir veri tabanına bağlanacaksanız da şöyle yapmalısınız:
const db = new PouchDB('http://site.com/DB_ADI');
Daha spesifik olarak ajax ile çalışan şöyle bir örnek verelim:
const db = new PouchDB('http://site.com/DB_ADI', {
ajax: {
cache: false,
timeout: 10000,
headers: {
},
},
auth: {
username: 'KULLANII_ADI',
password: 'PAROLA'
}
});
PouchDB ile Veri Tabanına Veri Ekleme
Veri tabanımız oluştuğuna göre ilk eklememizi yapabiliriz:
const btn = document.querySelector(".addArticle");
btn.addEventListener('click', () => {
const ArticleModel = {
_id: 'pouchdb-makalesi',
title: 'PouchDB Çok İyi Sen de Gelsene',
content: 'Bu yazıda size PouchDB hakkında bilgi sunacağım',
category: 'JavaScript',
author: 'Ali GOREN'
}
db.put(ArticleModel).then(resp => {
console.log(resp)
}).catch(err => {
})
})
Bana dönen sonuç şöyle oldu:
{
id: "pouchdb-makalesi",
ok: true,
rev: "1-74534c18d66b432699f6a66d3febfafe"
}
Ben burada id olayını başlıktan alınan slug olarak düşündüm. Verinin eklenip eklenmediği konusunda bilgi ok ile kontrol edilebilir.
PouchDB ile Veri Tabanında Veri Güncelleme
Yukarıdaki ekleme örneğinden dönen değerde revision bilgisi yer almakta. Bu bilgiyi baz alarak herhangi bir veriyi güncelleyebiliriz. Şöyle bir örnek vereyim:
const btnUpdate = document.querySelector(".updateArticle");
btnUpdate.addEventListener('click', () => {
const ArticleModel = {
_id: 'pouchdb-makalesi',
_rev: {},
title: 'PouchDB Çok İyi Sen de Gelsene Güncellendi',
content: 'Güncelledim: Bu yazıda size PouchDB hakkında bilgi sunacağım',
category: 'JavaScript, SQL',
author: 'Ali GOREN'
}
db.get('pouchdb-makalesi').then(doc => {
ArticleModel._rev = doc._rev;
return db.put(ArticleModel)
}).then(resp => {
console.log(resp);
}).catch(err => {
})
})
PouchDB ile Veri Tabanından Veri Getirme
Şimdi ID’sini bildiğimiz bir içerik var elimizde. Bu veriyi getirme işlemini şöyle yapabiliriz:
const fetchSingleArticle = document.querySelector(".fetchSingleArticle");
fetchSingleArticle.addEventListener('click', () => {
db.get('pouchdb-makalesi').then(doc => {
console.log(doc)
})
})
Bunun dışında eklenen tüm verileri satırlar halinde şöyle getirebiliyorsunuz:
db.allDocs({
include_docs: true,
descending: true
}).then(doc => {
console.log(doc.rows)
}).catch(err => {
})
PouchDB ile Veri Tabanından Veri Silme
Bu aşama yazımızın en son aşaması olacak. Bu kısımda veri tabanından eklediğimiz verinin silme işlemini yapacağız.
const deleteArticle = document.querySelector(".deleteArticle");
deleteArticle.addEventListener('click', () => {
db.get('pouchdb-makalesi').then(doc => db.remove(doc))
.then(resp => console.log(resp))
.catch(err => console.log(err))
})
Yazının tamamı promise ile geçti ancak promise yerine callback kullanarak da bu işlemleri yapabilirsiniz. API dokümanına bakarsanız karmaşık sorgular oluşturabileceğiniz find modülünü de bulabilirsiniz. Ayrıca bulkGet fonksiyonunu kullanarak da çoklu olarak veri getirme işlemine dair bilgiler elde edebilirsiniz.
Unutmadan söylemem gerekiyor bu sistem en saf haliyle bir MySQL ya da MSSQL değildir. TodoMVC ve benzeri uygulamalar kullanım alanlarına dair en iyi örnekler olabilir.
Bu yazı PouchDB ile Tarayıcı Tabanlı Veri Tabanı hakkındaydı. Eğer eksik noktalar olduğunu düşünüyorsanız ya da hatalı noktalar gördüyseniz bana bildirebilirsiniz. Yazıyı okuduğunuz için teşekkür ederim. Umarım bir size faydası dokunur.