Llevaba tiempo queriendo probar PhoneGap y resulta que para cuando tengo tiempo de echarle un vistazo ya no se llama PhoneGap, sino que ahora se llama Cordova (sí, con “V”) y está dentro la incubadora de proyectos de la Apache Software Fundation.
PhoneGap es un proyecto que sirve para convertir aplicaciones desarrolladas con HTML+Javascript+CSS en aplicaciones nativas para dispositivos móviles. Bueno, realmente es mentira. Lo que hace es empaquetar aplicaciones web dentro de una aplicación nativa (Android/iOS/BlackBerry/WP7/…) para que parezca que son aplicaciones nativas.
Además permite acceder desde Javascript a funcionalidades del dispositivo que, generalmente, no son accesibles por cuestiones de seguridad, como puede ser la cámara, la lista de contactos, el acelerómetro, etc.
Prepararlo todo para poder hacer una prueba con Android me ha llevado un rato, así que como referencia para mi yo futuro, aquí dejo esta miniguía de como montarlo sobre LinuxMint (supongo que los pasos serán similares con cualquier distribución basada en Ubuntu y no serán muy distintos en Windows).
Instalar Eclipse
Aunque todo esto se puede hacer sin Eclipse, ya que empezamos a jugar con Android no está de más tenerlo instalado. Para ello, lo más sencillo es bajarse Eclipse Classic desde la página de descargas de Eclipse.
La instalación es muy sencilla. Basta con descomprimir el fichero que hemos descargado. En la carpeta resultante encontremos el fichero eclipse, que es el que deberemos ejecutar para arrancar Eclipse.
Instalar Android SDK y el plugin para Eclipse
Para instalar el SDK de Android puedes seguir esta guía de instalación. Hay que descargar el fichero con la versión del SDK que queramos utilizar, en mi caso usé android-sdk_r16-linux.tgz y descomprimirlo.
Tras instalar el SDK debemos elegir para qué plataformas (versiones de Android) queremos desarrollar. Para eso ejecutamos tools/android y accederemos al Android SDK Manager, donde habrá que seleccionar e instalar los paquetes Andoid SDK Tools, Android SDK Platform-Tools y uno o más grupos de paquetes correspondientes a las versiones de android que vayamos a utilizar.
A continuación, es necesario instalar el plugin ADT para Eclipse, cosa que podemos hacer fácilmente siguiendo estos pasos.
OJO: Si tu sistema operativo es de 64bits, tendrás que instalar las librerías de 32bits o si no Eclipse on será capaz de encontrar ciertas librerías. Para ello, desde una consola hay que ejecutar:
sudo apt-get install ia32-libs
Instalar PhoneGap/Cordova
Ahora tienes dos opciones. Puedes usar la última versión estable de PhoneGap (1.5.0) que encontrarás ya compilada en la página de PhoneGap o compilar directamente los fuentes de Cordova que encontrarás en su repositorio de github (hasta que se complete la migración de PhoneGap a la incubadora de la Apache Software Fundation).
Compilar desde los fuentes es mucho más emocionante y divertido, y además te da acceso a algunas herramientas adicionales para simplificar la creación de proyectos, pero también es algo más complicado, así que de momento nos vamos a quedar con la versión ya compilada. Si alguien tiene interés en saber cómo se compilan los fuentes paso a paso, que me lo diga.
Siguiendo el camino fácil de descargar la versión ya compilada, nos encontraremos con un fichero comprimido que incluye las librerías de PhoneGap para todos los sistemas que soporta. Dentro de la carpeta android veremos, además de un proyecto de ejemplo y una carpeta con los ficheros de configuración de PhoneGap, los dos ficheros fundamentales de toda esta historia:
cordova-1.5.0.jar: Este fichero contiene la parte java de cordova que es la que nos permitirá crear la aplicación de android en la que encapsularemos la aplicación web. Entre otras cosas, tiene la implementación de las funcionalidades propias del dispositivo a las que luego podemos acceder desde el código Javascript de la aplicación web.cordova-1.5.0.js: Es la parte javascript de cordova, donde tendremos APIs para acceder a las características propias del dispositivo.
Creando una aplicación
En la documentación de PhoneGap se incluye una guía paso a paso bastante buena de cómo hacer esto, así que no me extenderé demasiado.
La idea es crear un nuevo proyecto de Android en Eclipse y luego ajustar algunas cosillas:
- Añadir la librería cordova-1.5.0.jar al proyecto y referenciarla.
- Añadir los ficheros de configuración de PhoneGap copiando a la carpeta
/resdel proyecto la carpeta/xmlincluida en la descarga de PhoneGap en./lib/android/xml - Cambiar el
Activityprincipal de la aplicación (para los que venimos de .NET, podríamos asimilarlo alForminicial de una aplicación WinForms) para que en lugar de ser una clase derivada deActivity, sea una clase derivada deDroidGap.
DroidGap nos ofrece un Activity listo para alojar una página web y actuará como “contenedor” de nuestra aplicación html. Podemos establecer la página a cargar usando el método loadUrl. Al final debería quedarnos algo parecido a esto:
public class SampleActivity extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Si tienes suerte y no intentas hacer nada demasiado complicado, este debería ser todo el código Java que vas a ver :-)
AndroidManifest.xml para declarar el Activity que acabamos de crear e indicar los permisos que requiere la aplicación. Si no sabes muy bien cómo hacer esto, lo más sencillo es que copies el que aparece en la guía de PhoneGap.Para añadir la aplicación web hay que crear la carpeta /assets y dentro de ella /assets/www en el proyecto de Eclipse. Esa carpeta, /assets/www será la raíz del sitio web y dentro de ella podremos colocar los ficheros html, js, css, imágenes, etc., que formen la aplicación web. Aquí podremos incluir el fichero cordova-1.5.0.js para poder acceder desde la página web a las APIs específicas de PhoneGap.
Después de seguir estos pasos, ya podemos compilar el proyecto y desplegarlo sobre el emulador o sobre un teléfono físico.
Para hacer cosas “avanzadas” como tocar el GPS o el acelerómetro, en la página de PhoneGap podéis encontrar información detallada sobre las APIs disponibles.
Conclusiones
Poder encapsular aplicaciones html como si fueran aplicaciones nativas me parece una idea interesante. Es cómodo poder aplicar las mismas técnicas de desarrollo a aplicaciones para Android, iOS, WP7, etc., aunque también es cierto que tiene sus problemas.
El rendimiento seguramente no sea todo lo bueno que a uno le gustaría y la experiencia de usuario está más limitada (problemas con animaciones en las transiciones de pantalla, peor soporte para multitouch), pero PhoneGap/Cordova no deja de ser una opción a tener en cuenta para cierto tipo de aplicaciones.
Si quieres profundizar el tema, puedes consultar el resto de entradas sobre PhoneGap/Cordova que he ido escribiendo. Si eres más de libros, el libro que me más me ha gustado sobre el tema (introductorio, tampoco esperes un nivel supercomplicado de seguir), ha sido Apache Cordova 4 Programming
Pingback: weinre: el Firebug para móviles « Koalite's blog
Muy útil, lo he probado y funciona perfectamente. Me ha hecho falta instalar el API 8 (android 2.2, mi móvil es antiguo), pero tras unos ajustes, todo funciona. Gracias!
Muy interesante, has probado lo mismo para disp. BlackBerry?
gracias.
La verdad es que no, pero según la documentación debería funcionar.
muy buen muy interesante, ahora les pido una ayuda ya yo cree una aplicación web pero solo la puse a correr en el emulador quiero saber como puedo hacerla correr en mi teléfono , hay que hacer algún instalador ? como se hace ? agradecería su ayuda
Depende de la plataforma que estés usando. Si es android, en la carpeta de resultados del proyecto encontrarás un archivo con extension .apk que contiene la aplicación. Sólo necesitas copiar ese fichero a tu teléfono y luego en el teléfono ejecutarlo para instalar tu aplicación.
Hola a todos y gracias por adelantado.
Mi pregunta es sencilla, he desarrollado una app en html5, cuando la cree usando el Built de Cordova, ¿qué pasará cuando gire el iPad? Puedo crear ilustraciones diferentes para sendas orientaciones, y si es así, cómo?
Estoy un poco perdido y no quiero pagarle a Adobe 400€ para crear una App.
Un saludo
Cuando gires el iPad, tu aplicación Cordova girará igual que si fuese una página web y reajustará el layout al nuevo tamaño de pantalla. Si quieres mostrar distinto contenido o formato en función de la orientación, puedes recurrir a cualquiera de las técnicas que usarías en una aplicación web, como por ejemplo usar CSS con media queries o responsive design.
gracias por la ayuda Juanma ahora tengo otra inquietud. la aplicación funciona de manera normal si la busco en el buscador pero si le genero el .apk y lo instalo empieza bien pero cuando quiero iniciar sesión me arroja un error como si no reconociera el código php y para hacer este llamado uso ajax, como mencione en el buscador funciona pero cuando lo instalo como aplicación nativa me arroja un error en las variables de sesión he leído y parece que tengo que tener un servidor es eso cierto ???? no funciona solo de manera local en mi red ????
No puedes ejecutar código PHP en android (bueno, al menos, no con esta técnica). La idea es que en android tienes la parte de la aplicación desarrollada con HTML+JS+CSS. Lo normal será que la parte PHP resida en un servidor externo al que accedas a través de AJAX para intercambiar datos.
No encuentro el modo de desarrollar para aplicaciones con plataforma menor a 4.2… Cuando creo el proyecto y lo cargo con eclipse me sale la X roja y en la documentacion de la pagina de developer de android me dice que cuando pase esto escoja a ultima api disponible, pero esto me priva de desarrollar para plataforma 2.2 por ejemplo…
Alguna ayuda?
y se puede llevar una aplicacion de linux a android? como jdownloader, quiero tambien llevar una aplicacion de android a ubuntu sin virtualizar, que sea nativa, se puede?
Una aplicación nativa no se puede pasa directamente de Linux a android o viceversa.
Si es una aplicación web, puedes empaquetarla para ejecutarla en ambos entornos, aunque lo lógico sería tener en cuenta las diferentes características de cada uno (tamaño de pantalla, tipo de interfaz -táctil VS teclado/ratón-, memoria, velocidad, etc.).
También puedes usar lenguajes como C# (a través de mono/monodroid) o Java para hacer aplicaciones que compartan gran parte del código, aunque la capa de presentación tendrás que adecuarla a cada plataforma.
Muchas gracais por esta info, está perfectamente explicado todo.
Ya he empaquetado aplicaciones android usando PhoneGap/Cordova pero ahora necesito empaquetar para BlackBerry y me pregunto si el metodo de empaquetamiento es el mismo que android solo que cambiando el SDK de android por el propio SDK de BB, y el ADT de android o es mas complejo?
Gracias, un saludo.
Pues me temo que no tengo ni idea, pero no creo que sea muy diferente al proceso con android.
que tal, buen post, oye, estoy aprendiendo a utilizar cordova para crear aplicaciones, pero no se como añadir el sdk de android al repositorio , podrías decirme como , gracias
En realidad muy bueno, pero si es un poco tardado al hacer peticiones, ahora me encuentro tratando de implementar algo más nativo en android, sobre un website, saludos.
Hola! una pregunta que quizás resulte tonta por mi desconocimiento… ¿Se puede empaquetar una url o web responsive directamente a una app nativa, android-IOS? ¿Metiendo simplemente dicha url? algo así como para tontos?
Me he paseado por PhoneGap, Telerik y otras, y veo que hay que tener cieto conocimiento pues piden html y yo lo que tengo es una url…
Gracias!
hola, mira yo estoy haciendo aplicacion hibridas por asi llamarlas, tienen algo de codigo html que compilo en phonegap y se hace nativa y lo que es con php llamo la direccion del url y se muestra dentro del aplicativo.
lo que tu quieres hacer si se puede…
Pingback: Apache Cordova vs phoneGap | Blog de Mario Javier
Hola fuera genial si alguien me comparte el archivo .apk generado porque no tengo pc y tengo que hacer mis aplicaciones en el teléfono.
si quieres verla descarga la: rmakesoftware.WordPress.con
Yo tengo un .apk que me funciona a la perfección pero me muestra una barra horrible en cima y quisiera un apk que no la tenga y aun mejor si hubiera un indicador de spinner (solo se html CSS y javascript) gracias