Blog

27
FEB

Introducción a Ionic Framework.

Introduccion.

En está entrada iniciaremos el camino en el estudio de Ionic Framework, una herramienta de código abierto, llamada por algunos SDK (Software Development Kit) para el desarrollo de aplicaciones móviles híbridas, y web apps progresivas, utilizando tecnologías web (HTML, CSS, Javascript) y como base el entorno de desarrollo Cordova, para el acceso a elementos nativo de los teléfonos.

Este framework fue creado por Max Lynch, Ben Sperry y Adam Bradley de Drifty Co. en 2013, podemos notar que ya tiene uno 6 años en el mercado con lo cual se encuentra ya bastante maduro para su uso en el desarrollo de apps.

El hecho de que sea basado en componentes web, es una de las razones por las que se ha hecho muy famosa esta herramienta, debido a que desarrolladores web frontend, pueden reutilizar sus conocimientos y comenzar rápidamente en el desarrollo de aplicaciones para móviles.

 

¿Que es Ionic Framework?

En la introducción ya he mencionado que Ionic es un Framework y un SDK, para el desarrollo de aplicaciones móviles híbridas, principalmente ofrece un conjunto de componentes web para el desarrollo de interfaces, además de integración para utilizar plugins que permiten el uso de elementos nativos del teléfono,  para lograr este propósito Ionic utiliza como base otras dos tecnologías en las que se sustenta; estas son Angular y Cordova.

Con la utilización de Angular, se ofrece un conjunto de componentes web reutilizables y plugins Cordova empaquetados como módulos, adaptados a cada dispositivo que Ionic da soporte, estos principalmente son Android y iOS, dichos componentes permiten un desarrollo más rápido de interfaces ya que contienen un diseño predeterminado y optimizado para cada plataforma disponible.

Otro elemento clave sobre el que se soporta Ionic es Córdova, este entorno de desarrollo ofrece una API con un conjunto de plugins (hasta la fecha 4384), que permiten el acceso a partes nativas del teléfono como cámara, lista de contactos, información sobre la batería, entre otros. Además también se consiguen otras funcionalidades, ejemplo: lectura de código QR, login con redes sociales y muchos más. Pero Ionic toma los más importantes y los empaqueta en módulos angular para su uso fácil a través de la inyección de dependencias.

Así Ionic funciona posicionando una capa de componentes por encima de Angular y Córdova.

Cabe destacar que actualmente se encuentra en desarrollo el soporte de Vue.js y React.js, con lo cual un desarrollador de alguna de estas tecnologías podría cambiar la capa de Angular con un de las antes mencionadas.

 

Elementos de Ionic.

Ionic como marco de desarrollo nos ofrece un conjunto de herramientas para trabajar que hacen la vida mucho más fácil al llevar a cabo nuestros desarrollos, esos son:

 

CLI

El Command Line Interface de Ionic o en español interfaz de línea de comandos es una poderosa herramienta que a partir desde la terminal nos permite automatizar muchas tareas rutinarias en ionic, entre las que podemos listar:

– Crear un nuevo proyecto.

– Crear pages, providers

– Convertir de forma automática iconos y splash.

– Instalar plugins cordova.

– Compilar nuestra app.

– Configurar la app.

– etc.

 

El CLI de Ionic representa una de base fundamentales en el uso de este framework, y dominarla así como conocer todos los comandos disponibles te dará mayor control y versatilidad en tus desarrollos.

 

Componentes UI

Los componentes en Ionic son la mayor aportación que nos ofrece este framework, en contraste de usar Cordova directamente. Si apostamos por crear una interfaz desde cero en nuestro desarrollo tendríamos que escribir gran cantidad de código y testear que en diferentes plataformas y resoluciones hasta que todo se vea como queramos.

Está es una de las ventajas que nos ofrece Ionic, al brindarnos un considerable cantidad de componentes web testeados y con diseños adaptados a diferentes plataformas, donde al compilar nuestra aplicación con Ionic se selecciona para cada plataforma el diseño adecuado para la misma de manera transparente para nosotros.

Los componentes que nos ofrece Ionic son los que esperaríamos usar en cualquier app para móvil, o PWA, entre estos tenemos:

– Alert.

– Button.

– Card.

– Item

– Icons

– List

– Etc.

 

API Ionic

El tercer elemento clave en desarrollo de aplicaciones Ionic es la API, está nos provee de un conjunto de propiedades, eventos y métodos que nos permite trabajar con los componentes que este framework nos ofrece. Está API, nos brinda un control superior sobre los componentes de Ionic por lo que al igual que la CLI, y los componentes (están estrechamente ligados), resulta indispensable su aprendizaje para poder sacar un mayor provecho de Ionic.

 

Ionic Native

Es el último elemento de Ionic que mencionaremos, este nos ofrece una forma coherente de aprovechar al máximo una gran cantidad de plugins Cordova para sacar mayor partido a las características de los teléfonos móviles (Cámara, GPS, Bluetooth, etc).

Es importante recalcar dos puntos sobre Ionic Native, primero los plugins están “Curados” (así los mencionan en su documentación), esto es que han sido integrados al framework ionic, a través del sistema de módulos de angular para ser usados por inyección de dependencias en tu proyecto.

Un segundo punto a tomar en cuenta es que la gente de Ionic hace una distinción interesante entre una versión “Community Edition” y otra llamada “Enterprise Edition”, la diferencias entre una  y otra versión se basan en el el soporte y documentación que te ofrece la empresa para su uso.

 

Conclusion.

Ionic es una herramienta que nos permite hacer aplicaciones móviles híbridas mucho más rápido al brindarnos un conjunto de herramientas y elementos para lograr nuestros objetivos. A través de su CLI, Componentes y empaquetado de módulos para acceso a funciones nativas del teléfono, este framework se ha convertido en una de los más famosos a la hora de hacer aplicaciones para móviles y PWAs.

Dos cosas importantes no mencionadas a lo largo del artículo es que ionic también se sustenta fuertemente en el uso de dos herramientas, que aunque podrían no utilizarse, resultan de muy buena ayuda en pos de hacer mucho más fácil de desarrollo, estas son TypeScript para escribir código Javascript y Sass para la escritura de código CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *