الخطوة 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"] } 
],

تعديل عرض 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>

إنشاء نص برمجي للتصدير

أنشئ ملف JavaScript جديدًا باسم 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 وإنشاء نص نصي. وتمثيلهم:

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 (إدخال ملف) لكتابة عناصر المهام على القرص

عدِّل 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، يُرجى الاطّلاع على استكشاف واجهات برمجة التطبيقات FileSystem على HTML5Rocks يُرجى الرجوع إلى FileEntry docs في MDN.

كائنات Persist FileEntry

إعدادات متقدّمة: لا يمكن الاحتفاظ بكائنات FileEntry إلى أجل غير مسمى. يجب أن يطلب تطبيقك من المستخدم لاختيار ملف في كل مرة يتم فيها تشغيل التطبيق. إذا تم فرض إعادة تشغيل تطبيقك بسبب وقت تشغيل تعطُّل أو تحديث، يكون restoreEntry() خيارًا لاستعادة بيانات FileEntry.

إذا أردت، يمكنك تجربة حفظ رقم التعريف الذي تم عرضه من خلال retainEntry() واستعادته في التطبيق. إعادة التشغيل. (تلميح: يمكنك إضافة أداة استماع إلى الحدث onRestarted في صفحة الخلفية.)

فتح تطبيق Todo المكتمل

لقد انتهيت من الخطوة 6! يُرجى إعادة تحميل التطبيق وإضافة بعض المهام. انقر على التصدير إلى القرص لتصدير ملف المهام إلى ملف .txt.

تطبيق Todo الذي يتضمّن مهامّ تم تصديرها

لمزيد من المعلومات

لمزيد من المعلومات التفصيلية حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، راجع:

هل أنت مستعد للانتقال إلى الخطوة التالية؟ انتقِل إلى الخطوة 7 - نشر تطبيقك »