Si has desarrollado una página web responsive (que se adapta correctamente a dispositivos móviles), puedes aprovecharla para crear una Aplicación Android que cargue tu sitio web y contar con otro medio de difusión más para tu proyecto.

Aunque las Aplicaciones Web no aprovechan las capacidades de un smartphone o tablet del mismo modo que una APP nativa, pueden ser útiles para lanzar una versión APP móvil de tu tienda online, o catálogo de productos para enseñar a tus clientes, o  un sistema de reservas para tu restaurante o para alquilar tus inmuebles. Hay múltiples sectores en los que sería aprovechable, y al usar un recurso que ya tienes creado (tu web) supone un ahorro importante al no tener que realizar un desarrollo desde cero para la APP.

Para crear tu Web APP necesitarás instalar el kit de desarrollo para aplicaciones Android Studio de Google.

Puedes descargarlo para tu sistema operativo desde la web: https://developer.android.com/studio/?hl=es-419

Desde sistemas GNU/Linux, es muy problable que lo encuentres en los repositorios de tu distribución o como paquete snap.

Una vez instalado, antes de crear la aplicación, vamos a descargar algunos SDK sobre los que trabajar. Para ello hacemos clic en el botón Configure -> SDK Manager:

A continuación seleccionamos los SDKs que nos interese para nuestras aplicaciones. Algunas funciones o métodos pueden variar según lanzan nuevas versiones de Android, por ello,  para desarrollar nuestra APP podemos elegir algunos SDKs sobre los que implementarla. Para nuestro WebView, vamos a partir desde Android 4.4 KitKat, que funcionará según Android Studio, en el 95% de los dispositivos Android de hoy en día.

Yo por ejemplo, tengo descargados los SDK de KitKat (4.4 API 19), Lollipop (5.1 API 22), Nougat (7.1.1 API 25) y Pie (9.0 API 28) que viene por defecto.

Una vez descargados creamos un nuevo proyecto:

Primero nos pedirá dar un nombre a la aplicación:

A continuación debemos seleccionar la API que se considera mínima para hacer funcionar la aplicación. Lo recomandable, para llegar al mayor número de dispositivos posibles, es seleccionar una API baja, si nuestra APP no va tener métodos o funcionalidades que solo se encuentran en APIs recientes.

Para nuestro WebView vamos a partir de la API 19, correspondiente a la versión Android 4.4 KitKat, que según Android Studio, funcionará en más del 95% de los dispositivos Android de hoy en día.

En la siguiente pantalla vamos a seleccionar una Actividad Vacía (Empty Activity). Las actividades son como las pantallas de la aplicación (o las páginas de una web). En nuestra aplicación solo vamos a tener una Actividad con el componente WebView que cargará nuestro sitio web:

Damos un nombre a nuestra actividad, por ejemplo, Principal:

Finalizamos y esperamos unos segundos a que se cargue toda la interfaz. Es posible que durante la carga aparezcan algunos mensajes de error. No te preocupes, desaparecerán cuando se haya cargado todo el entorno de desarrollo.

La interfaz principal nos muestra dos archivos principales, el layout activity_principal.xml y la clase Principal.java. Sin pretender hacer un manual de Android Studio o de desarrollo de aplicaciones móviles, resumidamente podríamos decir que el Layout (XML) es donde se crean los elementos de la interfaz de la aplicación (textos, imágenes, botones…), y las Clases (java) donde se programa la funcionalidad de esos elementos.

Para añadir nuestro WebView, abrimos la pestaña activity_principal.xml y desde la Paleta de Elementos, arrastramos un Widget de WebView hacia la interfaz de la aplicación:

En las propiedades de WebView (a la derecha), damos un identificador (ID), por ejemplo visorWeb (si vas a utilizar el código de este ejemplo para tu aplicación, utiliza también el mismo identificador):

Ahora vamos ajustar el ancho y alto del WebView para que ocupe el máximo de la pantalla del dispositivo en el que se visualice. Para ello hay que definir el layout_width y el layout_height en «fill_parent«:

Ahora pasamos a la pestaña Principal.java.

Añadimos la siguiente línea para crear el componente WebView:

WebView miVisorWeb

Si el WebView se marca en color rojo, significa que hay que importar sus métodos y propiedades a la clase actual. Si pasas el ratón por encima del componente, Android Studio te sugerirá que lo importes pulsando Alt + Intro:

Al importar, se añadirá automáticamente la línea import android.webkit.WebView;

Ahora definimos la URL de nuestro sitio web que se cargará en el WebView:

String url = "https://www.gestionatuweb.net";

Y dentro de la función onCreateBundle, añadimos las siguientes líneas:

miVisorWeb = (WebView) findViewById(R.id.visorWeb);

final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
ajustesVisorWeb.setJavaScriptEnabled(true);

miVisorWeb.loadUrl(url);

miVisorWeb = (WebView) findViewById(R.id.visorWeb) enlaza el componente WebView con el Widget de WebView que añadimos a la interfaz anteriormente a través de su identificador (ID)

Además, habilitaremos el JavaScript para que los elementos JavaScript funcionen correctamente desde la APP.

Y finalmente llamamos a cargar la url que definimos anteriormente: miVisorWeb.loadUrl(url);

Quedando el código de Principal.java de esta forma:

package net.gestionatuweb.miwebapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class Principal extends AppCompatActivity {

    WebView miVisorWeb;
    String url = "https://www.gestionatuweb.net";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_principal);

        miVisorWeb = (WebView) findViewById(R.id.visorWeb);

        final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
        ajustesVisorWeb.setJavaScriptEnabled(true);

        miVisorWeb.loadUrl(url);
    }

A continuación tenemos que dar a nuestra aplicación permisos para acceder a Internet, de lo contrario no podrá cargar nuestro sitio web.

Para ello tenemos que abrir el archivo Manifest que se encuentra en el árbol de archivos de nuestro proyecto app -> manifests -> AndroidManifest.xml y añadimos la siguiente línea:

<uses-permission android:name="android.permission.INTERNET"/>

Para probar nuestra APP, podemos ir al menú RUN – ‘Run app’.

Hay dos métodos para probar nuestra aplicación. La primera es utilizar un dispositivo Android real, por ejemplo tu smartphone o tablet. Para que este sea reconocido por Android Studio, tendrás que conectarlo por usb al PC y tener en tu smartphone o tablet el modo de Depuración USB Habilitada. Si todo está bien será reconocido en la siguiente pantalla en Connected Devides:

O podemos crear un dispositivo virtual haciendo clic en Create New Virtual Device.

Android Studio nos propone una serie de dispositivos ya preconfigurados, solo tenemos que seleccionar uno de ellos y esperar a que se descargue y configure el nuevo dispositivo:

Ahora abrimos nuestro nuevo dispositivo y comprobamos que la web cargue correctamente:

Nos encontramos con el problema de que el botón «Atrás» de nuestro dispositivo, cierra la aplicación en lugar de volver a una página anterior de nuestro sitio web. Esto ocurre porque el botón «Atrás», no detecta que se esté navegando a través de una página web, si no que intenta ir a una actividad anterior de nuestra aplicación y como solamente tenemos una actividad creada, el siguiente paso hacía atrás consiste en cerrarla.

Para controlar esto podemos añadir el siguiente código dentro del archivo Principal.java:

//Impedir que el botón Atrás cierre la aplicación
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView miVisorWeb;
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (miVisorWeb.canGoBack()) {
                        miVisorWeb.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

Os dejo el código completo del archivo Principal.java por si queréis copiarlo íntegro para vuestras pruebas:

package net.gestionatuweb.miwebapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class Principal extends AppCompatActivity {

    WebView miVisorWeb;
    String url = "https://www.gestionatuweb.net";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_principal);

        miVisorWeb = (WebView) findViewById(R.id.visorWeb);

        final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
        ajustesVisorWeb.setJavaScriptEnabled(true);

        miVisorWeb.loadUrl(url);
    }

    //Impedir que el botón Atrás cierre la aplicación
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView miVisorWeb;
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (miVisorWeb.canGoBack()) {
                        miVisorWeb.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

Ya solo nos queda definir un icono a nuestra APP y generar el .apk final para poder instalarlo en cualquier dispositivo Android o subirlo a la Play Store.

Para generar el icono de nuestra aplicación, crearemos una nueva Image Asset, posicionándonos sobre el directorio mipmap del proyecto, botón derecho y New Image Asset.

Veremos la pantalla del icono por defecto en todas sus versiones. Para agilizar el trabajo, podemos simplemente reemplazar la imagen por defecto por la imagen que hayamos preparado para nuestro icono en el campo Path:

Localizamos la nueva imagen en nuestro PC:

Podemos usar la barra resize para encajar nuestro nuevo icono en todas las variantes:

En la pestaña Background Layer podemos ajustar el fondo. Para el ejemplo usaremos el color blanco.

Ya solamente queda generar la APK.

Para ello tenemos dos opciones, generar una APK sencilla lista para instalar en cualquier dispositivo manualmente, o crear una APK firmada para el caso en que queramos publicarla en Google Play.

  • Generar la APK simple: Nos dirimos al menú Build – Build Bundle(s) / APK/s) – Buid APK(s):

Una vez construida la APK aparecerá el mensaje donde podremos localizarla haciendo clic en «locate», pero si el mensaje desaparece, la APK generalmente se guardará en la ruta de tu proyecto: TuAplicacion / app / build / outputs / apk / debug

  • Generar la APK firmada: Nos dirigimos al menú Build – Generate Signed Bundle or APK y escogemos la opción Android App Bundle.

Ahora nos pedirá que seleccionemos un certificado o firma digital para la aplicación:

Si es la primera vez que hacemos este paso en Android Studio, tendremos que crear una firma digital para nuestra aplicación. Esta firma nos reconoce a nosotros como autores legítimos de la aplicación y es necesaria para poder publicar en Google Play:

Rellenamos los datos para el certificado y finalizamos.

Podríamos extendernos mucho más sobre el tema, pero creo que lo esencial está explicado y es suficiente para empezar (y llevamos casi 1500 palabras de artículo!).