Comenzar con PhoneGap y subir a Googleplay y AppStore

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

Transcript of Comenzar con PhoneGap y subir a Googleplay y AppStore

Page 1: Comenzar con PhoneGap y subir a Googleplay y AppStore

Pasos para usar PhoneGap

1. Descargar NodeJShttps://nodejs.org/en/

Page 2: Comenzar con PhoneGap y subir a Googleplay y AppStore

2. Descargar los JDKhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Seleccionar la versión de su ordenador.

Page 3: Comenzar con PhoneGap y subir a Googleplay y AppStore

3. Descargar PhoneGap 3.A y/o 3.B3.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 phonegapen caso de Mac o Linux: sudo npm install -g phonegap

Page 4: Comenzar con PhoneGap y subir a Googleplay y AppStore

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.

Page 5: Comenzar con PhoneGap y subir a Googleplay y AppStore

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

iOS

Page 6: Comenzar con PhoneGap y subir a Googleplay y AppStore

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

Page 7: Comenzar con PhoneGap y subir a Googleplay y AppStore

- PhoneGap con CMD: Abrir el cmd, ubicarse en la carpeta donde se quiera crear el proyecto y crear el proyecto escribiendo:phonegap create NombreAppO 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.

Page 8: Comenzar con PhoneGap y subir a Googleplay y AppStore

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 androidphonegap platform add iosEtc.

para compilar escribir:phonegap compile androidphonegap compile iosEtc.

Para construir escribir:phonegap build androidphonegap build iosetc.

Para correr el emulador escribir:phonegap emulate androidphonegap emulate iosetc.

Para correr el servidor (para probar con PhonGap de celular o web) escribir:phonegap serve

Page 9: Comenzar con PhoneGap y subir a Googleplay y AppStore

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

Page 10: Comenzar con PhoneGap y subir a Googleplay y AppStore

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.

Page 11: Comenzar con PhoneGap y subir a Googleplay y AppStore

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.

Page 12: Comenzar con PhoneGap y subir a Googleplay y AppStore

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

Page 13: Comenzar con PhoneGap y subir a Googleplay y AppStore

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).

Page 14: Comenzar con PhoneGap y subir a Googleplay y AppStore

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-pluginAsí 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.

Page 15: Comenzar con PhoneGap y subir a Googleplay y AppStore

Pasos para subir la aplicación a las tiendas

1. Subir a la tienda de AndroidPrimero 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.

Page 16: Comenzar con PhoneGap y subir a Googleplay y AppStore

2. Subir a la tienda de iOSTenemos 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.

Page 17: Comenzar con PhoneGap y subir a Googleplay y AppStore

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

Page 18: Comenzar con PhoneGap y subir a Googleplay y AppStore

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.