ধাপ 6: ফাইল সিস্টেমে Todos এক্সপোর্ট করুন

এই ধাপে, আপনি শিখবেন:

  • বাহ্যিক ফাইল সিস্টেমে একটি ফাইলের একটি রেফারেন্স কিভাবে পেতে হয়।
  • ফাইল সিস্টেমে কিভাবে লিখতে হয়।

এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 20 মিনিট।
এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।

সমস্ত কাজ রপ্তানি করুন

এই ধাপটি অ্যাপে একটি এক্সপোর্ট বোতাম যোগ করে। ক্লিক করা হলে, বর্তমান করণীয় আইটেমগুলি ব্যবহারকারী দ্বারা নির্বাচিত একটি পাঠ্য ফাইলে সংরক্ষণ করা হয়। ফাইলটি বিদ্যমান থাকলে, এটি প্রতিস্থাপিত হয়। অন্যথায়, একটি নতুন ফাইল তৈরি করা হয়।

অনুমতি আপডেট করুন

শুধুমাত্র-পঠন অ্যাক্সেসের জন্য একটি স্ট্রিং বা অতিরিক্ত বৈশিষ্ট্য সহ একটি অবজেক্ট হিসাবে ফাইল সিস্টেমের অনুমতিগুলি অনুরোধ করা যেতে পারে। উদাহরণ স্বরূপ:

// Read only
"permissions": ["fileSystem"]

// Read and write
"permissions": [{"fileSystem": ["write"]}]

// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]

আপনি পড়তে এবং লিখতে অ্যাক্সেস প্রয়োজন. manifest.json- এ, {fileSystem: [ "write" ] } অনুমতির অনুরোধ করুন:

"permissions": [
  "storage", 
  "alarms", 
  "notifications", 
  "webview",
  "<all_urls>", 
  { "fileSystem": ["write"] } 
],

HTML ভিউ আপডেট করুন

index.html এ, একটি এক্সপোর্ট টু ডিস্ক বোতাম এবং একটি div যোগ করুন যেখানে অ্যাপটি একটি স্থিতি বার্তা দেখায়:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  <button id="exportToDisk">Export to disk</button>
  <div id="status"></div>
  ...
</footer>

এছাড়াও index.html এ, export.js স্ক্রিপ্ট লোড করুন:

...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>

রপ্তানি স্ক্রিপ্ট তৈরি করুন

নিচের কোডটি ব্যবহার করে export.js নামে একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করুন। js ফোল্ডারে সংরক্ষণ করুন।

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

  document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);

})();

এই মুহূর্তে, export.js শুধুমাত্র এক্সপোর্ট টু ডিস্ক বোতামে ক্লিক শ্রোতা এবং getTodosAsText() , exportToFileEntry , এবং doExportToDisk() এর জন্য স্টাব ধারণ করে।

পাঠ্য হিসাবে করণীয় আইটেম পান

getTodosAsText() আপডেট করুন যাতে এটি chrome.storage.local থেকে todos পড়ে এবং তাদের একটি পাঠ্য উপস্থাপনা তৈরি করে:

function getTodosAsText(callback) {
  chrome.storage.local.get(dbName, function(storedData) {
    var text = '';

    if ( storedData[dbName].todos ) {
      storedData[dbName].todos.forEach(function(todo) {
          text += '- ';
          if ( todo.completed ) {
            text += '[DONE] ';
          }
          text += todo.title;
          text += '\n';
        }, '');
    }

    callback(text);

  }.bind(this));
}

একটি ফাইল নির্বাচন করুন

ব্যবহারকারীকে একটি ফাইল বেছে নেওয়ার অনুমতি দিতে chrome.fileSystem.chooseEntry() দিয়ে doExportToDisk() আপডেট করুন:

function doExportToDisk() {

  if (savedFileEntry) {

    exportToFileEntry(savedFileEntry);

  } else {

    chrome.fileSystem.chooseEntry( {
      type: 'saveFile',
      suggestedName: 'todos.txt',
      accepts: [ { description: 'Text files (*.txt)',
                   extensions: ['txt']} ],
      acceptsAllTypes: true
    }, exportToFileEntry);

  }
}

chrome.fileSystem.chooseEntry() এর প্রথম প্যারামিটার হল অপশনের একটি বস্তু। দ্বিতীয় পরামিতি হল একটি কলব্যাক পদ্ধতি।

যদি ইতিমধ্যেই একটি সংরক্ষিত FileEntry থেকে থাকে, তাহলে exportToFileEntry() কল করার সময় সেটি ব্যবহার করুন। ফাইল রেফারেন্স FileEntry প্রতিনিধিত্বকারী বস্তুর জীবনকালের জন্য বিদ্যমান। এই উদাহরণটি FileEntry অ্যাপ উইন্ডোর সাথে সংযুক্ত করে যাতে জাভাস্ক্রিপ্ট কোড কোনও ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়াই নির্বাচিত ফাইলে লিখতে পারে যতক্ষণ না অ্যাপ উইন্ডো খোলা থাকে।

ডিস্কে todos আইটেম লিখতে FileEntry ব্যবহার করুন

FileEntry ওয়েব API এর মাধ্যমে টেক্সট হিসাবে todos সংরক্ষণ করতে exportToFileEntry() আপডেট করুন:

function exportToFileEntry(fileEntry) {
  savedFileEntry = fileEntry;

  var status = document.getElementById('status');

  // Use this to get a file path appropriate for displaying
  chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
    fileDisplayPath = path;
    status.innerText = 'Exporting to '+path;
  });

  getTodosAsText( function(contents) {

    fileEntry.createWriter(function(fileWriter) {

      var truncated = false;
      var blob = new Blob([contents]);

      fileWriter.onwriteend = function(e) {
        if (!truncated) {
          truncated = true;
          // You need to explicitly set the file size to truncate
          // any content that might have been there before
          this.truncate(blob.size);
          return;
        }
        status.innerText = 'Export to '+fileDisplayPath+' completed';
      };

      fileWriter.onerror = function(e) {
        status.innerText = 'Export failed: '+e.toString();
      };

      fileWriter.write(blob);

    });
  });
}

chrome.fileSystem.getDisplayPath() একটি প্রদর্শনযোগ্য ফাইল পাথ পায় যা স্ট্যাটাস div আউটপুট করে।

একটি FileWriter অবজেক্ট তৈরি করতে fileEntry.createWriter() ব্যবহার করুন। fileWriter.write() তারপর ফাইল সিস্টেমে একটি ব্লব লিখতে পারে। স্ট্যাটাস div আপডেট করতে fileWriter.onwriteend() এবং fileWriter.onerror() ব্যবহার করুন।

FileEntry সম্পর্কে আরও তথ্যের জন্য, HTML5Rocks-এ FileSystem APIs এক্সপ্লোরিং পড়ুন, অথবা MDN-এ FileEntry docs পড়ুন।

FileEntry অবজেক্ট অব্যাহত রাখুন

উন্নত : FileEntry অবজেক্টগুলি অনির্দিষ্টকালের জন্য স্থায়ী হতে পারে না। প্রতিবার অ্যাপ চালু করার সময় আপনার অ্যাপ ব্যবহারকারীকে একটি ফাইল বেছে নিতে বলতে হবে। যদি আপনার অ্যাপটি রানটাইম ক্র্যাশ বা আপডেটের কারণে পুনরায় চালু করতে বাধ্য হয়, তাহলে restoreEntry() হল একটি FileEntry পুনরুদ্ধার করার একটি বিকল্প।

আপনি যদি চান, retainEntry() দ্বারা ফিরে আসা আইডি সংরক্ষণ করে এবং অ্যাপ রিস্টার্টে এটি পুনরুদ্ধার করে পরীক্ষা করুন। (ইঙ্গিত: ব্যাকগ্রাউন্ড পৃষ্ঠায় onRestarted ইভেন্টে একজন শ্রোতা যোগ করুন।)

আপনার সমাপ্ত টোডো অ্যাপ চালু করুন

আপনি ধাপ 6 সম্পন্ন! আপনার অ্যাপ পুনরায় লোড করুন এবং কিছু কাজ যোগ করুন। একটি .txt ফাইলে আপনার কাজগুলি রপ্তানি করতে ডিস্কে রপ্তানি করুন ক্লিক করুন৷

রপ্তানি করা টোডো সহ টোডো অ্যাপ

আরও তথ্যের জন্য

এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:

পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 7 এ যান - আপনার অ্যাপ প্রকাশ করুন »