Desarrollo de aplicaciones mobile multiplataforma con Apache Cordova

Suponiendo que estamos configurando nuestra aplicación perteneciente al dominio solvetic.com, que se ejecutará en pantalla completa y solo con orientación vertical, nuestro archivo config.xml quedaría de la siguiente manera.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.solvetic.miapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Solvetic App</name>
    <description>
	    Solvetic es el punto de encuentro de profesionales y amantes de la tecnología. 
	    Una comunidad que te sorprenderá y ayudará en más de una ocasión.
    </description>
    <author email="desarrollo@solvetic.com" href="http://solvetic.com">
	    Pedro Castellanos
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <preference name="Fullscreen" value="true" />
    <preference name="Orientation" value="portrait " />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
	    <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
	    <allow-intent href="itms:*" />
	    <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Esto dará como resultado lo que se muestra en la siguiente pantalla:

 

 

 

Si queremos especificar preferencia para cada plataforma debes agregarlo dentro de la etiqueta correspondiente a cada plataforma.

 

Ejemplo:

<platform name="ios">
    <preference name="Orientation" value="landscape" />
</platform>

Así añadimos preferencia.

 

¿Cómo defino un icono para mi aplicación?

Dentro de nuestro archivo principal de configuración deberás colocar lo siguiente:

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

• src (requerido): especifica la ubicación del archivo de imagen, en relación a su directorio de proyecto.
• platform (opcional): plataforma de destino.
• width (opcional): anchura del ícono en píxeles.
• height (opcional): altura del ícono en píxeles.
• density (opcional): específico de Android, especifica la densidad del ícono.

 

Puede utilizar la siguiente configuración para definir un ícono único por defecto, que se utilizará para todas las plataformas.

<icon src="www/img/icon.png" />

 

Pulsa en la imágen para ampliarla

 

¿Cómo puedo acceder a los componentes de mi dispositivo móvil?

Apache Cordova posee la ventaja de acceder vía javascript a los distintos componentes nativos de tu dispositivo móvil como puede ser la cámara, el teclado, GPS… dando la posibilidad de interactuar con ella desde nuestra interfaz web.

 

La forma en que lo trabaja Apache Cordova es a través de plugins que vas adhiriendo a la aplicación que estás realizando. Para esto es necesario que ejecutes la siguiente línea de comando:

cordova plugin search nombre_plugin

Con esta línea de comando podrás buscar en el listado de plugins desarrollados por la comunidad Apache Cordova e incluso por terceros que se encuentre en los registros de http://cordova.apache.org/plugins/.

 

Simplemente debes modificar donde dice nombre_plugin y colocar el nombre del dispositivo con el cual deseas trabajar, esto te mostrará un listado de todos los plugins que coincidan con el nombre de búsqueda.

 

Agregar un Plugin

Para agregar un plugin deberás ejecutar la siguiente línea de comando:

cordova plugin add nombre_plugin

Si queremos agregar el plugin que controla la cámara, ejecutaríamos lo siguiente:

cordova plugin add cordova-plugin-camera

¿Cómo hago uso del plugin instalado?

Para conocer cómo podemos usar un plugin determinado, primero debemos buscarlo en la página web: http://cordova.apache.org/plugins/ dentro de ella, podremos ampliar la información del uso de cada plugin.

 

Ejemplo:

 

Para el plugin de la cámara, el link de información completa es:

 

https://www.npmjs.co...a-plugin-camera

 

 

 

Pulsa en la imágen para ampliarla

 

Eliminar un Plugin

Para eliminar un plugin es necesario conocer el nombre del mismo, en caso de no conocerlo, podemos dirigirnos al directorio plugins que se encuentra en la raíz de nuestro proyecto y copiar el nombre del directorio del plugin.

 

Ejemplo:

cordova plugin rm nombre_plugin

 

Pulsa en la imágen para ampliarla

 

Para eliminar el plugin que se encuentra instalado en la imagen de ejemplo, ejecutamos la siguiente línea en nuestra consola:

cordova plugin rm cordova-plugin-whitelist

Visto todo lo anterior, en conclusión podemos decir que de esta forma se desarrollan aplicaciones multiplataforma usando única y exclusivamente Apache Cordova. Ya lo que queda es definir la interfaz gráfica con las herramientas que mejor te convengan como programador. Ej: Bootstrap, Jquery Mobile, Ionic… Para ello todo lo que tienes que modificar se encuentra dentro del directorio www tal cual como si se tratara del directorio de un servidor web.