El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Accés a l'emmagatzematge del dispositiu

Següent ►
►

En aquest tema, aprendrem com accedir i gestionar l'emmagatzematge del dispositiu utilitzant Apache Cordova. Això inclou la lectura i escriptura de fitxers, així com la gestió de directoris. Aquestes habilitats són essencials per a moltes aplicacions mòbils que necessiten emmagatzemar dades localment.

Objectius del tema

  • Comprendre com funciona l'API d'emmagatzematge de Cordova.
  • Aprendre a llegir i escriure fitxers en el dispositiu.
  • Gestionar directoris i fitxers.

Conceptes clau

  • File API: Una API que permet la manipulació de fitxers i directoris en el dispositiu.
  • FileSystem: Representa el sistema de fitxers del dispositiu.
  • FileEntry: Representa un fitxer en el sistema de fitxers.
  • DirectoryEntry: Representa un directori en el sistema de fitxers.

Configuració prèvia

Abans de començar, assegura't que tens un projecte Cordova configurat. Si no ho has fet, revisa el mòdul 1 per a la configuració inicial.

Instal·lació del plugin de fitxers

Per accedir a l'emmagatzematge del dispositiu, necessitem instal·lar el plugin de fitxers de Cordova. Pots fer-ho executant la següent comanda:

cordova plugin add cordova-plugin-file

Lectura i escriptura de fitxers

Escriptura de fitxers

A continuació, es mostra un exemple de com escriure dades en un fitxer:

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile("example.txt", { create: true, exclusive: false }, function(fileEntry) {
            fileEntry.createWriter(function(fileWriter) {
                var dataObj = new Blob(['Hello, world!'], { type: 'text/plain' });

                fileWriter.write(dataObj);

                fileWriter.onwriteend = function() {
                    console.log("Successful file write...");
                };

                fileWriter.onerror = function(e) {
                    console.log("Failed file write: " + e.toString());
                };
            });
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Explicació del codi

  1. requestFileSystem: Sol·licita accés al sistema de fitxers del dispositiu.
  2. getFile: Obté una referència a un fitxer (crea el fitxer si no existeix).
  3. createWriter: Crea un objecte FileWriter per escriure en el fitxer.
  4. write: Escriu dades en el fitxer.
  5. onwriteend: Es crida quan l'escriptura és exitosa.
  6. onerror: Es crida quan hi ha un error durant l'escriptura.

Lectura de fitxers

A continuació, es mostra un exemple de com llegir dades d'un fitxer:

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile("example.txt", { create: false, exclusive: false }, function(fileEntry) {
            fileEntry.file(function(file) {
                var reader = new FileReader();

                reader.onloadend = function() {
                    console.log("Successful file read: " + this.result);
                };

                reader.readAsText(file);
            }, onError);
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Explicació del codi

  1. getFile: Obté una referència a un fitxer existent.
  2. file: Obté un objecte File per llegir el fitxer.
  3. FileReader: Crea un objecte FileReader per llegir el contingut del fitxer.
  4. readAsText: Llegeix el fitxer com a text.
  5. onloadend: Es crida quan la lectura és exitosa.

Gestió de directoris

Creació de directoris

A continuació, es mostra un exemple de com crear un directori:

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getDirectory("exampleDir", { create: true, exclusive: false }, function(dirEntry) {
            console.log("Directory created: " + dirEntry.fullPath);
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Explicació del codi

  1. getDirectory: Obté una referència a un directori (crea el directori si no existeix).
  2. fullPath: Retorna el camí complet del directori creat.

Exercicis pràctics

Exercici 1: Crear i escriure en un fitxer

  1. Crea un fitxer anomenat notes.txt.
  2. Escriu el text "Aquest és un fitxer de notes" en el fitxer.
  3. Mostra un missatge de consola quan l'escriptura sigui exitosa.

Exercici 2: Llegir d'un fitxer

  1. Llegeix el contingut del fitxer notes.txt creat en l'exercici anterior.
  2. Mostra el contingut del fitxer en la consola.

Exercici 3: Crear un directori i un fitxer dins d'ell

  1. Crea un directori anomenat documents.
  2. Crea un fitxer anomenat info.txt dins del directori documents.
  3. Escriu el text "Informació important" en el fitxer info.txt.

Solucions

Solució a l'exercici 1

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile("notes.txt", { create: true, exclusive: false }, function(fileEntry) {
            fileEntry.createWriter(function(fileWriter) {
                var dataObj = new Blob(['Aquest és un fitxer de notes'], { type: 'text/plain' });

                fileWriter.write(dataObj);

                fileWriter.onwriteend = function() {
                    console.log("Successful file write...");
                };

                fileWriter.onerror = function(e) {
                    console.log("Failed file write: " + e.toString());
                };
            });
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Solució a l'exercici 2

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile("notes.txt", { create: false, exclusive: false }, function(fileEntry) {
            fileEntry.file(function(file) {
                var reader = new FileReader();

                reader.onloadend = function() {
                    console.log("Successful file read: " + this.result);
                };

                reader.readAsText(file);
            }, onError);
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Solució a l'exercici 3

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getDirectory("documents", { create: true, exclusive: false }, function(dirEntry) {
            dirEntry.getFile("info.txt", { create: true, exclusive: false }, function(fileEntry) {
                fileEntry.createWriter(function(fileWriter) {
                    var dataObj = new Blob(['Informació important'], { type: 'text/plain' });

                    fileWriter.write(dataObj);

                    fileWriter.onwriteend = function() {
                        console.log("Successful file write...");
                    };

                    fileWriter.onerror = function(e) {
                        console.log("Failed file write: " + e.toString());
                    };
                });
            }, onError);
        }, onError);
    }, onError);
});

function onError(error) {
    console.log("Error: " + error.code);
}

Conclusió

En aquest tema, hem après com accedir i gestionar l'emmagatzematge del dispositiu utilitzant Apache Cordova. Hem cobert la lectura i escriptura de fitxers, així com la creació i gestió de directoris. Aquestes habilitats són fonamentals per a moltes aplicacions mòbils que necessiten emmagatzemar dades localment. En el següent tema, explorarem com gestionar la informació de la xarxa utilitzant Cordova.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats