PorErik Guerrero V.

Android, APK

Ionic 2 – potente framework con el que podremos crear aplicaciones híbridas

¿Qué es Ionic 2?

Ionic 2 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 2 está desarrollado utilizando SASS y optimizado para Angular.js siendo estos los principales beneficios que obtendremos de su uso:

Rendimiento
La velocidad es tan importante, sólo se nota cuando no está allí. Iónic está construido para llevar a cabo y se comporta muy bien en los últimos dispositivos móviles con mejores prácticas como las transiciones eficientes acelerados por hardware, y los gestos táctiles optimizados.

Diseñado
Limpia, simple y funcional. Iónica está diseñado para trabajar y mostrar muy bien en todos los dispositivos y plataformas móviles actuales. Con componentes prefabricados, tipografía, y una (todavía extensible) del tema básico precioso que se adapta a cada plataforma, podrás construir en estilo.

Nativo y web optimizado
Iónic emula directrices de interfaz de usuario de aplicaciones nativas y utiliza SDK nativo, con lo que las normas de interfaz de usuario y las características del dispositivo de aplicaciones nativas, junto con toda la potencia y la flexibilidad de la web abierta. Iónic utiliza Cordova o Phonegap para desplegar de forma nativa, o se ejecuta en el navegador como una aplicación web progresiva.

Instalación

Linux – Ubuntu
Dependencias
$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
$ sudo npm install -g cordova

Windows
1.- Descargar e instalar nodejs desde:
http://nodejs.org/
Ionic

$ sudo npm install -g ionic

Verificamos la versión instalada

$ sudo ionic –v
2.0.0-beta.31

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 miprimeraapp 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 miprimeraapp 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 miprimeraapp 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 quieres ver una demo del resultado que obtendréis, aquí os dejo un enlace a un Plunker en el que podréis verla funcionando.

Si quieres verla funcionando en vuestro equipo solo tendrás que escribir los siguiente:

$ ionic serve
Esto os abrirá la app en el navegador (o escribiendo en el browser del navegador http://localhost:8100/ )desde el que podrás probarla. Otra alternativa es este comando:

$ ionic serve –-lab

Leer también:
https://ionicframework.com/getting-started/https://ionicframework.com/developers/