BLOG

Qué es y cómo empezar con Ionic Framework

Más de uno, y de dos, conoceréis o habréis escuchado hablar de Ionic,este framework que tanta importancia está tomando últimamente. Hagamos un poco de memoria, anteriormente hemos hablado sobre Angular JS y detallamos algunos de los frameworks que están en la red que trabajan bajo ese MVC y MVVM. Como sabéis, para un programador es muy importante tener bien organizado el código de nuestro proyecto y bien comentado, no sea que nos toque modificar algo meses después y… cualquiera se acuerda de lo que hacía esa función en concreto ;)

logo-ionic-framework-phonegap-spain

Lo primero que me gustaría explicar, y de forma escueta, es qué es un MVC y de qué se compone:

El MVC

El MVC (Model-View-Controller o Modelo-Vista-Controlador), es un patrón de diseño que separa los datos, la lógica y las interfaces de usuario. Como su nombre indica, está separado en tres componentes: Modelo, Vista y Controlador. Está basado en la ideología de separación de conceptos y cumple perfectamente con los objetivos de los patrones de diseño.

1.- Modelo
Es la capa encargada de los datos, es decir, la que se encarga de hacer peticiones a las bases de datos para enviar o recibir información. Estas bases de datos pueden estar alojadas de forma local en nuestra app o de forma remota en un servidor externo.

2.- Vista
Se trata del código que nos permitirá presentar los datos que el modelo nos proporciona, como ejemplo podríamos decir que en una aplicación es el código HTML que nos permite mostrar la salida de los datos procesados.

3.- Controlador
Es la capa que sirve de enlace entre la vista y el modelo. Envía comandos al modelo para actualizar su estado, y a la vista correspondiente para cambiar su presentación.

En el caso MVVM (Modelo Vista VistaModelo) la iteracción entre la vista y el controlador será en los dos sentidos, el controlador muestra los datos en la vista y si en la vista hay un cambio de datos, se actualiza el modelo automáticamente.

El framework Ionic

Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.

Principales características

ionic-1
1.- Alto rendimiento
La velocidad es importante. Tan importante que sólo se nota cuando no está en tu app. Ionic está construido para ser rápido gracias a la mínima manipulación del DOM, con cero jQuery y con aceleraciones de transiciones por hardware.

ionic-2
1.- AngularJS & Ionic
Ionic utiliza AngularJS con el fin de crear un marco más adecuado para desarrollar aplicaciones ricas y robustas. Ionic no sólo se ve bien, sino que su arquitectura central es robusta y seria para el desarrollo de aplicaciones. Trabaja perfectamente con AngularJS.

ionic-3
3.- Centro nativo
Ionic se inspira en las SDK de desarrollo móviles nativos más populares, por lo que es fácil de entender para cualquier persona que ha construido una aplicación nativa para iOS o Android. Lo interesante, como sabéis, es que desarrollas una vez, y compilas para varios.

ionic-4
4.- Bonito diseño
Limpio, sencillo y funcional. Ionic ha sido diseñado para poder trabajar con todos los dispositivos móviles actuales. Con muchos componentes usados en móviles, tipografía, elementos interactivos, etc.

ionic-5
5.- Un potente CLI
Con un sólo comando podrás crear, construir, probar y compilar tus aplicaciones en cualquier plataforma.

Cómo empezar

Con 4 líneas no es suficiente para explicar a fondo cómo empezar con Ionic y, aunque vamos a preparar un tutorial en español, quiero soltar algunas líneas que nos pueden ayudar a crear nuestra primera app con este framework :)

Los pasos para comenzar son:

1.- Instalar Ionic.
Recuerda que es necesario tener NodeJS instalado en tu ordenador. Ionic se instala igual que PhoneGap o Cordova. Aunque trabaje bajo ellos, Ionic tiene su propio instalador:
1.  $ npm install -g cordova ionic

2.- Crear nuestro primer proyecto
Podemos empezar un proyecto de tres formas:

a) Con un proyecto vacío.
1.  $ ionic start myApp blank

b) Con un proyecto con la estructura de menú inferior.
1.  $ ionic start myApp tabs

c) Con un proyecto con menú lateral.
1.  $ ionic start myApp sidemenu

ionic-start

3.- Compilar
En las siguientes líneas, os serán familiares ya que son muy parecidas a la compilación con PhoneGap o Cordova

 Code: arbitrary (select
1.
2.
3.
4.

$ cd miApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

Ionic Creator

Una nueva herramienta que ha creado el equipo de Ionic es “Ionic Creator“. Esta herramienta es muy parecida a codiqa, la cual, para los que trabajen bajo JQuery o JQMobile les será muy familiar. Bien, pues Ionic Creator hace la misma función: nos permite crear la parte gráfica de nuestra app online de forma visual, sin tener que tocar código. Esto es muy interesante ya que nos permite ver de forma directa e instantánea los cambios que estamos aplicando a cada una de nuestras vistas y la repercusión gráfica que tiene.

ionic-creator-phonegap-spain

Ionic y los plugins de Cordova
Tal y como os he comentado antes, Ionic trabaja bajo Cordova, por lo que podremos utilizar todos los plugins que estén desarrollados para el framework e incluso desarrollar los nuestros propios. En esta url podéis ver todos los que actualmente están en el repositorio de Apache Cordova: http://plugins.cordova.io/

Tan solo tendréis que añadirlos mediante línea de comando, tal y como se instalan con Cordova, en caso de compilar de forma local.

Ionic y la compilación remota con PhoneGap Build
Todos nuestras apps desarrolladas con Ionic pueden compilarse de forma remota utilizando https://build.phonegap.com/apps, que, como sabéis, es un servicio de Adobe que nos permite compilar nuestra app desde la nube. Y de esta forma no necesitamos un Mac para compilar para iOS o un Windows para compilar para WP.

Licencia

Ionic es de código abierto publicado bajo una licencia MIT. Esto significa que se puede utilizar en nuestros proyectos personales o comerciales, de forma gratuita. MIT es la misma licencia que utiliza otros proyectos populares como jQuery y Ruby on Rails.

Web oficial: http://ionicframework.com/

Espero os haya gustado el artículo y os sea de ayuda para comenzar con este framework ;)

21 Respuestas.

  1. Ionic es la mas genial que he descubierto, mi ultima app la a hecho con este framework y me recordó mucho a SYMFONY2,te ahorra mucho trabajo !

  2. JairSumz JairSumz dice:

    Hola, disculpen mi ignorancia pero tengo una consulta sobre como agregar codigo de angularjs a un proyecto ya creado de ionic
    Es que de por si ya ando usando en mi carpeta js : app.js y controller.js pero intento agregar mas funciones pero no se si debo agregar codigo y editar en estos archivos que ya tengo o ponerlos en nuevo archivos…

    Y también como haría para llamarlos? Porque lo he intentado y no se que hago mal, pero es como si no los leyera.

  3. Webserveis Webserveis dice:

    Existe algún skin al estilo Material Design? y como se debería implementar

  4. TecknoW71 TecknoW71 dice:

    Hola Jesús buenas Tardes sabes quiero comenzar a desarrollar una aplicación con este framework y Cordova voy comenzando con esto pero quisiera saber si abra algún maquetador que me ayude en esto para diseñar mejor mi App
    sabes necesito incluir un login y bases de datos en android y quisiera saber si esto misma información la podré enviar y ser visuzlizada en una pagina web sobre todo algo como la localización de varios dispositivos en un mismo mapa trabajando con google maps y poder utilizar la cámara y la geolocalización de coordova.

  5. TecknoW71 TecknoW71 dice:

    Claro me gustaría saber si hay documentación en castellano para comenzar a desarrollar con ionic lo mas rápido posible

  6. caamingenierias caamingenierias dice:

    Buenas, Compañeros la herramienta es interesante he diseñado la plantilla en ionicframework, ahora requiero realizar los eventos pero en modo local y los ejemplos están de forma remota alguien me puede ayudar por favor.

  7. crisiiii dice:

    Hola!

    Gracia por el tutorial, pero me ha surgido una duda.
    Me he descargado el ejemplo de los ‘tabs’ que hace el seguimiento en la barra de navegación superior. Si por ejemplo, quiero que al entrar en el tab de los chats y seleccionar una de las conversaciones, quiero que me lleve a la vista correspondiente, pero en este caso sin que aparezca el menu de tabs inferior pero a la vez me siga indicando donde estoy en la barra de navegación. ¿Es esto posible?

    Gracias.

  8. genixxavier dice:

    he creado una app, y quiero subir al play story, es gratuito o tengo k pagar algo para poder subir mi app, para que todos lo descargen, o exite otra manera de subir a la nube y que lo puedan descargar

  9. pmzpmz dice:

    Buenas, cuando exporto de ionic creator con ionic CLI, “ionic start [appName] creator:xxxxxxxxxxx”, al verlo en el navegador o generando la apk solo me aparece “BACK”

  10. Ivan_Espinoza dice:

    Como puedo hacer que un boton haga referencia a otra pagina? siendo que este en el mismo proyecto. como enlazarlo o linkearlo?

  11. [...] Ionic es un framework open source para el desarrollo de aplicaciones híbridas que permite crear aplicaciones multiplataforma utilizando HTML5 optimizado para móvil, CSS3, componentes JavaScript, gestos y herramientas para la construcción de aplicaciones altamente interactivas. Construido con Sass y optimizado para AngularJS permite asegurar aplicaciones robustas, rápidas y escalables. [...]

  12. Buenos días,
    estoy intentando instalar Ionic y la consulta me tira los siguientes errores

    https://www.dropbox.com/s/is8yvmhmlqw0wnv/ionic.JPG?dl=0

    Me dice que no puede ejecutar Pyton, todo esto es extraño porque en todos los tutoriales de instalación no encontré a nadie con este inconveniente, espero puedan ayudarme.

    Gracias

  13. host dice:

    Es posible también dar la lógica a la aplicación con este Framenwork.

Deja tu comentario

Debes estarlogueado para comentar.

RT @presroi: DeepSpeech 0.6: Mozilla’s Speech-to-Text Engine Gets Fast, Lean, and Ubiquitous – Mozilla Hacks - the Web developer blog https…10:59 PM Dec 7th