Desarrollo de aplicaciones híbridas con Ionic

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.

 

cordova-ng-ionic

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>

Stacked labels in Ionic

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.

Ionic tabs component

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:

Ionic CLI

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.

ngCordova

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.

Ionic Creator

Ionic live reload

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

Ionic View App

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.

Ionic Cloud

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.

ionic2beta
Documentación oficial

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

2 comentarios en “Desarrollo de aplicaciones híbridas con Ionic

  1. 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

Deja un comentario

Responsable » Solidgear.
Finalidad » Gestionar los comentarios.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores SolidgearGroup dentro de la UE.
Derechos » Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

By completing the form you agree to the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.