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

'क्या-क्या करें' आइटम को डिस्क में लिखने के लिए, FileEntry का इस्तेमाल करना

FileEntry वेब एपीआई की मदद से, टास्क को टेक्स्ट के तौर पर सेव करने के लिए 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 API को एक्सप्लोर करना लेख पढ़ें या MDN पर FileEntry docs लेख पढ़ें.

FileEntry ऑब्जेक्ट को सेव करना

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

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

अपना Todo ऐप्लिकेशन लॉन्च करना

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

एक्सपोर्ट किए गए टास्क वाला Todo ऐप्लिकेशन

अधिक जानकारी के लिए

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

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