Langkah 6: Ekspor Daftar Tugas ke Sistem File

Pada langkah ini, Anda akan mempelajari:

  • Cara mendapatkan referensi ke file dalam sistem file eksternal.
  • Cara menulis ke sistem file.

Perkiraan waktu untuk menyelesaikan langkah ini: 20 menit.
Untuk melihat pratinjau tugas yang akan Anda selesaikan di langkah ini, langsung ke bagian bawah halaman ini ↓.

Ekspor daftar tugas

Langkah ini akan menambahkan tombol ekspor ke aplikasi. Saat diklik, item daftar tugas saat ini akan disimpan ke file teks yang dipilih oleh pengguna. Jika ada, file akan diganti. Jika tidak, file baru akan dibuat.

Update izin

Izin sistem file dapat diminta sebagai string untuk akses hanya-baca, atau Objek dengan properti tambahan. Contoh:

// 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"]}]

Anda memerlukan akses baca dan tulis. Di manifest.json, minta izin {fileSystem: [ "write" ] }:

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

Perbarui tampilan HTML

Di index.html, tambahkan tombol Export to disk dan div tempat aplikasi menampilkan pesan status:

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

Selain itu, di index.html, muat skrip export.js:

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

Buat skrip ekspor

Buat file JavaScript baru bernama export.js menggunakan kode di bawah. Simpan di folder js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

Saat ini, export.js hanya berisi pemroses klik pada tombol Export to disk dan stub untuk getTodosAsText(), exportToFileEntry, dan doExportToDisk().

Dapatkan item daftar tugas sebagai teks

Update getTodosAsText() agar dapat membaca daftar tugas dari chrome.storage.local dan menghasilkan representasi tekstualnya:

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

Pilih file

Update doExportToDisk() dengan chrome.fileSystem.chooseEntry() agar pengguna dapat memilih file:

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

  }
}

Parameter pertama chrome.fileSystem.chooseEntry() adalah objek opsi. Parameter kedua adalah metode callback.

Jika sudah ada FileEntry yang tersimpan, gunakan itu saat memanggil exportToFileEntry(). Referensi file tersedia selama masa aktif objek yang mewakili FileEntry. Contoh ini mengikat FileEntry ke jendela aplikasi sehingga kode JavaScript dapat menulis ke file yang dipilih tanpa interaksi pengguna apa pun selama jendela aplikasi tetap terbuka.

Menggunakan FileEntry untuk menulis item daftar tugas ke disk

Update exportToFileEntry() untuk menyimpan daftar tugas sebagai teks melalui 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() mendapatkan jalur file yang dapat ditampilkan dan menghasilkan status div.

Gunakan fileEntry.createWriter() untuk membuat objek FileWriter. fileWriter.write() kemudian dapat menulis Blob ke sistem file. Gunakan fileWriter.onwriteend() dan fileWriter.onerror() untuk memperbarui status div.

Untuk informasi selengkapnya tentang FileEntry, baca Menjelajahi API FileSystem di HTML5Rocks, atau lihat FileEntry docs di MDN.

Mempertahankan objek FileEntry

Lanjutan: Objek FileEntry tidak dapat dipertahankan tanpa batas waktu. Aplikasi perlu meminta pengguna untuk memilih file setiap kali aplikasi diluncurkan. Jika aplikasi Anda terpaksa memulai ulang karena error atau update runtime, restoreEntry() adalah opsi untuk memulihkan FileEntry.

Jika ingin, lakukan eksperimen dengan menyimpan ID yang ditampilkan oleh retainEntry() dan memulihkannya saat aplikasi dimulai ulang. (Petunjuk: Tambahkan pemroses ke peristiwa onRestarted di halaman latar belakang.)

Luncurkan aplikasi Daftar tugas yang telah selesai

Anda menyelesaikan Langkah 6! Muat ulang aplikasi Anda dan tambahkan beberapa tugas. Klik Export to disk untuk mengekspor daftar tugas ke file .txt.

Aplikasi Todo dengan daftar tugas yang diekspor

Untuk informasi selengkapnya

Untuk informasi lebih detail tentang beberapa API yang diperkenalkan di langkah ini, lihat:

Siap untuk melanjutkan ke langkah berikutnya? Buka Langkah 7 - Publikasikan aplikasi Anda »