Instalación del entorno de desarrollo Ionic

Introducción

Vamos a resumir los pasos necesarios para instalar el entorno de desarrollo de aplicaciones híbridas basadas en Ionic en una virtualización con Windows-7 e IExplorer 11.

Instalaremos las herramientas: Node.js, Git, Bower, Gulp, Cordova, Ioni, JDK y Android Studio.

Proceso de instalación. Parte I

1) Instalamos node.js bajando el instalador de la página web oficial (https://nodejs.org/en/) y ejecutándolo. La página detecta el sistema operativo que tengamos instalado y nos ofrecerá el instalador adecuado.

2) Al instalar Node.js se nos habrá descargado también el gestor de paquetes NPM de Node.js. Verificamos que ambos componentes están correctamente instalados lanzando los comandos:

   node -v   --> v4.4.0   npm -v    --> 2.14.20

Nota. Si usamos NPM detrás de un proxy deberemos configurarlo mediante el comando:

   npm config set proxy http://usuario@password@xxx.xxx.xxx.xxx:pppp

Con este comando se nos creará el fichero .npmrc en el home del usuario con la config del proxy

3) Seguidamente instalamos GIT (un sistema de control de versiones) que vamos a necesitar después para Bower y para Ionic-cli. Instalamos GIT bajando el instalador de la página oficial (https://git-scm.com/downloads) y ejecutándolo. La página detecta el sistema operativo que tengamos instalado y nos ofrecerá el instalador adecuado.

4) Añadimos la ruta de instalación de la carpeta 'c:\Program Files\Git\cmd' (carpeta donde se ha instalado por defecto GIT) a la variabla de entorno PATH de nuestro sistema.

5) Verificamos que el componente está correctamente instalado lanzando el comando:

   git --version  --> git version 2.7.4.windows.1

6) Seguidamente instalaremos Bower, que es la herramienta que usaremos como administrador de las dependencias de librerías de nuestra aplicación. Para instalarlo usaremos NPM, el comando será:

   npm install bower -g

Nota. La opción 'g' indica al instalador que queremos una instalación global para poder acceder a bower desde cualquier directorio.

7) Verificamos que el componente está correctamente instalado lanzando el comando:

   bower -v   --> 1.7.7

8) Lo siguiente es instalar GULP, un sistema de construcción que automatiza tareas habituales del entorno de desarrollo: minificación de código JavaScript, compresión de imágenes, validación de sintaxis, etc. Para instalarlo usaremos NPM, el comando será:

   npm install gulp -g

9) Verificamos que el componente está correctamente instalado lanzando el comando:

   gulp -v   --> [06:31:50] CLI version 3.9.1

10) Por último instalamos Ionic y Apache Cordova desde el NPM. En este caso vamos a ser estrictos con la versión, para tener definidos las versiones que nos interesan. Para instalarlos usaremos NPM y los comandos serán:

   npm install cordova -g
   npm install ionic -g

Nota. Si necesitamos una versión concreta de cualquiera de los componentes que instalamos con npm podemos usar comandos de tipo:

     npm install cordova@5.0.0 -g

Durante la instalación se mostrarán warnings en caso de conflictos con las versiones.

11) Verificamos que ambos componentes están correctamente instalados lanzando los comandos:

   cordova -v       --> 6.0.0
   ioniccordova -v  --> 1.7.14

Con esto ya tendríamos instalado todo lo necesario para desarrollar aplicaciones con Ionic.

Las aplicaciones construidas se podrían probar directamente sobre el movil o la tablet elegida, pero si queremos trabajar con varios SSOO de varias versiones, siempre es mas cómodo instalar en el PC emuladores de dichas plataformas: Android Studio, Visual Studio, etc, que nos permitirán probar nuestra app en emulaciones de diferentes dispositivos físicos y/o con distintas versiones del SO objetivo (Android, IOs, Windows Phone, etc).

Proceso de instalación. Parte II

Para poder probar en distintos emuladores de dispositivos con diferentes versiones de los sistemas operativos necesitaremos instalar el JDK y un  emulador de la plataforma, en nuestro caso vamos a realizar las pruebas con Android, por lo que instalaremos el SDK de Android (Android Studio) y el JDK de Java.

12) Descargamos el JDK (ojo no del JRE) desde la URL (http://www.oracle.com/technetwork/es/java/javase/downloads/index.html). Como en nuestro caso estamos trabajando en una imagen de Windows 7 de 32 bits, bajaremos el fichero 'jdk-8u73-windows-i586.exe'. Lanzaremos el instalador y punto.

13) Descargamos Android Studio desde la URL (http://developer.android.com/sdk/index.html). Tras la descarga lanzaremos el instalador 'android-studio-bundle-141.2456560-windows' y seguiremos el asistente definiendo la instalación por defecto.

Un Saludo