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/
About the author