Webview creacion de una pagina basica en android studio 4.0.1
Webview APK
Introduccion
En la actualidad el desarrollo de paginas y sitios web ha tenido un alto crecimiento orientado a las denominadas app.
Sine embargo estos desarrollos se ha visto obstaculizados debido a que las técnicas de desarrollo están enmarcados al menos tres frentes diferentes, Los desarrollos para navegadores convencionales , los desarrollos para dispositivos con sistemas operativos del tipo Ios y Android , al margen del algunos otros desarrollados por empresas como windows.
Esto implica no solo el desarrollos de las aplicaciones sino también el soporte y mantenimiento de los mismos en ambientes totalmente diferentes y en no pocas ocasiones dependiendo de la magnitud del desarrollo por equipos diferentes de desarrollo.
Afortunadamente en los últimos tiempos ha habido corrientes de desarrollo con la idea de unificar este tipo de cosas, siendo unas de las dos que han crecido con mayor fuerza los desarrollos PWA y los basados en WEBVIEW
PWA, pretende crear un nuevo código para ser ejecutado en android mediante una apk a partir del código optimizado de la aplicación web mediante la herramienta de google Lighhouse.
Requiere el uso de un certificado ssh (TLS) porque la pagina de origen debe ser segura , es decir del tipo https , esto es un limitante para algunos desarrollos pequeños, generacion de prototipos o iniciativas de emprendimiento de pocos recursos, se puede desde luego apelar a certificados auto generados, pero esto hay que tenerlo en cuenta. ver el siguiente enlace como generarlos en este mismos blog https://cac9999.blogspot.com/2020/03/certificad-ssl-autofirmado-tomcat-9.html
WEBVIEW, pretende ejecutar el código de el desarrollo para el navegador en un sandbox de android constituido por un navegador interno que empotra la dirección de la pagina o sitio web en dicho navegador y lo ejecuta dentro del mismo mediante un apk.
No genera esta propuesta nuevo código, sino que simplemente presta un servicio de ejecución en un ambiente cerrado
Aunque para ninguna de las dos técnicas mencionadas es una exigencia que sean responsive , si es recomendada sobre todo para desarrollo nuevos.
Para el desarrollo de la app se opto por usar Webview de Android ,en otras palabras, el navegador interno de las aplicaciones Android, y recurrir a una aplicación bien conformada mediante responsive.
Para la validación se utilizo la herramienta de google, LightHouse Que permite determinar el buen uso de CSS, las buenas practicas de desarrollo javascript y la optimizacion de recursos de desarrollo antes pasarlo a webview.
https://developers.google.com/web/tools/lighthouse?hl=eshttps://developers.google.com/web/tools/lighthouse?hl=es
Se determino usar esta tecnológica porque permite el desarrollo integral de todo el proyecto una sola vez para todos los ambientes ,navegador y aplicaciones para dispositivos basados en Android. La principal funcionalidad que determino la decisión es que la APK permanece prácticamente inmodificable independiente de los cambios ocurridos en el proyecto mismo.
Ademas porque el proyecto no utiliza recursos propios del dispositivo android que requiera algún uso de desarrollo o librerías nativas.
Sitio de Referencia:
https://www.movilzona.es/tutoriales/android/desarrollo/curso-de-desarrollo-android-tema-18-webview-que-es-y-como-funciona-la-vista-de-navegacion-web/
Exportar apk
ML MANAGER permite extrarar cualquier APK instalada , descargar de google play.
Esta herramienta permite extraer una apk de un dispositivo y enviarlo mediante whatsapp, OneDrive Wifi Directo a otro dispositivo.
Programa para Android studio 4.0.1 build 24 Junio del 2020 actualizada a Agosto 13 del 2020.
Consta de 3 archivos.
activityMain.xml; En el se define la vista que se va mostrar, es por así decirlo la definición del marco en se despliega el front-end de la aplicación.
MainActivity.java: Es donde se definen todos los procesos que se van a ejecutar dentro de la aplicación en lenguaje java.
AndroindManifiest.xml: En este archivo se define la forma de conexión con Internet y los permisos de la conexión
activityMain.xml
//Tener presente fill-parents para usar la totalidad de la pantalla
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/progress"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-8dp"
tools:ignore="MissingConstraints" />
<WebView
android:id="@+id/browser"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:visibility="visible"
tools:ignore="MissingConstraints"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
//Tener presente de dar permisos de ejecución a javascript
package com.example.susitio;
import android.annotation.SuppressLint;
import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private WebView browser;
private ProgressBar progressBar;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Definimos el webView
browser = findViewById(R.id.browser);
progressBar = findViewById(R.id.progress);
WebSettings webSettings = browser.getSettings();
webSettings.setJavaScriptEnabled(true);
browser.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
// Cargamos la web
if (isNetworkAvailable()) {
browser.loadUrl("http://susitio.com");
}
else {
Toast.makeText(getApplicationContext(), "Sin Conexion ...", Toast.LENGTH_LONG).show();
String errorHtml = "<html>" +
"<head></head>" +
"<body>" +
"<br><br><br>" +
"<center>" +
" <h2>" +
" <font color=red> Error. </font> " +
" <br>" +
" No se pudo conectar <br>" +
" a internet" +
" </h2>" +
"</center>" +
"</body>" +
"</html>" ;
browser.loadData(errorHtml, "text/html", null);
}
// Activamos progress bar
browser.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
public void onProgressChanged(WebView view, int progress) {
progressBar.setProgress(0);
progressBar.setVisibility(View.VISIBLE);
MainActivity.this.setProgress(progress * 1000);
progressBar.incrementProgressBy(progress);
if (progress == 100) {
progressBar.setVisibility(View.GONE);
}
}
});
}
@Override
public void onBackPressed()
{
if (browser.canGoBack())
{
browser.goBack();
}
else
{
super.onBackPressed();
}
}
// Check all connectivities whether available or not
public boolean isNetworkAvailable() {
ConnectivityManager cm = (ConnectivityManager)
getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = cm.getActiveNetworkInfo();
// if no network is available networkInfo will be null
// otherwise check if we are connected
return networkInfo != null && networkInfo.isConnected();
}
}
AndroindManifiest.xml
//En este archivo principalmente la condición que permite la conexión con Internet //y el uso de
//URL que no tengan en su conformación el WWW.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.susitio">
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:usesCleartextTraffic="true"
android:allowBackup="false"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:targetApi="m">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Comentarios
Publicar un comentario