Desarrollo de aplicaciones móviles con Ionic

¿Han pensado alguna vez en desarrollar una App? Puede sonar aterrador aprender tecnologías de plataformas específicas para hacerlo y tal vez no tengas el tiempo para hacerlo. La buena noticia es que existe Ionic. Este framework de desarrollo móvil HTML5 orientado a la creación de aplicaciones móviles híbridas te permitirá lograrlo rápidamente. Conoce cómo.

Como los sitios en Internet, las aplicaciones híbridas son construidas con tecnologías web como HTML, CSS, Y JavaScript. Su diferencia radica en estas son guardadas 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 permite acceder a funciones del dispositivo, que a menudo son restringidas para los navegadores móviles comunes, como la cámara, los contactos, sensores y demás.

Por otro lado, las Apps híbridas incluyen elementos nativos de UI en situaciones particulares. Además, presentamos algunas ventajas sobre las nativas, 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) encargado de toda la apariencia y las interacciones que el usuario ejecuta, mediante componentes nativos predefinidos y animaciones optimizadas.

 

Importancia de Apache Cordova para Ionic

Tenga en cuenta que 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 complementos construidos con código nativo.

Debido a que Ionic es un framework HTML5 necesita un contenedor como Cordova para ejecutarse como una aplicación nativa.

En ese sentido, las herramientas propias de Ionic usan Cordova para su funcionamiento interno.

Los recursos de la aplicación 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 SDK de plataformas específicas.

Estas herramientas de Apache Cordova son usadas a través de una interfaz de línea de comandos (CLI).

Por otro lado, las apps híbridas ofrecen un camino para que los desarrolladores web puedan usar sus habilidades y no quedar atascados en plataformas privadas, lo que incluye los lenguajes de programación y los SDK 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.

Cabe mencionar que Apache Cordova comenzó como un proyecto llamado PhoneGap. Actualmente PhoneGap existe como una distribución de Apache Cordova e incluye herramientas adicionales.

¿Cómo instalar Ionic?

1. Asegúrese de tener una versión actualizada de Node.js instalada en su sistema.
2. Abra una terminal o una consola de comandos (Windows), luego instale Cordova e Ionic:

   npm install -g cordova iónico

3. Si ya tiene instalados ambos en su computador, asegúrese de actualizarlos a la última versión:

   actualización npm -g cordova iónico

 

Posteriormente, vamos a necesitar instalar SDK específico de cada plataforma para poder lanzar nuestra aplicación en ellas, pero este tema no será incluido en esta entrada.

Recuerde que puede encontrar más información en la documentación de Ionic en cualquier momento.

Al iniciar tenga en cuenta…

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 aplicación usando una de las plantillas predefinidas de Ionic, o una aplicación vacía.

myApp de inicio iónico en blanco 
pestañas myApp de inicio iónico 
Menú lateral de myApp de inicio iónico

 

Estos comandos crearán una carpeta llamada myApp y configurarán los archivos, más carpetas requeridas. Para acceder a la carpeta uso principal:

cd myApp

 

Para ejecutar apps de Ionic en cualquier plataforma desde el CLI solo necesitamos estos comandos (y tener el teléfono o la Tablet conectado al PC, por supuesto). En plataforma puede ir android o ios:

plataforma iónica agregar plataforma

plataforma de construcción iónica

plataforma de carrera iónica

También, podemos probar la aplicación directamente en el navegador de nuestra PC. Esto nos conviene cuando no hemos agregado aún alguna plataforma o no hemos instalado los SDK requeridos. Sin embargo, esto podría limitar el desarrollo más avanzado en algún punto, debido a la falta de acceso completo a las funciones nativas móviles. De hecho, algunos complementos 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.

 

servicio iónico

Estructura de Ionic

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

 

• gancho: 

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.

• Plataformas:

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 se genera automaticamente al ejecutar:

ionic addyionic build

 

• Complementos: 

Esta carpeta contiene los plugins de Cordova. Al iniciar una aplicación Ionic, algunos complementos imprescindibles son instalados por defecto.

 

• Recursos:

Esta carpeta se usa para agregar recursos como íconos y pantallas splash al proyecto. Se genera en la consola:

ionic resources.

 

 

• SCSS:

Ya que los estilos incluidos Ionic core se construyen con Sass, en este directorio se almacena un archivo Sass que podemos modificar.

 

• 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 acoplarla a nuestras necesidades. Al abrir esta carpeta encontraremos:

• css:  donde escribiremos todos nuestros estilos CSS.
• img: para guardar las imágenes.
• js:  contiene el archivo principal de configuración de la aplicación (app.js) y los componentes de AngularJS (controladores, servicios, directivas). Todo nuestro código Javascript irá dentro de estas carpetas.
• libs: almacenan las librerías.
• index.html: punto de partida de nuestra app.
• bowerrc: archivo de configuración de Bower.
• editorconfig: archivo de configuración del editor.
• gitignore: es usado para indicar qué partes de la aplicación 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: archivo de configuración de Cordova.
• package.json: contiene información acerca de la aplicación, las dependencias y complementos instalados a través de NPM.

Comentarios finales

El desarrollo de aplicaciones móviles híbridas puede ser atractivo 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 y JavaScript?, pero la verdad es que puede ser más complejo que eso.

Las aplicaciones híbridas permiten abarcar más de una plataforma. Sin embargo, cada una de ellas 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, cuál puede ser inconsistente entre las 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 muchos tipos de plataformas y dispositivos por lo que generalmente tenemos que cubrirlos todos. Es difícil combinar las múltiples funcionalidades nativas, y muchas veces nos encontraremos con problemas de compatibilidad entre complementos, lo que lleva a errores en la construcción de la aplicación difícil de encontrar.

Por último, las aplicaciones 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 aplicaciones híbridas son una opción muy viable para el desarrollo de aplicaciones que no requieren funciones nativas demasiado fuertes. Es un camino que vale la pena mirar mas a fondo.