El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest mòdul, aprendrem com depurar i provar les aplicacions desenvolupades amb Apache Cordova. La depuració i les proves són parts essencials del cicle de desenvolupament de programari, ja que ens permeten identificar i corregir errors, així com assegurar-nos que l'aplicació funcioni correctament en diferents dispositius i plataformes.

Introducció a la depuració

1.1. Què és la depuració?

La depuració és el procés d'identificar, analitzar i corregir errors en el codi. Aquests errors poden ser de diversos tipus, com ara errors de sintaxi, errors lògics o problemes de rendiment.

1.2. Eines de depuració

Per depurar aplicacions Cordova, podem utilitzar diverses eines, incloent:

Chrome DevTools: Una eina poderosa per depurar aplicacions web i mòbils.
Safari Web Inspector: Eina de depuració per a aplicacions iOS.
Visual Studio Code: Un editor de codi amb capacitats de depuració integrades.
ADB (Android Debug Bridge): Una eina de línia de comandes per interactuar amb dispositius Android.

Depuració amb Chrome DevTools

2.1. Configuració de Chrome DevTools

Obre Chrome i connecta el teu dispositiu Android al teu ordinador.
Activa el mode de desenvolupador al teu dispositiu Android.
Obre Chrome DevTools al teu ordinador i selecciona "More tools" > "Remote devices".
Selecciona el teu dispositiu i obre l'aplicació Cordova que vols depurar.

2.2. Depuració del codi

Un cop configurat, pots utilitzar Chrome DevTools per:

Inspeccionar elements: Veure i modificar l'HTML i CSS de la teva aplicació.
Consola: Executar codi JavaScript i veure missatges de registre.
Fonts: Navegar pel codi font, establir punts de trencament i veure l'estat de les variables.
Rendiment: Analitzar el rendiment de la teva aplicació i identificar colls d'ampolla.

// Exemple de codi per establir un punt de trencament
function saluda() {
    let missatge = "Hola, món!";
    console.log(missatge); // Estableix un punt de trencament aquí
}
saluda();

Depuració amb Safari Web Inspector

3.1. Configuració de Safari Web Inspector

Obre Safari al teu Mac i connecta el teu dispositiu iOS.
Activa el mode de desenvolupador al teu dispositiu iOS.
Obre Safari i selecciona "Develop" > "Your Device" > "Your App".

3.2. Depuració del codi

Safari Web Inspector ofereix funcionalitats similars a Chrome DevTools, com ara inspeccionar elements, utilitzar la consola, navegar pel codi font i analitzar el rendiment.

Proves de l'aplicació

4.1. Tipus de proves

Proves unitàries: Proves de petites unitats de codi de manera aïllada.
Proves d'integració: Proves de la interacció entre diferents unitats de codi.
Proves funcionals: Proves de les funcionalitats completes de l'aplicació.
Proves de rendiment: Proves per assegurar que l'aplicació funcioni de manera eficient sota diferents condicions.

4.2. Eines de proves

Jasmine: Un framework de proves unitàries per a JavaScript.
Karma: Un executor de proves per a JavaScript.
Appium: Una eina de proves d'automatització per a aplicacions mòbils.

4.3. Exemple de prova unitària amb Jasmine

// Exemple de prova unitària amb Jasmine
describe("Funció saluda", function() {
    it("hauria de retornar 'Hola, món!'", function() {
        let resultat = saluda();
        expect(resultat).toBe("Hola, món!");
    });
});

function saluda() {
    return "Hola, món!";
}

Consells i millors pràctiques

Registra missatges de depuració: Utilitza console.log per registrar informació útil durant la depuració.
Utilitza punts de trencament: Estableix punts de trencament estratègics per analitzar l'execució del codi.
Prova en diferents dispositius: Assegura't que la teva aplicació funcioni correctament en una varietat de dispositius i plataformes.
Automatitza les proves: Utilitza eines d'automatització per executar proves de manera eficient i consistent.

Exercicis pràctics

Exercici 1: Depuració amb Chrome DevTools

Crea una aplicació Cordova simple que mostri un missatge de benvinguda.
Utilitza Chrome DevTools per inspeccionar els elements de la pàgina.
Estableix un punt de trencament en el codi JavaScript i analitza l'estat de les variables.

Exercici 2: Prova unitària amb Jasmine

Escriu una funció JavaScript que sumi dos nombres.
Escriu una prova unitària amb Jasmine per assegurar-te que la funció funcioni correctament.

Solució de l'Exercici 2

// Funció que suma dos nombres
function suma(a, b) {
    return a + b;
}

// Prova unitària amb Jasmine
describe("Funció suma", function() {
    it("hauria de retornar la suma de dos nombres", function() {
        let resultat = suma(2, 3);
        expect(resultat).toBe(5);
    });
});

Conclusió

En aquest mòdul, hem après com depurar i provar aplicacions Cordova utilitzant diverses eines i tècniques. La depuració i les proves són essencials per assegurar que les nostres aplicacions funcionin correctament i ofereixin una bona experiència d'usuari. Amb les eines i les pràctiques adequades, podem identificar i corregir errors de manera eficient, així com garantir que la nostra aplicació sigui robusta i fiable.

Depuració i proves