Antes de nada, quiero dejar clara una cosa, y es que en este post no vas a ver nada que hayas podido ver en otros posts donde te enseñan cómo crear una aplicación Android fácil para tu blog o web WordPress.
Yo te voy a enseñar a crear una aplicación móvil Android utilizando WordPress y sin saber Java, pero eso no quiere decir que sea para tu blog. Puedes dejar volar tu imaginación y, con un simple iframe, crear aplicaciones web adaptadas a Android de cualquier cosa, depende de lo hábil que seas con WordPress.
Con mucha imaginación, conocimientos y ganas se puede jugar con las cookies, con el cache de la aplicación y con logins en WP para conseguir cosas muy interesantes.
Al fin y al cabo, debemos tener en cuenta que la mayoría de aplicaciones Android de Google Play están basadas, en mayor o menor medida, en servicios web y utilizan funciones de HTML5 para almacenamiento local.
Antes de nada, quiero dejar claras las intenciones. Voy a usar los siguientes ingredientes:
- WordPress (evidentemente)
- Elementor Pro
- Android App Builder
- Hello Elementor
Con mucha imaginación y con los ingredientes que acabamos de mencionar, puedes crear una aplicación Android informativa que dependa de un servicio web o incluso una aplicación con funcionalidades, siempre y cuando adaptemos la interfaz a una app móvil.
En este post voy a enseñarte a hacer una aplicación Android informativa con un buscador, que simplemente muestre información de un blog WordPress, sin complicaciones. Simplemente tienes que ser hábil con Elementor Pro.
Las posibilidades de la aplicación que vamos a utilizar (llamada Android App Builder) van más allá, pero en este caso no las voy a mencionar, ya que quiero que el proceso sea simple y fácil.
No me voy a enrollar más. Vamos con el tema.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Creando el sitio web que servirá como aplicación
Lo primero es crear el sitio web que servirá como aplicación móvil. Debemos tener en cuenta que esta puede ser ejecutada tanto en smartphones como en tabletas, por lo que tenemos que prestar atención al editor de Elementor Pro en ambos modos.
Vamos a empezar por el principio. Antes de nada, debes tener un WordPress instalado y funcionando, con Elementor y Elementor Pro instalados sobre el tema Hello Elementor. También debes tener realizada la configuración básica de WordPress.
No te voy a explicar esta parte, ya que no es el objetivo de este tutorial. Si vas a seguirlo y nunca has trabajado con Elementor, tal vez deberías familiarizarte en primer lugar con la herramienta.
Si quieres familiarizarte con el Theme Builder de Elementor Pro, este post te va a interesar: https://alvarofontela.com/theme-builder-elementor-pro/
Yo, en este caso, voy a empezar por crear una página de inicio donde irá el buscador y se listarán las entradas del blog. El contenido ya lo tengo cargado, evidentemente.
Al maquetar con Elementor Pro, para ser más precisos al diseñar un layout para móviles, es mejor trabajar con el modo móvil:
Y realizar también algunos ajustes en el modo tablet:
Una vez dentro, tenemos distintas formas de trabajar. Dependiendo del tipo de “app” que vayamos a crear, podemos modularizar más o menos con Elementor (para saber a qué me refiero, es necesario saber trabajar con Elementor).
Ahora vamos a empezar a darle forma. Vamos a empezar con el menú y la cabecera de la aplicación.
Cargar siempre el menú móvil “Hamburger” en Elementor
En la cabecera yo he configurado un menú que previamente he creado desde la sección “Menu” de WordPress y he añadido simplemente un enlace a la home, uno a Google Play y otro enlace al blog “padre” de la aplicación.
Aparte del menú, he configurado otra columna con el logo del proyecto. ¿A que aparentemente puede pasar por aplicación móvil?
Es más, para que se vea siempre el menú tipo móvil, aunque carguemos la web en ordenador, vamos al editor de Elementor y pulsamos aquí:
Esto nos abre el botón de “Ajustes del sitio” sobre el que debemos pulsar:
Y ahora vamos a pulsar sobre “Disposición”:
Ahora debemos pulsar sobre “Puntos de ruptura” para desplegar las opciones de salto a menú móvil:
Y en la pantalla anterior, simplemente ponemos una cifra alta en “Tableta”. Por ejemplo, 1439 (es el máximo) en lugar de los 1025 por defecto:
Aunque es un método muy “arcaico”, es eficiente para trampear y que siempre nos cargue el menú móvil en nuestro sitio/app con Elementor.
Esto se usa para que no se vea el menú real, aunque el usuario cargue la aplicación en una tablet en modo horizontal donde el ancho en píxeles es mayor.
Maquetando el contenido de la página principal
Como ya he dicho, yo los posts ya los tengo cargados y además lo voy a hacer manualmente, sin sacar los datos por API o por scraping, ya que quiero cuidar la apariencia y tampoco hay tanto contenido como para no poder hacerlo manualmente.
Podría meter un plugin de AJAX Search, es una idea, pero en mi caso voy a usar el elemento Search predeterminado de Elementor.
Con esto tendremos el buscador listo, pero ahora vamos a añadir algo de contenido para la gente que acceda a la aplicación.
En mi caso, voy a añadir los últimos 6 contenidos publicados en la aplicación, con una foto y el título:
Estos contenidos son totalmente personalizables. Yo he utilizado el módulo “Posts” de Elementor, pero podemos utilizar lo que queramos.
Con esto, la página principal ya está creada y preparada. Ahora vamos con el layout del contenido.
Maquetando el contenido para móvil
Esto es simple: debemos utilizar un layout para los posts totalmente optimizado para móvil y no incluir ningún elemento innecesario.
Yo simplemente voy a añadir el título y el contenido, es todo lo que necesito para que se cargue en la aplicación Android:
Debemos comprobar que ninguna foto se sale del layout y que todo encaja perfectamente. Esto no debería ser un problema al utilizar Elementor.
Maquetando los resultados del buscador
En mi caso, he decidido poner un buscador de contenidos en la página principal de la aplicación arriba de todo. Eso quiere decir que tengo que crear un layout para los resultados de búsqueda de ese buscador.
De la misma forma que maquetamos el contenido (posts), vamos a maquetar los resultados de búsqueda de WordPress:
Simplemente, pongo un título y otra vez juego con el módulo de posts de Elementor haciendo la consulta que a mí me interesa y con la misma apariencia que la página principal.
En principio, con esto ya tendríamos la parte de WordPress acabada y toca empezar con la parte de Android App Builder.
Android App Builder para crear apps Android
Como he dicho, existen muchos servicios web que nos permiten crear aplicaciones Android fácilmente y sin tener ni idea de Java. Estos servicios suelen ser asistentes web paso a paso y en los que normalmente hay que pagar suscripciones.
Android App Builder es completamente diferente, ya que se trata de una aplicación para Windows o Macintosh que podemos comprar en CodeCanyon y que nos permite crear aplicaciones, tantas como queramos. Además, Android App Builder es compatible con OneSignal para notificaciones push y también con Google Admob para publicidad de Adsense en la propia aplicación.
Puedes comprar Android App Builder desde CodeCanyon en el siguiente enlace:
Cuando compramos la aplicación, nos descargamos un comprimido que trae la versión para Windows y para Mac.
La aplicación tiene la siguiente apariencia:
Tiene distintos módulos que podemos utilizar en las pantallas de la aplicación, pero a nosotros el que nos interesa es “Web Page” (el que he rodeado en la imagen anterior).
Toda la configuración que tenemos en el módulo “Web Page” es esta:
La configuración debes dejarla como yo en la imagen anterior (con tu URL, evidentemente).
Te explico las opciones que has visto en la captura anterior:
- Hide action bar and drawer menú: Elimina la barra superior y abre el modulo “Web Page” a pantalla completa. Útil cuando ya tenemos nosotros la navegación, como en este caso.
- HTML geolocation support: Podemos darle funcionalidades de geolocalización, lo que es útil si tenemos esta funcionalidad.
- Permissions to Access camera and microphone: Si no lo necesitamos para nuestra aplicación, lo dejamos desactivado.
- Notification Deep linking: Si no utilizamos OneSignal para notificaciones, dejamos esto desactivado.
- Do not refresh when swipe: Yo esto lo dejaría desactivado para que el usuario pueda recargar la página en cualquier momento.
Adicionalmente, la aplicación tiene algunas opciones de configuración más.
Podemos seleccionar los colores que tendrá nuestra aplicación de entre los predefinidos, aunque cuando nosotros usamos nuestra navegación de poco sirve, simplemente para dar ambiente:
En la siguiente sección, llamada “Configure”, debemos configurar los datos de la aplicación, incluidos el nombre y el icono:
Evidentemente, esta pantalla tú tienes que rellenarla con tus datos y con los de tu aplicación.
En la siguiente sección, llamada “Customization”, podemos definir algunas cosas para nuestra aplicación:
La sección “Signing” debemos rellenarla para poder compilar la aplicación. Rellenamos con nuestros datos, aunque posteriormente hagamos cambios para subir la aplicación a Google Play.
La sección “Admob” la dejamos por el momento de lado y nos vamos directamente a “Other”:
Aquí es recomendable subir el cache a 100 MB o más para poder almacenar cache de la página cargada y acelerar bastante la carga de la “aplicación”.
Antes me he saltado “Signing” ya que esto lo vas a tener que utilizar cuando subas la aplicación a Google Play (si quieres subirla, claro).
Cuando terminemos, podemos probar la aplicación en el emulador o directamente en un dispositivo Android. A mí me gusta la segunda opción:
Aunque ha dado error al generar un APK firmado, se ha generado un archivo APK en la carpeta \app\build\outputs\apk\debug del proyecto que podemos probar:
Y en mi caso, tras probar el resultado en mi smartphone, el resultado es bastante satisfactorio y parece una aplicación Android nativa:
También la he probado en mi tablet de 10 pulgadas para ver cómo se ve la aplicación:
Con esto podemos decir que la aplicación está terminada y que ya solo nos faltarían algunos ajustes finales y publicarla (si queremos) en Google Play.
No voy a detallar aquí cómo publicar una aplicación Android en Google Play, ya que no es mi especialidad y además el proceso suele tener cambios constantemente, y yo me actualizo simplemente cuando lo necesito, pero hay mucha documentación para hacerlo en Internet.
Rendimiento de la aplicación Android
Al no ser una aplicación nativa, es decir, al ser simplemente un “frame” que carga una web, es necesario que la web sea lo más rápida posible para evitar problemas y malas experiencias cuando los usuarios utilicen la aplicación.
Vamos a dividir esta parte en tres:
- Como ya he comentado, la interfaz debe estar únicamente compuesta por elementos que necesitamos, cuantos menos mejor. Así, simplificamos el código generado y cargado por el dispositivo. Adicionalmente, podemos ajustar algunas cosas con plugins como Perfmatters o Assets CleanUp Pro.
- Es indispensable implementar un sistema de cache con un plugin como WP Rocket (con precache) y optimizar las imágenes combinando Imagify (compresión) con Imsanity (escalado).
- Como punto final, si ponemos CloudFlare por delante de la web/aplicación podemos conseguir una mejora de velocidad final.
Debemos tener en cuenta lo típico de la navegación móvil: que las redes de datos no tienen la cobertura óptima en todas las zonas geográficas y, en muchos casos, cada kilobyte cuenta durante la carga.
Analítica de la aplicación y tráfico
Aunque existen sistemas de analítica especializados en aplicaciones y que se integran en Google Play Console, también podemos utilizar Google Analytics en el WordPress que sirve de base para la aplicación.
He comentado Google Analytics, pero también podríamos utilizar Matomo (antes Piwik) o cualquier otro sistema de estadísticas y analítica compatible con una web WordPress, incluso un plugin (aunque esto no lo recomiendo por no sobrecargar la DB con basura).
La implementación de cualquiera de estas soluciones se realiza como en cualquier sitio web WordPress. Adicionalmente, si publicamos la aplicación en Google Play tendremos estadísticas de descargas e instalaciones.
Notificaciones con OneSignal en tu app Android
Quizás quieres notificaciones push de las que te salen en la barra de Android en tu aplicación y, precisamente, Android App Builder es compatible con este servicio.
No voy a profundizar sobre su configuración, ya que no es simple y además debemos tener mucho cuidado con “liarla” y saturar a los usuarios.
Existen muchos plugins de integración de notificaciones con OneSignal en WordPress, pero ninguno nos va a servir ya que es la aplicación la que tiene que gestionar esta funcionalidad.
Desgraciadamente, no vas a poder automatizar la ejecución de notificaciones en cada “actualización” de contenido, al menos no de forma fácil. Si en algún momento encuentro una forma “fácil”, actualizaré esta sección del post.
Admob de Google en tu aplicación Android
Todas las aplicaciones que crees con Android App Builder puedes monetizarlas mediante Admob, el Adsense de las aplicaciones móviles.
En este caso, el software coloca los banners de Admob en sitios preconfigurados con solo introducirle el código de editor en la interfaz al compilar.
Debes tener en cuenta que NUNCA debes utilizar Google Adsense en una web cargada desde una aplicación, ya que NO está permitido usar Google Adsense en aplicaciones móviles o software de escritorio y te pueden bannear la cuenta.
Detalles extra y retoques finales
Hay algunas cosas más que he hecho pero no he documentado, ya que son detallitos de los que uno se va dando cuenta durante el proceso y va tapando “fugas”.
Aunque no voy a profundizar, te las voy a dejar listadas aquí como punto final, aunque depende de cómo sea tu proyecto te pueden interesar o no.
- Como no voy a trabajar con las categorías, he juntado todos los posts (contenido) en una única categoría y esa URL la he redireccionado a la página de inicio para que no moleste.
- La instalación de WordPress está bloqueada para buscadores, tanto mediante la opción nativa de WordPress como mediante robots.txt.
- Los comentarios de WordPress están desactivados en TODA la instalación, ya que en la parte final los sistemas de cache pueden dañar la experiencia si hay comentarios.
- Se ha optimizado TODO para su carga en móviles y su almacenamiento en el cache de la aplicación, se han incluido los elementos necesarios y se le han aplicado técnicas WPO a la instalación WordPress para que la carga sea lo más rápida posible y que no se note que es una web.
16 comentarios
Hola Alvaro, fantastico tutorial, exactamente lo que estaba buscando.
Una cosa, no encuentro el Android App Builder al dar en el enlace para descargarlo. como puedo hacer
Hola Jaime, el enlace es este:
Antes de descargarlo, tienes que comprarlo.
Muy buena solución si quieres hacer una pequeña app y no hay presupuesto para desarrollarlo en android.
Una pregunta. Sabes si funcionaría bien con woocomerce? O bien sería un caos por temas de cache y pasarelas de pago. Un saludo.
Hola Manuel, ¿que tal?
Si, podría funcionar bien, lo único que tienes que darle bien la forma con Elementor a todos los elementos de la web y que si la subes a Google Play, tienes que poner que integras compras en la aplicación y posiblemente tengas que pagar un porcentaje, pero esto si que ya no se como va…se que hay veces que aplica y otras no.
Excelente, una pregunta si actualizas un contenido como una imagen, automáticamente se actualiza en la app
Claro!! Salvo que te pases poniendo cache de navegador en el .htaccess claro 😉
Seria como una web normal.
Hola Álvaro!
¿Y se podría hacer una app que muestre contenido de un membership shite montado con learndash?
Me refiero a Qué no haga altas ni cobros, más como HBO o Netflix, es decir el alta es vía web pero el contenido visualizarlo en la app y que muestre contenido si tiene la suscripción activa.
Un abrazo!
Hola Paolo, si, se podría hacer perfectamente, ya que con Elementor Pro, LearnDash trae widgets desde la 3.0 para usar.
Seria como una membresia, pero adaptando todos los layout e interfaz a movil, ya dando por hecho que TODOS los users van a ser en pantalla pequeña.
Si hay compras…ahi ya estamos hablando de otro problema, sobre todo si lo subes a Google Play, porque hay ciertas reglas y puede costar cumplirlas.
Hola Álvaro, fantástico este post, como siempre.
Me queda una duda, igual absurda pero…Cuánto tu implementas un cambio en la web, ¿cómo se sincroniza para que el cambio ocurra también en la app? ¿Tienes que volver a compilarla y subirla?
Por ejemplo, con app que tu has creado de recetas de cocina, si vas añadiendo nuevas recetas.
Un abrazo!
Hola Alejandro, la APP carga la web desde el servidor, por lo que tu simplemente añadiendo contenido a WordPress se carga en la APP.
La aplicacion tiene un pequeño cache, pero como si fuera un cache de navegador para imagenes, CSS, JS, etc…
Para una App que seria usada para un evento con posibles 20mil descargas (tendria informacion sobre los expositores, oradores, push out programable que notifique alertas, chatsy ) siendo usado durante 2 dias de forma especial (wordpress no seria ideal para esto?)
Hola Marcos, si la app es informacional sí que es viable hacerlo con este método, ya que el impacto de rendimiento y uso de recursos será exactamente el mismo.
Hola estimado
Gracias por la información se agradece demasiado
Funcionaria esto para guardar data en una de, tengo la idea de realizarlo para guardar datos de una encuesta
Gracias por todo bro
Saludos
Hola Marco, entiendo que querías decir guardar en una DB.
Si, usando los plugins necesarios para que el formulario guarde en la base de datos de WordPress, el proceso seria el mismo.
Hola Alvaro:
acabo de encontrar este artículo tuyo y estaría muy interesado en comprar Android App Builder, pero no lo encuentro.
¿dónde puedo conseguirlo? No veo los enlaces que tu indicas.
gracias.
Hola Nacho, desgraciadamente Android App Builder ya no está disponible, me he dado cuenta hace un par de semanas, pero estoy saturado de trabajo y aún no he podido revisar y ver que hago con el artículo. Lo siento.