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.
Untuk informasi selengkapnya
Untuk informasi lebih detail tentang beberapa API yang diperkenalkan di langkah ini, lihat:
- Menggunakan Chrome Filesystem API ↑
- Menyatakan Izin ↑
- chrome.storage.local.get() ↑
- chrome.fileSystem.chooseEntry() ↑
- chrome.fileSystem.getDisplayPath() ↑
- chrome.fileSystem.restoreEntry() ↑
- chrome.fileSystem.retainEntry() ↑
Siap untuk melanjutkan ke langkah berikutnya? Buka Langkah 7 - Publikasikan aplikasi Anda »