Ionic Framework: Introducción

En numerosos casos, nos encontramos frente a un proyecto donde el producto que se quiere lograr debe tener un impacto no solo al público que poseé una computadora con un navegador web, sino también, se quiere llegar a aquellas personas que tienen otros dispositivos como lo son los celulares o tablets.

Lo que históricamente se hacia era tener 2 aplicaciones (o mas, dependiendo de los diferentes dispositivos a los que se quería tener acceso) en las cuales los desarrollos de la misma aplicación tenia tecnologías distintas, asi como también, códigos distintos, por lo que la aplicación o sistema que se desarrollaba tendía a tener numerosos problemas de mantenibilidad y se volvía bastante costoso.

Por esta y muchas otras razones, surgen los framewoks Javascript orientados al desarrollo de aplicaciones móviles (u otros dispositivos). Estas aplicaciones al ser construidas bajo tecnologías Javascript nos posibilitan también de acceder desde un navegador web, teniendo asi, el mismo producto para 2 o mas dispositivos distintos con el mismo código.

Uno de los frameworks mas potentes, portables, versátiles y óptimos es el llamado Ionic Framework. Este framework posee numerosas ventajas las cuales veremos a continuación, pero antes dislumbremos bien, que es y cómo se utiliza.

¿Que es?

Ionic es un framework desarrollado bajo tecnologías Javascript que permite desarrollar aplicaciones celulares híbridas. Seguramente te estarás preguntando ¿Que es una aplicación híbrida?. A grandes rasgos, cuando hablamos de apliaciones celulares híbridas nos estamos refiriendo a que son aplicaciones que no son del tipo nativas, es decir, que no son desarrolladas con la tecnología nativa con la que ejecuta en el sistema operativo del celular (como por ejemplo lo que seria Java en Android).

Ventajas

Particularmente este framework posee grandes características que lo diferencian de muchos de otros frameworks similares. Entre estas ventajas enumeramos las siguientes:

  • Posee un numero importante de componentes propios de aplicaciones móviles nativas desarrolladas en HTML5.

Esto nos permite no solo obtener una interfaz que emula casi a la perfección una aplicación nativa sino que también, nos permite ver la aplicación desde un navegador web y los mismos componentes no perderán calidad ni se deformarán sin importar que resolución tengamos. Punto importante en la portabilidad.

  • Implementa un patrón MVC para dividir las capas de la aplicación haciendo uso de las buenas prácticas.

El patrón de diseño MVC utilizado en el framework es aportado por otro framework muy importante y realmente genial que es AngularJS desarrollado por la gente de Google. Para conocer mas de AngularJS pueden visitar el post del mismo.

  • Utiliza Apache Cordova como wrapper o capa de abstracción del OS del celular nativo en el cual se quiere desarrollar.

Apache Cordova es una plataforma que se utiliza para la construcción de aplicaciones nativas de celulares o dispositivos móviles en general utilizando HTML, CSS y Javascript.

  • Permite customizar el front-end de forma fácil, rápida y muy sencilla al permitir el diseño de la aplicación con CSS y HTML.

Con esto logramos diseñar una aplicación muy agradable a la vista en muy poco tiempo sin tener que lidiar con las cuestiones propias referidas al sistema operativo en donde queremos que se ejecute la aplicación.

  • Trabaja en conjunto con la tecnología conocida como Bower que funciona como repositorio de modulos javascript.

Con este framework de dependencias javascript nos permite instalar módulos o plugins más facilmente para ser utilizados por AngularJS

¿Como lo instalo?

Para la instalación de este framework basta solamente con tener instalado NodeJS y el NPM (Node Packaged Modules).

Como en Teraswap somos fanáticos de los sistemas operativos Open Source como lo es Linux, vamos a describir como seria el comando (en un OS basado en Debian) para instalar NodeJS y el modulo de npm para de esta forma instalar finalmente el Framework Ionic

Luego de ejecutada la misma, ya tenemos instalado tanto NodeJS como su manejador de paquetes necesario para la instalación del framework ionic.

¿Como inicio un proyecto en Ionic?

Para instalar ionic solo basta con ejecutar el siguiente comando en consola:

Con el comando anterior, se instala no solo ionic, sino también, la plataforma de Apache Cordova necesaria para instalar y hacer uso de las funcionalidades nativas del OS del dispositivo móbil donde este o estará corriendo la aplicacion.

Para inicializar un proyecto nuevo en Ionic es necesario ejecutar la siguiente linea

lo que se encuentra dentro de los corchetes son las 3 opciones existentes de entre las que se puede seleccionar solamente 1 de ellas y que las mismas son identificadores de proyectos básicos pre-establecidos alojados en GIT por la gente de Ionic para una puesta inicial mucho más rapida sin tener que empezar de 0 toda la aplicacion y que la misma se puede usar de base para iniciar el desarrollo.

Para más información de como empezar pueden visitar la pagina oficial de Ionic Framework en la sección getting-started

A continuación les brindamos una breve screencast de como se instala ionic, como se inicializa un proyecto y un ejemplo simple de navegacion entre distintas vistas, aplicando la buena práctica de modularizacion de las vistas sin necesidad de embeber el template en el mismo index que es como lo van a ver en muchos de los ejemplos existentes en internet y que no son del todo prolijos ya que no utilizan toda la fuerza que brinda AngularJS.

 

Para más información pueden visitar el sitio oficial del framework, y en la sección de documentos se encuentra todo lo necesario para empezar la aplicación. En publicaciones futuras sobre el Ionic Framework, vamos a ahondar mas profundamente descubriendo todo lo que se puede hacer en una aplicación desarrollada bajo esta tecnología y todo lo que se puede customizar ya que actualmente en internet no existen muchas respuestas acertadas a numerosas dificultades y problemáticas que surgen a la hora ponerse a programar.

Aclaración

El desarrollo del video anterior solo funciona para visualizarlo por medio de un navegador web. En publicaciones futuras sobre Ionic se realizarán screencast sobre como compilar para determinado dispositivo e instalarlo en el mismo para poder visualizar la aplicación.

Este video esta orientado únicamente para dar un ejemplo de como se instala y lo rápido que se genera una aplicación con el framework y no se extendio más para no sobre cargar el post.

Conclusión

Como se visualiza en el video, la codificación y puesta inicial del proyecto son muy sencillas ya que utiliza casi en su totalidad el uso de AngularJS, un framework MVC ultra eficaz y muy fácil de utilizar.

Gracias a esto se pueden desarrollar aplicaciones para varios dispositivos de forma ágil, rápida y con un lenguaje que muchos de los programadores web conocen como lo es Javascript.

You may also like...

1 Response

  1. ivan flores dice:

    Muy bueno gracias lo voy a practicar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *