Crear app de tu wordpress de manera nativa

Crear app de tu wordpress de manera nativa

Pasos para crear tu app de tu wordpress

Comenzamos, la web de la que creé la app de android e ios es un portal de anuncios clasificados www.aquituanuncio.es y que tienes disponible en la google play en este enlace.

Vaya por delante que yo no soy desarrollador de aplicaciónes, no se programación de java (android), ni de swift (ios), por lo que seguramente haya alguna forma mejor de hacerlo, aunque este artículo te puede valer de orientación y de los pasos a seguir para poder hacer que tu WordPress se pueda ver convertida en una app android e ios.

Pues comenzamos con android, me resultó mucho más sencillo que ios, para empezar lo primero que tienes que hacer es descargar android studio (lo puedes descargar aquí), una vez descargado debes configurar android studio, aquí en este enlace puedes seguir los pasos y configurar.

Una vez configurado nuestro android studio creamos un proyecto nuevo, en este vamos a crear un webview que será donde se muestre nuestra página web de wordpress, me imagino que te pasará como a mí y no sabes crear un webview, por lo que puedes googlear y enseguida encontrarás muchos tutoriales que siguiendo los pasos podrás crear de manera muy rápida y sencilla.

Luego creado un webview vendrá la parte en la que tendrás que ver si tu web se ve bien en tu aplicación android, en mi caso por ejemplo, tuve un problema con un plugin que me toco sacrificar para que la app funcionará lo más parecido a la web. Este plugin es Autoptimize, se trata de un plugin que hace que tus archivos css, js se compriman y carguen de manera que la web vaya lo más rapida posible, pues lo que me ocurría es que por culpa del plugin cuando los usuarios se logueaban mediante el popup de login, los mandaba a una página en blanco, supongo porque los archivos js los cargaba posteriormente, el caso es que fue quitarlo y todo funcionó correctamente.

Otros de los contratiempos que me encontré y que también me tocó sacrificar fue el login de google, una de las cosas que se me ocurrió fue ocultar el botón de google cuando se accederiera de la aplicación, esto no resultaba complicado, existe una manera de ocultar elementos de tu web, desde tu webview, pero el problema que tenía es que al cargar el login desde un popup, cuando se cargaba la página desde la aplicación ese botón aun no existia por lo que no habia nada que ocultar y no funcionaba. El motivo es que google le ha vetado el permiso de logueo a los webview por problemas de seguridad, por lo que solo pude dejar, el logueo de usuario y contraseña, facebook y twitter. Por lo demás si que conseguí solucionarlo, por ejemplo, otro problema que me encontré fue que no me geolocalizaba cuando entraba en el mapa de google, pues con esta linea simple linea de código y algún permiso lo pude solucionar:

webView.getSettings().setJavaScriptEnabled(true);

Por lo demás la aplicación funcionaba perfectamente, otro aspecto era que en mi aplicación para publicar anuncios deben subir imagenes, tuve que dar los permisos pertinentes para que el usuario pudiera acceder a su galeria del teléfono y así poder subir las imagenes que deseaba. Los permisos de mi app necesarios eran, por supuesto, permiso a internet, permiso a localización y permiso a la galería de imagenes. Estos dos últimos permisos son los que te solicita la app cuando la instalas.

android.permission.INTERNET
android.permission.ACCESS_FINE_LOCATION
android.permission.READ_EXTERNAL_STORAGE

Una vez que la aplicación funcionaba correctamente, le puse algunas funcionalidades extras, como por ejemplo, me gustan que las aplicaciones se puedan cerrar, por lo que añadí una funcionalidad al boton de atrás, este tenia dos funciones, una de ellas retroceder a la página anterior con un:

webView.goBack();
Pero para que se cerrará la aplicación añadí que cuando el usuario le diera atrás le mostrará un pequeño alert en el que le muestra que para salir de app debe presionar otra vez antes de 5 segundos, lo que hace que si le das dos veces seguidas a la app, esta se cierre.

Más cosas, una muy importante se trata de que una aplicación webview vive de que el teléfono tenga conexión a internet, porque de lo contrario cuando abrás la app si el terminal no tiene internet se verá un página en blanco, y eso no queda muy bien. Por lo que lo solucioné, que nada más abrir la app, la primera comprobación era ver si el teléfono tenia conexión, si es así continuaba y le mostraba la app al usuario, de lo contrario le mostraba un html que habia creado expresamente para mostrar que la aplicación solo funcionaba si tenia conexión a internet. Este archivo html lo tienes que crear y meterlo en la carpeta de tu app, en main/assets.

webView.loadUrl(«file:///android_asset/myfile.html»);

Otra de las funcionalidades que le añadí fue un botón flotante en que aparece en toda la navegación de la app, un boton muy importante que el que te lleva a publicar los anuncios, una especie de atajo para la navegación de los usuarios.

urlAdd=»https://www.aquituanuncio.es/dashboard/?ua=newitem»;

Y ya con todo esto, una vez que todo funcionaba bien, pude crear mi apk para subirla a google play, por lo que ya tenía mi wordpress convertido en app para android.

Ahora llegaba lo gordo, y era como crear una app ios con un sistema operativo windows, sin tener un mac, tienes que saber que si o si, vas a necesitar un mac o de algún desarrollador de apple que tenga un mac para que posteriormente te pueda subir la aplicación. En mi caso, actualmente no la tengo aún subida, pero más tarde o más temprano la tendré. También he googleado mucho en este aspecto y posiblemente apple la rechace, puesto que este tipo de aplicaciones no las suelen aceptar, y me refiero al tratarse de un webview. A Apple no le gusta que una aplicación que sin conexión a internet se quede en blanco. Pero bueno, ya os contaré como queda al final….. seguimos..

Para poder crear la aplicación me toco crear una maquina virtual con un ios (os dejo este enlace que es muy bueno y me fue de maravilla para crear mi máquina virtual con ios), posteriormente instalar el programa necesario para realizar la app es Xcode, una vez instalado el proceso es igual que como hice en android studio, debes crear un webview, añadir las funcionalidades que desees, y para ello os dejo el video que seguí para crearlo en Xcode.

Por lo demás es seguir los pasos necesarios para terminar de crear tu aplicación en ios y luego contactar con un desarrollador de Apple para que os la pueda subir (si es que no teneis mac). Tambien decir que cuando subes una aplicación a google play tienes que pagar una cuenta de desarollador de creo unos 40€ aproximadamente, pero por el contrario en Apple, tiene que pagar todos los años unos $100, así que es por uno de los motivos que necesitarás de alguien, porque pagar la cuenta de desarrollador para que luego te la tiren para atrás…

Y hasta aquí mi experiencia para convertir mi web wordpress en aplicación, estoy seguro de que habra más formas de hacerlo, e incluso más faciles, pero bueno, soy autodidacta y me gustan este tipo de retos….. así que anímate….

Publicado en Apps, Utilidades, WordPress
Escribe un comentario