Crear una app Android con WordPress (y Elementor Pro)

Dificultad del post: facilmediadificil
android wordpress aplicacion

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.

wordpress android

Antes de nada, quiero dejar claras las intenciones. Voy a usar los siguientes ingredientes:

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.

Icono suscripción Newsletter

¿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.

elementor

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.

wordpressappandroid3

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:

aplicacion android wordpress

Y realizar también algunos ajustes en el modo tablet:

aplicacion android wordpress

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?

aplicacion android wordpress

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í:

aplicacion android wordpress

Esto nos abre el botón de “Ajustes del sitio” sobre el que debemos pulsar:

aplicacion android wordpress

Y ahora vamos a pulsar sobre “Disposición”:

aplicacion android wordpress

Ahora debemos pulsar sobre “Puntos de ruptura” para desplegar las opciones de salto a menú móvil:

aplicacion android wordpress

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:

aplicacion android wordpress

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.

aplicacion android wordpress

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.

aplicacion android wordpress

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:

app android wordpress

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:

app android wordpress

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:

app android 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.

app android wordpress

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: https://alvaro.click/androidappbuilder

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:

app android wordpress

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:

app android wordpress

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:

app android wordpress

En la siguiente sección, llamada “Configure”, debemos configurar los datos de la aplicación, incluidos el nombre y el icono:

app android wordpress

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:

app android wordpress

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.

app android wordpress

La sección “Admob” la dejamos por el momento de lado y nos vamos directamente a “Other”:

app android wordpress

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:

app android wordpress

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:

app android wordpress

Y en mi caso, tras probar el resultado en mi smartphone, el resultado es bastante satisfactorio y parece una aplicación Android nativa:

app android wordpress

También la he probado en mi tablet de 10 pulgadas para ver cómo se ve la aplicación:

app android wordpress

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.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

8 respuestas

  1. 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

  2. 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.

    1. 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.

  3. Excelente, una pregunta si actualizas un contenido como una imagen, automáticamente se actualiza en la app

    1. Claro!! Salvo que te pases poniendo cache de navegador en el .htaccess claro 😉

      Seria como una web normal.

  4. 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!

    1. 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.

Deja una respuesta

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

Artículos destacados

wp-config.php de WordPress

Copias de seguridad en WordPress

WebP en WordPress

Optimizar la carga de JavaScript y CSS en WordPress

Desinfectar un WordPress hackeado

wp-cron.php de WordPress

Share on twitter
Share on facebook
Share on linkedin

Alvaro Fontela
Consultor WordPress especializado en WPO y rendimiento web; CEO y co-fundador de Raiola Networks.

¡Puedes encontrarme en redes sociales!

¿Te gusta mi blog?

Si quieres recibir mis últimos artículos en tu email, suscríbete a mi lista de correo y te enviaré semanalmente mis últimos contenidos.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.