مرحله 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 ، یک دکمه Export to disk و یک 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 فقط شامل یک شنونده کلیک روی دکمه Export to disk و خرده‌هایی برای 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 برای نوشتن موارد todos روی دیسک استفاده کنید

exportToFileEntry() را به روز کنید تا کارها را به صورت متن از طریق FileEntry Web API ذخیره کنید:

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 خروجی می دهد.

از fileEntry.createWriter() برای ایجاد یک شی FileWriter استفاده کنید. سپس fileWriter.write() می تواند یک Blob را در سیستم فایل بنویسد. از fileWriter.onwriteend() و fileWriter.onerror() برای به روز رسانی وضعیت div استفاده کنید.

برای اطلاعات بیشتر درباره FileEntry ، کاوش در APIهای FileSystem در HTML5Rocks را بخوانید یا به FileEntry docs در MDN مراجعه کنید.

باقی ماندن اشیاء FileEntry

پیشرفته : اشیاء FileEntry نمی توان به طور نامحدود ادامه داد. هر بار که برنامه راه اندازی می شود، برنامه شما باید از کاربر بخواهد که فایلی را انتخاب کند. اگر برنامه شما به دلیل خرابی زمان اجرا یا به روز رسانی مجبور به راه اندازی مجدد شد، restoreEntry() گزینه ای برای بازیابی FileEntry است.

در صورت تمایل، با ذخیره شناسه بازگردانده شده توسط ()retainEntry و بازیابی آن در راه اندازی مجدد برنامه، آزمایش کنید. (نکته: یک شنونده به رویداد onRestarted در صفحه پس‌زمینه اضافه کنید.)

برنامه Todo تمام شده خود را راه اندازی کنید

شما مرحله 6 را تمام کردید! برنامه خود را دوباره بارگیری کنید و چند کار اضافه کنید. برای صادر کردن کارهای خود به یک فایل txt. روی Export to disk کلیک کنید.

برنامه Todo با کارهای صادراتی

برای اطلاعات بیشتر

برای اطلاعات دقیق تر در مورد برخی از API های معرفی شده در این مرحله، به آدرس زیر مراجعه کنید:

برای ادامه به مرحله بعدی آماده هستید؟ به مرحله 7 بروید - برنامه خود را منتشر کنید »