Home / Cordova Dersleri / Cordova File System Eklentisi

Cordova File System Eklentisi

Cordova’da native sisteme erişim imkanı bulduğumuzu söylemiştik. Bunu elbette pluginlerle gerçekleştiriyoruz. Normalde bir javascript kodunun gömülü sisteme erişmesini bekleyemeyiz. Bu işlemi bizim için eklentiler gerçekleştiriyor. Bu yazımızda Cordova File System Eklentisine göz atacağız. Bu eklenti kullanıcının telefonundaki dosya sistemine erişmemizi sağlıyor. Bu sayede dosya oluşturabilir, oluşturduğumuz dosyayı okuyabiliriz.

Cordova File System Eklentisi Kurulumu

İçerik

Aşağıdaki komutla gerekli indirmeyi yapalım.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

Şimdi arayüzümüzü tasarlayalım.

<button id = "createFile">Dosya Oluştur</button>
<button id = "writeFile">Dosyaya Yaz</button>
<button id = "readFile">Dosya Oku</button>
<button id = "removeFile">Dosya Sil</button>

<textarea id = "textarea"></textarea>

Sıra event listener eklemeye geldi. Herbir butona tıklanma olayını event listener ile yakalayacağız ve ilgili fonksiyona yönlendireceğiz. (onDeviceReady)

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

Dosya oluşturduğumuzda bu dosya uygulamanın root folderında oluşmaktadır. Bu folder’a erişmek için superuser erişim yetkinizin bulunması gerekir. Bizim uyguladığımız senaryona root folder \data\data\com.example.hello\cache dizinindedir.

Şimdi bir tane log.txt isminde bir dosya oluşturalım. Tabii bunu index.js dosyamıza yazıyoruz.

Cordova Dosya Oluşturma Fonksiyonu

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Fonksiyonumuzu ekleyip kaydettikten sonra uygulamamızı çalıştırıp Dosya Ekle Butonuna tıklayalım. Bize “File Creation successfull!!!” gibi bir uyarı çıkaracaktır.

doğrulamak için root foldera gidelim. (az önce belirttiğim dizin, uygulama isminize bağlı olarak sizde farklı olacaktır) Burada log.txt dosyamızın oluştuğunu göreceksiniz.

Cordova Dosyaya Yazma Fonksiyonu

Aşağıdaki fonksiyonu ekleyelim.

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {

      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);

      }, errorCallback);

   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Dikkat edin dosyaya yazma işlemini aşağıdaki satırlar halletti; Yazılan ifade “Lorem Ipsum”

var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
fileWriter.write(blob);

Uygulamamızı tekrar çalıştıralım. ve bu sefer Dosyaya Yaz Butonuna tıklayalım. Size yazmanın başarılı olduğuna dair bir uyarı verecektir. Şimdi oluşturmuş olduğumuz log.txt dosyasına tekrar bakın ve yazma işleminin başarılı olduğunu görün.

Cordova Dosya Okuma İşlemi

Şimdi bir dosyanın içerisinde yer alan ifadeleri okuyan bir fonksiyon yazalım, okuduktan sonra index.html’de oluşturduğumuz textarea içerisine okuduğu ifadeyi bassın.

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {

      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };

            reader.readAsText(file);

         }, errorCallback);

      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Dosya oku butonuna tıkladığınızda TextArea içerisine Lorem Ipsum yazısının geldiğini göreceksiniz.

Cordova Dosya Silme Fonksiyonu

Aşağıdaki fonksiyon log.txt ismindeki dosyayı silecektir.

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);

      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Dosya sil butonuna tıkladığınızda dosyanın silindiğine dair bir uyarı göreceksiniz. Dosyanın konumuna gittiğinizde log.txt diye bir dosyanın bulunmaması gerekiyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir