¿Cómo crear Dynamic WebView en Android con Firebase?

Convertir un sitio web en una aplicación parece una tarea básica en Android. Con la ayuda de WebView , podemos mostrar cualquier página web en nuestra aplicación de Android. Solo tenemos que implementar el widget de WebView y agregar la URL dentro de WebView que tenemos que cargar. Entonces, si está buscando cargar un sitio web en su aplicación que se pueda cambiar dinámicamente sin reformatear el código, será más fácil actualizar nuestra aplicación WebView dinámicamente de acuerdo con nuestros requisitos. Entonces, en este artículo, veremos la implementación de WebView dinámico en nuestra aplicación usando Firebase en Android. 

¿Qué vamos a construir en este artículo? 

En este artículo, crearemos una aplicación simple en la que crearemos un WebView simple y cargaremos una URL para nuestro WebView desde Firebase Realtime Database . Entonces, si queremos cambiar la URL de nuestro WebView, podemos cambiar fácilmente la URL de nuestro WebView y se actualizará automáticamente dentro de nuestra aplicación. Java

Implementación paso a paso

Paso 1: Crear un nuevo Proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.  

Paso 2: conecta tu aplicación a Firebase

Después de crear un nuevo proyecto. Navegue a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.  

Dentro de esa columna, navegue hasta Firebase Realtime Database. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Firebase Realtime Database a su aplicación. Haga clic en Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase.  

Después de completar este proceso, verá la siguiente pantalla.  

Ahora verifique que su aplicación esté conectada a Firebase o no. Vaya a su archivo build.gradle. Navegue a la aplicación > Gradle Scripts > archivo build.gradle y asegúrese de que la dependencia a continuación se agregue en su sección de dependencias.  

implementación ‘com.google.firebase:firebase-database:19.6.0’

Si la dependencia anterior no se agrega en su sección de dependencias. Agregue esta dependencia y sincronice su proyecto. Ahora nos moveremos hacia la parte XML de nuestra aplicación.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">
  
    <!--Web View for displaying our web pages-->
    <WebView
        android:id="@+id/idWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
      
</RelativeLayout>

Paso 4: agregue permiso de Internet en su archivo AndroidManifest.xml

Agregue el permiso para Internet en el archivo AndroidManifest.xml. 

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

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a variable for our Firebase Database.
    FirebaseDatabase firebaseDatabase;
      
    // creating a variable for our Database 
    // Reference for Firebase.
    DatabaseReference databaseReference;
      
    // creating a variable for our webview
    private WebView webView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing variable for web view.
        webView = findViewById(R.id.idWebView);
          
        // below line is used to get the instance 
        // of our Firebase database.
        firebaseDatabase = FirebaseDatabase.getInstance();
          
        // below line is used to get reference for our database.
        databaseReference = firebaseDatabase.getReference("url");
          
        // calling method to initialize 
        // our web view.
        initializeWebView();
    }
  
    private void initializeWebView() {
  
        // calling add value event listener method for getting the values from database.
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                // this method is call to get the realtime updates in the data.
                // this method is called when the data is changed in our Firebase console.
                // below line is for getting the data from snapshot of our database.
                String webUrl = snapshot.getValue(String.class);
                  
                // after getting the value for our webview url we are
                // setting our value to our webview view in below line.
                webView.loadUrl(webUrl);
                webView.getSettings().setJavaScriptEnabled(true);
                webView.setWebViewClient(new WebViewClient());
            }
  
            @Override
            public void onCancelled(@NonNull DatabaseError error) {
                // calling on cancelled method when we receive
                // any error or we are not able to get the data.
                Toast.makeText(MainActivity.this, "Fail to get URL.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Después de agregar este código a su aplicación. Ahora vaya a Firebase y haga clic en la opción Ir a la consola que se encuentra en la esquina superior derecha.  

Después de hacer clic en esta pantalla, verá la pantalla a continuación con todo su proyecto dentro que selecciona su proyecto.  

Dentro de esa pantalla, haga clic en n Base de datos en tiempo real en la ventana izquierda.  

Después de hacer clic en esta opción, verá la pantalla en el lado derecho. En esta página, haga clic en la opción Reglas que se encuentra en la barra superior. Verá la siguiente pantalla.  

En este proyecto, estamos agregando nuestras reglas como verdaderas tanto para lectura como para escritura porque no estamos usando ninguna autenticación para verificar a nuestro usuario. Por lo tanto, actualmente lo estamos configurando como verdadero para probar nuestra aplicación. Después de cambiar sus reglas. Haga clic en el botón publicar en la esquina superior derecha y sus reglas se guardarán allí. Ahora vuelva de nuevo a la pestaña Datos. Ahora agregaremos nuestros datos a Firebase manualmente desde el mismo Firebase.

Paso 6: Agregar la URL de WebView en Firebase Database Console  

Dentro de Firebase en la pestaña Datos, verá la siguiente pantalla. Pase el cursor sobre nulo y haga clic en la opción «+» en el lado derecho y haga clic en esa opción. Después de hacer clic en esa opción. Agregue los datos como se agregan en la imagen a continuación. Asegúrese de agregar «url» en el campo Nombre porque estamos configurando nuestra referencia para Firebase como «url» en nuestro código. Así que tenemos que configurarlo en «url». Puede cambiar su referencia y también cambiarla en la Base de datos. Dentro del campo de valor, debe agregar la URL de la página web que desea cargar en su WebView. 

Después de agregar los datos anteriores, verá la siguiente pantalla. 

Después de agregar estos datos, ejecute su aplicación y vea el resultado de la aplicación. Después de ejecutar su aplicación, puede verificar la URL del sitio web dentro de su Firebase Console y puede ver los cambios en su WebView. 

Producción: 

En el video, estamos cambiando la URL del sitio web de Firebase y puede ver los cambios en la aplicación.