Hoy vamos a comenzar con una nueva serie de posts dedicado al desarrollo de aplicaciones híbridas utilizando el Framework de Ionic. Comenzaremos con la parte teórica, en donde exploraremos conceptos, entenderemos de que forma trabaja este framework y de que componentes esta formado. Antes de comenzar a hablar sobre el framework de Ionic necesitamos saber que es un framework y como funciona.
¿Que es un framework?
Un framework en términos de relacionado con la web es un conjunto de herramientas librerías y buenas practicas que aportan sencillez a nuestro trabajo, lo hacen re-utilizable y nos permite resolver un problema determinado. También es una forma de organizar nuestra programación que nos ofrecen unas funcionalidades pre-construidas en donde nos permite desarrollar de formas mas rápida nuestras aplicaciones.
¿Que es Ionic Framework?
El framework de Ionic esta hecho para crear aplicaciones híbridas las cuales son aplicaciones webs que permiten utilizar la potencia y los dispositivos hardware del teléfono. Lo que lo hace diferente es que Ionic nos va a permitir crear proyectos usando HTML, CSS y Javascript para montar nuestras aplicaciones.
Aplicaciones híbridas versus nativas
Una aplicación híbrida es una app mezcla de aplicación web la típica que funcionaria en un navegador web, con una app nativa la cual se instala en nuestro teléfono usando el hardware y la potencia del mismo. La gran ventaja de estas aplicaciones es que puede ser instalada en cualquier teléfono independientemente de que sistema operativo utilice, a diferencia de las nativas ya que si se desea crear una app para los dispositivos que utilizan Android debes codificarlo y aprender el lenguaje de Java y por otro lado si esa misma aplicación debe funcionar para IOS debes aprender y programar en el lenguaje Swift. Esta es una de la gran desventaja de las aplicaciones nativas ya que al tener que crear 2 proyectos en 2 lenguajes diferentes es necesario también tener 2 base de datos indistintamente para cada plataforma debido a que no es posible compartirla en ambas aplicaciones.
Una de las desventajas principales de las aplicaciones híbridas esta relacionada a la experiencia del usuario, ya que una aplicación nativa se ajusta mejor al hardware del dispositivo y hace que la app funcione cien por ciento al máximo debido a que esta diseñada únicamente y exclusivamente para una plataforma en especifica ya sea Android o IOS. Por mas que en la actualidad ya existen dispositivos con hardware muy potentes nunca va a funcionar igual que una aplicación nativa.
¿Cómo funciona Ionic?
Este es un framework que incluye de otros frameworks y librerías para hacer esto posible, en donde estaremos hablando de AngularJs, Apache Cordoba, GulpJs, Sass, NodeJs, Git y Bower.
Primeramente Ionic correo junto con angular JS que sera quien nos permitirá controlar y crear interacciones en nuestra aplicación por lo que será necesario saber manejar Angular JS.
Apache Cordoba es un framework que nos empaqueta nuestro código y nos lo compila a una aplicación nativa, para un diferente de plataformas móviles, este nos permitirá acceder a diferentes funcionalidades hardware de nuestros dispositivos como el acelerómetro o la cámara a través de una serie de appis JavasCript.
Ionic utiliza también SASS para crear estilos, este es un pre-procesador CSS que nos aportara una gran capacidad para moldear la apariencia de nuestra aplicación, no nos hará falta saber manejar SASS para manejar Ionic, pero si queremos cambiar la apariencia de nuestras apps posiblemente necesitaremos tener algo de experiencia con SASS.
En algunos proyectos Ionic utilizara GulpJs a la hora de manejar proyectos procesando SASS y encargándose de otras tareas, tampoco necesitaremos en principio saber como trabajar con GulpJs pero nos hará bien como es que Ionic gestiona nuestro proyecto.
Ionic también utiliza otro numero de librerías incluyendo NodesJS para realizar la instalación, Git para el control de versiones y Bower para instalar algunos componentes.
Este framework nos ofrece una serie de variedad de componentes prediseñados que podemos usar para crear funcionalidades que llevaría tiempo hacer desde cero, así por ejemplo nos ofrece una serie de clases CSS preestablecidas para que nuestra aplicación se vea y se comporte como una app nativa.
Ionic cuenta con una serie de componentes propios basados en aplicaciones móviles desarrolladas en HTML5, Esto tiene como ventaja que no solo nos permite tener un proyecto muy similar a una app nativa sino que también nos permite ver nuestra aplicación en un navegador web sin deformar el diseño indiferentemente de la resolución que tengamos.
Interfaz de linea de comando de Ionic (CLI)
La interfaz de linea de comando de Ionices una herramienta bastante útil ya que nos va a permitir administrar nuestras aplicaciones así como crear nuevos proyectos y correr nuestro servidor para poner en funcionamiento nuestra app.
Ionic se basa en el poder de muchas herramientas de interfaz de línea de comandos (CLI) para iniciar, desarrollar, probar e implementar aplicaciones.
A diferencia de las aplicaciones de escritorio tradicionales, las herramientas de CLI son pequeños programas que realizan diferentes tareas de una manera que hace que sean fáciles de usar en conjunto, todo ello sin la complejidad de tener que construir aplicaciones de escritorio visuales para cada programa.
Para utilizar las herramientas de la CLI tenemos que usar un terminal de nuestro ordenador. Un terminal nos permite ejecutar las herramientas de la CLI escribiendo una serie de comandos, y es una forma popular de los desarrolladores a crear aplicaciones web y móviles de hoy.
Para crear un nuevo proyecto desde el CLI solamente debemos situarnos en la carpeta donde lo vamos a generar y correr el siguiente comando.
ionic start MiAplicacion blank
Este comando nos descargara dependencias necesarias para que funcione nuestra aplicación y creara una carpeta con el nombre que le coloquemos, en este caso «MiAplicacion».
Luego de crear nuestro proyecto, solo debemos colocarnos dentro de la carpeta creada para luego poner en funcionamiento nuestro servidor y poder ver nuestra aplicación.
cd MiAplicacion/ ionic serve
A continuación de esto se nos abrirá una pestaña en nuestro navegador en donde veremos nuestra aplicación corriendo.
Conclusión
Ionic framework es una buena alternativa para crear aplicaciones híbridas, el cual es fácil de instalar y configurar para iniciar tu primer proyecto. Ionic al tener estar desarrollado en HTML y Javascript no permitirá ver el proceso y los cambios que hagamos directamente en nuestro navegador sin necesidad de estar compilando el proyecto cada vez que hagamos un cambio. En el siguiente post veremos como instalar Ionic y como crear nuestro primer proyecto desde la linea de comandos (CLI).
Si te gusto esta introducción a Ionic framework, no te pierdas post Manual de Ionic Framework – Parte 02