PouchDB একটি JavaScript লাইব্রেরি যা মূলত ব্রাউজার এবং সার্ভারে লাইটওয়েট ডেটাবেস হিসেবে কাজ করে। এটি CouchDB-এর সাথে সামঞ্জস্যপূর্ণ এবং অফলাইনে ডেটা স্টোরেজ ও সিঙ্কিং সুবিধা দেয়। এই টিউটোরিয়ালে আমরা দেখব কীভাবে PouchDB ব্যবহার করে একটি Single Page Application (SPA) তৈরি করা যায়।
প্রথমে PouchDB ইনস্টল করা
PouchDB ব্যবহার শুরু করতে হলে, প্রথমে আপনাকে এটি ইনস্টল করতে হবে। যদি আপনি NPM (Node Package Manager) ব্যবহার করেন, তবে নিচের কমান্ডটি ব্যবহার করুন:
npm install pouchdb
এছাড়া, যদি আপনি CDN থেকে সরাসরি ব্রাউজারে ব্যবহার করতে চান, তবে এই স্ক্রিপ্টটিও ব্যবহার করতে পারেন:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.0.0/pouchdb.min.js"></script>
PouchDB এর বেসিক কনসেপ্ট
PouchDB একটি ডকুমেন্ট-ভিত্তিক ডেটাবেস। এর মধ্যে, ডেটা একটি "ডকুমেন্ট" আকারে সংরক্ষিত থাকে, এবং প্রতিটি ডকুমেন্টের একটি _id থাকে যা তার একক আইডেন্টিফায়ার। PouchDB এর মাধ্যমে আপনি ডেটা সিঙ্ক করতে পারেন, এমনকি অফলাইনে কাজ করতে পারেন এবং পরে তা সার্ভারের সাথে সিঙ্ক হয়ে যাবে।
SPA তৈরি করা
1. ডাটাবেস তৈরি করা
একটি ডাটাবেস তৈরি করতে, প্রথমে PouchDB ইনস্ট্যান্স তৈরি করতে হবে:
// PouchDB ইনস্ট্যান্স তৈরি
var db = new PouchDB('my_database');
এটি একটি স্থানীয় ডাটাবেস তৈরি করবে যেটি ব্রাউজারের লোকাল স্টোরেজে থাকবে। আপনি চাইলে এটি IndexedDB বা WebSQL থেকেও ব্যবহার করতে পারেন।
2. ডেটা ইনসার্ট করা
ডেটা ইনসার্ট করতে, আমরা একটি JSON ডকুমেন্ট ব্যবহার করতে পারি:
// একটি ডকুমেন্ট ইনসার্ট করা
var doc = {
_id: 'mydoc',
name: 'John Doe',
age: 30
};
// ডকুমেন্ট সেভ করা
db.put(doc).then(function(response) {
console.log('Document saved:', response);
}).catch(function(err) {
console.log(err);
});
3. ডেটা রিট্রিভ করা
ডেটা রিট্রিভ করার জন্য, আপনি _id দিয়ে get ফাংশন ব্যবহার করতে পারেন:
// ডকুমেন্ট রিট্রিভ করা
db.get('mydoc').then(function(doc) {
console.log(doc);
}).catch(function(err) {
console.log(err);
});
4. ডেটা আপডেট করা
একটি ডকুমেন্ট আপডেট করতে, আপনি প্রথমে ডকুমেন্টটি রিট্রিভ করবেন, তারপর তার নতুন মান দিয়ে আপডেট করবেন:
// ডকুমেন্ট আপডেট করা
db.get('mydoc').then(function(doc) {
doc.age = 31; // age আপডেট করা
return db.put(doc);
}).then(function(response) {
console.log('Document updated:', response);
}).catch(function(err) {
console.log(err);
});
5. ডেটা ডিলিট করা
একটি ডকুমেন্ট ডিলিট করতে, remove ফাংশন ব্যবহার করতে হবে:
// ডকুমেন্ট ডিলিট করা
db.get('mydoc').then(function(doc) {
return db.remove(doc);
}).then(function(response) {
console.log('Document deleted:', response);
}).catch(function(err) {
console.log(err);
});
PouchDB দিয়ে SPA তৈরি করা
ধরা যাক, আমরা একটি সিম্পল টাস্ক ম্যানেজমেন্ট অ্যাপ তৈরি করতে যাচ্ছি যেখানে ব্যবহারকারীরা টাস্ক অ্যাড করতে এবং টাস্কগুলিকে দেখতে পারবেন। এই অ্যাপে অফলাইন সাপোর্ট থাকবে এবং যখন ইন্টারনেট কানেকশন পুনরুদ্ধার হবে, ডেটা সার্ভারে সিঙ্ক হবে।
HTML এবং JavaScript কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.0.0/pouchdb.min.js"></script>
</head>
<body>
<h1>Task Manager</h1>
<div>
<h3>Add Task</h3>
<input type="text" id="taskInput" placeholder="Enter a task">
<button onclick="addTask()">Add Task</button>
</div>
<div>
<h3>Tasks</h3>
<ul id="taskList"></ul>
</div>
<script>
var db = new PouchDB('tasks');
// নতুন টাস্ক অ্যাড করা
function addTask() {
var taskInput = document.getElementById('taskInput').value;
var task = {
_id: new Date().toISOString(),
task: taskInput
};
db.put(task).then(function(response) {
console.log('Task added:', response);
loadTasks(); // টাস্ক লোড করা
}).catch(function(err) {
console.log(err);
});
}
// টাস্কগুলি লোড করা
function loadTasks() {
db.allDocs({ include_docs: true, descending: true }).then(function(result) {
var taskList = document.getElementById('taskList');
taskList.innerHTML = ''; // পুরনো টাস্কগুলি মুছে ফেলা
result.rows.forEach(function(row) {
var li = document.createElement('li');
li.textContent = row.doc.task;
taskList.appendChild(li);
});
}).catch(function(err) {
console.log(err);
});
}
// পেজ লোড হলে টাস্কগুলি লোড করা
loadTasks();
</script>
</body>
</html>
PouchDB দিয়ে সিঙ্কিং সেটআপ করা
PouchDB অফলাইনে কাজ করার সময়, আপনি চাইলে আপনার ব্রাউজার ডাটাবেসটি সার্ভারের সাথে সিঙ্কও করতে পারবেন। এর জন্য আপনাকে একটি CouchDB সার্ভারের URL দিতে হবে:
var remoteDB = new PouchDB('http://localhost:5984/tasks');
var localDB = new PouchDB('tasks');
// সিঙ্কিং সেটআপ করা
localDB.sync(remoteDB, {
live: true,
retry: true
}).on('change', function (info) {
console.log('Sync Change:', info);
}).on('error', function (err) {
console.log('Sync Error:', err);
});
এটি আপনার ব্রাউজার ডাটাবেস এবং সার্ভার ডাটাবেসের মধ্যে লাইভ সিঙ্কিং শুরু করবে। যখন আপনি টাস্ক অ্যাড বা আপডেট করবেন, তখন সেই ডেটা সার্ভারে সিঙ্ক হবে।
সারাংশ
PouchDB দিয়ে SPA তৈরি করা খুবই সহজ এবং এটি অফলাইন ডেটা স্টোরেজ ও সিঙ্কিং সুবিধা প্রদান করে। এর মাধ্যমে আপনি খুব সহজেই ব্রাউজারে ডেটা পরিচালনা করতে পারেন এবং যখন ইন্টারনেট কানেকশন থাকে, তখন সেই ডেটা সার্ভারের সাথে সিঙ্ক হয়। PouchDB এর সাহায্যে আপনি আপনার SPA অ্যাপে বাস্তবিক সময়ের সিঙ্কিং এবং অফলাইন ব্যবহারের সুবিধা প্রদান করতে পারবেন।
Read more
