Publicar aplicación móvil con Phonegap Build

30. marzo 2014 19:49 by Javier Cantos in HTML5, Mobile, PhoneGap, Programación, Web  //  Tags:   //   Comentarios (0)

A la hora de realizar la publicación de una aplicación móvil, o dominas cada entorno de desarrollo específico de cada plataforma o lo vas a pasar francamente mal, sobretodo si la publicación va a estar destinada a más de una plataforma como Android, iOS, Windows o Blackberry. Quizás una de las dependencias más difíciles de salvar hasta ahora era esta cuestión, pero gracias a nuevos servicios en la nube como Build de Phonegap, resuelve y realiza gran parte del trabajo por nosotros.

Prepaparando nuestra aplicación

Lo primero que tenemos que hacer es preparar los recursos necesarios que permitirán definir los metadatos de nuestra aplicación, para ello existe un estándar de empaquetado promovido por la W3C consistente en un archivo llamado config.xml y que situamos en el raíz de nuestro proyecto. En este archivo podemos definir desde el Nombre de la aplicación hasta los iconos para las diferentes resoluciones de pantallas y plataformas, hasta la pantalla de splash que aparece en el inicio de la aplicación.

Así que os dejo una muestra minimizada de lo que tendréis que incluir en el raiz de vuestro proyecto web, no olvidéis el nombre del fichero config.xml

Datos básicos

<name>Curso HTML5</name>
<description>Esto es la descripción de la aplicación</description>
<author href="http://www.javiercantos.net" email="jcantos@gmail.com">Javier Cantos</author>

Iconos

<!-- Define app icon para cada plataforma. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
<icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
<icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />

Splashs

<!-- Define app splash screen para cada plataforma. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />

 

Ejemplo de estructura de una webapp

Aqui tenéis una plantilla que os puede servir de ayuda a la hora de estructurar y organizar vuestro proyecto webapp, fijaros que el archivo config.xml reside en el raiz del proyecto.

 

Generando las distribuciones con PhoneGap Build

¿Que es PhoneGap Build?, es un servicio en la nube que nos permite generar los paquetes de distribuciones de cada plataforma, listo para la distribución final en cada uno de los markets de cada proveedor. De esta manera construirmos aplicaciones basadas en estándares web, reducimos el tiempo de desarrollo y aprovechamos nuestras habilidades del mundo web para obtener los beneficios del desarrollo multiplataforma.

Creando nuestra primera cuenta

Phonegap dispone de tres planes, el primero gratuito y limitado a una sola aplicación privada y otros dos más de pago que en función de nuestras necesidades podríamos obtar por el que mejor se adapte al proyecto.

 

Añadiendo la primera aplicación

En este punto disponemos de dos opciones, la primera de ellas es indicar un repositorio de código fuente GitHub o subir un archivo en formato ZIP que debe incluir nuestro proyecto web junto con el archivo de configuración config.xml y los recursos necesarios de iconos y splash de pantallas, además claro está de todos los ficheros de nuestra webapp.

Nosotros vamos a optar por realizar un empaquetado en formato zip de todo nuestro proyecto web para luego subirlo a PhoneGap Build.

 

Obteniendo los paquetes listos para su distribución en las tiendas

Aquí es donde aparece la magia y PhoneGap Build realiza todo el trabajo mecánico para obtener los ensamblados de las diferentes plataformas y proveedores, de otra manera tendríamos que compilar desde cada entorno IDE de desarrollo cada una de las versiones para las que estemos interesados distribuir. Pues, una vez que subimos el paquete zip, ya lo tenemos listo para descargar y probarlo en cada uno de nuestros dispositivos móviles.

 

A partir de aquí tan solo tenéis que hacer el download del resultado que os interese, apk para el caso de Android o ipa para el caso de iPhone o xap para el caso de Windows Phone. En próximas publicaciones trataremos a fondo cómo realizar las publicaciones para cada una de las tiendas Play Store o Apple Store.

Agregar comentario

Profesional independiente en el sector Tecnologías de la Información y la Comunicación, especializado en entornos web Microsoft e integración de sistemas con dispositivos móviles

Más sobre mi

Archivo del blog

Paymill Wrapper. NET es una API para una fácil integración de facturación recurrente y pagos online a través del producto  Paymill.com, puedes ver más información sobre el proyecto en Codeplex y GitHub