6. Adım: Yapılacakları Dosya Sistemine Dışa Aktar

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.

Yapılacaklar listesinin dışa aktarıldığı Todo uygulaması

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:

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.