অ্যাপ ডেভেলপমেন্টের প্রায় প্রতিটি ক্ষেত্রেই ডেটা পাঠানো বা গ্রহণ করার কিছু উপাদান জড়িত। বেসিকগুলি দিয়ে শুরু করে, আপনাকে আপনার অ্যাপ ডিজাইন এবং বাস্তবায়নে সহায়তা করার জন্য একটি MVC ফ্রেমওয়ার্ক ব্যবহার করা উচিত যাতে ডেটা সেই ডেটাতে অ্যাপের দৃশ্য থেকে সম্পূর্ণ আলাদা হয় ( MVC আর্কিটেকচার দেখুন)।
আপনার অ্যাপ অফলাইনে থাকাকালীন ডেটা কীভাবে পরিচালনা করা হয় সে সম্পর্কেও আপনাকে ভাবতে হবে ( অফলাইন প্রথম দেখুন)। এই ডকটি সংক্ষেপে স্থানীয়ভাবে ডেটা পাঠানো, গ্রহণ এবং সংরক্ষণ করার জন্য স্টোরেজ বিকল্পগুলি উপস্থাপন করে; ডকটির অবশিষ্টাংশ আপনাকে দেখায় কিভাবে ক্রোমের ফাইল সিস্টেম এবং সিঙ্ক ফাইল সিস্টেম এপিআই ব্যবহার করতে হয় (এছাড়াও দেখুন ফাইলসিস্টেম এপিআই এবং সিঙ্কফাইলসিস্টেম এপিআই )।
স্টোরেজ বিকল্প
প্যাকেজ করা অ্যাপগুলি ডেটা পাঠাতে এবং গ্রহণ করতে বিভিন্ন পদ্ধতি ব্যবহার করে। বাহ্যিক ডেটার জন্য (সম্পদ, ওয়েব পৃষ্ঠাগুলি), আপনাকে বিষয়বস্তু নিরাপত্তা নীতি (CSP) সম্পর্কে সচেতন হতে হবে। Chrome এক্সটেনশনের মতো, আপনি দূরবর্তী সার্ভারের সাথে যোগাযোগ করতে ক্রস-অরিজিন XMLHttpRequests ব্যবহার করতে পারেন। আপনি বাহ্যিক পৃষ্ঠাগুলিও আলাদা করতে পারেন, যাতে আপনার অ্যাপের বাকি অংশ সুরক্ষিত থাকে ( এম্বেড এক্সটার্নাল ওয়েব পেজ দেখুন)।
স্থানীয়ভাবে ডেটা সংরক্ষণ করার সময়, আপনি অল্প পরিমাণে স্ট্রিং ডেটা সংরক্ষণ করতে Chrome স্টোরেজ API এবং কাঠামোগত ডেটা সংরক্ষণ করতে IndexedDB ব্যবহার করতে পারেন। IndexedDB-এর সাহায্যে, আপনি জাভাস্ক্রিপ্ট অবজেক্টকে অবজেক্ট স্টোরে রাখতে পারেন এবং স্টোরের ইনডেক্স ব্যবহার করে ডেটা জিজ্ঞাসা করতে পারেন (আরো জানতে, HTML5 রকের সিম্পল টোডো লিস্ট টিউটোরিয়াল দেখুন)। বাইনারি ডেটার মতো অন্য সব ধরনের ডেটার জন্য, ফাইলসিস্টেম এবং সিঙ্ক ফাইলসিস্টেম API ব্যবহার করুন।
ক্রোমের ফাইলসিস্টেম এবং সিঙ্ক ফাইলসিস্টেম এপিআই HTML5 ফাইলসিস্টেম এপিআইকে প্রসারিত করে। Chrome-এর ফাইলসিস্টেম API-এর সাহায্যে অ্যাপগুলি ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমের একটি স্যান্ডবক্সযুক্ত বিভাগে তৈরি, পড়তে, নেভিগেট করতে এবং লিখতে পারে। উদাহরণস্বরূপ, একটি ফটো-শেয়ারিং অ্যাপ ফাইলসিস্টেম API ব্যবহার করে ব্যবহারকারী বেছে নেওয়া যেকোনো ফটো পড়তে এবং লিখতে পারে।
ক্রোমের সিঙ্ক ফাইলসিস্টেম এপিআই-এর সাথে, অ্যাপগুলি ব্যবহারকারীর Google ড্রাইভে ডেটা সংরক্ষণ এবং সিঙ্ক্রোনাইজ করতে পারে যাতে একই ডেটা বিভিন্ন ক্লায়েন্ট জুড়ে উপলব্ধ হতে পারে। উদাহরণস্বরূপ, একটি ক্লাউড-ব্যাকড টেক্সট এডিটর অ্যাপ স্বয়ংক্রিয়ভাবে ব্যবহারকারীর Google ড্রাইভ অ্যাকাউন্টে নতুন টেক্সট ফাইল সিঙ্ক করতে পারে। ব্যবহারকারী যখন একটি নতুন ক্লায়েন্টে টেক্সট এডিটর খোলে, তখন Google ড্রাইভ নতুন টেক্সট ফাইলগুলিকে টেক্সট এডিটরের সেই উদাহরণে পুশ করে।
Chrome ফাইলসিস্টেম API ব্যবহার করে
ফাইল সিস্টেমের অনুমতি যোগ করা হচ্ছে
ক্রোমের ফাইল সিস্টেম API ব্যবহার করতে, আপনাকে ম্যানিফেস্টে "ফাইলসিস্টেম" অনুমতি যোগ করতে হবে, যাতে আপনি অবিরাম ডেটা সঞ্চয় করার জন্য ব্যবহারকারীর কাছ থেকে অনুমতি পেতে পারেন৷
"permissions": [
"...",
"fileSystem"
]
ফাইল নির্বাচন করার জন্য ব্যবহারকারী-বিকল্প
ব্যবহারকারীরা সবসময় একইভাবে ফাইল নির্বাচন করার আশা করেন। সর্বনিম্নভাবে, তারা একটি 'ফাইল চয়ন করুন' বোতাম এবং স্ট্যান্ডার্ড ফাইল-নির্বাচক আশা করে। যদি আপনার অ্যাপটি ফাইল-হ্যান্ডিং এর ব্যাপক ব্যবহার করে, তাহলে আপনাকে ড্র্যাগ-এন্ড-ড্রপও প্রয়োগ করা উচিত (নীচে দেখুন এবং নেটিভ HTML5 ড্র্যাগ অ্যান্ড ড্রপ দেখুন)।
একটি ফাইল এন্ট্রির পথ প্রাপ্ত করা
ব্যবহারকারীর নির্বাচিত ফাইলটির সম্পূর্ণ পথ পেতে, fileEntry , কল করুন getDisplayPath() :
function displayPath(fileEntry) {
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
console.log(path)
});
}
ড্র্যাগ-এন্ড-ড্রপ বাস্তবায়ন
আপনি যদি ড্র্যাগ-এন্ড-ড্রপ নির্বাচন বাস্তবায়ন করতে চান, ফাইল সিস্টেম-অ্যাক্সেস নমুনায় ড্র্যাগ-এন্ড-ড্রপ ফাইল কন্ট্রোলার ( dnd.js ) একটি ভাল সূচনা পয়েন্ট। কন্ট্রোলার ড্র্যাগ-এন্ড-ড্রপের মাধ্যমে DataTransferItem থেকে একটি ফাইল এন্ট্রি তৈরি করে। এই উদাহরণে, fileEntry প্রথম ড্রপ আইটেম সেট করা হয়.
var dnd = new DnDFileController('body', function(data) {
var fileEntry = data.items[0].webkitGetAsEntry();
displayPath(fileEntry);
});
একটি ফাইল পড়া
নিম্নলিখিত কোডটি ফাইলটি খোলে (শুধুমাত্র পঠনযোগ্য) এবং এটি একটি FileReader অবজেক্ট ব্যবহার করে পাঠ্য হিসাবে পড়ে। ফাইলটি বিদ্যমান না থাকলে, একটি ত্রুটি নিক্ষেপ করা হয়।
var chosenFileEntry = null;
chooseFileButton.addEventListener('click', function(e) {
chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {
readOnlyEntry.file(function(file) {
var reader = new FileReader();
reader.onerror = errorHandler;
reader.onloadend = function(e) {
console.log(e.target.result);
};
reader.readAsText(file);
});
});
});
একটি ফাইল লেখা
একটি ফাইল লেখার জন্য দুটি সাধারণ ব্যবহার-ক্ষেত্র হল "সংরক্ষণ করুন" এবং "সংরক্ষণ করুন"। নিম্নলিখিত কোডটি শুধুমাত্র পঠনযোগ্য chosenFileEntry থেকে একটি writableEntry তৈরি করে এবং এটিতে নির্বাচিত ফাইলটি লেখে।
chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = callback;
chosenFileEntry.file(function(file) {
writer.write(file);
});
}, errorHandler);
});
নিম্নলিখিত কোডটি "সেভ অ্যাজ" কার্যকারিতা সহ একটি নতুন ফাইল তৈরি করে এবং writer.write() পদ্ধতি ব্যবহার করে ফাইলটিতে নতুন ব্লব লেখে।
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
}, errorHandler);
});
Chrome সিঙ্ক ফাইলসিস্টেম API ব্যবহার করা
সিঙ্কযোগ্য ফাইল স্টোরেজ ব্যবহার করে, ফেরত ডেটা অবজেক্টগুলি ফাইলসিস্টেম এপিআই -তে স্থানীয় অফলাইন ফাইল সিস্টেমগুলির মতোই চালানো যেতে পারে, কিন্তু Google ড্রাইভে সেই ডেটা যোগ করা (এবং স্বয়ংক্রিয়) সিঙ্কের সাথে।
সিঙ্ক ফাইল সিস্টেম অনুমতি যোগ করা হচ্ছে
Chrome এর Sync Filesystem API ব্যবহার করতে, আপনাকে ম্যানিফেস্টে "syncFileSystem" অনুমতি যোগ করতে হবে, যাতে আপনি স্থায়ী ডেটা সঞ্চয় এবং সিঙ্ক করার জন্য ব্যবহারকারীর কাছ থেকে অনুমতি পেতে পারেন৷
"permissions": [
"...",
"syncFileSystem"
]
সিঙ্কযোগ্য ফাইল স্টোরেজ শুরু করা হচ্ছে
আপনার অ্যাপে সিঙ্কযোগ্য ফাইল সঞ্চয়স্থান শুরু করতে, কেবল কল করুন syncFileSystem.requestFileSystem . এই পদ্ধতিটি Google ড্রাইভ দ্বারা সমর্থিত একটি সিঙ্কযোগ্য ফাইল সিস্টেম ফিরিয়ে দেয়, উদাহরণস্বরূপ:
chrome.syncFileSystem.requestFileSystem(function (fs) {
// FileSystem API should just work on the returned 'fs'.
fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});
ফাইল সিঙ্ক অবস্থা সম্পর্কে
একটি বর্তমান ফাইলের জন্য সিঙ্ক স্থিতি পেতে syncFileSystem.getFileStatus ব্যবহার করুন:
chrome.syncFileSystem.getFileStatus(entry, function(status) {...});
ফাইল সিঙ্ক স্থিতি মানগুলি নিম্নলিখিতগুলির মধ্যে একটি হতে পারে: 'synced' , 'pending' , বা 'conflicting' । 'সিঙ্কড' মানে ফাইলটি সম্পূর্ণ সিঙ্ক্রোনাইজ করা হয়েছে; Google ড্রাইভে সিঙ্ক্রোনাইজ করা হয়নি এমন কোনো মুলতুবি স্থানীয় পরিবর্তন নেই৷ তবে, Google ড্রাইভের দিকে মুলতুবি থাকা পরিবর্তনগুলি হতে পারে যা এখনও আনা হয়নি৷
'পেন্ডিং' মানে ফাইলটিতে মুলতুবি থাকা পরিবর্তনগুলি এখনও Google ড্রাইভে সিঙ্ক্রোনাইজ করা হয়নি৷ অ্যাপটি অনলাইনে চলমান থাকলে, স্থানীয় পরিবর্তনগুলি (প্রায়) অবিলম্বে Google ড্রাইভে সিঙ্ক্রোনাইজ করা হয় এবং syncFileSystem.onFileStatusChanged ইভেন্টটি 'synced' স্ট্যাটাসের সাথে ফায়ার করা হয় (আরো বিশদ বিবরণের জন্য নীচে দেখুন)।
SyncFileSystem.onFileStatusChanged যখন একটি ফাইলের স্থিতি 'conflicting' এ পরিবর্তিত হয় তখন তাকে বরখাস্ত করা হয়। 'বিরোধপূর্ণ' মানে স্থানীয় সঞ্চয়স্থান এবং Google ড্রাইভ উভয় ক্ষেত্রেই পরস্পরবিরোধী পরিবর্তন রয়েছে৷ দ্বন্দ্ব সমাধান নীতি 'manual' এ সেট করা থাকলেই একটি ফাইল এই অবস্থায় থাকতে পারে। ডিফল্ট নীতি হল 'last_write_win' এবং দ্বন্দ্ব স্বয়ংক্রিয়ভাবে সমাধান করা হয় সরল শেষ-লিখন-জয় নীতির মাধ্যমে। সিস্টেমের দ্বন্দ্ব সমাধান নীতি syncFileSystem.setConflictResolutionPolicy দ্বারা পরিবর্তন করা যেতে পারে।
যদি দ্বন্দ্ব সমাধান নীতি 'manual' এ সেট করা থাকে এবং একটি ফাইলের ফলাফল 'conflicting' অবস্থায় থাকে, অ্যাপটি এখনও স্থানীয় অফলাইন ফাইল হিসাবে ফাইলটি পড়তে এবং লিখতে পারে, তবে পরিবর্তনগুলি সিঙ্ক করা হয় না এবং ফাইলটি রাখা হবে দ্বন্দ্ব সমাধান না হওয়া পর্যন্ত অন্যান্য ক্লায়েন্টদের উপর করা দূরবর্তী পরিবর্তনগুলি থেকে বিচ্ছিন্ন। একটি দ্বন্দ্ব সমাধান করার সবচেয়ে সহজ উপায় হল ফাইলের স্থানীয় সংস্করণ মুছে ফেলা বা পুনঃনামকরণ করা। এটি দূরবর্তী সংস্করণটিকে সিঙ্ক্রোনাইজ করতে বাধ্য করে, বিরোধপূর্ণ অবস্থার সমাধান করা হয় এবং onFileStatusChanged ইভেন্টটি 'synced' স্থিতির সাথে বহিস্কার করা হয়।
সিঙ্ক করা স্থিতিতে পরিবর্তনের জন্য শোনা
একটি ফাইলের সিঙ্ক স্থিতি পরিবর্তিত হলে syncFileSystem.onFileStatusChanged ইভেন্টটি ফায়ার করা হয়৷ উদাহরণস্বরূপ, অনুমান করুন একটি ফাইলের পরিবর্তন মুলতুবি আছে এবং এটি 'মুলতুবি' অবস্থায় রয়েছে। অ্যাপটি অফলাইন অবস্থায় থাকতে পারে যাতে পরিবর্তনটি সিঙ্ক্রোনাইজ হতে চলেছে৷ যখন সিঙ্ক পরিষেবা মুলতুবি স্থানীয় পরিবর্তন সনাক্ত করে এবং Google ড্রাইভে পরিবর্তনটি আপলোড করে, তখন পরিষেবাটি নিম্নলিখিত মানগুলির সাথে onFileStatusChanged ইভেন্টটি চালু করে: { fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }
একইভাবে, স্থানীয় কার্যকলাপ নির্বিশেষে, সিঙ্ক পরিষেবা অন্য ক্লায়েন্ট দ্বারা করা দূরবর্তী পরিবর্তনগুলি সনাক্ত করতে পারে এবং Google ড্রাইভ থেকে স্থানীয় স্টোরেজে পরিবর্তনগুলি ডাউনলোড করে৷ যদি দূরবর্তী পরিবর্তনটি একটি নতুন ফাইল যোগ করার জন্য হয়, তাহলে নিম্নলিখিত মান সহ একটি ইভেন্ট ফায়ার করা হয়: { fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }
যদি স্থানীয় এবং দূরবর্তী উভয় পক্ষের একই ফাইলের জন্য পরস্পরবিরোধী পরিবর্তন থাকে এবং যদি বিরোধ নিষ্পত্তি নীতি 'manual' -এ সেট করা থাকে, তাহলে ফাইলের স্থিতি conflicting অবস্থায় পরিবর্তিত হয়, সিঙ্ক পরিষেবা থেকে বিচ্ছিন্ন করা হয়, এবং যতক্ষণ পর্যন্ত সিঙ্ক্রোনাইজ করা হবে না দ্বন্দ্ব সমাধান করা হয়। এই ক্ষেত্রে নিম্নলিখিত মান সহ একটি ইভেন্ট ফায়ার করা হয়: { fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }
আপনি এই ইভেন্টের জন্য একজন শ্রোতা যোগ করতে পারেন যে স্থিতিতে যেকোনো পরিবর্তনের প্রতিক্রিয়া জানায়। উদাহরণস্বরূপ, ক্রোম মিউজিক প্লেয়ার অ্যাপটি Google ড্রাইভ থেকে সিঙ্ক করা যেকোন নতুন মিউজিকের জন্য শোনে, কিন্তু এখনও কোনো নির্দিষ্ট ক্লায়েন্টে ব্যবহারকারীর স্থানীয় স্টোরেজে আমদানি করা হয়নি। পাওয়া যে কোনো সঙ্গীত সেই ক্লায়েন্টের সাথে সিঙ্ক করা হয়:
chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
if (fileInfo.status === 'synced') {
if (fileInfo.direction === 'remote_to_local') {
if (fileInfo.action === 'added') {
db.add(fileInfo.fileEntry);
} else if (fileInfo.action === 'deleted') {
db.remove(fileInfo.fileEntry);
}
}
}
});
API ব্যবহার পরীক্ষা করা হচ্ছে
API দ্বারা ব্যবহৃত ডেটার পরিমাণ পরীক্ষা করতে, অ্যাপের স্থানীয় স্যান্ডবক্স করা ডিরেক্টরি বা syncFileSystem.getUsageAndQuota দ্বারা ফেরত দেওয়া ব্যবহার বাইটগুলিকে জিজ্ঞাসা করুন:
chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
updateUsageInfo(storageInfo.usageBytes);
updateQuotaInfo(storageInfo.quotaBytes);
});
আপনি ব্যবহারকারীর সিঙ্ক ব্যাকএন্ড পরিষেবা সঞ্চয়স্থানও দেখতে পারেন (গুগল ড্রাইভে)। সিঙ্ক করা ফাইলগুলি একটি লুকানো Google ড্রাইভ ফোল্ডারে সংরক্ষিত হয়, Chrome Syncable FileSystem . ফোল্ডারটি আপনার 'মাই ড্রাইভ' তালিকায় দেখানো হবে না কিন্তু অনুসন্ধান বাক্সে ফোল্ডারের নাম অনুসন্ধান করে অ্যাক্সেস করা যেতে পারে। (মনে রাখবেন যে রিমোট ফোল্ডার লেআউটটি রিলিজের মধ্যে পিছনের দিকে সামঞ্জস্যপূর্ণ থাকার গ্যারান্টিযুক্ত নয় ।)