Integración Devera Widget Android

Java

Para integrar el Devera Widget a través de microfront utilizando Java debes hacer lo siguiente:

  1. Añadir Permisos en AndroidManifest XML:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- .... -->
</manifest>

  2. Añadir WebView en el XML de diseño:

    <LinearLayout 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"
  android:orientation="vertical"
  tools:context=".MainActivity">
<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
</LinearLayout>

  3. Añade en tu código el webview con el html del widget adaptado al webview rellenando las variables personalizadas:

    import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import android.Manifest;
import android.content.pm.PackageManager;
import java.util.Arrays;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        WebView webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);

        String productId = "<your-product-id>";
        String token = "<your-token>";
        String clientId = "<your-client-id>";
        String language = "" // Por defecto escoge el idioma del sistema, pero puedes seleccionar es para Español, en para Ingles y de para Alemán.
        String mainColor = "#4b858e"; // Puedes cambiar los valores por defecto
        String mainActive = "#2c4e54";
        String mainDisabled = "#9db8bc";
        String secondary = "#a3d5cd";
        String secondaryDark = "#9ac6bf";
        String secondaryMiddle = "#c8e7e2";
        String secondaryLight = "#e8f6f3";
        String secondarySuperDark = "#7baaa3";
        String font = "'Montserrat', sans-serif";
        String maxWidth = "420px";
        String height = "500px";

        String htmlData = String.format("<html><head><style>:root { --devera-main: %s; --devera-mainActive: %s; --devera-mainDisabled: %s; --devera-secondary: %s; --devera-secondaryDark: %s; --devera-secondaryMiddle: %s; --devera-secondaryLight: %s; --devera-secondarySuperDark: %s; --devera-font: %s; --devera-microMaxWidth: %s; --devera-microHeight: %s; }</style></head><body><devera-widget product-id='%s' client-id='%s' token='%s' language='%s'></devera-widget><script src='https://widget.devera.ai/widget.umd.js'></script></body></html>", mainColor, mainActive, mainDisabled, secondary, secondaryDark, secondaryMiddle, secondaryLight, secondarySuperDark, font, maxWidth, height, productId, clientId, token, language);

        webView.loadDataWithBaseURL("https://widget.devera.ai/", htmlData, "text/html", "UTF-8", null);

    }
}

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.

Kotlin

Para integrar el Devera Widget a través de microfront utilizando Kotlin debes hacer lo siguiente:

  1. Añadir Permisos en AndroidManifest XML:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- .... -->
</manifest>

  2. Añadir WebView en el XML de diseño:

    <LinearLayout 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"
  android:orientation="vertical"
  tools:context=".MainActivity">
<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" ></WebView>
</LinearLayout>

  3. Añade en tu código el webview con el html del widget adaptado al webview rellenando las variables personalizadas:

      import android.os.Bundle
  import androidx.activity.ComponentActivity
  import android.webkit.WebView
  import android.webkit.WebViewClient
  import android.webkit.WebChromeClient
  import androidx.core.app.ActivityCompat
  import androidx.core.content.ContextCompat
  import android.content.pm.PackageManager

  class MainActivity : AppCompatActivity() {

      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)

          val webView: WebView = findViewById(R.id.webview)
          webView.settings.javaScriptEnabled = true
          webView.settings.domStorageEnabled = true
          webView.webViewClient = WebViewClient()

          val productId = "<your-product-id>"
          val token = "<your-token>"
          val clientId = "<your-client-id>"
          val language = "" /* Por defecto escoge el idioma del sistema, pero puedes seleccionar es para Español, en para Ingles y de para Alemán */
          val mainColor = "#4b858e" /* Puedes cambiar los valores por defecto */
          val mainActive = "#2c4e54"
          val mainDisabled = "#9db8bc"
          val secondary = "#a3d5cd"
          val secondaryDark = "#9ac6bf"
          val secondaryMiddle = "#c8e7e2"
          val secondaryLight = "#e8f6f3"
          val secondarySuperDark = "#7baaa3"
          val font = "'Montserrat', sans-serif"
          val maxWidth = "420px"
          val height = "500px"

          val htmlData = """
              <html>
                <head>
                <style>
                  :root {
                    --devera-main: $mainColor;
                    --devera-mainActive: $mainActive;
                    --devera-mainDisabled: $mainDisabled;
                    --devera-secondary: $secondary;
                    --devera-secondaryDark: $secondaryDark;
                    --devera-secondaryMiddle: $secondaryMiddle;
                    --devera-secondaryLight: $secondaryLight;
                    --devera-secondarySuperDark: $secondarySuperDark;
                    --devera-font: $font;
                    --devera-microMaxWidth: $maxWidth;
                    --devera-microHeight: $height;
                  }
                </style>
              </head>
              <body>
              <devera-widget
                product-id="$productId"
                client-id="$clientId"
                token="$token"
                language="$language"
              ></devera-widget>
              <script src="https://widget.devera.ai/widget.umd.js"></script>
            </body>
          </html>
          """

          webView.loadDataWithBaseURL("https://widget.devera.ai", htmlData, "text/html", "UTF-8", null)
      }
  }

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.