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:

EmpresaCostoDesempe帽o
mobiloud.com99 | 199 | 499 /MesPedi una prueba y nunca me llego (Se me hace muy caro)
worona.orgFreeNo disponible por ahora.
WP-AppKitFree / Pro support 300€No funciona con varnish
WordAppFree / Pro | 9.99 /MesFree 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="support@phonegap.com" 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.

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.
Seleccionamos la pesta帽a private y upload a .zip file
Hacemos click en Ready to build
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.
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
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".
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.


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.
Colocamos la descripcion de nuestra app y bajamos
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.
 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
Click en Versiones de la app y Click en "ADMINISTRACION DE VERSION DE PRODUCCION"y despues click en "crear version"

Click en Examinar archivos y seleccionamos el apk con terminacion release que descargamos de phonegap built.
Bajamos y hacemos click en Revisar
Click en Clasificacion de contenido y en continuar
Colocamos nuestro correo y seleccionamos el tipo de referencia por lo regular es la primera.

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

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

Cuando todos los puntos esten en verde podemos ir a "Versiones de la app" y click en revisar.
Y de nuevo click en INICIAR LANZAMIENTO DE VERSION EN PRODUCCION
Ahora nuestra app se muestra como Publicacion pendiente

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

Comentarios

  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.

    ResponderEliminar

Publicar un comentario

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04