Todas las entradas de: jcesarmobile

Compilar aplicación phonegap en la nube con Ionic AppFlow

Hace tiempo que Apple anunció que a partir de abril, las apps no podrían usar UIWebView, si usas Cordova CLI o Phonegap CLI en local no tendrás ningún problema como ya expliqué en http://este artículo.

Pero que pasa si usas Phonegap build? pues Phonegap build aún no se ha actualizado para poder usar cordova-ios 5.1.1, entonces que podemos hacer? Pues o compilamos en local o buscamos una alternativa, por ejemplo Ionic AppFlow.

Lo primero sería instalar el CLI de ionic y logearse con la cuenta

npm install -g @ionic/cli
ionic login

E introducimos nuestro usuario y contraseña.

Luego crearíamos una aplicación cordova/Phonegap (si ya tienes una te puedes saltar el paso)

cordova create cordovaAppflow es.phonegap.appflow cordovaAppflow
cd cordovaAppflow

AppFlow en teoría sólo acepta apps Ionic, pero con este comando puedes convertir tu proyecto cordova en proyecto Ionic sin necesidad de usar el framework
ionic init

Introducimos un nombre de proyecto, cordovaAppflow otra vez, y en project type seleccionamos custom. Luego le decimos al CLI que la app es Cordova.
ionic integrations enable cordova

Nos preguntará si queremos sobreescribir el config.xml, le decimos que no. Y con eso ya estaría.

Ahora vamos a subir la aplicación a AppFlow con este comando
ionic link

Seleccionamos «Create a new app on Ionic Appflow «, nos vuelve a pedir un nombre, así que otra vez cordovaAppflow. Ahora te preguntará donde alojar el código, en GitHub on en AppFlow, si ya lo tenías en GitHub selecciona esa opción, si no mejor alojarlo en AppFlow directamente. Y finalmente hacemos un commit del código.
git add .
git commit -a -m "Initial commit"
git push ionic master

Y ya estaría nuestra app subida.
Ahora vamos al dashboard de AppFlow y pinchamos en Apps, allí debería estar la app que acabamos de subir.

Pinchamos en ella y no saldrán nuevas pestañas. Vamos a la pestaña «Build -> Certificates» y ahí subimos nuestro provisioning profile y certificado de desarrollo (o producción). Si no tienes, en este tutorial expliqué como hacerlo desde windows.
Ahí pinchamos en «Add your first Profile», ponemos un nombre y el tipo, en mi caso «Development». Y en la siguiente pantalla subimos el certificado, introducimos su contraseña y subimos también el provisioning profile. Finalmente hacemos click en «Save» y ya estaría configurado.
Ahora vamos a «Builds» y pinchamos en «Create your first build», seleccionamos un commit, en este caso sólo hay uno. Por último en la siguiente pantalla seleccionamos la versión de Xcode que usaremos para compilar, el certificado y hacemos click en «Build».
Tardará un rato, así que esperamos hasta que ponga «Job succeeded«, y cuando lo veamos volvemos a pinchar en «Builds» y ahí nos saldrá el historial de builds y a la derecha un icono para descargar el .ipa.
Lo podemos instalar desde Xcode o subirlo por ejemplo a diawi.

Si hacemos el build como Distribución, ahora AppFlow tiene una nueva funcionalidad que permite subirlo directamente a la App Store sin necesidad de descargar el .ipa y sin tener que subirlo con Application Loader.

Así que si eres usuario de Phonegap build y llega el día en que Apple empiece a rechazar tus aplicaciones porque no lo actualicen a Xcode 11 y a cordova-ios 5.11, ya tienes una alternativa fácil de usar y con más funcionalidades.

Como solucionar el ITMS-90809: Deprecated API Usage

Si has desarrollado una aplicación Cordova y al subirla a la App Store has recibido el aviso «ITMS-90809: Deprecated API Usage» sabrás que en breve Apple no aceptará aplicaciones que usen la UIWebView.
¿Cómo podemos solucionarlo?

Pues es muy sencillo.
Debes seguir estos pasos:

  1. Actualiza a cordova-ios 5.1.1.
    • cordova platform rm ios
    • cordova platform add ios@latest
  2. Instala un plugin de WKWebView, por ejemplo el cordova-plugin-ionic-webview o cordova-plugin-wkwebview-engine
    • cordova plugin add cordova-plugin-ionic-webview (nota, sólo funciona en iOS 11 o superior)
  3. Añade esta preferencia al config.xml
    • <preference name="WKWebViewOnly" value="true" />

Y ya estaría, ahora simplemente creamos el .ipa como haríamos normalmente y lo subimos a App Store Connect y esta vez ya no nos mandarían el aviso.

Si después de seguir estos pasos todavía recibiésemos el aviso, es debido a que algún plugin de los que usamos no está actualizado.
Por ejemplo si tienes el plugin cordova-plugin-inappbrowser aseguraos de tener la versión 3.2.0.
Otros plugins que pueden tener referencias a la UIWebView y que harían saltar la alarma son los de google analytics, facebook, firebase, linkedin, hay muchos, en estos casos tendréis que buscar la última versión de cada uno y en caso de que no esté arreglado tendréis que eliminar el plugin o actualizarlo vosotros mismos para que use un SDK más reciente que no use la UIWebView.

Instalar NVM

¿Qué es NVM?

NVM es Node Version Manager

¿Pero para que vale?

NVM es un gestor de versiones de Node.js. Te permite tener varias versiones de Node.js y npm independientes instaladas en tu ordenador y cambiar fácilmente entre ellas.

¿Por qué debería usarlo?

Imaginate que usas Apache Cordova CLI o Phonegap CLI que funciona perféctamente con Node.js 4.x.x, pero ves que sale Node.js 6 y lo quieres probar o algún otro framework que usas lo necesita para funcionar.
Lo instalas y ves que en el Cordova CLI te empiezan a fallar ciertas cosas. Te toca volver a Node.js 4 y sin poder usar tu otro framework que necesita Node.js 6 hasta que Cordova CLI sea compatible con Node.js 6.
Además usando NVM no tendrás problemas de permisos al instalar paquetes como Cordova CLI (se acabó tener que usar sudo para instalar paquetes)

Como NO instalarlo

Cuando fuí a instalar NVM busqué en Google «NVM» y acabé en la página de npm

https://www.npmjs.com/package/nvm

Cuyas instrucciones para instalarlo decían

npm install -g nvm

 

Pero al instalarlo recibí este error:

npm WARN deprecated nvm@0.0.3: This is NOT the correct nvm. Visit http://nvm.sh and use the curl command to install it.
/usr/local/bin/nvm -> /usr/local/lib/node_modules/nvm/bin/nvm
nvm@0.0.3 /usr/local/lib/node_modules/nvm
└── mkdirp@0.3.5

Como SI instalarlo:

Como el propio mensaje de error nos indicó, tenemos que ir a

http://nvm.sh

que redirige a

https://github.com/creationix/nvm

NVM se puede instalar en Mac OSX o en distribuciónes de Linux usando cURL o Wget:

cURL:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash



Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash


Una vez terminado de instalar tendremos que cerrar la terminal y volver a abrir una nueva

Y listo, ya podremos instalar la versión de node que queramos, por ejemplo la 4.4.4 (última LTS) y la 6.1.0 (última actual)

nvm install 4.4.4
nvm install 6.1.0


Si las instalamos en ese orden y miramos la versión instalada

node -v

nos dirá que tenemos la 6.1.0

Pero si queremos usar la 4.4.4 lo único que tendremos que hacer es

nvm use 4.4.4

 

Para windows hay 2 herramientas similares

nodist
nvm-windows

Actualiza tu aplicación cordova Android a la versión 4.1.1 o superior

He recibido un aviso de google que dice que a partir del 9 de mayo no se podrán publicar en google play actualizaciones o nuevas apps que usen una versión de cordova inferior a la 4.1.1 por contener vulnerabilidades que fueron arregladas en la versión 4.1.1

Podéis actualizar fácilmente desde el CLI con el siguiente comando desde la carpeta de vuestro proyecto:

cordova platform update android@4.1.1

O si queréis tener soporte para Android Marsmallow, actualizar a la última versión

cordova platform update android

 

Si usáis phonegap build seleccionar el cli-5.2.0 o superior, ya que usa la versión 4.1.1 de cordova android

Más información

Notificaciones Push Phonegap. Parte 2. Instalación y uso del phonegap-plugin-push en la aplicación.

Hace tiempo escribí un tutorial sobre como recibir las notificaciones push en una aplicación phonegap usando el PushPlugin. El PushPlugin fue abandonado y hace tiempo que no recibe actualizaciones, por lo que el tutorial también se ha quedado desactualizado.

Por suerte han creado un plugin el nuevo phonegap-plugin-push con soporte para Android, iOS y Windows Universal y es el que usaremos en el tutorial.

Antes de empezar vamos a abrir el android SDK manager e instalar o actualizar lo siguiente:

  • Android Support Repository versión 25 o superior
  • Android Support Library versión 23 o superior
  • Google Play Services version 29 o superior
  • Google Repository version 24 o superior

AndroidSDK Seguir leyendo Notificaciones Push Phonegap. Parte 2. Instalación y uso del phonegap-plugin-push en la aplicación.

Notificaciones Push iOS. Parte 1. Creación del Identificador y Certificados en el portal de desarrollador.

En esta primera parte vamos a explicar como crear el Identificador de aplicación, si aún no lo hemos hecho, y la creación de los Certificados Push que se usarán en el servidor para enviar las notificaciones a través de los APNs de Apple.

Lo primero de todo es acceder al portal de desarrollador

PortalDesarrollador

Seguir leyendo Notificaciones Push iOS. Parte 1. Creación del Identificador y Certificados en el portal de desarrollador.

Firmar APK android desde el CLI para subirlo a google play

Antes de comenzar, para realizar el tutorial se ha usado:

  • Mac OSX 10.10.5
  • Cordova CLI 5.3.3
  • Cordova android 4.1.1
  • node 4.1.1
  • npm 2.14.4

Debería funcionar en otras versiones posteriores, si no lo hace no dudes en comentar. Si usas versiones anteriores, es recomendable actualizar para evitar posibles problemas.

PASO 1: GENERAR KEYSTORE

Seguir leyendo Firmar APK android desde el CLI para subirlo a google play

Captura de imagen con la cámara y subida a un servidor (PHP)

Hoy vamos a preparar un pequeño tutorial sobre como hacer una foto con la cámara del móvil y subirla a un servidor, en este caso voy a usar un servidor PHP y aportaré el código, pero podríais hacerlo en cualquier otro si tenéis experiencia.

Empezamos creando el proyecto:

create subirImagen es.phonegap.subirimagen subirImagen

vamos al directorio del proyecto, añadimos los plugins de cámara y file transfer y las plataformas ios y android (yo voy a trabajar con iOS, pero el código es igual para ambas)

cd subirImagen
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file-transfer
cordova platform add ios android

Seguir leyendo Captura de imagen con la cámara y subida a un servidor (PHP)

Iniciandose en la depuración de aplicaciones cordova iOS con el Inspector web de Safari

Siempre que me pongo a intentar ayudar a gente que tiene problemas con cordova en stackoverflow o en foros como phonegapspain veo que la gente se limita a decir que su código no funciona y muchas veces no saben por que ni que pueden hacer para intentar encontrar el error. Cuando digo que intenten depurar no saben muy bien como hacerlo, por lo que me he decidido a escribir esta entrada.

El tutorial es solo para iniciarse, no me voy a meter en profundidad en como depurar aplicacaciones, si no mostrar que esa opción está ahí y como usarla.

Vamos a empezar creando el proyecto y añadiendo la plataforma iOS.

cordova create cordovaDebug es.phonegap.cordovadebug cordovaDebug
cd cordovaDebug
cordova platform add ios

Seguir leyendo Iniciandose en la depuración de aplicaciones cordova iOS con el Inspector web de Safari

¿Como crear certificado iOS para phonegap build desde windows?

Es una pregunta muy común en los foros de phonegap, y la respuesta mas común es «no se puede, necesitas un mac», yo mismo la he dado muchas veces. Pero… parece que tanto yo como el resto de personas que respondieron eso estabamos equivocados.

A continuación voy a explicar como generar tu certificado para poder compilar las aplicaciones iOS sin tener que usar un mac, tan solo necesitaremos OpenSSL.

Prerequisitos:
Es neceario tener instalado Microsoft Visual C++ Redistributables, si no lo tienes o no estás seguro, el instalador de OpenSSL te lo hará saber.

Seguir leyendo ¿Como crear certificado iOS para phonegap build desde windows?