HERRAMIENTAS PARA CREAR NUESTRA APP HÍBRIDA

Vamos ahora a hacernos nuestra lista de herramientas que vamos a necesitar para ponernos manos a la obra. Lo primero es definir cómo vamos a programar nuestra App. Existen varias opciones en función del tipo de programador que seas.

• Puedes programar una app nativa, lo que significa que programas en Java para dispositivos Android, IOS para dispositivos Apple, y C# o Visul Basic para Windows Phone.

• Puedes programar una app híbrida, lo que significas que usas una parte de código nativo y parte de código web (HTML, CSS y JavaScript). La parte de código nativo suele ser dada por una cross platform tool (herramienta multiplataforma) que nos "adapte" la app al dispositivo móvil, como Phonegap o Appcelerator que nos permite, entre otras cosas, el uso de recursos del dispositivo móvil en el que instalemos la app (desarrollada con programación web) y que nos va a permitir compilar la app para todo tipo de dispositivos (android, ios, window phone).

Desde el punto de vista de performances (actuaciones, fluidez y acceso a recursos del móvil) es siempre mejor una programación nativa, pero la programación híbrida permite compilar para todas las plataformas con un único código y además la distancia con las apps nativas en terminos de performances se está estrechando cada vez más.

Para ver como están las opciones más y menos elegidas en el mercado os dejemos este artículo sobre los lenguajes de progamación seleccionados por los programadores de apps: http://www.developereconomics.com/report/q3-2014-language-apps/

En nuestro caso vamos a realizar una app híbrida. Con esta primera elección ya sabemos que vamos a necesitar, como hemos dicho, una herrramienta multiplataforma para adoptar la app al móvil (lo que se llama un cross-platform tool). Existen varias.

CROSS PLATFORM TOOLS

Phonegap (Apache Cordova):la más usada, de código libre y gratuita lo que permite el uso de multiple plugins públicos. Es un puro desarrollo web (HTML, CSS y JavaScript). No presenta UI frameworks de por sí sino que hay que usar unos externos (Jquery Mobile, Kendo UI, ...) como veremos más abajo. Cuenta con la herramienta Phonegap Build que permite la compilación a todos los dispositivos de manera online en la nube.

Appcelerator: la segunda más usada con su versión Titanium Appcelerator (hay otra de pago para empresas). Necesitas descargar un SDK de forma local. No es puro desarrollo web sino que es sólo Javascript lo que puede complicar un poco la maquetación. Está a la cabeza en cuanto recursos UI pues los controles y el aspecto son nativos. Presenta también compilación online en la nube.

 

Adobe Air: Usado para apps desarrolladas en flash, es decir, realmente no es para HTML y JS, sino para Flash/Actionscript. Además para que la apps corran en un dispositivo es necesario que tengan instaldo Adobe Air o bien instalarlo junto con la app, lo que incrementa el tamaño de la misma.

Sencha

Para utilizarlo como cross platform tool es necesario instalar un SDK en las herramientas de desarrollo de las apps nativas (por ejemplo instalar el SDK de Sencha en eclipse para compilar en Android). Tiene un UI framework llamado Senda Touch que permite compilarlo con Phonegap. El servicio completo Sencha Complete es de pago.

 

Existen varias opciones más como Monaca que desconocemos un poco pero creemos que realmente usa Phonegap pero facilita su uso y el de sus plugins, y otras como Qt orientado más a C++, o Unity orientado a desarrollo 3D. Pero pensamos que de momento con estas es más que suficiente.

En principio, según hemos leido (no nos dedicamos al estudio de mercado), las dos más usadas son Phonegap y Appcelerator. Nosotros, en Appositivas, usaremos para nuestra primera app Phonegap.

Pero aún tenemos que elegir más cosas antes de empezar y es si vamos a utilizar un UI Framework (librería gráfica) para darle a nuestra App un aspecto de móvil. En nuestro caso, al haber seleccionado Phonegap deberemos hacerlo, porque podemos ir jugando con el HTML, CSS y JS y podríamos hacerlo nosotros mismos, pero estos frameworks permiten de una forma rápida y sencilla adaptar el aspecto de nuetro diseño web a uno de app para dispositivos móviles. Veamos algunos ejemplos.

UI FRAMEWORKS

jQuery Mobile: Es la más común y la más usada. Basada en Jquery. Tiene buena documentación y es gratuita. En la propia documentación recomiendan el uso de una hoja css customizada que varie un poco la libreria, porque se corre el riesgo de hacer apps iguales unas a otras con estas librerias.

Kendo UI: Es la que mejor resultado presenta y la que más se acerca a las apps nativas. Basada en Jquery. Tiene buena documentación. Lo malo es que es de pago si quieres usarlo para una app comercial (licencia comercial)

Sencha Touch: Ya hemos hablado de Sencha como cross platform tool y ahora hablamos de sencha touch como librería gráfica. Basada en Javascript. Tiene buena documentación. También es de pago si se quiere usar para una app comercial (licencia comercial). Sencha Touch puede ser compilado con Phonegap.

Ionic: Tiene buena documentación y compila para IOS y Andorid. Es necesario hacer instalaciones locales (tienes que tener node.js instalado y luego cargar Ionic).

Existen más, como Boostrap que es una UI framework general para HTML5 para responsive design pero que permite crear apps, o la japonesa Onsen UI que desconocemos un poco pero que va asociada a Monaca de la que hemos hablado antes (hay que investigarlo). De momento pensamos que con esto es suficiente. Nosotros, en Appositivas, usaremos para nuestra primera app jQuery Mobile. 

Llamadnos clasicos, pero usaremos  jQuery Mobile y Phonegap, porque en nuestra primera app, como ya dijimos en post anteriores, no queremos hacer la mejor y más alucinante, si no que pensamos que lo primero es desarrollar nuestra app, acabarla, entender el proceso

y asentar conceptos. Luego ya haremos otras apps utilizando alguna de estas otras herramientas y frameworks.

Asique ya lo tenemos!! Lo que vamos a necesitar para realizar nuestra primera app va a ser:

CONOCIMIENTOS (que iremos dando):

• Conocimientos de HTML5, CSS y JavaScript
• Conocimientos de JqueryMobile.
• Conocimientos de Phonegap.

PROGRAMAS y ARCHIVOS:

• Un editor de texto para HTML, CSS y JavaScript. Lo suyo es usar Adobe Dreamweaver, pero hay que pagarlo y como alternativa nosotros recomendamos Sublime Text que está muy bien y es gratuito.
• Descargaremos Phonegap de su página web.
• Descargaremos la librería de jQuery Mobile de su página web. 
• Una cuenta de Adobe que es gratuita y te permitirá tener una app privada con Phonegap Build.

En cualquier caso en el próximo post haremos el proceso para crearnos una plantilla básica para una app detallando las descarga y la estrucutra de carpetas que necesitaremos.

Materiales Recomendados:

Existen en la red multiples comparativas de las herramientas multiplataformas. Os ponemos algunas, pero buscad en la red y encontraréis más:

• En castellano: http://albertovilches.com/phonegap-vs-adobe-air-flex-vs-titanium-appcelerator-vs-corona-nuevas-conclusiones
• En inglés: http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools/

Lo mismo sucede con los UI frameworks para HTML5. Os ponemos algunas:

• http://html5hub.com/comparing-html5-mobile-ui-frameworks/
• http://www.gajotres.net/top-7-mobile-application-html5-frameworks/ 

Esquema Mental by Versión Lunática: