Quieres desarrollar aplicaciones con Cordova o PhoneGap, pero te preguntas: ¿por dónde empiezo?
Si eres una desarrolladora de aplicaciones nativas, puede que hayas llegado a un punto de tu carrera donde tu cliente te dice: “entiendo que una app nativa tiene sus beneficios, pero prefiero Cordova porque quiero ahorrar en costo de mantenimiento. No quiero tener que mantener dos productos separados: Android y iOS”. En este punto solo queda considerar que tal vez tu cliente tiene razón y empiezas a pensar si Cordova realmente puede competir con una app nativa. Puedes leer sobre Apps Nativas vs Cordova/PhoneGap en este artículo que escribimos anteriormente.
¿Qué es Cordova, qué es PhoneGap?
Lo primero que tienes que hacer es entender la diferencia entre Cordova y PhoneGap para que puedas elegir con cuál quieres trabajar. En resumen, inicialmente solo existía PhoneGap, pero un día los creadores de PhoneGap decidieron donar el código al Apache Software Foundation para que el software fuera parte de la incubadora de Apache. Esta versión de PhoneGap bajo el cuidado de Apache pasó a llamarse Cordova. Actualmente, PhoneGap es una distribución de Cordova. Adobe se encarga de dar mantenimiento a PhoneGap, y tanto PhoneGap como Cordova se distribuyen como software libre. La diferencia está en que PhoneGap goza de ciertas herramientas creadas por Adobe que facilitan el desarrollo: como PhoneGap Developer App, Adobe PhoneGap Build, Adobe Marketing Cloud y Adobe PhoneGap Enterprise.¿Cuál me conviene para desarrollar apps?
Para decidir si usar PhoneGap o Cordova, uno se hace las preguntas: ¿usaré las herramientas que me proporciona Adobe? sino, ¿qué herramientas/framework voy a usar? Si consideras que las herramientas de Adobe son beneficiosas para ti y estás dispuesta a pagar por algunas de ellas entonces elige PhoneGap; sino, elige Cordova.
¿Pero porqué usar Cordova si PhoneGap tiene más herramientas a su disposición? Algunos autores en Internet, como Bartek de MakeHybridApps, dicen que Cordova recibe actualizaciones un poco más rápido y tiene una interfaz más simple. Otros, como Utkarsh Sinha en Quora, dicen que el equipo de Cordova tiene menos interés monetario que el de PhoneGap, y que si eres un desarrollador con experiencia y quieres más control sobre tu aplicación, probablemente amarás Cordova.
Lo mejor sería determinar qué framework/herramientas quieres usar para tu desarrollo con PhoneGap/Cordova, y en base a eso decidir cuál de los dos te conviene. Por ejemplo, ya vimos que hay muchas herramientas de Adobe disponibles para PhoneGap, pero otros frameworks como Ionic, en su capítulo 1 de la guía, recomiendan usar Cordova a pesar de que Ionic funciona tanto para PhoneGap como para Cordova.
En EtyaLab hemos optado por usar Cordova, por lo tanto el resto del artículo se enfoca en ciertas cosas que debes saber sobre Cordova.
¿Por qué Cordova me permite desarrollar con HTML, CSS y JavaScript?
Porque la aplicación escrita con Cordova corre dentro de un WebView.
Un WebView es un control proporcionado por las diferentes plataformas (Android, iOS, Windows Phone, etc.) que permite desplegar una página web. Android utiliza la clase WebView, mientras que iOS utiliza la clase UIWebView.
Lo que Cordova hace es crear un cascarón de app nativa, cuyo único componente es un web view donde se ejecuta la aplicación que has escrito con HTML, CSS y JavaScript. De modo que tu aplicación escrita en Cordova es simplemente una página web.
La página web que escribirás en Cordova para funcionar como una app móvil debe seguir un diseño en particular para que parezca una aplicación nativa: el diseño de Single Page Application (SPA) o Aplicación de una sola Página.
¿Qué es una Single Page Application?
Una Single Page Application o SPA es una aplicación web que se ejecuta por completo en una sola página con el objetivo de hacer la experiencia de usuario más fluida. Como la página solo se carga la primera vez, no se cargarán nuevas páginas mientras el usuario esté usando la aplicación. Esto es importante, porque al cargar la página una sola vez, todos los recursos que necesita la página (el HTML, el CSS y el JavaScript) se cargan al inicio, y al usar la aplicación, el usuario no tiene que esperar el tiempo de recarga, ya que nunca tendrá que moverse a otra página. Luego de la carga inicial, el resto de los recursos que necesite la aplicación se pueden descargar dinámicamente por medio de AJAX.
En esta introducción a las SPA, el autor menciona varias aplicaciones que han sido implementadas como SPA: Gmail, Google Maps, Google Drive, Hotmail y Trello. Ahora sabes por qué nunca se recarga la página cuando abres un correo en Gmail.
Como desarrollador de aplicaciones nativas puede que te preguntes: si tu aplicación es solamente una página web que corre dentro de un WebView, ¿cómo puedes hacer para mostrar las diferentes pantallas que muestras en tu aplicación nativa? ¿cómo haces para simular la creación de activities de Android o los segue de iOS? Para esto, existen varios frameworks de SPA que te pueden ayudar.
4 Razones para utilizar un Framework
En su documentación, Cordova presenta varios SPA frameworks que pueden usarse para desarrollar aplicaciones con Cordova. Entre los mencionados se encuentran AngularJS, jQuery Mobile y Sencha Touch. En EtyaLab hemos optado por usar Ionic porque se integra muy bien con Cordova y ofrece unos controles bien diseñados para el entorno móvil.
Utilizar un framework para trabajar tu aplicación en Cordova en lugar de escribir toda la aplicación a pulmón tiene muchas ventajas. Muchos desarrolladores en Internet, como Josh Morony, que enfatizan lo importante que es utilizar un framework para desarrollar aplicaciones con Cordova. Aquí tenemos algunas de las ventajas de utilizar un framework:
1. Controles diseñados para parecer nativos
Mira algunos de los controles que ofrece Ionic para que puedas armar una aplicación web que parezca nativa.
2. Comportamiento que parece nativo
Android y iOS tienen animaciones que son propias del entorno móvil, como transiciones entre pantallas, scrolling de listas, etc. Ya los desarrolladores de los frameworks han hecho el trabajo de recrear esas animaciones con JavaScript por ti.
3. Código optimizado para mejorar el rendimiento
Recordemos que la app que vamos a crear va a estar corriendo en un dispositivo móvil que no tiene los mismos recursos que un ordenador. Los creadores de los frameworks han tomado las medidas necesarias para que la funcionalidad ofrecida por el framework tome la menor cantidad de recursos posibles.
4. Manejo de las secciones del SPA como pantallas
Recuerdas la pregunta de hace un rato de ¿cómo puedes hacer para mostrar las diferentes pantallas que muestras en tu aplicación nativa? Bueno, los frameworks que hemos listado anteriormente se encargan de hacer ese trabajo por ti. Solo tienes que leer la documentación del framework que elijas para entender cómo una sección de tu SPA se despliega como si fuera una pantalla de la aplicación sin tener que recargar la página que estás mostrando.
Consideraciones al usar Cordova
Tendrás que probar la app en muchos dispositivos
Difernetes dispositivos tienen diferentes implementaciones del DOM, por lo tanto, hay que probar en varios dispositivos para poder corregir alguna desviación en la presentación de la app. Esto sería equivalente al proceso de cuando uno escribe una aplicaión web y da soporte a varios navegadores: tienes que asegurarte que la aplicación se vea bien en tantos navegadores como sea posible.
Tendrás acceso a las funcionalidades nativas por medio de plugins
Para que puedas acceder a la funcionalidad del teléfono como cámara, acelerómetro, estatus de la batería, barra de estado, almacenamiento, etc., deberás instalar varios de los plugins desarrollados para Cordova. Pero no te preocupes, la mayoría de las funcionalidades que generalmente se necesitan ya están cubiertas, según este cuadro de soporte a plataformas.
Versiones muy viejas de Android/iOS no tendrán
soporte Según la documentación de Cordova para Android, como regla general, “las versiones de Android dejan de ser soportadas por Cordova cuando caen por debajo del 5% en el tablero de distribución de Google“.
Siguientes Pasos
Instalar Cordova
Puedes usar cualquiera de estas dos guías, aunque hay muchas más en Internet:
2.La Guía Detallada de Filip Petkovski
Instalar Ionic
Con Cordova instalado, instalar Ionic es bastante fácil:
1.Guía de Instalación de Ionic
Dar rienda suelta a tu imaginación
¿Cuál será tu primera aplicación en Cordova?
