Ionic 2. Instalación, ajuste y subida de una aplicación híbria al movil en 5 min

Introducción

En unos pocos minutos podemos tener listo nuestro entorno de desarrollo Ionic 2 (sin plataforma), montar una aplicación de ejemplo y visualizarla en nuestro dispositivo movil.

Los pasos a seguir son los siguientes:

Instalación y configuración

1) Descargamos Node.js desde https://nodejs.org/es/, para Linux debemos bajar 'node-v4.6.0-linux-x64.tar.xz' y lo llevamos a nuestra carpeta $HOME

2) Lo descomprimimos mediante el comando:

tar -xvf node-v4.6.0-linux-x64.tar.xz

3) Lo renombramos a algo mas intuitivo como 'node-v4.6.0'

mv node-v4.6.0-linux-x64 node-v4.6.0

4) Ajustamos el fichero $HOME/.profile añadiendo:

#programacion moviles
export NODE_HOME=/home/miusuario/node-v4.6.0
export PATH="$NODE_HOME/bin:$PATH"

5) Recargamos las variables de configuración relanzando el fichero .profile con el comando:

$ . ./.profile

Aclaración. Este ajuste vale para la terminal actual, lo que nos permite seguir trabajando, si
queremos que el cambio sea permanente lo mejor es reiniciar sesión.

6) Verificamos que se ha instalado correctamente y que las variables de entorno están bien definidas con:

$ node -v
$ npm -v

7) Ajustamos la configuración de NPM para que use el proxy del INE mediante el comando:

$ npm config set proxy "http://usuario:password@ip-server-proxy:puerto-proxy/"

8) Verificamos que la configuración de NPM ha quedado bien ajustada con el comando:

npm config list

9) Instalamos Apache Cordova

$ npm install -g cordova

10) Verificamos que la instalación haya sido correcta:

$ cordova -v

11) Instalamos Ionic

$ npm install -g ionic

12) Verificamos que la instalación haya sido correcta:

$ ionic -v

Aclaración. Si se desea una versión expecifica de los mismos se pude poner por ejemplo:

$ npm install -g cordova@5.0.0
$ npm install -g ionic@1.5.0

13) Instalación de Git. Software de control de versiones

$ sudo apt-get install git
$ git --version

14) Instalación de Bower. Administrador de los paquetes (dependencias) de nuestro proyecto.

$ npm install -g bower
$ bower -v

15) Instalación de Gulp. Herramienta que permite automatizar tareas comunes de desarrollo.

$ npm install -g gulp
$ gulp -v

Creación de un aplicativo y visualización en el dispositivo

El entorno ya estaría listo, ahora vamos a generar una app de ejemplo y subirla a nuestro movil, para ello deberemos crear una cuenta en https://apps.ionic.io/login (con una dirección de correo y una contraseña que usaremos mas tarde).

1) Ionic nos ofrece toda una serie de plantillas para generar el esqueleto inicial de nuestros proyectos, podemos conocer la lista completa mediante el comando:

$ ionic start --list

2) Nos colocamos en la carpeta $HOME y creamos el proyecto 'ejemplo1' usando la plantilla tabs

$ cd $HOME
$ ionic start -a "ejemplo1" -i es.ine.sgtic.ejemplo1 ejemplo1 tabs --v2

  -a ejemplo1              -> Nombre del proyecto (aplicación)
  -i es.casa.ejemplo1      -> Nombre del dominio/id de la aplicación
  ejemplo1                 -> Nombre del directorio donde generará el proyecto
  blank                    -> Nombre de la plantilla que hemos usado
  --v2                     -> Parámetro con el que indicamos que queremos usar Ionic 2 (lo que implica: Angular 2, Typescript, etc).

Aclaración. Ionic 2 se basa en Angular 2, el cual trabaja por defecto con Typescript (aunque podría hacerlo con Javascript clásico ES5). Los Proyectos con Ionic 2 tienen una estructura interna completamente diferente. Con Angular 1 la estructura sería:

    |-www/
    |
    |--js/
    |--|-app.js
    |--|-HomeCtrl.js
    |--|-DetailCtrl.js
    |
    |--templates/
    |--|-Home.html
    |--|-Detail.html
    |
    |-index.html

Mientras con Angular 2 la estructura es:

    |-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js

3) Subimos el app a nuestro movil (donde habremos instalado el app Ionic View):

$ cd ejemplo1
$ ionic upload  (Nos pedirá la cuenta de correo y la password de nuestra cuenta en Ionic)

4) Con ésto ya tendríamos la aplicación disponible en Ionic View para verla funcionar en el dispositivo movil. Arrancaríamos Ionic View en el movil y en el área 'My apps' podremos ver la aplicación 'ejemplo1' que podremos descargar y ejecutar ejecutar pulsando 'View app'.

Trabajo en local

Ya hemos visto como generar y subir al dispositivo una aplicación de ejemplo, ahora vamos a ver cómo probarla/modificarla en el entorno de desarrollo para posteriormente volver a subirla:

1) Nos movemos a la carpeta $HOME/ejemplo1

$ cd $HOME/ejemplo1

2) Levantamos el servidor embebido en Ionic con:

$ ionic serve --address localhost --port 8100

Aclaración. El comando podría no tener parámetros. Habitualmente funciona sin problemas con 'ionic serve', pero con las opciones indicadas podemos configurar tanto la dirección IP como el puerto por el que se despacharán peticiones. Estos ajustes son esenciales en máquinas con varias IP y/o otros servidores (Apache, Tomcat, etc) levantados.

3) Probamos la app en local en la URL: http://localhost:8100

Se nos abrirá el navegador con la siguiente URL: http://localhost:8100/

4) Podemos acceder a cualquiera de las páginas del aplicativo para ajustar tanto la página en sí (fichero *.html) como el controlador (fichero *.ts), tras efectuar el cambio simplemente refrescamos la página en nuestro navegador.

5) Al depurar con Chrome hemos visto que no podemos acceder a los scripts en la pestañan Sources, dado que no se ve la carpeta /top/localhost:8100/src/app/, para apañar este bug hemos tenido que lanzar el comando:

$ npm install @ionic/app-scripts@latest

Referencias:

http://ionicframework.com/docs/v2/