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.

Estimasi waktu untuk menyelesaikan langkah ini: 20 menit.
Untuk melihat pratinjau hal yang akan Anda selesaikan pada langkah ini, buka bagian bawah halaman ini ↓.

Mengekspor daftar tugas

Langkah ini 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"] } 
],

Memperbarui 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>

Di index.html, muat skrip export.js:

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

Membuat 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 Ekspor ke disk dan stub untuk getTodosAsText(), exportToFileEntry, dan doExportToDisk().

Mendapatkan item daftar tugas sebagai teks

Perbarui getTodosAsText() agar dapat membaca daftar tugas dari chrome.storage.local dan membuat representasi tekstual dari daftar tugas tersebut:

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

Perbarui doExportToDisk() dengan chrome.fileSystem.chooseEntry() untuk mengizinkan pengguna 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 tersimpan, gunakan FileEntry tersebut saat memanggil exportToFileEntry(). Referensi file ada selama masa aktif objek yang mewakili FileEntry. Contoh ini mengaitkan FileEntry ke jendela aplikasi sehingga kode JavaScript dapat menulis ke file yang dipilih tanpa interaksi pengguna selama jendela aplikasi tetap terbuka.

Menggunakan FileEntry untuk menulis item daftar tugas ke disk

Perbarui 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 yang menghasilkan output ke 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 mengetahui informasi selengkapnya tentang FileEntry, baca Menjelajahi FileSystem API di HTML5Rocks, atau lihat FileEntry docs di MDN.

Mempertahankan objek FileEntry

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

Jika mau, 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.)

Meluncurkan aplikasi Daftar Tugas yang sudah selesai

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

Aplikasi Daftar Tugas dengan daftar tugas yang diekspor

Untuk informasi selengkapnya

Untuk informasi yang lebih mendetail tentang beberapa API yang diperkenalkan dalam langkah ini, lihat:

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