Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo instalar Ionic en Ubuntu 16.04

Rafael Agudo
  • Escrito por Rafael Agudo el 13 de Septiembre de 2016
  • 6 min de lectura | Mobile
Cómo instalar Ionic en Ubuntu 16.04

En este post vamos a ver paso por paso todo lo que necesitamos hacer para instalar de forma correcta Ionic en Ubuntu . Pero antes, me gustaría aclarar una serie de conceptos para los que estáis menos iniciados en este tema.

¿Qué es Ionic?

Ionic es un potente framework con el que podremos crear una app híbridas que se comportan como nativas. Es gratis, open source ( Licencia MIT ) y nos ofrece una librería de componentes y herramientas HTML, CSS, JS que harán nuestra vida más fácil al desarrollar apps para Android e iOS.

Ionic está desarrollado utilizando SASS y optimizado para Angular.js siendo estos los principales beneficios que obtendremos de su uso:

  • Rendimiento y velocidad. Está diseñado siguiendo las mejores prácticas para aplicaciones web como el renderizado virtual del DOM, transiciones aceleradas por hardware y soporte para gestos. En la mayoría de los casos será muy difícil distinguir una app nativa de una desarrollada con Ionic.
  • Diseño “out-of-the-box”. Ionic incluye componentes de UI que harán que nuestra app se vea y comporte como una aplicación nativa en cada una de las plataformas en que la despliegues, sin necesidad de esfuerzo adicional por nuestra parte. List, Card, Form, Button, Toggle, Checkbox son algunos de los controles que tendremos a nuestra disposición junto con una colección de iconos que podremos utilizar en nuestras apps en sus versiones genérica, Android e iOS.
  • CLI. Desde la línea de comandos podrás crear, compilar, testear y desplegar tu app. Una de las características más interesantes es el Live Reload, que nos permitirá ver el efecto de los cambios que realicemos en nuestra app en tiempo real.
  • Fácil de aprender. Si ya tienes conocimientos de HTML, CSS y JS, trabajar con Ionic no supondrá ningún problema para ti. Si además controlas Angular.js, Ionic será un paseo. Si por el contrario no sabes nada de Angular.js, utilizar Ionic es la manera perfecta de introducirte en este genial framework desarrollado y mantenido por Google.

Imagen 0 en Cómo instalar Ionic en Ubuntu 16.04

¿Donde encaja? ¿Es mejor que Phonegap o Cordova?

Lo primero que tenemos que tener claro es que Ionic no es un sustituto de Phonegap o Cordova. Estos frameworks nos permiten empaquetar nuestras aplicaciones webs en wrappers específicos para cada plataforma, y nos proporcionan bindings para interaccionar con las APIs nativas de los dispositivos, dándonos acceso a los sensores, datos, estado de la red…

Por otro lado, Ionic está enfocado principalmente a la UI y a la experiencia de usuario (UX), proporcionándonos controles y css ya hechos, que implementan patrones de diseño y mejores prácticas. De este modo no tendremos que preocuparnos por las peculiaridades de cada navegador (si Safari; te estoy mirando a ti), ni por si nuestra app se verá bien en cada modelo de cada fabricante de dispositivos.

Instalando dependencias

Node.js

Lo primero que tenemos que instalar es Node.js. Para ello primero instalamos algunas dependencias que nos harán falta.

$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update

Después de esto ya solo tenemos que ejecutar este comando para instalar Node.js y su gestor de paquetes npm.

$ sudo apt-get install nodejs

Cordova

Ahora que ya tenemos npm instalado, para instalar Cordova solo tendremos que escribir lo siguiente en nuestro terminal.

$ sudo npm install -g cordova





Instalando Ionic

Por ultimo ya solo nos resta instalar Ionic en sí, sus librerías y el CLI. Con este simple comando nos introduciremos en el maravilloso mundo de Ionic.

$ sudo npm install -g ionic

Para comprobar que todo ha ido bien ejecutamos el siguiente comando, que nos dirá que versión de Ionic tenemos instalada.

$ sudo ionic –v
2.0.0-beta.31

En mi caso vemos que la versión que tengo instalada es la última beta de Ionic 2. En vuestro caso puede que os diga una versión diferente. La versión beta de Ionic 2 supone algunos cambios importantes con respecto a la versión 1. Los más importantes son la migración a Angular 2, y el soporte para TypeScript.

Nuestra primera app

Ahora que lo tenemos todo listo empieza lo divertido. Para crear nuestra primera app nos movemos a nuestro directorio habitual de desarrollo desde el terminal, y escribimos los siguiente:

$ ionic start miSuperApp blank

Esto nos creará el esqueleto de nuestra primera app para que empecemos a desarrollar. Sin embargo, si estáis empezando, os recomiendo que creeis una nueva app utilizando las plantillas “starter” que proporciona Ionic. Para ello escribiremos:

$ ionic start miSuperApp tabs

Ahora añadiremos las plataformas en las que queremos desplegar nuestra app. Solo podremos añadir iOS si estamos en MacOS.

$ ionic platform add android
$ ionic platform add ios

Todo esto habrá creado un directorio miSuperApp dentro de nuestro directorio de desarrollo. Si navegamos en él, veremos la siguiente estructura:

├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration ├── package.json // node dependencies
├── plugins // where your cordova/ionic plugins will be installed
├── platforms // iOS/Android specific builds will reside here
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS,

Si queréis ver una demo del resultado que obtendréis, aquí os dejo un enlace a un Plunker en el que podréis verla funcionando.

Si queréis verla funcionando en vuestro equipo solo tendréis que escribir los siguiente:

$ ionic serve

Esto os abrirá la app en el navegador desde el que podréis probarla. Otra alternativa es este comando:

$ ionic serve –-lab

El parámetro lab hará que podáis ver en el navegador la versión de Android y la de iOS, una al lado de la otra. Esto nos ayudará bastante durante el desarrollo, ya que nos permitirá comprobar que los cambios que vamos realizando se ven adecuadamente en ambas plataformas.

Imagen 1 en Cómo instalar Ionic en Ubuntu 16.04


Si queremos compilarla para desplegarla en un dispositivo, escribiremos:

$ ionic build android

Esto nos generará un apk que podremos desplegar en un dispositivo Android. El apk podremos encontrarlo en miSuperApp/platforms/android/build/apk.

¿Y cómo despliego en iOS?

Desgraciadamente los chicos de Apple no permiten compilar para iOS desde otro sistema que no sea MacOS, pero no está todo perdido. Existen servicios de build remota como PhoneGap Build que nos permitirán subir nuestra app Ionic y nos devolverán tanto el apk para desplegar en Android como el ipa para desplegar en iOS.

Para utilizar el servicio PhoneGap Build con una app Ionic tendremos que tener en cuenta algunos detalles.

Mover el config.xml

Ionic nos genera el archive config.xml fuera del directorio www pero PhoneGap Build espera que este archivo esté dentro de la carpeta www por lo que simplemente lo copiamos a esa ubicación. Recordad mantener una copia fuera para poder seguir usando el CLI de Ionic en vuestro proyecto.

Cambios en el tag widget

Dentro del config.xml localizamos las siguientes líneas de código:

<widget id="com.ionicframework.miSuperApp"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">

Y las sustituimos por estas:

<widget id="com.ionicframework.miSuperApp"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
versionCode = "1">

Plugins

A continuación necesitamos cambiar el origen del que vamos a obtener los plugins. Cuando utilizamos Ionic, los plugins son añadidos desde el CLI, pero con PhoneGap, necesitamos obtenerlos desde el repo, por lo que localizaremos en nuestro config.xml todos los tags <plugin> y le añadiremos la propiedad source. A continuación tenéis un ejemplo de cómo quedaría para el plugin de notificaciones Push:

<plugin name="phonegap-plugin-push" spec="1.7.4" source="npm"/>

En mi caso, tengo también la propiedad spec, lo que especifica la versión del plugin que queremos utilizar. Esto es especialmente útil para protegernos contra cambios en lo plugins que puedan romper nuestra implementación.

Recordad que tenéis que realizar esta operación para todos los plugins o no funcionará.

Empaquetar y subir a PhoneGap Build

Ya lo tenemos todo listo. Solo resta empaquetar la carpeta www en un zip y subirla a PhoneGap Build. El proceso es muy sencillo pero, por si acaso, os dejo un enlace a un vídeo en el cual se explica paso a paso.

Conclusión

Aunque existen alternativas como React Native de Facebook, de la cual me atrae mucho su orientación a componentes, en mi opinión el estado de madurez de Ionic es superior, y cuenta con una increíble comunidad que os ayudará a resolver cualquier problema que podáis encontrar, desde foros como StackOverflow .

Utilizando Ionic veréis lo fácil que resulta montar una app para Android e iOS aprovechando los conocimientos que ya tenéis sobre HTML, CSS y Javascript, e incluso aprenderéis Angular.js en el proceso.

Espero que esto os sirva para introduciros en el mundo de Ionic y como primer paso para convertiros en desarrolladores de apps móviles lo que os colocará en mejor posición a la hora de conseguir un trabajo, si no lo tenéis, os posicionará mejor en vuestra actual empresa.

Cómo referencia de la demanda actual de desarrolladores móviles en España, podéis echarle un vistazo a este artículo , en el cual veréis que la demanda de desarrolladores móviles se ha multiplicado por 17 en los últimos 5 años , según un informe realizado por la escuela de negocios ESADE, en colaboración con el portal de empleo InfoJobs.

Por supuesto siempre queda la opción de trabajar como freelance y buscar trabajo en portales como Nubelo o Twago .

Para profundizar en vuestro conocimiento de Ionic os recomiendo visitar la web official del framework .

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars