Guía rápida para comenzar a usar PhoneGap. Incluye pasos para subir la aplicación a la tienda de iOS y de Android.

1. Pasos para usar PhoneGap
1. Descargar NodeJS
https://nodejs.org/en/

2. 2. Descargar los JDK
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-
2133151.html
Seleccionar la versión de su ordenador.

3. 3. Descargar PhoneGap 3.A y/o 3.B
3.A) Descargar Phonegap Desktop http://phonegap.com/blog/2015/03/02/phonegap-
app-desktop-0-1-2/
3.B) Descargar PhoneGap con líneas de comando:
Abriendo el cmd de Windows escribir: npm install -g phonegap
en caso de Mac o Linux: sudo npm install -g phonegap

4. 4. Para poder revisar el funcionamiento de nuestras aplicaciones 4.A y/o 4.B.
4.A) Instalar la extensión Ripple Emulator para el navegador que vayas a utilizar.

5. 4.B) Instalar PhoneGap en tu dispositivo móvil, será más confiable que hacerlo en el
emulador web.
Android
iOS

6. 5. Crear un proyecto:
- PhoneGap Desktop: Abrir la aplicación y crear un proyecto nuevo dando clic en el
botón "+".

7. - PhoneGap con CMD: Abrir el cmd, ubicarse en la carpeta donde se quiera crear el
proyecto y crear el proyecto escribiendo:
phonegap create NombreApp
O tambien:
phonegap create NombreApp com.empresa.nombreapp NombreApp
Todo lo que está después del primer NombreApp es opcional, el segundo NombreApp
se pondrá como el título de tu aplicación cuando la abres NombreApp.

8. Ahora hay que ubicarte con el cmd en la carpeta de tu proyecto creado y para añadir un
sistema operativo hay que escribir:
phonegap platform add android
phonegap platform add ios
Etc.
para compilar escribir:
phonegap compile android
phonegap compile ios
Etc.
Para construir escribir:
phonegap build android
phonegap build ios
etc.
Para correr el emulador escribir:
phonegap emulate android
phonegap emulate ios
etc.
Para correr el servidor (para probar con PhonGap de celular o web) escribir:
phonegap serve

9. Nota: para poder emular en el cmd hay que tener instalados los SDK que requiera tu
aplicación, para eso hay que bajar el SDK Manager (viene hasta abajo de la página
como SDK Tools).
http://developer.android.com/sdk/index.html

10. Abrir el SDK Manager y descargar todas las herramientas (Tools) y extras, en cuanto a
la versión del emulador depende de la que requiera su aplicación. Hay que descargar
solamente “SDK Platform”, el “System Image” que ocupen y los “Google APIs” que
necesiten en cada versión de emulador que deseen utilizar.

11. Si la parte inferior de la aplicación está de color verde (1) significa que el servidor ya
está encendido, y si no solo basta con dar clic en el botón ">" (2) a la derecha del
nombre de la aplicación que quieras visualizar. Ya puedes comenzar a ver los cambios
que hagas en tu aplicación, para eso hay que copiar la dirección (3) que está en esa
parte inferior verde y 5.A y/o 5.B.

12. 5.A) Si usas Ripple Emulator pegarla en una página de Internet (asegúrate de tener
seleccionado "Enable" en la extensión).

13. 5.B) Si prefieres usar tu dispositivo debes abrir la aplicación de PhoneGap y cambiar la
dirección que venga escrita por la que te asignó PhoneGap Desktop.
6. En tu carpeta del proyecto vas a buscar el directorio “www”, es en ese lugar en
donde están los archivos que modificarás para que la aplicación cambie. El archivo
index.html es la vista principal de nuestra aplicación por defecto, puedes hacer los
cambios que quieras con el editor de texto que prefieras. Todos los cambios que
guardes provocarán que la página sea actualizada en tiempo real desde donde
accedas a tu aplicación, eso mientras el servidor de PhoneGap siga encendido.
Algo muy importante para tomar en cuenta antes de empezar tu aplicación es que
PhoneGap no utiliza php, así que no funcionarán los tags “<?php ?>”. Si deseas
acceder a tu código php puedes hacerlo mediante llamadas a archivos externos.
Recuerda también que hay que tomar en cuenta las dimensiones de cada dispositivo,
por lo cual no hay que hacer un diseño responsivo (que se adapte a cada pantalla).

14. Para poder usar plugins hay que tener la carpeta del plugin descompreso y colocarla en
la carpeta de plugins, luego abrir el cmd y situarnos en la carpeta principal de nuestro
proyecto y escribir:
phonegap plugin add nombre-del-plugin
Así se agrega el plugin a todos los dispositivos en los que queramos generar el
proyecto nuestro proyecto. Normalmente los plugins suelen terminar con “-master”, si
no llega a funcionar tu plugin intenta removiendo esa terminación, porque quizá el autor
no lo guardó con su nombre original.
Eres libre de usar HTML5 y CSS3, cualquier archivo PHP que quieras utilizar recuerda
que hay que llamarlo con AJAX o cualquier otro método que conozcas.
Si tu aplicación tiene algún problema para acceder a un sitio puedes agregar lo
siguiente en tu archivo config.xml:
<allow-navigation href=”http://*/*” />
<allow-navigation href=”http://*:*” />
(Lo mismo aplica con https)
A continuación: Pasos para subir la aplicación a las tiendas de iOS y Android.

15. Pasos para subir la aplicación a las tiendas
1. Subir a la tienda de Android
Primero hay que crear la llave de la aplicación, para ello hay que abrir el cmd y escribir:
keytool -genkey -v -keystore C:/NombreApp/NombreLlave.keystore -alias
NombreLlave -keyalg RSA -keysize 2048 -validity 10000
La llave se guardará en el directorio que le asignes luego de llenar un formulario que el
cmd te pedirá, en este caso se encuentra en la carpeta del proyecto, pero no es
necesario que la guardes ahí.
Sigue las instrucciones del cmd y verifica el idioma en que se te presentan, cuando
termines te pedira confirmacion de tus datos, según el idioma en que se te presentaron
las instrucciones responderás con un “si” o un “yes”, si no lo haces bien volverás a
tener que escribir todo. Despues te pedira otra contraseña, preferentemente usa la
misma que usaste al crear la llave dando clic en Enter y tu llave se habrá creado.
Ahora solo hace falta ingresar a Phonegap Build https://build.phonegap.com/ con una
cuenta de adobe, no importa que no sea la de la empresa (ya que aún no se subirá). Te
pedirá que subas el proyecto en .ZIP, para ello vas a tu carpeta principal del proyecto y
copias el archivo “config.xml” y lo pegas en tu carpeta “www”, dentro de “www”
selecciona todos los archivos y carpetas que contenga y comprímelos en .ZIP. Ahora
cuando subas el proyecto compreso te pedirá que ingreses la llave
(NombreLlave.keystore que acabas de crear) y te pedirá que ingreses una
contraseña/clave, esa será la contraseña que le pusiste a tu llave al crearla, solo resta
hacer clic en “Build” y desgargar el archivo .APK que te generará.
Ahora hay que subir el archivo .APK a la tienda, para ello ocupas una cuenta de Google
con la licencia para subir aplicaciones (cuesta alrededor de $25 dólares, usa la cuenta
de la empresa). Prepara tus capturas de pantalla e íconos para terminar de subir tu
aplicación (ahí mismo te dan las medidas y formatos, si tus capturas no coinciden
puedes cambiarlas en un editor de imágenes como Paint o Photoshop) y listo, tu
aplicación estará en la tienda en unas cuantas horas.

16. 2. Subir a la tienda de iOS
Tenemos que crear la llave de la aplicación antes que nada. Hay que tener una cuenta
en la pagina de iOS Developer:
https://developer.apple.com/membercenter/index.action
Debes de tener XCode descargado, puedes descargarlo dando clic en SDKs (1).
Entra a “Certificates, Identifies & Profiles” (2).
En la parte de Devices debe haber al menos uno.
Para agregar el dispositivo debes tenerlo físicamente y conectarlo a iTunes, luego
seleccionar tu dispositivo, después hacer clic en tu número de serie (aunque no
parezca botón) y se mostrará tu UDID que necesitarás para añadir el dispositivo a tu
cuenta de iOS Developer.

17. Ahora hay que conseguir el certificado, para eso hay que hacer una solicitud entrando
al apartado “Certificates>All”. Si ya cuentas con uno, solamente hay que descargarlo.
Debemos crear un Provisioning Profile de nuestra aplicación entrando al apartado con
ese nombre, una vez creado hay que descargar el archivo que nos genera al crear el
perfil.
Una vez que ya tengas los archivos (.mobileprovision y .cer) y tu perfil creados hay que
un archivo .p12, el cual será nuestra llave. Para ello hay que utilizar una Mac, abrir el
archivo .cer con Keychain (“Acceso a Llavero” en español), abrir el menú contextual de
tu certificado y seleccionar “Exportar a archivo .p12”, te pedirá 2 claves, la de la llave
(anótala de preferencia) y la de administrador de la Mac.
Ahora hay que ingresar el archivo .p12 y .cer a Phonegap Build (ya mencionado en el
paso 1) y te descargar el archivo .IPA que te generará. Con ese archivo basta solo con
descargar en Mac la aplicación Application Loader, a la cual te conectarás con la

18. misma cuenta con la que conseguiste todos los archivos de iOS y subir tu .IPA. Si hay
algún error en cuanto al tamaño de tus imágenes Splashscreen e Icon asegúrate de
darles el tamaño correcto y verificar que las dimensiones coincidan en tu archivo
config.xml, de no ser así tendrás que volver a hacer el proceso de crear el .ZIP y subirlo
con los cambios ya hechos y generar de nuevo el archivo .IPA. Si aún así tienes algún
error probablemente sea que no tienes el certificado WORLDWIDE o no lo tienes
actualizado. Puedes bajarlo en:
https://developer.apple.com/support/certificates/expiration/
Ahora que ya tienes tu archivo .IPA en tu cuenta hay que subir un ícono para tu
aplicación en Apple Developer Member Center y las capturas de pantalla con sus
respectivas dimensiones (las cuales te provee ahí mismo la página) y seleccionar la
versión construida que deseas subir a la tienda (puedes tener más de una versión, por
eso hay que seleccionar una), tal vez no aparezca si acabas de subir el archivo .IPA,
dale una media hora para que aparezca.
A diferencia de Android, iOS te revisará el contenido de tu aplicación, que sea relevante
el contenido y que tenga contenido. Si vas a pedir información personal debes explicar
el propósito y el uso que se le darán a los metadatos del usuario en la sección de
“Datos importantes que pueden servir para su revisión”. De preferencia darle al usuario
el uso de su información personal como opción y no como requerimiento para acceder
a las funciones de la aplicación que realmente no requieran de sus datos. El proceso
de revisión puede llegar a tardar alrededor de una semana.
Otra forma de generar tu .IPA y subirlo a tu cuenta de desarrollador es ubicandote en tu
carpeta del proyecto>platforms>ios abrir el proyecto autogenerado de XCode de esa
carpeta, seleccionar en Product un dispositivo genérico y hacer clic en Archive, ahí
seleccionas la versión que quieras subir a tu cuenta y presionas Submit, luego hay que
llenar la información ya mencionada en la cuenta.