¿Han pensado alguna vez en desarrollar una app? Puede sonar aterrador aprender tecnologías de plataformas específicas solo para crear una simple app, y tal vez no tengamos el tiempo para invertir en ese aprendizaje. Pero hay otra forma, mucho más rápida.

Ionic es un framework de desarrollo móvil HTML5 orientado a la creación de aplicaciones móviles híbridas. Como los sitios en Internet, las aplicaciones híbridas son construidas con tecnologías web como HTML, CSS, Y JavaScript. La diferencia radica en que las apps híbridas son almacenadas en una aplicación nativa que usa un WebView de la plataforma móvil. Este WebView puede describirse como un navegador sin ventana configurado para ejecutarse en pantalla completa. Esto le permite a las aplicaciones acceder a funciones del dispositivo como la cámara, los contactos, sensores y demás. Estas funciones a menudo están restringidas para los navegadores móviles comunes.

Además, las apps híbridas incluyen elementos nativos de UI en situaciones que sean necesarias. Esta clase de apps presenta algunas ventajas sobre las apps nativas, sobre todo en términos de soporte entre plataformas, tiempos de desarrollo y acceso a código externo.

Podemos ver a Ionic como el framework front-end y de interfaz de usuario (como Bootstrap), el cual se encarga de toda la apariencia y las interacciones que el usuario tendrá con la aplicación, con componentes nativos predefinidos y animaciones optimizadas, entre otras cosas.

Gran parte de las aplicaciones híbridas necesitan Apache Cordova, una plataforma que brinda un conjunto de funciones JavaScript para acceder a funciones del dispositivo a través de plugins, los cuales se construyen con código nativo. Cabe mencionar que Apache Cordova empezó como un proyecto llamado PhoneGap. Actualmente, PhoneGap existe como una distribución de Apache Cordova e incluye herramientas adicionales. Ya que Ionic es un framework HTML5, necesita un contenedor como Cordova para ejecutarse como una app nativa, y las herramientas propias de Ionic usan Cordova para su funcionamiento interno.

Los recursos de la app como el código HTML, CSS y JavaScript son contenidos a través de las herramientas que pone Apache Cordova a nuestra disposición para SDKs de plataformas específicas. Al construirse, podemos tener una aplicación que se ejecuta como cualquier otra aplicación en el dispositivo. Estas herramientas de Apache Cordova son usadas a través de una interfaz de línea de comandos (CLI).

Las apps híbridas ofrecen un camino para los desarrolladores web para reusar sus habilidades ya adquiridas. A los desarrolladores no les gusta la idea de quedar atascados en plataformas privativas; esto incluye los lenguajes de programación y los SDKs proporcionados por los proveedores de cada plataforma.

Ionic usa AngularJS para gran parte de su funcionalidad central. Podemos usar solo la porción CSS de Ionic (también nos da la opción de usar Sass), pero podemos sacarle el máximo provecho al framework en términos de desarrollo y rendimiento usando Angular.

¿Cómo instalar Ionic?

  • Asegúrese de tener una versión actualizada de Node.js instalada en su sistema.
  • Abra una terminal o una consola de comandos (Windows), luego instale Cordova e Ionic:
    npm install -g cordova ionic
  • Si ya tiene instalados ambos en su computador, asegúrese de actualizarlos a la última versión:
    npm update -g cordova ionic

Vamos a necesitar instalar SDKs específicos de cada plataforma para poder lanzar nuestra app en ellas, pero este tema no será incluído en esta entrada. Se puede encontrar más información en la documentación de Ionic  en cualquier momento.

Empezando

Una interfaz de línea de comandos se usa desde una consola (comúnmente conocida como Terminal). Recibe entrada de esta consola, y muestra los resultados en la misma. La interfaz de línea de comandos de Ionic nos permite de forma fácil iniciar, construir, ejecutar y emular apps hechas con el framework. Podemos iniciar una app usando una de las plantillas predefinidas de Ionic, o una app vacía.

ionic start myApp blank
ionic start myApp tabs 
ionic start myApp sidemenu

Estos comandos crearán una carpeta llamada myApp y configurarán los archivos y carpetas requeridos; ésta será la carpeta principal de la aplicación. Podemos acceder a ella usando cd myApp

Para correr apps de Ionic en cualquier plataforma desde el CLI, solo necesitamos estos comandos (y tener el teléfono o la táblet conectados al PC, por supuesto). En platform puede ir android o ios.

ionic platform add platform
ionic build platform
ionic run platform

También, podemos probar la app directamente en el navegador de nuestro PC. Esto nos conviene cuando no hemos añadido aún alguna plataforma o no hemos instalado los requeridos SDKs. Claro que esto puede limitar el desarrollo más avanzado en algún punto, debido a que no tenemos acceso completo a las funciones nativas móviles y algunos plugins de Cordova podrían no funcionar correctamente. Este comando inicia un servidor web básico con actualización en vivo y otras tareas automatizadas, gracias a Gulp.

ionic serve

Ionic Structure

Cuando iniciamos la app desde el CLI, Ionic generará todos los archivos y carpetas necesarios para el proyecto. Cada carpeta y archivo tiene un propósito.
Ionic Structure

    • hooks: Los hooks son scripts ejecutados durante el proceso de construcción de la app. Son usados para cambiar la funcionalidad de los comandos de Cordova y para crear procesos automatizados.

;

  • platforms: Esta es la carpeta donde se crean los proyectos de Android e iOS. No es recomendable editar ningún archivo de este directorio; esto es porque es generado automáticamente al ejecutar ionic add y ionic build
  • plugins: Esta carpeta contiene los plugins de Cordova. Al iniciar una aplicación Ionic, algunos plugins imprescindibles son instalados por defecto.
  • resources: Esta carpeta es usada para añadir recursos como íconos y pantallas splash al proyecto. Se genera ejecutando en la consola ionic resources.
  • scss: Ya que los estilos incluídos Ionic core se construyen con Sass, en este directorio se almacena un archivo Sass que podemos editar a gusto.
  • www: Esta es la carpeta principal para desarrolladores de Ionic. Aquí estaremos la mayor parte del tiempo. Ionic nos da su estructura de archivos por defecto dentro de ‘www’ pero siempre podemos cambiarla para acoplarse a nuestras necesidades. Al abrir esta carpeta encontraremos:
    • css donde escribiremos todos nuestros estilos CSS.
    • img para las imágenes.
    • js contiene el archivo principal de configuración de la app (app.js) y los componentes de AngularJS (controladores, servicios, directivas). Todo nuestro código Javascript irá dentro de estas carpetas.
    • libs es donde se almacenan las librerías.
    • index.html es el punto de partida de nuestra app.
  • .bowerrc es el archivo de configuración de Bower.
  • .editorconfig el archivo de configuración del editor.
  • .gitignore es usado para indicar qué partes de la app deben ser ignoradas a la hora de subir cambios a un repositorio Git.
  • bower.json contiene componentes y dependencias de Bower components si escogemos usar este gestor de paquetes.
  • gulpfile.js sirve para crear tareas automatizadas usando el gestor de tareas Gulp.
  • config.xml es el archivo de configuración de Cordova.
  • package.json contiene información acerca de la app, y las dependencias y plugins instalados a través de NPM.

Comentarios finales

El desarrollo de aplicaciones móviles híbridas puede ser actractivo para los intereses de una organización. ¿Por qué contratar un desarrollador para cada plataforma cuando se puede contratar un único desarrollador y apuntar a todas a través de HTML, CSS, and JavaScript? Podríamos tener un equipo que pueda desarrollar aplicaciones para todas las plataformas con un solo conjunto de tecnologías. La verdad es que puede ser más complejo que eso.

Es verdad que las apps híbridas permiten abarcar más de una plataforma. Sin embargo, cada plataforma viene con un conjunto de peculiaridades únicas que tienen que ver con su ejecución web o WebView. Esto se enfatiza en el caso de Android, el cual puede ser inconsistente entre versiones del sistema operativo.

Las pruebas pueden ser complejas debido a que el navegador no nos puede dar toda la información sobre el entorno del teléfono. Hay muchas plataformas y dispositivos, y generalmente tenemos que cubrirlas todas. Es difícil combinar las múltiples funcionalidades nativas, y muchas veces nos encontraremos con problemas de compatibilidad entre plugins, lo que lleva a errores en la construcción de la app difíciles de encontrar. Además, las apps híbridas tienden a ser un poco más lentas que las nativas, pero esta área avanza muy rápido y esto no será problema en un futuro. Por lo tanto, las apps híbridas son una opción muy viable para el desarrollo de aplicaciones que no requieran funciones nativas demasiado fuertes. Es un camino que vale la pena mirar más a fondo.


Comments