Crear una app mobil para wordpress ?

Existen muchas empresas que nos ofrecen apps moviles y plugins para poder poner nuestro blog en una app móvil, los precios llegan a variar desde 5.00USD  hasta 100USD esta es una lista de esas empresas:

Empresa Costo Desempeño
mobiloud.com 99 | 199 | 499 /Mes Pedi una prueba y nunca me llego (Se me hace muy caro)
worona.org Free No disponible por ahora.
WP-AppKit Free / Pro support 300€ No funciona con varnish
WordApp Free / Pro | 9.99 /Mes Free tiene publicidad link de “powered by”, push limitadas y no hay app ios
4.99 Quitan la publicidad
6.99 Quitan la publicidad, Quitan link de “powered by” y te dan app IOS
9.99 Quitan la publicidad, Quitan link de “powered by”,te dan app IOS
y Push ilimitadas

Existen problemas muy claros con contratar app de 3eros.
1.- No te dan el código fuente.
2.- No tienes la certeza de cuanto tiempo te van a ofrecer sus servicios.
3.- No sabes si su código fuente es de fiar.
4.- No sabes si en algún momento van a subir sus precios o van a comenzar a cobrar.

Por estos y muchos otros motivos siempre es mejor crear tu propia app mobil para tu blog, pero diras, uff que complicado es y ademas aprender Android studio y swift. Pues no, la verdad es que es muy facil crear una app mobil para tu blog y la idea es muy simple y es PONER UN INAPPBROWSER CON LA URL DE TU BLOG.

En realidad lo mas difícil es crear toda la infraestructura de tu app pero en este articulo te mostrare como puedes crear una app en phonegap para tu blog.

1.- Instalar los requerimientos.
Instalamos NodeJS.

sudo apt-get install nodejs npm
Creamos un alias de nodejs node.
sudo ln -s /usr/bin/nodejs /usr/bin/node

Instalamos phonegap.
sudo npm install -g phonegap
Creamos el proyecto phonegap.
phonegap create hello2
Nos movemos a la carpeta donde se creo el proyecto.
cd hello2
Agregamos la paltaform (en este caso android).
phonegap platform add android
Opcionalmente arrancamos el servidor phonegap para ver el proyecto en nuestro telefono.
phonegap serve

2.- Colocar la url de nuestro blog en nuestra app mobil.
Abrimos con nuestro IDE de preferencia (En mi caso Netbeans) el proyecto previamente creado y editamos el archivo “path-proyecto/www/index.html” borramos todo el contenido y ponemos este:

<!DOCTYPE html>
<html>
<head>
<title>Demo Todo Cuba</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = window.open('
http://www.dominio-blog.com', '_blank', 'location=no');
}
</script>
</head>
<body>
</body>
</html>

Donde vamos a sustituir http://www.dominio-blog.com por nuestro dominio.
Ademas debemos ir al archivo “path-proyecto/config.xml” y cambiar estas lineas por nuestros datos

<widget id="dominio-blog.com" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>helloworld</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="
[email protected]" href="http://phonegap.com">
PhoneGap Team
</author>

Y al final del documento se recomienda quitar los plugings de audio
    <plugin name="cordova-plugin-battery-status" spec="~1.2.4" />
<plugin name="cordova-plugin-camera" spec="~2.4.1" />
<plugin name="cordova-plugin-media-capture" spec="~1.4.3" />
<plugin name="cordova-plugin-device" spec="~1.1.6" />
<plugin name="cordova-plugin-dialogs" spec="~1.3.3" />
<plugin name="cordova-plugin-file" spec="~4.3.3" />
<plugin name="cordova-plugin-geolocation" spec="~2.4.3" />
<plugin name="cordova-plugin-globalization" spec="~1.0.7" />
<plugin name="cordova-plugin-inappbrowser" spec="~1.7.1" />
<plugin name="cordova-plugin-network-information" spec="~1.3.3" />
<plugin name="cordova-plugin-vibration" spec="~2.1.5" />

Ademas se recomienda cambiar las imagenes que estan en “/path-proyecto/www/res/icon/android” por las de nuestra pagina.

Si queremos ver como se ve nuestra app en un telefono solo debemos seguir estos pasos
a) Buscar la ip de nuestra pc (escribiendo en la terminal ifconfig)

ifconfig

b).- Instalar en el telfono phonegap develop y echarlo a andar.
c).- Escribir la ip de nuestra pc en phonegap mas el puerto 3000 como se muestra en la imagen.

Selecci%25C3%25B3n 146
ya que vimos como se muestra nuestro blog en una app procedemos a crear una instalador para google play

3.- Empaquetar nuestra app para google play.
Hay que subir nuestra app a https://build.phonegap.com  para lo cual existen 2 formas.

  •  Creando un zip de nuestra aplicacion
  •  Subiendo nuestra app a githhub

Yo recomiendo subir nuestro código a github de tal suerte que cada vez que queramos hacer una actualización solo debemos hacer push y reconstruir la app de phonegap builder pero con fines prácticos en este caso vamos a crear un zip para subirlos a phonegap builder.

Entramos a https://build.phonegap.com/apps#  y damos click en new app.

Selecci%25C3%25B3n 147

Seleccionamos la pestaña private y upload a .zip file

Selecci%25C3%25B3n 148

Hacemos click en Ready to build

Selecci%25C3%25B3n 149

En este momento ya podemos bajar un apk e instalarlo en nuestro telefono pero aun faltan algunos pasos. Debemos hacer click en el icono de android para poder descargar un archivo demotodocuba_com-debug.apk el cual colocaremos en una carpeta.

Selecci%25C3%25B3n 150

Abrimos una terminal y nos movemos a la carpeta donde descargamos nuestro .apk una vez ahi debemos crear un key asi:

keytool -genkey -v -keystore tunombre.keystore -alias tunombre -keyalg RSA -keysize 2048 -validity 10000

Este comando te pedira 2 contraseñas debes gurdarlas que despues las ocuparemos.

Hacemos click en el nombre de la app despues click en add key, colocamos el titulo y el alias y subimos la llave llave que creamos en el paso anterior y click en submit

Selecci%25C3%25B3n 154

Debemos ir a este link y desbloquer el key haciendo click en el candado y colocando la contraseña que le pusimos al crear el key. y al final precionamos “Submit key”.

Selecci%25C3%25B3n 156

Regresamos a la url de las nustras apps, hacemos click en el nombre de nuestra app, click en rebuilt esperamos y damos click en “apk” Se descargara un pak pero diferencia del anterior este dira release y no debug.

Selecci%25C3%25B3n 157


4.- subir nuestra app a google play
Vamos a este link y damos click en Crear aplicación, se nos mostrara una ventana para poner el nombre de nuestra app.

Selecci%25C3%25B3n 158

Colocamos la descripcion de nuestra app y bajamos

Selecci%25C3%25B3n 159

Subimos imagenes de como mira nuestra aplicacion, y 2 imagenes una de 512 x 512 y otra de 1024 x 500 (las demas imagenes son opcionales)  y seguimos bajando.

Selecci%25C3%25B3n 160

 Seleccionamos que tipo de app y categoria es, colocamos el sitio web y una dirección de mail (telefono es opcional) y click en guardar

Selecci%25C3%25B3n 161

Click en Versiones de la app y Click en “ADMINISTRACION DE VERSION DE PRODUCCION”y despues click en “crear version”

Selecci%25C3%25B3n 162

Click en Examinar archivos y seleccionamos el apk con terminacion release que descargamos de phonegap built.

Selecci%25C3%25B3n 163

Bajamos y hacemos click en Revisar

Selecci%25C3%25B3n 164

Click en Clasificacion de contenido y en continuar

Selecci%25C3%25B3n 165

Colocamos nuestro correo y seleccionamos el tipo de referencia por lo regular es la primera.

Selecci%25C3%25B3n 166

Rellenamos el cuestionario (de preferencia todo en NO) y click en guardar.

Selecci%25C3%25B3n 167

Click en Precios y distribucion, seleccionar como gratis seleccionar todos los paises, llenar el cuestionario (Seleccionar por lo menos 1 pais) y click en guardar

Selecci%25C3%25B3n 169

Cuando todos los puntos esten en verde podemos ir a “Versiones de la app” y click en revisar.

Selecci%25C3%25B3n 172

Y de nuevo click en INICIAR LANZAMIENTO DE VERSION EN PRODUCCION

Selecci%25C3%25B3n 173

Ahora nuestra app se muestra como Publicacion pendiente

Selecci%25C3%25B3n 175

Ahora solo resta esperar que nuestra app sea aprovada por google (este proceso tarda entre 12 y 24 horas)

3 respuestas a “Crear una app mobil para wordpress ?”

  1. Hola buenas tardes disculpe estoy empezando con esto de la apps y mi jefe me pidió que investigara solo las posibles formas de hacer que el sitio https://securitygo.mx/ sea una aplicación de venta y me parece tu forma muy sencilla pero quería ver las posibilidades y las desventajas de utilizar por ejemplo PhoneGap y las desventajas.
    Gracias de Antemano Saludos desde Guadalajara, Jalisco.

  2. Fernando Noriega Weninger dice:

    Hola, tendrás mas tutoriales del phonegab,? estoy tratando de hacer un login antes de ingresar a la web/app wprdpress, tendras una odea de como se hace. Gracias.

  3. Jaimen Urbina dice:

    Hola Eugenio, ya habia publicado en tu video de youtube hace unos meses intente seguir el tutorial pero no me funciono por que tenia un telefono muy viejo, ahora tengo un telefono mas actual, pero mi problema es que siguiendo los comando no he podido instalar phonegap en mi ubuntu 18.04 aparecen un monton de errores cito:

    npm WARN deprecated [email protected].2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
    npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated [email protected]: this library is no longer supported
    npm ERR! Linux 5.4.0-42-generic
    npm ERR! argv “/usr/bin/node” “/usr/bin/npm” “install” “-g” “phonegap”
    npm ERR! node v8.10.0
    npm ERR! npm v3.5.2
    npm ERR! code EMISSINGARG

    npm ERR! typeerror Error: Missing required argument #1
    npm ERR! typeerror at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
    npm ERR! typeerror at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
    npm ERR! typeerror at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
    npm ERR! typeerror at /usr/share/npm/lib/install/deps.js:457:7
    npm ERR! typeerror at /usr/share/npm/node_modules/iferr/index.js:13:50
    npm ERR! typeerror at /usr/share/npm/lib/fetch-package-metadata.js:37:12
    npm ERR! typeerror at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
    npm ERR! typeerror at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
    npm ERR! typeerror at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
    npm ERR! typeerror at /usr/share/npm/node_modules/iferr/index.js:13:50
    npm ERR! typeerror This is an error with npm itself. Please report this error at:
    npm ERR! typeerror
    npm ERR! Linux 5.4.0-42-generic
    npm ERR! argv “/usr/bin/node” “/usr/bin/npm” “install” “-g” “phonegap”
    npm ERR! node v8.10.0
    npm ERR! npm v3.5.2
    npm ERR! code EMISSINGARG

    npm ERR! typeerror Error: Missing required argument #1
    npm ERR! typeerror at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
    npm ERR! typeerror at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
    npm ERR! typeerror at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
    npm ERR! typeerror at /usr/share/npm/lib/install/deps.js:457:7
    npm ERR! typeerror at /usr/share/npm/node_modules/iferr/index.js:13:50
    npm ERR! typeerror at /usr/share/npm/lib/fetch-package-metadata.js:37:12
    npm ERR! typeerror at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
    npm ERR! typeerror at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
    npm ERR! typeerror at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
    npm ERR! typeerror at /usr/share/npm/node_modules/iferr/index.js:13:50
    npm ERR! typeerror This is an error with npm itself. Please report this error at:
    npm ERR! typeerror

    npm ERR! Please include the following file with any support request:
    npm ERR! /var/www/npm-debug.log

    Que me recomiendas gacer?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *