Como he dicho en otros artículos todo el mundo necesita tener su propia App. Ya seas un escritor independiente o una gran empresa. Pero no siempre tenemos los medios económicos para contratar a un programador. Por eso vamos a ver hoy como crear una WebView App para poder visualizar nuestra página desde dispositivos móviles y subirla al market que en este caso es el Play Store de Google.
Necesitamos tener instalado el Android Studio que es completamente gratuito y se instala en dos clics. Si no quieres descargar nada puedes usar alternativas online que son más sencillas pero más limitadas también como AppYet. La primera vez que abramos el Studio nos descarga todos los paquetes, lo cual puede tardar un poco, pero con él podremos crear muchos tipos diferentes de aplicaciones para móviles Android no solo webs apps (visualizadores de páginas).
Creamos un nuevo proyecto en el Android Studio. Para ello después de instalar vamos a Start a New Android Studio Project ➫ Seleccionamos la API. Si queremos ponerle las últimas funciones seleccionamos la más alta pero eso reducirá el número de dispositivos que podrán descargar nuestra app así que lo mejor es usar una más baja. ➫ Empty Activity➫ Dejamos todo como esta ➫ Continuar ➫ Finish.
Si en algún momento queremos cambiar la API seria ir a File ➫ Project ➫ Structure app ➫Flavors. Y ya vemos Min Sdk Version y un poco más abajo Target Sdk Version
Ahora está creando la aplicación. Cuando acabe, no más de unos minutos, nos dará la bienvenida al nuevo proyecto. Si nos sale algún error es por ser la primera vez. Instalamos y lo que nos pida.
Como programar una aplicacion WEB en Android Studio
Después de instalar todo vamos con lo mas sencillo el WebView. Para ello si la página es online y no estática vamos a añadir en el archivo de Manifiesto los permisos de Internet. Para ello vamos a App ➫ Carpeta manifest ➫ AndroidManifest.xml
Y pegamos lo siguiente antes de acabar </manifest>
<uses-permission android:name="android.permission.INTERNET" />
Añadimos en Res ➫ layout ➫ Activity_main.xml
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />
Y en src➫ main ➫ java ➫ MainActivity.java
WebView webview = new WebView(this); setContentView(webview); webview.loadUrl("https://luisiblogdeinformatica.com/");
Nos saldrán unas palabras en rojo. Esto significa que tenemos que importar. En vez de escribir o que vamos a hacer va a ser situarnos sobre la palabra en rojo y pulsar Alt+Intro.
Ahora mismo ya se podría ver nuestra página en la app. Pero si lo que queremos es que el usuario interactúe con ella. Navegue por ella y no le redirija al navegador Chrome lo que tenemos que añadir es justo después del paso anterior:
mywebView.setWebViewClient(new WebViewClient());
Si en algún momento queremos probar la App en formato Apk podemos hacerlo de forma directa, descargando la Api. Para ello vamos a la parte superior. El botón con una flecha verde hacia la derecha. Una vez allí podemos descargar la Api en Create New Virtual Device. Nos permite personalizarlo a nuestro gusto, tamaño de dispositivo y tipo de Api siendo la más recomendada la API 28. luego le damos a OK y ya nos abre una pestaña con tamaño de un móvil o smartphone en el que al cabo de un minuto aparece nuestra aplicación.
Añadir más funciones
Ahora mismo la aplicación ya podría funcionar en cualquier móvil Android. Pero si quieres mejorarla vamos a ver un par de formas muy simples.
Añadir funcionalidad atras
public void onBackPressed() { if(mywebView.canGoBack()) { mywebView.goBack(); } else{ super.onBackPressed(); } }
Quitar barra superior
Muchas paginas no necesitan tener la ActionBar en su aplicacion por que ya su propia pagina tiene un logo o el titulo. Para ello vamos a añadir justo despues de setContentView(R.layout.activity_main); en MainActivty.Java
getSupportActionBar().hide();
Añadir Favicon App Icon
Nos situamos sobre la estructura principal. Sobre app pulsamos el boton derecho del raton y luego en el menu vamos a New ➫ Image Asset.
Ahi seleccionamos la imagen que queremos que se muestre como logo de nuestra aplicacion web.