Sencha Touch এবং Data Store
Sencha Touch একটি শক্তিশালী HTML5 ভিত্তিক JavaScript ফ্রেমওয়ার্ক, যা মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি মোবাইল ডিভাইসে সুন্দর এবং রেসপন্সিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। Sencha Touch-এ Data Store একটি বিশেষ অবজেক্ট যা ডেটা সংগ্রহ, ম্যানিপুলেশন এবং ভিউতে প্রদর্শন করার জন্য ব্যবহৃত হয়।
Data Store হল একটি ভিউ এবং মডেলের মধ্যে সম্পর্ক স্থাপনকারী উপাদান, যেখানে এটি একটি ডেটাবেসের মতো কাজ করে, ডেটা সঞ্চিত রাখে এবং সেই ডেটা UI (User Interface)-এ প্রদর্শন করে। Data Store-এ ডেটা সঞ্চিত করার পাশাপাশি, এটি ডেটা লোড, সিঙ্ক্রোনাইজেশন, রিফ্রেশ, সেলেকশন ইত্যাদি ম্যানেজমেন্ট ফিচারও প্রদান করে।
Data Store তৈরি এবং ব্যবস্থাপনা
Sencha Touch এ Data Store তৈরি করার জন্য Ext.data.Store ব্যবহার করা হয়। Store হল একটি ক্লাস যা ডেটা সংগ্রহের কাজ করে এবং এটি নির্দিষ্ট মডেলগুলির সাথে সম্পর্কিত থাকে। একটি Data Store সাধারণত Model, Proxy, এবং Sorter বা Filter এর সাথে কাজ করে।
Data Store তৈরি করার পদক্ষেপ:
- Model তৈরি করুন: Model হল একটি ডেটা স্ট্রাকচার যা Data Store-এ ডেটা সঞ্চিত রাখে এবং সেটি কিভাবে লোড বা সংরক্ষণ করা হবে তা নির্ধারণ করে।
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
এখানে, User মডেল তৈরি করা হয়েছে, যা তিনটি ফিল্ড ধারণ করে: id, name, এবং email।
- Proxy তৈরি করুন: Proxy হল এমন একটি কনফিগারেশন যা ডেটা সোর্স (ডেটাবেস, API, লোকাল স্টোরেজ, ইত্যাদি) এর সাথে সংযোগ স্থাপন করে। এটি ডেটার লোডিং এবং সেভিং এর কাজ করে।
var store = Ext.create('Ext.data.Store', {
model: 'App.model.User',
proxy: {
type: 'ajax', // Ajax মাধ্যমে ডেটা লোড
url: 'data/users.json', // JSON ফাইল থেকে ডেটা লোড
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true // অটোমেটিকভাবে ডেটা লোড হবে
});
এখানে, Proxy কনফিগারেশনে type: 'ajax' ব্যবহার করে Ajax কল করা হচ্ছে এবং JSON ডেটা রিডারের মাধ্যমে ডেটা লোড করা হচ্ছে।
- Data Store ম্যানেজমেন্ট:
- load(): ডেটা লোড করার জন্য।
- add(): নতুন ডেটা অ্যাড করার জন্য।
- remove(): ডেটা রিমুভ করার জন্য।
- sync(): সিঙ্ক্রোনাইজেশন এর মাধ্যমে ডেটা আপডেট বা সেভ করার জন্য।
Data Store ব্যবহার করার উদাহরণ:
// Data Store তৈরি
var store = Ext.create('Ext.data.Store', {
model: 'App.model.User',
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
// ডেটা লোড হলে, ডেটা নিয়ে কাজ করার জন্য
store.load(function(records, operation, success) {
if (success) {
console.log('Data loaded successfully');
console.log(records); // লোড হওয়া রেকর্ড গুলি
} else {
console.log('Failed to load data');
}
});
// নতুন ইউজার অ্যাড করা
var newUser = Ext.create('App.model.User', {
name: 'John Doe',
email: 'john.doe@example.com'
});
store.add(newUser);
store.sync(); // সিঙ্ক্রোনাইজেশন
// ডেটা মুছে ফেলা
store.remove(newUser);
store.sync();
এখানে:
store.load()ডেটা লোড করে।store.add()একটি নতুন ইউজার অ্যাড করে।store.remove()একটি ইউজার মুছে ফেলে।store.sync()সিঙ্ক্রোনাইজেশন চালায়, যা ডেটাবেস বা সার্ভারে পরিবর্তনগুলি সেভ করে।
Data Store-এর সাথে Filter এবং Sorter ব্যবহার
Filter এবং Sorter ফিচারগুলি ডেটার উপর নিয়ন্ত্রণ স্থাপন করে এবং ব্যবহারকারীদের দ্রুতভাবে প্রয়োজনীয় ডেটা খুঁজে পেতে সাহায্য করে।
Filter উদাহরণ:
store.filter({
property: 'name',
value: 'John',
exactMatch: true // এক্স্যাক্ট ম্যাচ
});
এখানে, store.filter() ব্যবহার করে name ফিল্ডের জন্য John মানের সাথে মিলে এমন রেকর্ডগুলি ফিল্টার করা হয়েছে।
Sorter উদাহরণ:
store.sort({
property: 'name',
direction: 'ASC' // বা 'DESC' ডিরেকশন
});
এখানে, store.sort() ব্যবহার করে name ফিল্ডের উপর অ্যাসেন্ডিং বা ডিসেন্ডিং অর্ডারে সোর্ট করা হয়েছে।
সারাংশ
Sencha Touch এ Data Store তৈরি এবং ব্যবস্থাপনা অত্যন্ত গুরুত্বপূর্ণ একটি বৈশিষ্ট্য যা ডেটার অ্যাক্সেস, লোডিং, সিঙ্ক্রোনাইজেশন এবং পরিবর্তন করার জন্য ব্যবহৃত হয়। TypeORM এর মতো ফ্রেমওয়ার্কে ডেটা স্টোর এবং মডেল সম্পর্কিত ধারণাগুলির মতো, Sencha Touch এ Model, Store, Proxy, এবং Reader ব্যবহার করে সহজেই ডেটা ম্যানেজমেন্ট করা যায়। Filter এবং Sorter এর মাধ্যমে ডেটা আরও নিয়ন্ত্রণযোগ্য এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে। Sencha Touch এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট অনেক সহজ, দ্রুত এবং কার্যকরী হয়।
Read more