Apache Cordova

volver a M06 Desarrollo web en entorno cliente

Pasos Previos

Instalación de Android Studio

1. Primero añadimos los repositorios par instalar ubuntu-make que permite instalar SDK's en ubuntu

   sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
   

2. Actualizamos los repositorios

   sudo apt-get update
   

3. Ahora instalamos ubuntu-make

   sudo apt-get install ubuntu-make
   

4. Con el comando umake podemos instalar el Android Studio

   sudo umake android
   

5. Finalmente para configurar android studio tenemos que abrir el Dash y empezar a escribir Android Studio hasta que nos aparezca el icono de la aplicación, lo clicamos y seguimos el wizard hasta tenerlo configurado.
6. Otra cosa importante es configurar el path del ANDROID_HOME. Si no habéis cambiado nada al instalar Android Studio por defecto lo instala en la home del usuario por lo tanto para añadir el path abrimos el fichero .bashrc

   sudo nano ~/.bashrc
   

7. Ahora vamos al final del fichero y añadimos las siguiente lineas:

   export ANDROID_HOME=$HOME/Android/Sdk
   export PATH=$PATH:$ANDROID_HOME/tools
   

8. Para ejecutar el emulador de android desde la linea de comandos es posible que necesiteis tener instalado Gradle. Por lo tanto:

    sudo apt-get install gradle
   

9. Acceptar las licencias sdkmanager --licenses

Instalación de Node.js y gestor de paquetes npm

Para instalar Node.js y npm podéis seguir el tutorial Node.js

Instalación de Apache Cordova

Desde los repositorios de ubuntu

1. Primero agregamos el ppa a los repositorios de ubuntu y los actualizamos

   $ sudo add-apt-repository ppa:cordova-ubuntu/ppa
   $ sudo apt-get update
   

2. Instalamos el paquete cordova-cli (y sus dependencias)

   $ sudo apt-get install cordova-cli
   

Desde npm (manejador de paquetes por defecto de Node.js)

1. Para instalar cordova desde npm solo tenemos que ejecutar el siguiente comando

     $ sudo npm install -g cordova
   

Mi primera App con Cordova

1. Para crea nuestra primera aplicación en Cordova nos situamos en el directorio donde mantener nuestro código fuente (p.e.: ~/Documentos/CordovaCode/) y ejecutamos el siguiente comando. Podemos añadir el parámetro -d para que nos muestre información sobre el progreso de creación de la aplicación

   $ cordova create hello com.example.hello HelloWorld
   

   • Cordova create indica que queremos crear una aplicación
   • hello es el nombre de la carpeta donde se guardará toda la información relativa a la aplicación
   • com.example.hello es un nombre de dominio para la aplicación
   • HelloWorld es el título de la pantalla de aplicación
2. Una vez ejecutado el comando anterior se generará dentro de la carpeta hello un árbol de ficheros y carpetas necesarios para ejecutar la aplicación. A partir de este punto todos los comandos se tendrán que ejecutar dentro de la carpeta de la aplicación, en nuestro caso, dentro de hello.

   $ cd hello
   

3. Para poder hacer el "build" (construir) el proyecto primero tenemos que definir la/s plataforma/s de destino (Android, IOS, etc). con el siguiente comando obtenemos un listado de las plataformas disponibles y las instaladas.

   $ cordova platforms ls
   

   Por cierto los comandos platforms y platform son sinónimos

4. Para añadir una plataforma (por ejemplo Android) tenemos que ejecutar...

   $ cordova platform add android
   

5. Ahora solo nos queda construir el proyecto.

   $ cordova build android
   

   Si no especificas ninguna plataforma, cordova realizará el build para todas las plataformas añadidas al proyecto

6. Por último para lanzar la aplicación en el emulador de android de Android Studio ejecutamos

   $ cordova emulate android