Creando una aplicación para iOS y Android con Apache Cordova

Tutorial en 5 pasos para crear tu app con Apache Cordova

Àlex Masnou
Blog de Interactius UX
4 min readSep 20, 2016

--

Si en el post anterior hablábamos sobre la creación de una app con Ionic Creator, en esta entrada utilizaremos Apache Cordova para encapsular nuestra aplicación para que pueda ser instalada en cualquier dispositivo móvil iOS o Android.

Instalando Apache Cordova en nuestro equipo

Apache Cordova es una utilidad que se ejecuta a través de la línea de comandos. Para poder utilizarla necesitaremos disponer de Node.js instalado en nuestro equipo. Una vez instalado, utilizaremos el gestor de paquetes NPM para instalar Cordova con el siguiente comando:

sudo npm install -g cordova

Creando un proyecto y agregando plataformas

Para la creación de un nuevo proyecto de Cordova, nos dirigimos a un directorio (previamente creado), y ejecutaremos el siguiente comando para crear la estructura y los ficheros de un proyecto de Cordova:

cordova create [nombre del proyecto] //Sin los corchetes
Captura de pantalla 2016-09-19 a las 17.34.38

Por defecto, Cordova no trae añadida ninguna plataforma sobre la cual se compilará nuestra aplicación. Para añadir una, utilizamos el siguiente comando:

cordova platform add [amazon-fireos | android | blackberry10 | browser | firefoxos | ios | osx | webos]
Captura de pantalla 2016-09-19 a las 17.49.55

Como podemos observar, Cordova nos ofrece un amplio repertorio de plataformas, por lo que conseguiremos hacer funcionar nuestra aplicación en casi cualquier sistema operativo disponible en el mercado. Con el siguiente comando, podremos listar todas las plataformas que tenemos instaladas en nuestro proyecto.

cordova platform ls
Captura de pantalla 2016-09-19 a las 17.51.04

Añadiendo archivos a nuestro proyecto

El directorio por defecto de Cordova para alojar los archivos del proyecto es ‘[raíz del proyecto]/www’. Aquí dentro deberemos colocar los archivos HTML, CSS y JS de nuestro proyecto web. Por ejemplo, podemos utilizar los archivos que Ionic Creator genera cuando descargamos el código fuente de nuestra aplicación. Todo lo que se encuentre dentro del directorio ‘www’ será encapsulado por Cordova, y el contenido será mostrado cuando la aplicación se ejecute en un dispositivo.

Captura de pantalla 2016-09-19 a las 18.04.02

Compilando la aplicación para iOS y Android

Según el sistema operativo de destino, deberemos tener en cuenta unos ciertos requerimientos. Para poder compilar la aplicación para iOS es necesario disponer de un equipo con macOS con Xcode instalado. En el caso de Android, necesitaremos tener el IDE oficial (Android Studio), que se encuentra disponible para plataformas macOS, Linux y Windows.

Una vez cumplidos los requerimientos anteriores, utilizaremos el siguiente comando para compilar la aplicación:

cordova build [android | ios]

La utilidad nos generará un archivo que variará según la plataforma. En el caso de Android, la salida resultante será un archivo .apk, que podremos instalar de forma directa en cualquier dispositivo de esta plataforma.

En el caso de iOS se generará un fichero .xcodeproj, que podremos abrir en el propio Xcode. Desde Xcode tendremos la posibilidad de transferirlo a nuestro dispositivo iOS y testear allí la aplicación.

En el caso de no disponer de un dispositivo iOS o Android, podemos utilizar los emuladores de cada una de las plataformas para visualizar la aplicación en nuestro equipo de igual forma que se vería en un dispositivo. Para ello, utilizaremos el siguiente comando:

cordova emulate [android | ios]
Captura de pantalla 2016-09-19 a las 18.41.48

Conclusiones

Con Apache Cordova, ya no necesitaremos crear una aplicación específica para cada plataforma. A no ser que necesitemos una aplicación con grandes requerimientos gráficos o con unas necesidades muy específicas, Cordova puede ser una muy buena solución para el desarrollo de nuestro proyecto. No necesitamos conocer Objective-C, Swift, Java o C++, sino que nos basta con tener conocimientos en HTML, CSS y JS para posteriormente poder encapsular el código con esta herramienta. En pocos pasos tendremos la app funcionando en nuestro dispositivo móvil.

--

--