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

Bu adımda şunları öğreneceksiniz:

  • Harici dosya sistemindeki bir dosyanın referansını alma.
  • Dosya sistemine yazma

Bu adımın tamamlanması tahmini olarak 20 dakika sürer.
Bu adımda tamamlayacağınız işlemleri önizlemek için bu sayfanın en altına gidin ↓.

To-do'ları dışa aktarma

Bu adımda uygulamaya bir dışa aktarma düğmesi eklenir. Bu düğme 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şiminizin olması 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>

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şturma

Aşağıdaki kodu kullanarak export.js adlı yeni bir JavaScript dosyası oluşturun. Dosyayı 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 dinleyicisi ve getTodosAsText(), exportToFileEntry ve doExportToDisk() için taslaklar içeriyor.

Yapılacaklar listesi öğelerini metin olarak alma

getTodosAsText()'ü, chrome.storage.local'daki yapılacaklar listesini okuyup bunların metinsel 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()'ü 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() parametresinin ilk parametresi, seçeneklerden oluşan bir nesnedir. İkinci parametre bir geri çağırma yöntemidir.

Kaydedilmiş bir FileEntry varsa exportToFileEntry()'u çağırırken bunun yerine FileEntry'ü kullanın. Dosya referansları, FileEntry öğesini temsil eden nesnenin kullanım ömrü boyunca mevcuttur. Bu örnekte, FileEntry uygulama penceresine bağlanır. Böylece JavaScript kodu, uygulama penceresi açık kaldığı sürece herhangi bir kullanıcı etkileşimi olmadan seçili dosyaya yazabilir.

To Do öğelerini diske yazmak için FileEntry'yi kullanma

To-do'ları FileEntry Web API aracılığıyla metin olarak kaydetmek için exportToFileEntry() öğesini 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 çıkış veren görüntülenebilir bir dosya yolu alır.

FileWriter nesnesi oluşturmak için fileEntry.createWriter() öğesini kullanın. fileWriter.write() daha sonra dosya sistemine bir Blob yazabilir. div durumunu güncellemek için fileWriter.onwriteend() ve fileWriter.onerror() simgesini kullanın.

FileEntry hakkında daha fazla bilgi edinmek için HTML5Rocks'ta FileSystem API'lerini Keşfetme başlıklı makaleyi okuyun veya MDN'deki FileEntry docs sayfasına bakın.

FileEntry nesnelerini kalıcı hale getirme

Gelişmiş: FileEntry nesneleri süresiz olarak devam ettirilemez. Uygulamanızın, her başlatılışında kullanıcıdan bir dosya seçmesini istemesi gerekir. Uygulamanız, çalışma zamanındaki bir kilitlenme veya güncelleme nedeniyle yeniden başlatılmaya zorlandıysa FileEntry öğesini geri yüklemek için restoreEntry() seçeneğini kullanabilirsiniz.

İsterseniz retainEntry() tarafından döndürülen kimliği kaydedip uygulama yeniden başlatıldığında geri yükleyerek deneyebilirsiniz. (İpucu: Arka plan sayfasındaki onRestarted etkinliğine bir dinleyici ekleyin.)

Tamamlanan yapılacaklar uygulamanızı başlatma

6. adımı tamamladınız. Uygulamanızı yeniden yükleyin ve yapılacaklar listesi ekleyin. To do'larınızı .txt dosyasına aktarmak için Diske aktar'ı tıklayın.

Dışa aktarılan yapılacaklar listesi içeren 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 makaleleri inceleyin:

Sonraki adıma geçmeye hazır mısınız? 7. Adım - Uygulamanızı yayınlama » başlıklı makaleyi inceleyin.