Bu adımda şunları öğreneceksiniz:
- Harici dosya sistemindeki bir dosyaya nasıl referans alınır?
- Dosya sistemine nasıl yazılır?
Bu adımın tamamlanması için tahmini süre: 20 dakika.
Bu adımda ne tamamlayacağınızı önizlemek için bu sayfanın en altına atlayın ↓.
Yapılacakları dışa aktar
Bu adım, uygulamaya bir dışa aktarma düğmesi ekler. Tıklandığında mevcut yapılacaklar listesi öğeleri kullanıcı tarafından seçilen bir metin dosyasına kaydedilir. Dosya mevcutsa değiştirilir. Aksi takdirde yeni bir dosya oluşturulur.
İzinleri güncelle
Dosya sistemi izinleri, salt okuma erişimi için dize veya ek özelliklere sahip bir nesne olarak istenebilir. Örneğin:
// 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"]}]
Okuma ve yazma erişimine sahip olmanız gerekir. manifest.json dosyasında {fileSystem: [ "write" ] }
iznini isteyin:
"permissions": [
"storage",
"alarms",
"notifications",
"webview",
"<all_urls>",
{ "fileSystem": ["write"] }
],
HTML görünümünü güncelleme
index.html dosyasına bir Diske aktar düğmesi ve uygulamanın durum mesajı gösterdiği bir div
ekleyin:
<footer id="info">
<button id="toggleAlarm">Activate alarm</button>
<button id="exportToDisk">Export to disk</button>
<div id="status"></div>
...
</footer>
Ayrıca index.html dosyasına export.js komut dosyasını da yükleyin:
...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>
Dışa aktarma komut dosyası oluştur
Aşağıdaki kodu kullanarak export.js adlı yeni bir JavaScript dosyası oluşturun. js klasörüne kaydedin.
(function() {
var dbName = 'todos-vanillajs';
var savedFileEntry, fileDisplayPath;
function getTodosAsText(callback) {
}
function exportToFileEntry(fileEntry) {
}
function doExportToDisk() {
}
document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);
})();
Şu anda export.js yalnızca Diske aktar düğmesinde bir tıklama işleyici ve getTodosAsText()
, exportToFileEntry
, doExportToDisk()
için saplamalar içermektedir.
Yapılacaklar listesini metin olarak al
getTodosAsText()
öğesini, chrome.storage.local
ürününden yapılacak işleri okuyacak ve bunların metin biçiminde bir temsilini oluşturacak şekilde güncelleyin:
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));
}
Dosya seçin
Kullanıcının dosya seçmesine izin vermek için doExportToDisk()
uygulamasını chrome.fileSystem.chooseEntry()
ile güncelleyin:
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()
öğesinin ilk parametresi bir seçenek nesnesidir. İkinci parametre, bir geri çağırma yöntemidir.
Halihazırda kayıtlı bir FileEntry
varsa exportToFileEntry()
çağrılarını yaparken onun yerine onu kullanın. Dosya referansları, FileEntry
öğesini temsil eden nesnenin kullanım ömrü boyunca mevcuttur. Bu örnek, FileEntry
uygulamasını uygulama penceresine bağlar. Böylece JavaScript kodu, uygulama penceresi açık kaldığı sürece kullanıcı etkileşimi olmadan seçilen dosyaya yazılabilir.
Yapılacaklar öğelerini diske yazmak için FileEntry'yi kullanın
Yapılacakları FileEntry
Web API'si aracılığıyla metin olarak kaydetmek için exportToFileEntry()
uygulamasını güncelleyin:
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
durumuna yol açan görüntülenebilir bir dosya yolu alır.
Bir FileWriter
nesnesi oluşturmak için fileEntry.createWriter()
işlevini kullanın. fileWriter.write()
daha sonra dosya sistemine bir Blob yazabilir. div
durumunu güncellemek için fileWriter.onwriteend()
ve fileWriter.onerror()
öğelerini kullanın.
FileEntry
hakkında daha fazla bilgi için HTML5Rocks'ta Dosya Sistemi API'lerini Keşfetme bölümünü okuyun veya MDN'deki FileEntry docs
bölümüne bakın.
Dosya Girişi nesnelerini sürdür
Gelişmiş: FileEntry
nesneleri süresiz olarak saklanamaz. Uygulamanızın her başlatıldığında kullanıcıdan
bir dosya seçmesini istemesi gerekir. Uygulamanız, çalışma zamanı kilitlenmesi veya güncelleme nedeniyle yeniden başlatılmaya zorlandıysa FileEntry
adlı cihazı geri yüklemek için restoreEntry() kullanılabilir.
İsterseniz retainEntry() tarafından döndürülen kimliği kaydedip uygulamayı yeniden başlattığınızda geri yükleyerek deneme yapabilirsiniz. (İpucu: Arka plan sayfasına onRestarted
etkinliğine bir işleyici ekleyin.)
Tamamlanmış Todo uygulamanızı başlatma
6. adımı tamamladınız! Uygulamanızı yeniden yükleyin ve yapılacak bazı şeyler ekleyin. Yapılacaklarınızı bir .txt dosyasına aktarmak için Diske aktar'ı tıklayın.
Daha fazla bilgi için
Bu adımda tanıtılan API'lerden bazıları hakkında daha ayrıntılı bilgi için aşağıdaki makalelere bakın:
- Chrome Filesystem API'yi kullanma ↑
- İzin Bildirme ↑
- chrome.storage.local.get() ↑
- chrome.fileSystem.chooseEntry() ↑
- chrome.fileSystem.getDisplayPath() ↑
- chrome.fileSystem.restoreEntry() ↑
- chrome.fileSystem.retainEntry() ↑
Bir sonraki adıma geçmeye hazır mısınız? 7. Adım - Uygulamanızı yayınlayın » bölümüne gidin.