Bienvenid@s a la segunda entrada del tutorial sobre Apache Cordova.

En esta nueva entrega explicare como añadir plugins, tanto oficiales como los creados por terceros y crear los paquetes para ser instalados en nuestro dispositivo o en un Dispositivo Virtual.

Plugins oficiales:

Cordova cuenta con varios plugins que nos permite usar las distintas características de nuestro dispositivo, como la geolocalización, los sms, las llamadas, etc. Para este ejemplo vamos a usar la de la cámara.

Para instalar el plugin nos basta con ejecutar

cordova plugin add cordova-plugin-camera

Los plugins que vayamos añadiendo se guardaran dentro de la carpeta plugins que esta en el directorio de nuestro proyecto. Si miramos veremos 2: cordova-plugin-whitelist que sirve para definir a que paginas se podrá acceder desde nuestra aplicación y cordova-plugin-camera que es la que acabamos de añadir.

Ahora en el directorio www que se encuentra en la carpeta principal del proyecto vamos a crear un archivo html. Podemos borrar sin problemas lo que añade Cordova al crear el proyecto.

index.html

<!DOCTYPE html>
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
		<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
		<meta name="format-detection" content="telephone=no">
		<meta name="msapplication-tap-highlight" content="no">
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
		<title>Camera Test app</title>
		<style>
			#mifoto {max-width: 100% }
			button { padding: 5px }
		</style>
		<script>
			function sacafoto(){
				navigator.camera.getPicture(onSuccess, onFail, { quality: 90,
				destinationType: Camera.DestinationType.FILE_URI });
			}
			function onSuccess(imageURI) {
				var image = document.getElementById('mifoto');
				image.src = imageURI;
			}

			function onFail(message) {
				alert('Hubo un fallo al sacar la foto: ' + message);
			}
		</script>
	</head>
	<body>
		<div class="app">
            <img src="" id="mifoto">
			<br /><button onclick="sacafoto()">Sacar foto</button>
		</div>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

Una vez pulsado el botón nos pedirá si queremos usar la cámara o escoger alguna foto de la galería. En mi caso escogí la cámara y tras sacar la foto y aceptar nos saldra algo similar a esto:

Plugins no oficiales:

A día de hoy ahí una buena cantidad de plugins disponibles para las diversas plataformas soportadas por Cordova. Podemos encontrar muchas de ellos en la pagina del proyecto, en http://plugins.cordova.io si bien los plugins se están moviendo a npmjs. Podeis saber más sobre ello en http://cordova.apache.org/announcements/2015/04/21/plugins-release-and-move-to-npm.html

En la pagina de cada plugin tendremos las instrucciones de como instalarlo mediante el gestor de plugins de Cordova, por lo que es como hicimos con el plugin oficial de la cámara solo que cambiara el nombre por una dirección web

Generando los paquetes:

Es hora de generar los paquetes para poder instalar los paquetes en nuestros dispositivos o simuladores. Para ello solo nos hace falta un comando:

cordova build

Cordova ira generando los paquetes para cada sistema que hubiésemos añadido. Si solo queremos que lo haga para uno bastara con pasarle su nombre como según parámetro, como por ejemplo cordova build android

Si todo salio correctamente veremos algo como esto:

Ademas nos indica la ruta a los paquetes. Para instalarlo en Android podemos usar el comando adb install -r <ruta> o mediante cordova run android lo cual hara los mismo que build solo que al terminara instalara el paquete. En el caso de Firefox OS abrimos el zip y lo descomprimimos en alguna carpeta. Si usas Firefox 34 o superior abre App Manager abriendo una nueva pestaña e introduciendo esta url: about:app-manager

Veremos lo siguiente:

Pulsamos en Aplicaciones y luego en Añadir aplicación empaquetada. Nos movemos hasta la carpeta donde descomprimimos el paquete y pulsamos Aceptar.

Pulsamos en Actualizar e instalara el paquete. Si pulsamos en Depurar nos saldrá la consola de Firefox para poder depurar nuestra aplicación, ver los mensajes de error, etc.

En el caso de WebIDE (versiones más reciente de Firefox o si estas usando Firefox Developer edition) lo abrimos pulsando las teclas Shift+F8:

Pulsamos en Proyecto y luego en Abrir aplicación empaquetada y nos movenos hasta donde descomprimimos el paquete. Una vez añadido para instalarlo pulsamos sobre el icono de Play y procederá a instalarlo y ejecutarlo. Con el botón de Stop paramos la aplicación y con al llave inglesa abrimos la consola de Firefox para poder depurar la aplicación. Si ya se esta ejecutando en lugar del icono de Play nos saldrá uno similar al de Refrescar para volver a instalar y ejecutar la aplicación.

Y esto de momento es todo. En la próxima entrega veremos que otras opciones tenemos para configurar nuestro proyecto. Si tenéis dudas al respecto podéis consultar la documentación de Cordova o usar el sistema de comentarios. Estaré encantado de ayudaros en lo buenamente que pueda.


Entradas relacionadas: