Hoy en día, las aplicaciones móviles híbridas son cada vez más utilizadas en el desarrolllo de apps pero, ¿qué es exactamente una aplicación móvil híbrida?
Las aplicaciones móviles híbridas son una combinación de tecnologías web como HTML, CSS y JavaScript, que no son ni aplicaciones móviles verdaderamente nativas, porque consisten en un WebView ejecutado dentro de un contenedor nativo, ni tampoco están basadas en Web, porque se empaquetan como aplicaciones para distribución y tienen acceso a las APIs nativas del dispositivo.
¿Qué es Ionic?
Es un SDK de código abierto que provee herramientas y servicios para desarrollar aplicaciones móviles híbridas. Está construido por encima de AngularJS y Apache Cordova y se centra principalmente en el look and feel y la interacción con la interfaz de usuario de la aplicación, con la finalidad de simplificar el front-end.
Ionic es, a su vez:
1. Un framework CSS con multitud de elementos de front-end reutilizables y personalizables, que permiten desarrollar una interfaz de usuario relativamente rápido, como por ejemplo encabezados, pies de página, botones de diferentes tamaños y estilos, listas, avatares, tarjetas, formularios, entradas, casillas de verificación, pestañas y muchos más.
Ejemplo de dos componentes CSS, etiquetas de entrada de texto y botón.
<div class="list"><label class="item item-input item-stacked-label"><span class="input-label">First Name</span><input type="text" placeholder="John"></label><label class="item item-input item-stacked-label"><span class="input-label">Last Name</span><input type="text" placeholder="Suhr"></label><label class="item item-input item-stacked-label"><span class="input-label">Email</span><input type="text" placeholder="john@suhr.com"></label></div><button class="button button-block button-positive">Create account</button>
2. Una biblioteca JavaScript de interfaz de usuario con componentes JS que dan vida a los elementos del front-end y se utilizan como elementos HTML en la aplicación.
Uno de los componentes JS de Ionic más utilizados es el componente pestañas, el cual permite que un determinado contenido se muestre u oculte en función de la pestaña seleccionada por el usuario.
El siguiente código muestra el uso de este componente en una aplicación de mensajería instantánea con tres pestañas: chat, grupos y cuenta.
<ion-tabs class="tabs-positive tabs-icon-top"><!-- Chats Tab --><ion-tab title="Chats" icon="ion-chatbubble-working" href="#/tab/chats"><ion-nav-view name="tab-chats"></ion-nav-view></ion-tab><!-- Groups Tab --><ion-tab title="Groups" icon="ion-person-stalker" href="#/tab/dash"><ion-nav-view name="tab-dash"></ion-nav-view></ion-tab><!-- Account Tab --><ion-tab title="Account" icon="ion-ios-gear" href="#/tab/account"><ion-nav-view name="tab-account"></ion-nav-view></ion-tab></ion-tabs>
Utilizando el código de arriba, obtenemos una interfaz de usuario con tres pestañas diferentes, siguiendo el diseño de cada SO con un único código, pestañas en la parte inferior en iOS o pestañas en la parte superior en Android.
Personalización en función de la plataforma con Ionic
Utilizando ng-attr de Angular, es posible definir dinámicamente atributos en función de la plataforma. Por ejemplo, para mostrar iconos de las pestañas en todos los dispositivos excepto en Android, se puede utilizar el siguiente código.
<!-- if the platform is android don't add an icon, all other devices get an icon --><ion-tab title="Home" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">
Ionic es más que código, es un ecosistema
Existen muchas herramientas y recursos para el desarrollo móvil que completan Ionic, como son:
1) Ionic CLI: comandos para crear, construir, testear y desplegar aplicaciones en cualquier plataforma.
$ ionic run android: genera un .apk, lo instala en el dispositivo conectado y lo ejecuta.
2) Ionic Native: más de 70 funcionalidades nativas del dispositivo utilizando los plugins de ngCordova.
Cámara, Touch ID, OAuth, Bluetooth, HealthKit, autenticación con huella dactilar y otros…
3) Ionic Creator: herramienta drag&drop para diseñar la interfaz de usuario, mostrar la vista previa de la app en dispositivos, compartir con otros, exportar y desplegar.
4) LiveReload: actualizar la aplicación con los cambios del código en el momento, incluso si la app está ejecutándose en el dispositivo.
$ ionic run --livereload
5) View App: compartir aplicaciones de Ionic con los clientes o testers a través de esta app.
App disponible en dispositivos Android e iOS.
6) Ionic Cloud: servicios completos de backend y herramientas para aplicaciones Ionic.
Ionic 2
El equipo de Ionic está trabajando actualmente en una nueva versión del framework, que está construido por encima de Angular 2 y ofrece nuevos componentes y un mejor rendimiento, entre otras interesantes funcionalidades.
Artículos relacionados
ASO – Posiciona tu app en el App Store o Google Play
Desarrollo de aplicaciones híbridas con Ionic
Testing de una aplicación móvil usando Sauce Labs, Jenkins y Appium
Muy interesante el contenido, me ayudo mucho para ir adentrándome en el mundo de las aplicaciones híbridas, generalmente he echo algunas aplicaciones nativas. Me parece muy buena esta opción en un mercado donde el tiempo de producción es proporcional al costo
Muchas gracias, me alegro de que le haya gustado
Saludos, tego una duda, las app hechas con esta herramienta es solo un empaquetado que nos redirecciona del telefono al sitio web en internet o es una app real? Otra pregunta, estas aplicacuones funcionan offline, es decir cuando no haya internet puedo almacenar datos en la app y luego cuando haya conexion a internet poder actualizar la base de datos en el servidor en la internet?