Hooks en Cordova: Cargar todos los plugins de forma automática
0. Índice de
contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Mac Book Pro 15″ (2,3 Ghz Intel Core i7, 16 GB DDR3)
- Sistema Operativo: Mac OS X Mavericks
- node v0.10.32
- cordova 3.4.1-0.1.0
2. Introducción
Los hooks son los elementos que Cordova proporciona para extender su funcionalidad en función de las necesidades que tengamos. Son pequeños scripts
que podemos encontrar dentro del directorio PROJECT_CORDOVA_HOME/hooks, separados en directorios nombrados como la fase en la que tienen que ser
ejecutados. Las distintas fases de las que podemos hacer uso son: after_build, after_compile, after_docs, before_build, … Tenéis un listado con todas
ellas en este link.
Estos scripts pueden estar escritos en cualquier lenguaje, pero el más idóneo es NodeJS dado que tiene que estar presente en la máquina para poder
ejecutar Cordova y es completamente multiplataforma.
En este tutorial vamos a ver cómo crear un hook para poder cargar siempre que se necesiten los plugins de un proyecto sin tener que hacerlo uno por
uno de forma manual; algo muy tedioso que hace que más de un desarrollador opte por subir la carpeta «plugins» y «platforms» a su repositorio de código con tal de no
estar haciéndolo cada vez de forma manual.
3. Vamos al lío
Para poner un ejemplo más o menos real vamos a hacer un clone del repositorio de código que utilicé para la charla sobre Cordova en el Google Developer
Group de Madrid, que podéis ver en este enlace.
Entonces para hacer el clone ejecutamos desde el terminal:
git clone https://github.com/raguilera82/GDG-demo.git
Si le echáis un vistazo al código veréis que a priori no es un proyecto Cordova, dado que es buena práctica subir al repositorio de código solo los fuentes que no puedan
volver a ser generados en el cliente. Esto cobra especial relevancia cuando nuestro desarrollo es multiplataforma, ya que, ¿para qué quiere el desarrollador
de la aplicación de Windows Phone en su Windows 8 el código de la aplicación de IOS?
Entonces lo primero que vamos a hacer es construir el proyecto de Cordova que tenga en cuenta el código que hay dentro de la carpeta «app». Esto lo
conseguimos ejecutando el comando de create con la variante –link-to, que hace un enlace simbólico entre la carpeta «www» del proyecto de Cordova
y la carpeta «app» de nuestro proyecto web.
cordova create cordova-apps com.autentia.gdgdemo GDGdemo --link-to=app
Nota: Esto es solo si estamos en fase de desarrollo, para producción haríamos el link con la carpeta «dist» que contiene el código de producción de la aplicación web.
Ahora si entramos en la carpeta «cordova-apps» veremos que están los directorios típicos de una aplicación Cordova y concretamente el directorio «hooks»
del que estamos hablando.
Si véis el README de mi proyecto, veréis que el siguiente paso es instalar uno por uno todos los plugins necesarios; que para el caso de esta demo
son unos pocos. Este proceso lo podemos simplificar creando un hook, que se ejecute siempre que se añada una nueva plataforma al proyecto de Cordova.
Para hacer esto solo tenemos que crear un directorio dentro del directorio «hooks» con el nombre de la fase en la que se quiera ejecutar, en nuestro
caso va a ser «after_platform_add» y dentro crearemos el fichero install_all_plugins.js con el siguiente contenido:
#!/usr/bin/env node
var pluginlist = [
"org.apache.cordova.geolocation",
"org.apache.cordova.camera",
"org.apache.cordova.vibration",
"org.apache.cordova.device",
"org.apache.cordova.network-information",
"org.apache.cordova.dialogs",
"org.apache.cordova.device-motion"
];
var fs = require('fs');
var path = require('path');
var sys = require('sys')
var exec = require('child_process').exec;
function puts(error, stdout, stderr) {
sys.puts(stdout)
}
pluginlist.forEach(function(plug) {
exec("cordova plugin add " + plug, puts);
});
Como véis el hook es muy sencillo, nosotros solo tenemos que rellenar una vez la lista de plugins que se tienen que cargar cada vez que una plataforma se
añade al proyecto de Cordova.
Por último guardamos el fichero que es de vital importancia que tenga permisos de ejecución.
chmod +x install_all_plugins.js
Y ahora cuando añadamos cualquier plataforma, el código del plugin se ejecutará y automáticamente nos cargará los plugins que hayamos especificado
en la lista.
cordova platform add android ios
Por último decir que el directorio «hooks» sí que se tiene que subir al repositorio de código. Si yo lo subiera a este repositorio no tendría que
indicar como instalar los plugins necesarios, ya que todo se haría de forma automática. No lo voy a hacer para que podáis practicar con este tutorial 😉
4. Conclusiones
Este es solo un ejemplo de la potencia que tienen los hooks en Cordova, la lista de fases de ejecución es muy amplia y el límite lo pone la imaginación.
Cualquier duda o sugerencia en la zona de comentarios.
Saludos.
