-- CERRAR --

Instalar Phonegap en Windows para desarrolladores

phoneGap-app-development
Compartir en Facebook

Phonegap es una plataforma que te permitirá crear aplicaciones tanto para IOS como para Android, pero su instalación no es tan básica como creen, pero para ello te diremos los pasos que debes seguir, no solo para la instalación del Phonegap sino también como puedes realizar tu primera aplicación con esta fabulosa herramienta.


Estos son los pasos a seguir para instalar PhoneGap en Windows

  1. Instalar Node
  2. Instalar JDK (JDK V7 for Win7, and JDK V8 for Win8)
  3. Instalar Git 
  4. Instalar Ant 
  5. Guarde las variables de entorno (Environment Variables) ver vídeo al final
    Nueva variable “JAVA_HOME” to <path to Java sdk folder> Ejemplo: C:\Program Files\Java\jdk1.8.0_60
    Nueva variable “ANT_HOME” to <path to ant folder> Ejemplo: C:\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin
    Añadir a la variable de sistema “path” : %JAVA_HOME%\bin;%ANT_HOME%\bin
  6. Instalar el PhoneGap a través de línea de comando:
    npm install -g phonegap

En este momento ya tendrás instalado Phonegap en tu PC si no recibiste ningún tipo de error en tu máquina.


También puedes leer: Agregar Twitter Card y Facebook OG en Wordpress sin plugin

Para instalar el  Android Development

  1. Install Eclipse ADT  (Nota : para win8 32bit/64bit install 32bit ADT)
  2. Setear en las variables de entorno:
    Añadir a la siguiente variable de sistema “path” : ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

Para crear tu primera aplicación con PhoneGap

Son 4 comandos básicos que necesitarás para poder tener un proyecto en PhoneGap y te los mostramos a continuación:


  1. Crear un proyecto en PhoneGap
    Command : phonegap create project_folder app_id app_name
    ejemplo: phonegap create my_first_app My first App
  2. Añadir plataforma Android a tu proyecto
    Comando : phonegap platform add platform_name
    ejemplo : phonegap platform add android
  3. Compilar para Android con los archivos base
    Comando : phonegap build platform_name
    ejemplo : phonegap build android
  4. Emulate the Android App
    Comando : phonegap emulate platform_name
    ejemplo : phonegap emulate android
  5. Eliminar una plataforma
    Comando: phonegap platform remove platform_name
    ejemplo: phonegap platform remove ios

Ojo, aunque puedes añadir la plataforma iOS esta no puede ser compilada en un computador windows.


Agregar un plugin a tu proyecto

Por ejemplo si queremos que nuestra aplicación comparta artículos en redes sociales, ejemplo este plugín, debes copiar la ruta del plugin que suele ser https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git y a través de la línea de comando colocar el siguiente comando:


C:\MiCarpeta\Miproyecto>phonegap plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git


Esto instalarAñadir objeto á el proyecto en la carpeta MiProyecto, el plugin que seleccionaste.


Normalmente los plugins tienen en sus archivos un archivos llamado “Readme”, en ese archivo te indicarán como funciona el plugin.


Ver los plugins instalados

phonegap plugin list


Quitar un plugin instalado

phonegap plugin remove <NOMBRE DEL PLUGIN>


Ver las plataformas instaladas

phonegap platforms list



Video de ayuda para crear variables de entorno

https://www.youtube.com/watch?v=_uqRBHCX3og

Instalar emuladores de android

Existen en el mercado muchos emuladores, yo he usado el BlueStacks que me ha funcionado para poder revisar los apk que me genera el PhoneGap, este emulador es tal cual un teléfono android, incluso para descargar aplicaciones, deberás tener una cuenta registrada como si fuera un teléfono real.


Cómo correr tu App de phonegap en BlueStacks

Al tener instalado el emulador, será muy sencillo instalar tu APK pues con solo darle doble click al APK este se instalará completamente, donde puedes buscar tu APK, entrando


<Dirección de la APP>\platforms\android\build\outputs\apk


Instalar mini servidor para ver tu app

Al entrar a la página de PhoneGap, podrás ver el instalador de un mini servidor web para poder probar tu app descargalo de aquí


Para poder subir tu App a la Google Play

Primero a la hora de generar una aplicación que quieras subir a Google Play, debes generar un Keystore, este se almacenará en la carpeta raíz de tu directorio con el nombre que quieras.


Crear la Keystore

Para crear esta clave debes posicionarte en la carpeta donde tienes instalado Java, y recuerda que tienes que abrir el “Símbolo de sistema” como administrador, porque sino te dará error de Acceso Denegado.


keytool -genkey -v -keystore [NOMBRE DE TU KEYSTORE].keystore -alias [NOMBRE DEL ALIAS] -keyalg RSA -keysize 2048 -validity 10000


Crear la versión Release

Se puede crear con el comando:


phonegap build –realease android


Este creará una versión release de la apk, esta puedes copiarla y colocarle un nombre tipo [NOMBRE DE TU APK]_release.apk


Firmar tu versión release

Primero que nada debes firmar tu versión release, para ello deberás copiar el APK en la carpeta bin de java que normalmente se instala aquí (C:\Program Files\Java\jdk1.8.0_60\bin) y ejecutar el comando que verás a continuación, lo que te dará una versión release firmada. recuerda que para ejecutar el comando debes abrir la línea de comando e ir a la carpeta del java, donde previamente debiste copiar el Key y el APK.


jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [RUTA FÍSICA DEL ARCHIVO][NOMBRE DEL ARCHIVO KEYSTORE] platforms\android\build\outputs\apk\[NOMBRE DE TU APK]_release.apk [NOMBRE DEL ALIAS]

Ejemplo: jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore MiAPPKeyStore.keystore android-release-unsigned.apk MiAppName


Último paso, generar la versión alineada de tu APK

Se debe generar la versión del apk final o alineada como la exige Android, en su Google Play, ese tomando lo deberás ejecutar desde la carpeta de tu proyecto Phonegap a través de la línea de comandos.


[CARPETA DEL SDK DE ANDROID ESTUDIO]zipalign -v 4 platforms\android\build\outputs\apk\[NOMBRE DE TU APK]_release_firmado.apk platforms\android\build\outputs\apk\[NOMBRE DE TU APK]_release_alineado.apk


Ejemplo: C:\Users\[carpeta usuario]\AppData\Local\Android\sdk\build-tools\23.0.1\zipalign -v 4 platforms\android\build\outputs\apk\android-release-firmado.apk platforms\android\build\outputs\apk\miapp_release_firmado_alineado.apk


La carpeta del Android Estudio suele estar aquí: C:\Users\[carpeta usuario]\AppData\Local\Android\sdk\build-tools\23.0.1\


Subir el APP a MAC Store

Primero si estas utilizando Phonegap primero debes seguir los siguientes  pasos:


1) Lo primero debemos instalar OPENSSL que puedo descargar en http://slproweb.com/products/Win32OpenSSL.html


2) Primero el se debe generar el ios_development.key a través de OPENSSL


openssl genrsa -des3 -out ios_development.key 2048


3) Después genero el .csr con el siguiente comando, reemplazando email, nombre de la compañía y el código del país


openssl req -new -key ios_development.key -out ios_development.csr -subj “/emailAddress=MY-EMAIL-ADDRESS, CN=COMPANY-NAME, C=COUNTRY-CODE”


4) Luego genero el .pem


openssl x509 -in ios_development.cer -inform DER -out ios_development.pem -outform PEM


5) Genero el archivo .p12


openssl pkcs12 -export -inkey ios_development.key -in ios_development.pem -out ios_development.p12


NOTA: Si te da el error “unable to write ‘random state'” o “can’t open config file: /usr/local/ssl/openssl.cnf” en el OPENSSL hacer esto en la consola:


Crear la carpeta Random dentro de bin en el directorio de OPENSSL


set RANDFILE=C:\OpenSSL-Win64\bin\Random\.rnd
set OPENSSL_CONF=c:\OpenSSL-Win64\bin\openssl.cfg


Proceso completo aquí


Generar el Provisioning Profile para subir el archivo a Phonegap

Al entrar en Apple.com y siga los siguientes pasos para generar el provisioning profile:


1) Primero hay que agregar un App Id


2) Después debes agregar los devices para ello tendrás que buscar el UDID del equipo, para ello debe agregar el teléfono al iTunes y luego al ver el detalle del teléfono, donde estan las especificaciones del equipo hacer click en número de serie varias veces allí aparecerá el número UDID, para copiar simplemente haga click derecho.


3) Luego debe generar provisioning profile entrando en Provisioning Profiles, development y seguir los pasos correspondientes.


Goncalves Tonny
Visitas:



Déjanos un comentario