Crear una app móvil a veces puede conllevar un proceso muy complejo y tedioso, pero puede traer grandes beneficios para un negocio. 

Ionic nos facilita este proceso puesto que no es necesario poseer amplios conocimientos sobre programación nativa de aplicaciones, de modo que con HTML, JS, CSS y algunos conocimientos de AngularJS podemos tener nuestra propia app en pocas horas.

Aún no sabes qué es una app Híbrida

Ionic es un Framework de desarrollo de aplicaciones móviles HTML5 dirigida a la creación de aplicaciones móviles híbridas.

Las aplicaciones híbridas son esencialmente pequeños sitios web que se ejecutan en el navegador del dispositivo,y ejecutan una aplicación que tiene acceso a la capa de plataforma nativa. Las aplicaciones híbridas tienen muchas ventajas sobre las aplicaciones nativas puras, específicamente en términos de soporte de la plataforma, la velocidad de desarrollo.

Para la creación de la mismas se usan frameworks basados en lenguajes de programación web como HTML, CSS y JS,o AngularJs para desarrollos más complejos

¡En nuestro caso el framework será Ionic!

Ionic no es sólo un marco HTML 5, si no que además define directivas y servicios Angular, estilos e incluso un conjunto de herramientas de terminal, que necesita una envoltura nativa  ("un puente de javascript a nativo") como Cordova o PhoneGap con el fin de funcionar como una aplicación nativa.

Actualmente la fluidez y el tiempo de respuesta no es igual al de una app nativa pero van camino de conseguirlo, de hecho es uno de los principales objetivos de Ionic(en su web dicen estar obsesionados por el rendimiento). Y podríamos decir que  es cierto puesto que desde los inicios de ionic hasta ahora se aprecia un gran aumento en la fluidez y capacidad de procesamiento de las aplicaciones generadas.

Para ampliar información sobre el concepto de app híbrida podéis mirar aquí.

Vayamos a lo importante, qué es Ionic

Ya sabemos que es un app híbrida, así que ahora vamos a ver qué es Ionic.

Ionic es un framework libre y de código abierto, que proporciona la optimización para dispositivos móviles de HTML,CSS y JS, proveyendo de las herramientas necesarias para crear un aplicación básicamente con estos 3 lenguajes. Ionic está construido con Sass y optimizado por AngularJS.


El grueso de una aplicación IONIC se basará en HTML, Javascript y CSS. Los desarrolladores que quieran adentrarse más en el mundo Ionic  también podrán trabajar en la capa nativa, creando plugins personalizados con Cordova o código nativo, pero no es necesario para obtener una gran aplicación.

Ionic utiliza como envoltura nativa ("un puente de javascript a nativo"), Cordova, lo que significa que en su
núcleo es una aplicación PhoneGap con el fin de funcionar como una aplicación nativa.

Ionic también utiliza AngularJS para una gran parte de la funcionalidad básica del framework. No es totalmente necesario conocer angular,pero sí se recomienda invertir tiempo en aprender, ya que es una de las mejores maneras de construir aplicaciones basadas en navegadores de hoy.

No es una app nativa pero a pesar de ello sigue el modelo de desarrollo de un app móvil nativa, por lo que es fácil de entender para cualquier persona que ha construido una aplicación nativa para iOS o Android. De aquí surge el término platform continuity del que podemos saber más e este artículo que te dejo aquí.

Por qué híbrida y no nativa

Ya hemos visto muchas de las ventajas que aporta Ionic, ahora veremos algunas más.
Desarrollamos un código único multiplataforma de modo que con nuestra base HTML, CSS, JS y AngularJS podremos generar nuestra app tanto para Android como para iOS.Lo que nos aporta rapidez y eficiencia en el desarrollo.

Se trata de código abierto mantenido por una comunidad muy amplia de desarrolladores y respaldado por el propio Ionic.

Documentación y API sencilla. El código y los distintos componentes de Ionic está muy bien explicados y documentados los que nos ayuda en gran medida.

La velocidad del desarrollo es notable puesto que se basa en tecnologías sencillas pero muy potentes de modo que con poco tiempo podemos hacer grandes cosas.

Como ya hemos visto Ionic tiene una comunidad de desarrollo bastante amplia. Ionic posee un foro para dudas y bugs que puedas tener en tu código donde gente de la comunidad o los propios desarrolladores de Ionic pueden ayudarte.

Vamos a aprender Ionic

Ejemplos. Si te surge alguna duda durante este tutorial o después de leerlo hay numerosos tutoriales, demos y ejemplos por toda la red con los que aprender Ionic.

Foro/comunidad. Si nos surge un problema seguro que le haya ocurrido a alguien antes así que seguro podrán ayudarte

Si tienes alguna duda no dudes en hacerlo los comentarios de este post ;)
Algunas páginas que podrían ayudarte son estas:

• Api de Ionic. http://ionicframework.com/docs/api/
• Documentación. http://ionicframework.com/docs/

Manos a la obra

Bueno vamos a lo importante  cómo creamos un app con Ionic desde la base.

Primero vamos a instalar los paquetes necesario, en esta sección veremos cómo hacerlo en un sistema Linux.

Debemos instalar node.js y cordova.

Node
       $ curl -sL https://deb.nodesource.com/setup_0.12|sudo bash -
   $ sudo apt-get install nodejs
   $ sudo apt-get install -y build-essential
para comprobar que está instalado node -v

Cordova
   $ sudo npm install -g cordova

Bower
$ sudo npm install bower -g

Ionic
   $ sudo npm install -g ionic

En esta web tenemos las instrucciones necesarias para instalar el módulo android para poder generar las apps para esta plataforma (adb y sdk):
http://cordova.apache.org/docs/en/3.4.0/guide/platforms/android/index.html#Android%20Platform%20Guide

Para iOS:
http://cordova.apache.org/docs/en/3.4.0/guide/platforms/ios/index.html#iOS%20Platform%20Guide

¿Tienes todo listo?

Pues vamos a comenzar a desarrollar con Ionic. Pasaremos a crear el proyecto.

 Aquí podemos optar por tres tipos de starter para la app, una app en blanco, una basada en pestañas, y por último una basada en menú lateral. Para ello debemos hacerlo desde la terminal ejecutando los siguientes comandos:

Generará  el siguiente árbol de directorios:

├── bower.json     // dependencias bower
├── config.xml     // configuración cordova
├── gulpfile.js    // tareas gulp
├── hooks          // configuración cordova para ejecutar comandos específicos
├── ionic.project  // configuración ionic
├── package.json   // dependencias de node
├── platforms      // construcción del código para iOS/Android
├── plugins        // donde tus plugins cordova/ionic se instalarán
├── scss           // código scss,donde se obtendrá la salida para www/css/
└── www            // app - código JS and libs, CSS, imágenes, etc.

Ya tenemos la base para nuestra app ya sólo tenemos que personalizarla con los elementos Ionic que deseemos.

Generar y compilar nuestra app.

Entramos en el directorio que previamente hemos creado para almacenar nuestra app:
$ cd myApp

Añadimos la plataforma del tipo de app que deseamos emular:
$ ionic platform add ios / $ ionic platform add android
$ ionic build ios / $ ionic build android
$ ionic emulate ios / $ ionic emulate android

Si queremos probarla directamente en nuestro dispositivo, conectándolo a nuestro pc podemos instalarla de forma directa ejecutando:
$ ionic run ios / $ ionic run android

También podemos probarla en el navegador de nuestro pc de desarrollo con:
$ ionic serve -scss

Bueno una vez tenemos la base de nuestra app, solamente tenemos que personalizar como queramos añadir componentes, añadir secciones y páginas a nuestra app, etc.

Trabajaremos básicamente sobre el directorio /www/ que nos crea automáticamente. y ahí añadiremos nuestro o código o modificaremos a nuestro antojo el que nos genera Ionic. Si queremos añadir vistas debemos modificar el fichero /www/js/app.js


Para modificar el aspecto es aconsejable usar las clases que el propio Ionic proporciona, pero si aun así queremos modificar el aspecto podemos modificar /www/css/style.css.

Nuestras plantilla debemos añadirlas en /www/templates y añadirlas en el /www/js/app.js.

Por último nuestras imágenes o archivos externos podemos añadirlos en /www/img/, también podremos añadir los directorios que necesitemos pero en principio bastaría con eso.

Tunea tu app

Además de crear tu app, hay diversos temas que podremos acoplar a nuestra aplicación para cambiar su aspecto. Aquí veremos IonicMaterial de Zach Fitzgerald. Podemos ver como añadirlo en http://ionicmaterial.com/ y un ejemplo de ello en http://ionicmaterial.com/demo/.

En esta web:


podemos descargar un modelo base para crear nuestra app. En que tenemos una demo de juego de tronos y una demo con los distintos componentes
         

Nosotros hemos modificado este ejemplo  y le hemos dado nuestro toque mobile haciendo solamente unos cuantos cambios y nos ha quedado así.

Ahora...¡A darle vida a nuestra app!

Además de las funcionalidades básicas hay plugins o addons que pueden complementar nuestra app aportando más funcionalidad a nuestra app.

Aquí podemos encontrar algunos.
https://market.ionic.io/plugins

O simplemente describiendo la funcionalidad brevemente en google seguido de la palabra Ionic plugin podremos encontrar el plugin que buscamos.
Los pluglin los podemos instalar:

$ ionic plugin add <nombre-del-plugin>
$ cordova plugin add <nombre-del-plugin>

Hemos visto las nociones básicas de cómo hacer una app híbrida con Ionic. Pero ¿qué framework usas tú? 

¿Te ha quedado alguna duda?
¡Pregúntanos! Estaremos encantados de resolverlas :-)