चरण 6: फ़ाइल सिस्टम में 'काम की सूची' एक्सपोर्ट करें

इस चरण में आपको पता चलेगा कि:

  • बाहरी फ़ाइल सिस्टम में किसी फ़ाइल का रेफ़रंस पाने का तरीका.
  • फ़ाइल सिस्टम में लिखने का तरीका.

इस चरण को पूरा करने में लगने वाला अनुमानित समय: 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"] } 
],

एचटीएमएल व्यू अपडेट करें

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 नाम की नई JavaScript फ़ाइल बनाएं. इसे 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 से काम की सूची को पढ़े और उसका टेक्स्ट टेक्स्ट के तौर पर जनरेट किया जा सके:

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));
}

फ़ाइल चुनें

doExportToDisk() को chrome.fileSystem.chooseEntry() से अपडेट करें, ताकि उपयोगकर्ता कोई फ़ाइल चुन सके:

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 को ऐप्लिकेशन विंडो से जोड़ता है, ताकि JavaScript कोड को चुनी गई फ़ाइल पर तब तक लिखा जा सके जब तक ऐप्लिकेशन विंडो खुली हो, तब तक उपयोगकर्ता के इंटरैक्शन के बिना ऐसा किया जा सकता है.

डिस्क पर टूडू आइटम लिखने के लिए FileEntry का इस्तेमाल करें

FileEntry Web API की मदद से, काम की सूची को टेक्स्ट के तौर पर सेव करने के लिए, 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() फ़ाइल सिस्टम में Blob लिख सकता है. स्थिति div अपडेट करने के लिए, fileWriter.onwriteend() और fileWriter.onerror() का इस्तेमाल करें.

FileEntry के बारे में ज़्यादा जानकारी के लिए, HTML5Rocks पर FileSystem APIs को एक्सप्लोर करना पढ़ें या MDN पर FileEntry docs देखें.

परसिस्ट फ़ाइल एंट्री ऑब्जेक्ट

बेहतर: FileEntry ऑब्जेक्ट को हमेशा के लिए बनाए नहीं रखा जा सकता. हर बार ऐप्लिकेशन लॉन्च होने पर, आपको उपयोगकर्ता से फ़ाइल चुनने के लिए कहना होगा. अगर रनटाइम क्रैश या अपडेट होने की वजह से आपका ऐप्लिकेशन अपने-आप रीस्टार्ट हुआ हो, तो restoreEntry() इस्तेमाल करके FileEntry को पहले जैसा किया जा सकता है.

अगर आप चाहें, तो retainEntry() से मिले आईडी को सेव करके प्रयोग करें और ऐप्लिकेशन रीस्टार्ट होने पर उसे वापस लाएं. (जानकारी: बैकग्राउंड पेज में onRestarted इवेंट के लिए, कोई लिसनर जोड़ें.)

वह ऐप्लिकेशन लॉन्च करें जिसे पूरा कर लिया गया है

आपने छठा चरण पूरा कर लिया है! अपना ऐप्लिकेशन फिर से लोड करें और कुछ काम की सूची जोड़ें. अपने काम की सूची को .txt फ़ाइल में एक्सपोर्ट करने के लिए, डिस्क में एक्सपोर्ट करें पर क्लिक करें.

एक्सपोर्ट किए गए कामों की सूची वाला Todo ऐप्लिकेशन

ज़्यादा जानकारी के लिए

इस चरण में पेश किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यहां देखें:

क्या आप अगले चरण पर जाने के लिए तैयार हैं? चरण 7 - अपना ऐप्लिकेशन पब्लिश करें » पर जाएं