Langkah 6: Ekspor Daftar Tugas ke Sistem File

Pada langkah ini, Anda akan mempelajari:

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

Perkiraan waktu untuk menyelesaikan langkah ini: 20 menit.
Untuk melihat pratinjau apa yang akan Anda selesaikan pada langkah ini, turun ke bagian bawah halaman ini ↓.

Ekspor daftar tugas

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

Update izin

Izin sistem file bisa 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 {fileSystem: [ "write" ] } izin akses:

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

Perbarui tampilan HTML

Di index.html, tambahkan tombol Ekspor ke 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 dari mereka:

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. Yang kedua parameter adalah metode callback.

Jika sudah ada FileEntry yang tersimpan, gunakan itu saat memanggil exportToFileEntry(). File referensi tersedia selama masa aktif objek yang mewakili FileEntry. Contoh ini menghubungkan FileEntry ke jendela aplikasi sehingga kode JavaScript dapat menulis ke file yang dipilih tanpa meminta pengguna 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 yang 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 mengupdate 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 Anda perlu meminta izin kepada pengguna untuk memilih file setiap kali aplikasi diluncurkan. Jika aplikasi Anda dipaksa untuk dimulai ulang karena runtime error atau update, restoreEntry() adalah opsi untuk memulihkan FileEntry.

Jika Anda mau, bereksperimenlah dengan menyimpan ID yang ditampilkan oleh retainEntry() dan memulihkannya di aplikasi mulai ulang. (Petunjuk: Tambahkan pemroses ke peristiwa onRestarted di halaman latar belakang.)

Meluncurkan aplikasi Daftar Tugas yang sudah selesai

Anda sudah 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 yang lebih mendetail tentang beberapa API yang diperkenalkan di langkah ini, lihat:

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