En este módulo, aprenderás cómo integrar y utilizar código nativo en tus aplicaciones Apache Cordova. Esta habilidad es crucial para aprovechar al máximo las capacidades del dispositivo y para implementar funcionalidades que no están disponibles a través de los plugins estándar de Cordova.

El código nativo se refiere a la programación que se realiza directamente en el lenguaje de programación del sistema operativo del dispositivo. Por ejemplo:

• Android: Java o Kotlin
• iOS: Objective-C o Swift

• Acceso a Funcionalidades Avanzadas: Algunas funcionalidades del dispositivo no están disponibles a través de los plugins de Cordova.
• Mejor Rendimiento: El código nativo puede ser más eficiente y rápido.
• Personalización: Permite una mayor personalización y control sobre el comportamiento de la aplicación.

• Conocimientos Básicos de Cordova: Debes estar familiarizado con la creación y gestión de proyectos Cordova.
• Entorno de Desarrollo Nativo: Debes tener configurado el entorno de desarrollo para la plataforma específica (Android Studio para Android, Xcode para iOS).

Android

1. Instalar Android Studio: Descargar Android Studio
2. Configurar Variables de Entorno: Asegúrate de que las variables de entorno ANDROID_HOME y PATH estén configuradas correctamente.

iOS

1. Instalar Xcode: Descargar Xcode
2. Configurar Certificados y Perfiles de Aprovisionamiento: Necesitarás una cuenta de desarrollador de Apple para configurar los certificados y perfiles de aprovisionamiento.

La estructura de un proyecto Cordova incluye carpetas específicas para cada plataforma. Aquí es donde se integrará el código nativo.

Paso 1: Crear un Plugin Personalizado

1. Crear el Plugin: Utiliza el comando de Cordova para crear un nuevo plugin.

   cordova plugin create my-custom-plugin com.example.myplugin MyCustomPlugin
   

2. Estructura del Plugin:

   my-custom-plugin/
   ├── src/
   │   ├── android/
   │   │   └── MyCustomPlugin.java
   │   └── ios/
   │       └── MyCustomPlugin.m
   ├── www/
   │   └── MyCustomPlugin.js
   ├── plugin.xml
   └── package.json
   

Paso 2: Escribir el Código Nativo

1. Editar MyCustomPlugin.java:

   package com.example.myplugin;
   
   import org.apache.cordova.CordovaPlugin;
   import org.apache.cordova.CallbackContext;
   import org.json.JSONArray;
   import org.json.JSONException;
   import org.json.JSONObject;
   
   public class MyCustomPlugin 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.");
           }
       }
   }
   

2. Editar MyCustomPlugin.js:

   var exec = require('cordova/exec');
   
   exports.coolMethod = function(arg0, success, error) {
       exec(success, error, 'MyCustomPlugin', 'coolMethod', [arg0]);
   };
   

Paso 3: Instalar y Probar el Plugin

1. Instalar el Plugin:

   cordova plugin add path/to/my-custom-plugin
   

2. Usar el Plugin en tu Aplicación:

   <script type="text/javascript" src="cordova.js"></script>
   <script type="text/javascript" src="plugins/com.example.myplugin/www/MyCustomPlugin.js"></script>
   <script type="text/javascript">
       document.addEventListener('deviceready', function() {
           MyCustomPlugin.coolMethod('World', function(result) {
               console.log(result);
           }, function(error) {
               console.error(error);
           });
       }, false);
   </script>
   

Paso 1: Crear el Plugin Personalizado

1. Crear el Plugin: Utiliza el comando de Cordova para crear un nuevo plugin.

   cordova plugin create my-custom-plugin com.example.myplugin MyCustomPlugin
   

2. Estructura del Plugin:

   my-custom-plugin/
   ├── src/
   │   ├── android/
   │   │   └── MyCustomPlugin.java
   │   └── ios/
   │       └── MyCustomPlugin.m
   ├── www/
   │   └── MyCustomPlugin.js
   ├── plugin.xml
   └── package.json
   

Paso 2: Escribir el Código Nativo

1. Editar MyCustomPlugin.m:

   #import <Cordova/CDV.h>
   
   @interface MyCustomPlugin : CDVPlugin
   - (void)coolMethod:(CDVInvokedUrlCommand*)command;
   @end
   
   @implementation MyCustomPlugin
   
   - (void)coolMethod:(CDVInvokedUrlCommand*)command {
       CDVPluginResult* pluginResult = nil;
       NSString* echo = [command.arguments objectAtIndex:0];
   
       if (echo != nil && [echo length] > 0) {
           pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:[NSString stringWithFormat:@"Hello, %@", echo]];
       } else {
           pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Expected one non-empty string argument."];
       }
   
       [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
   }
   
   @end
   

2. Editar MyCustomPlugin.js:

   var exec = require('cordova/exec');
   
   exports.coolMethod = function(arg0, success, error) {
       exec(success, error, 'MyCustomPlugin', 'coolMethod', [arg0]);
   };
   

Paso 3: Instalar y Probar el Plugin

1. Instalar el Plugin:

   cordova plugin add path/to/my-custom-plugin
   

2. Usar el Plugin en tu Aplicación:

   <script type="text/javascript" src="cordova.js"></script>
   <script type="text/javascript" src="plugins/com.example.myplugin/www/MyCustomPlugin.js"></script>
   <script type="text/javascript">
       document.addEventListener('deviceready', function() {
           MyCustomPlugin.coolMethod('World', function(result) {
               console.log(result);
           }, function(error) {
               console.error(error);
           });
       }, false);
   </script>
   

Objetivo: Crear un plugin que obtenga el nivel de batería del dispositivo y lo devuelva a la aplicación Cordova.

Pasos:

1. Crear un nuevo plugin.
2. Escribir el código nativo para obtener el nivel de batería.
3. Integrar el plugin en una aplicación Cordova y mostrar el nivel de batería en la interfaz de usuario.

Objetivo: Crear un plugin que obtenga la lista de contactos del dispositivo y la devuelva a la aplicación Cordova.

Pasos:

1. Crear un nuevo plugin.
2. Escribir el código nativo para obtener la lista de contactos.
3. Integrar el plugin en una aplicación Cordova y mostrar la lista de contactos en la interfaz de usuario.

En este módulo, has aprendido cómo integrar y utilizar código nativo en tus aplicaciones Apache Cordova. Esta habilidad te permite acceder a funcionalidades avanzadas del dispositivo, mejorar el rendimiento de tu aplicación y personalizar su comportamiento. Asegúrate de practicar creando y utilizando plugins personalizados para consolidar tus conocimientos.

En el próximo módulo, exploraremos cómo optimizar el rendimiento de tus aplicaciones Cordova para asegurar una experiencia de usuario fluida y eficiente.