Ionic Framework.

ionic

Es un framework para crear aplicaciones móviles basado en AngularJS y que funciona con Apache Cordova.

Ionic es el SDK del Front-End para desarrollar aplicaciones híbridas móviles basadas en HTML 5, CSS y JavaScript.

Es una herramienta gratuita y Open Source que utiliza AngularJS para crear aplicaciones de código eficiente, rápido y sencillo de escalar.

Requisitos: es recomendable conocer y entender AngularJs.

Vamos a realizar una sencilla aplicación para descubrir su potencial. Para ello es necesario tener instalado NodeJs.

Para instalar Ionic, ejecutamos el siguiente comando y esperamos que se descarguen todas las librerías.

$ npm install -g cordova ionic

2016-05-30-173004_611x158_scrot

Listo! Ahora podemos crear nuestra primera aplicación con Ionic Framework. Nos posicionamos en algún directorio, en mi caso «/home/{user}/foderIt-ionic» y con el comando “ionic start” creamos un proyecto totalmente funcional.

Disponemos de tres opciones:

  • Un proyecto vacío «blank».
  • Con opción de menú «sidemenu».
  • Con opción de tabs «tabs».

Para mi app «myAppIonic» utilicé «tabs».

$ ionic start myAppIonic tabs

2016-05-30-174026_731x277_scrot

Veamos la estructura del proyecto que nos creó Ionic.

2016-05-31-164213_670x287_scrot

Como podemos observar tenemos integrado Gulp que nos permite automatizar algunas tareas del desarrollo y Bower para gestionar las dependencias.

En la carpeta /www esta el código de nuestra aplicación.

2016-05-31-174434_603x329_scrot

Encontramos el index.html como punto de entrada de la app y las carpetas con imágenes, estilos, templates y JS de nuestra aplicación.

cordova-ng-ionic

AHORA!!! ya podemos utilizar todos los plugin de Apache Cordova desarrollados para el framework y así tener acceso al hardware del dispositivo como ser la cámara, GPS, batería, etc.

Y lo más importante, ya es una aplicación Angular con algunos controladores y servicios ya creados.

Con Ionic podemos levantar un servidor y así probar nuestra aplicación usando un navegador web, con el comando «Ionic serve».

2016-06-01-173943_627x260_scrot

Después de algunos cambios que hice en el archivo «tab-dash.html» a modo de ejemplo. http://localhost:8100

2016-06-01-160521_484x744_scrot

Si queremos compilar la aplicación para llevarla a un dispositivo, hay varios caminos, para Android tendríamos que instalar el SDK de Android, setear la variable de entorno, agregar la plataforma y por último compilar, como explico mejor en mi anterior post.

$ export PATH=${PATH}:/home/{user}/android-sdk-linux/tools/

$ ionic platform add android

$ ionic build android.

2016-05-31-174640_723x192_scrot

material
Si quieren hacer Material Design les recomiendo esta librería que es una extensión para ionic framework.

El tema es amplio y la idea es mostrar esta herramienta y su potencial, y ver si con el tiempo sigue creciendo este proyecto en el mundo de las aplicaciones móviles.

Tags

Access top talent now!

Related

Get in Touch