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

HOME

En aquest tema, explorarem com integrar codi natiu en les aplicacions Apache Cordova. Aquesta habilitat és crucial per aprofitar al màxim les capacitats del dispositiu i oferir funcionalitats que no estan disponibles a través dels plugins estàndard de Cordova.

Objectius del tema

Comprendre quan i per què utilitzar codi natiu en una aplicació Cordova.
Aprendre a crear i integrar mòduls de codi natiu en aplicacions Cordova.
Veure exemples pràctics d'ús de codi natiu en Android i iOS.
Proporcionar exercicis pràctics per reforçar els conceptes apresos.

Quan utilitzar codi natiu?

És recomanable utilitzar codi natiu en les següents situacions:

Quan necessites accedir a funcionalitats específiques del dispositiu que no estan disponibles a través dels plugins existents.
Per optimitzar el rendiment de certes operacions que poden ser més eficients en codi natiu.
Quan vols reutilitzar codi natiu existent en una aplicació Cordova.

Integració de codi natiu en Cordova

Passos generals per integrar codi natiu

Crear un plugin personalitzat: Els plugins són la manera recomanada per integrar codi natiu en Cordova.
Escriure el codi natiu: Implementar la funcionalitat desitjada en el llenguatge natiu de la plataforma (Java/Kotlin per Android, Objective-C/Swift per iOS).
Exposar el codi natiu a JavaScript: Utilitzar l'API de Cordova per permetre que el codi JavaScript de l'aplicació pugui cridar el codi natiu.

Exemple pràctic: Plugin natiu per Android

1. Crear un plugin personalitzat

Primer, crearem l'estructura bàsica del plugin. Suposem que volem crear un plugin que accedeixi a una funcionalitat específica d'Android.

cordova plugin add cordova-plugin-example

2. Escriure el codi natiu (Java)

Creem un fitxer ExamplePlugin.java dins del directori src/android del plugin.

package com.example.plugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;

public class ExamplePlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success("Hello, " + message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

3. Exposar el codi natiu a JavaScript

Creem un fitxer www/ExamplePlugin.js per exposar la funcionalitat a JavaScript.

var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
    exec(success, error, 'ExamplePlugin', 'coolMethod', [arg0]);
};

Exemple pràctic: Plugin natiu per iOS

1. Crear un plugin personalitzat

Igual que en Android, crearem l'estructura bàsica del plugin.

cordova plugin add cordova-plugin-example

2. Escriure el codi natiu (Objective-C)

Creem un fitxer ExamplePlugin.m dins del directori src/ios del plugin.

#import <Cordova/CDV.h>

@interface ExamplePlugin : CDVPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end

@implementation ExamplePlugin

- (void)coolMethod:(CDVInvokedUrlCommand*)command {
    NSString* echo = [command.arguments objectAtIndex:0];
    CDVPluginResult* pluginResult = nil;

    if (echo != nil && [echo length] > 0) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Expected one non-empty string argument."];
    }

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

3. Exposar el codi natiu a JavaScript

Igual que en Android, creem un fitxer www/ExamplePlugin.js per exposar la funcionalitat a JavaScript.

var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
    exec(success, error, 'ExamplePlugin', 'coolMethod', [arg0]);
};

Exercicis pràctics

Exercici 1: Crear un plugin natiu per Android

Crea un plugin que accedeixi a la informació de la bateria del dispositiu.
Implementa el codi natiu en Java per obtenir el nivell de bateria.
Exposa la funcionalitat a JavaScript i crida-la des d'una aplicació Cordova.

Exercici 2: Crear un plugin natiu per iOS

Crea un plugin que accedeixi a la informació de la xarxa del dispositiu.
Implementa el codi natiu en Objective-C per obtenir l'estat de la xarxa.
Exposa la funcionalitat a JavaScript i crida-la des d'una aplicació Cordova.

Solucions als exercicis

Solució a l'Exercici 1

1. Crear el plugin

cordova plugin add cordova-plugin-battery

2. Implementar el codi natiu en Java

package com.example.plugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.BatteryManager;

public class BatteryPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("getBatteryLevel")) {
            this.getBatteryLevel(callbackContext);
            return true;
        }
        return false;
    }

    private void getBatteryLevel(CallbackContext callbackContext) {
        IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
        Intent batteryStatus = cordova.getActivity().registerReceiver(null, ifilter);
        int level = batteryStatus.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
        int scale = batteryStatus.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
        float batteryPct = level / (float)scale * 100;
        callbackContext.success((int)batteryPct);
    }
}

3. Exposar la funcionalitat a JavaScript

var exec = require('cordova/exec');

exports.getBatteryLevel = function(success, error) {
    exec(success, error, 'BatteryPlugin', 'getBatteryLevel', []);
};

Solució a l'Exercici 2

1. Crear el plugin

cordova plugin add cordova-plugin-network

2. Implementar el codi natiu en Objective-C

#import <Cordova/CDV.h>
#import <SystemConfiguration/SystemConfiguration.h>

@interface NetworkPlugin : CDVPlugin
- (void)getNetworkStatus:(CDVInvokedUrlCommand*)command;
@end

@implementation NetworkPlugin

- (void)getNetworkStatus:(CDVInvokedUrlCommand*)command {
    CDVPluginResult* pluginResult = nil;
    SCNetworkReachabilityFlags flags;
    SCNetworkReachabilityRef address;
    address = SCNetworkReachabilityCreateWithName(NULL, "www.google.com");

    Boolean success = SCNetworkReachabilityGetFlags(address, &flags);
    CFRelease(address);

    BOOL isReachable = success && (flags & kSCNetworkFlagsReachable) && !(flags & kSCNetworkFlagsConnectionRequired);

    if (isReachable) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"Connected"];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Not Connected"];
    }

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

3. Exposar la funcionalitat a JavaScript

var exec = require('cordova/exec');

exports.getNetworkStatus = function(success, error) {
    exec(success, error, 'NetworkPlugin', 'getNetworkStatus', []);
};

Conclusió

En aquest tema, hem après com integrar codi natiu en aplicacions Apache Cordova mitjançant la creació de plugins personalitzats. Hem vist exemples pràctics tant per Android com per iOS, i hem proporcionat exercicis per reforçar els conceptes apresos. Aquesta habilitat és essencial per aprofitar al màxim les capacitats del dispositiu i oferir funcionalitats avançades en les teves aplicacions Cordova.

Ús de codi natiu

Objectius del tema

Quan utilitzar codi natiu?

Integració de codi natiu en Cordova

Passos generals per integrar codi natiu

Exemple pràctic: Plugin natiu per Android

1. Crear un plugin personalitzat

2. Escriure el codi natiu (Java)

3. Exposar el codi natiu a JavaScript

Exemple pràctic: Plugin natiu per iOS

1. Crear un plugin personalitzat

2. Escriure el codi natiu (Objective-C)

3. Exposar el codi natiu a JavaScript

Exercicis pràctics

Exercici 1: Crear un plugin natiu per Android

Exercici 2: Crear un plugin natiu per iOS

Solucions als exercicis

Solució a l'Exercici 1

1. Crear el plugin

2. Implementar el codi natiu en Java

3. Exposar la funcionalitat a JavaScript

Solució a l'Exercici 2

1. Crear el plugin

2. Implementar el codi natiu en Objective-C

3. Exposar la funcionalitat a JavaScript

Conclusió

Curs d'Apache Cordova

Mòdul 1: Introducció a Apache Cordova

Mòdul 2: Conceptes bàsics i APIs

Mòdul 3: Interfície d'usuari i experiència d'usuari

Mòdul 4: Funcions avançades de Cordova

Mòdul 5: Desplegament i distribució

Mòdul 6: Estudis de cas i aplicacions del món real

Mòdul 7: Tendències futures i actualitzacions