Como instalar Cordova.

Qué es Cordova

Cordova es un conjunto de herramientas que permiten crear aplicaciones nativas mediante HTML5. Es lo que llamamos aplicaciones híbridas.

Requisitos del Cordova

Para instalar Cordova, lo primero que vamos a necesitar es tener intalado Node.js y utilizaremos el gestor de paquetes NPM

Si no lo tienes aún en mi artículo como instalar Node en Mac o cómo instalar Node en Windows
Una vez que ya tienes tu entorno de desarrollo preparado, vamos a a instalarnos el Cordova con linea de comandos.

Con Cordova podras crear una aplicación que se vea en cualquier dispositivo con simplemente saber HTML, Css y Javascript.

Pasos para crear tu primera aplicación movil con Córdova.

  1. Descargamos Cordova con linea de comando

    A continuación nos vamos a descargar Cordova , que no es mas que la versión de desarrollo Opensource de PhoneGap.

    Para ello, abre un terminal en modo administrador.

    En windows cmd en modo administrador.

    A continuación inserta la siguiente instrucción para descargarte el Cordova.

    npm install -g cordova
  2. Creamos nuestra primera Aplicación

    Para ello vamos a seguir las instrucciones que nos da la página web de Cordova https://cordova.apache.org/#getstarted

    Nos situamos con el terminal en el directorio donde queremos instalarlo y tecleamos la siguiente instrucción:

    cordova create MyCordovaAppCookyourweb

    Siendo MyCordovaAppCookyourweb el nombre que le quieras dar a tu aplicación.

    Instrucción para crear myApp

    Instrucción para crear myApp

    Simplemente con ésta instrucción ya hemos creado la Aplicación.

    Si te fijas en el directorio de tu aplicación, verás que se han generado varios directorios tras ejecutar la instrucción:

    Estructura de directorios creada tras la instalacion del proyecto cordova

    Estructura de directorios creada tras la instalacion del proyecto cordova

    Te dejo un resumen para que entiendas la utilidad de cada subcarpeta o subdirectorio:

    Estructura de una aplicación Cordova

    El directorio hooks
    Contiene los scripts necesarios para el funcionamiento de la aplicación
    El directorio platforms
    Contiene las partes nativas de las distintas plataformas, inicialmente vacía y se va llenando según queramos nosotros.
    El directorio plugins
    Contiene extensiones nativas para interactuar con otros componentes o tecnologías de cada plataforma
    El fichero config.xml
    Especifica algunos parámetros y preferencias de nuestra aplicación, como por ejemplo si necesitamos conetarnos a internet.
    El directorio www
    Atención, está es la que nos interesa para desarrollar nuestra app
    El directorio www/res
    Contiene los recursos que necesita nuestra app, como iconos, imágenes, pantallas de arranque o splash screens.
    El fichero index.html
    Es la primera pagina que se ejecuta en nuestra aplicación al iniciarse
    El directorio www/js
    Contiene las instrucciones javascript.
    El directorio www/css
    Contiene las hoajas de estilo css

Vuelve a tu terminal, y sitúate dentro del proyecto recién creado, para procecer a instalar las plataformas para IOs y Android.

cordova platform add android

Añadiendo plataforma Android

Añadiendo plataforma Android


En mi caso, como ya tenía instalado Cordova, y no lo acabo de instalar, me sale un mensaje de advertencia para que lo actualice.
Lo actualizo y continúo.
Actualizo el cordova con la instrucción npn install -g cordova

Actualizo el cordova con la instrucción npn install -g cordova


Para actualizar se debe insertar la misma instrucción que para instalar cordova:

npm install -g cordova

Donde -g quiere decir de forma global para que luego no tengamos problemas con nuestros desarrollos.

cordova platform add Ios

Tras instalar las plataformas verás que se ha generado dos directorios nuevos para dichas plataformas en tu proyecto:

Añadidas plataformas IOS y Android

Añadidas plataformas IOS y Android


Añado la plataforma Ios

Añado la plataforma Ios


Debes de tener en cuenta, que si estas trabajando bajo Windows, no se podrá simular la plataforma.

A continuación vamos a simular la plataforma android

cordova run android

Simula tu aplicación en android con la instrucción cordova run android

Simula tu aplicación en android con la instrucción cordova run android


Se abríra el emulador y tu aplicación estará preparada para programarla.
Emulando en Andrid

Emulando en Andrid

Recuerda que para poder emular tienes que tener tu sdk configurado. Si no sabes cómo hacerlo te dejo éste artículo donde explico cómo hacerlo. Aunque está enfocado a Eclipse quedaté con la conifiguración del SDK.
En caso de estar trabajando bajo Ios, símplemente inserta ios en lugar de android en la instrucción anterior:

cordova run ios

A partir de aquí ya tenenos nuestra plataforma y aplicación funcionando. Con un editor de texto abre la carpeta www y comienza a editar la aplicación.

Eso es todo, ya teneis los conocimientos necesarios para personalizar vuestra primera App construida con cordova (versión de desarrollo de Phonegap). Espero que os haya resultado útil. En el siguiente artículo modificaremos la aplicación para mostrar la geolocalización. Un saludo.

Verónica Serna| Cookyourweb