Introducción al desarrollo de Apps Híbridas con Ionic Framework.

Angel Garcia
Creative Coder
Published in
4 min readJan 7, 2016

Empecemos por la siguiente pregunta:¿por qué desarrollar para móviles?

Es evidente que el desarrollo de aplicaciones móviles ha tenido un gran crecimiento en los últimos años, esto viene dado al uso masivo de los smartphones como medio de acceso a la información; en Républica Dominicana, para ponerles un ejemplo, aunque predomina aún el uso de terminales fijas, la tendencia hacia las plataformas móviles es creciente y alcanza el 37%, según estadísticas que presenta la firma consultora Deloitte.

Fuente: http://acento.com.do/2015/economia/8304385-acceso-a-internet-desde-dispositivos-moviles-aumenta-en-la-republica-dominicana/

A nivel global, el 80% de los internautas poseen un teléfono inteligente.

Fuente: http://www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone

Entonces, ¿por qué una aplicación híbrida y qué es Ionic Framework?

Si necesitamos un desarrollo rápido, de fácil mantenimiento entre diferentes plataformas móviles (Android, iOS, Windows Phone), y no disponemos deltiempo/dinero/recursos necesarios para dedicarse a desarrollar nuestra app en cada plataforma, entonces lo ideal será una app híbrida.

Pero, ¿qué hay de la curva de aprendizaje, Java, Objective C, Swift, C#?Te tengo buenas noticias, sólo necesitas conocimientos de HTML, CSS y Javascript; Cordova se encargará de empaquetar ese código para que pueda ser ejecutado como una app nativa, básicamente tendras tu app en un Webview, basando tu desarrollo en un sólo código compartido para todas las plataformas.

Este es el momento donde te preguntas por los componentes del UI (que normalmente son diferentes según la plataforma), el rendimiento, el acceso a las APIs nativas del móvil… aquí es donde Ionic Framework nos facilita el trabajo, Ionic es una herramienta gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS (construido con Sass) y JS (optimizado con AngularJS).

¿No te convence esto de Ionic aún?

Veamos lo fácil que es crear una app multiplataforma:

Antes de instalar Ionic, siga las instrucciones en la documentación de Cordova para instalar las dependencias de las plataformas en las cuales correrá su app, en nuestro caso será Android

1. En primer lugar, instalar Node.js 4 (Node.js 5 no funciona en este momento!). A continuación, instale las últimas versiones de las herramientas de línea de comandos de Cordova e Ionic, para esto ejecute lo siguiente en la consola:

npm install -g cordova ionic

2. Crear un proyecto. Puedes empezar con uno de los templates que nos proporciona Ionic o empezar con un template desde cero (en blanco); desde la consola:

ionic start nombreDeTuApp blank

Para crear una app con una estructura plana.

ionic start nombreDeTuApp tabs

Para crear una app con navegación basada en tabs.

ionic start nombreDeTuApp sidemenu

Para iniciar con el típico menu a la izquierda.

3. Probar la app. Utilice la herramientas del command line de Ionic (Ionic CLI) para construir, probar y ejecutar sus aplicaciones (o utilice Cordova directamente), una vez creado el proyecto, nos posicionamos en la carpeta de la app (cd nombreDeTuApp) y corremos lo siguiente (desde la consola):

ionic platform add android
ionic build android
ionic emulate android

Y listo, ahí tenemos nuestra app corriendo en Android! Para iOS, sólo hay que sustitir “android” por “ios” en los comandos anteriores (teniendo en cuenta las dependencias necesarias para correr una app en iOS).

Si queremos probar la app en nuestro navegador (mucho más rápido para hacer pruebas que no requieran uso de las APIs nativas del móvil) bastaría con ejecutar desde la carpeta de la app:

ionic serve

Si quieren saber más sobre Ionic Framework, aquí les dejo unos links:

Guía de introducción (inglés)
ionicframework.com/getting-started

Documentación (inglés)
ionicframework.com/docs

Foro (inglés)
forum.ionicframework.com

Proyecto en Github
github.com/driftyco/ionic

Espero que este articulo les haya gustado (es el primero que escribo), puedes comentar, corregir o sugerir cualquier cosa en los comentarios.

Originally published at www.linkedin.com.

--

--