Ionic es un framework para crear aplicaciones web móviles basadas en HTML. Utiliza como base Cordova, lo que significa que en su núcleo es una aplicación PhoneGap que puedes compilar usando Phonegap build.
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.
Prerequisitos
Antes de comenzar a crear tu aplicación Ionic debes instalar y configurar algunos programas necesarios para crear y compilar tu app.
NodeJS
Necesitas descargar nodeJS desde el sitio oficial y una vez instalado debes ejecutar el comando de instalación de Ionic desde la terminal del sistema:
$ npm install -g cordova ionic
SDK de tu plataforma favorita
Necesitas descargar el SDK de la aplicación en la que deseas empaquetar, por ejemplo si quieres trabajar iOS debes bajar Xcode, si deseastrabajar Android debes descargar el SDK de este sistema operativo.
Aunque Ionic puede crear aplicaciones multiplataforma, para crear una app en iOS tienes que hacerlo En este tutorial vamos a crear una aplicación basada en Android que es compatible con Mac y Windows. Para garantizar compatibilidad, te recomiendo instalar al menos la API 19 de Android (KitKat), también debes asegurarte que tienes configurada correctamente las variables de sistema de Android.
Creando una app Ionic
Las aplicaciones Ionic se administran desde la terminal del sistema, es desde allí que vamos a crear y enviar todos los comandos para Ionic.
Antes de comenzar a trabajar, debes crear una carpeta donde almacenaremos la aplicación y una vez creada tienes que abrirla desde la terminal, puedes hacerlo con el comando
cd /DIRECCION_DE_TU_CARPETA
Si no sabes cual es la dirección de tu carpeta, solo escribe en el terminal “cd ” y arrastra la carpeta allí, el sistema escribirá la dirección por ti.
Ahora que estas en la carpeta correcta, debes ejecutar el comando para crear tu aplicación:
$ ionic start miAplicacion tabs
En este caso, el comando “ionic start” crea tu aplicación, “miAplicacion” es el nombre de la aplicación y “tabs” es un comando de ayuda que le indica a ionic que al crear tu aplicación, incluya automáticamente soporte para navegación por tabs o cejillas.
Luego de unos segundos tu aplicación estará creada, puedes encontrar una nueva carpeta con el nombre de tu aplicación y una serie de archivos que componen el código de tu futura aplicación.
Ahora que tienes tu aplicación creada debes abrirla en la consola para controlarla, asumiendo que sigas en la misma ventana de la consola solo debes agregar el comando
cd miAplicacion
En esta caso el nombre “miAplicacion” es el nombre de nuestra aplicación y de la carpeta recién creada, recuerda adaptarlo según el nombre de tu app.
Crear y probar aplicaciones
Aunque tu aplicación ya existe en su forma mas básica, debes agregarle soporte para diferentes plataformas como Android o iPhone, por ejemplo, si quieres que tu aplicación tenga una versión para Android debes hacerlo con el comando
ionic platform add android
Finalmente , para simular tu aplicación en un dispositivo móvil, debes insertar este comando que compilara el código y lo enviara al simulador.
ionic build android
Si deseas agregar y emular aplicaciones para iPhone (solamente compatible en equipos Mac) solo debes reemplazar el termino “android” por “ios” en los comandos que acabamos de revisar.
Personalizar la aplicación
El código base de tu aplicación fue generado automáticamente por Ionic y contiene los elementos fundamentales para comenzar a trabajar.
Como puedes notar en tu proyecto hay varias carpetas, en la carpeta /www se encuentra el código de tu aplicación y allí encontraras un archivo con el nombre índex.html que es la vista principal de tu aplicación.
Puedes abrir este documento en tu navegador y comenzar a depurar tu aplicación.
Ionic esta basado en AngularJS y utiliza un sistema de plantillas para cargar las vistas según las necesitas. Puedes encontrar dentro de la carpeta /js/app.js las instrucciones de tu aplicación, si estas familiarizado con este framework encontraras un código familiar que indica las vistas y manejo de controladores.
En la carpeta “/www/templates” encontraras las plantillas que generan las vistas de la aplicación, busca el archivo tabs-dash.html, esta plantilla muestra el contenido de la primera vista, vamos a modificar el código:
<ion-view title="Mi primera app en ionic!">
<ion-content class="padding">
<h1>Hola Mundo!</h1>
<p>Las aplicaciones ionic se basan en HTML y AngularJS</p>
</ion-content>
</ion-view>
Ya tienes lista tu primera aplicación, guarda el documento y pruébalo (en tu navegador o en el emulador) tendrás algo similar a esto:
Mas información
Puedes encontrar la documentación oficial de ionic repleta de ejemplos y datos sobre los controladores y directivas. Si te interesa leer un libro completo puedes encontrar Ionic in Action que esta enfocado a ejemplos prácticos.
También puedes probar Ionic Creator que te permite crear aplicaciones basadas en este framework pero usando un entorno totalmente gráfico.
