English

Integración Nästa Coach Android

Java

Para integrar el Nästa Coach a través de microfront utilizando Java debes hacer lo siguiente:

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" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature android:name="android.hardware.camera.any" android:required="true" />
  <!-- .... -->
</manifest>

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>

Añade en tu código el webview con el html de Nästa adaptado al webview rellenando las variables personalizadas:

import android.os.Bundle;
import android.webkit.PermissionRequest;
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);

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onPermissionRequest(final PermissionRequest request) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        List<String> resources = Arrays.asList(request.getResources());
                        List<String> permissionsToGrant = new ArrayList<>();
                        if (resources.contains(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) {
                            permissionsToGrant.add(PermissionRequest.RESOURCE_VIDEO_CAPTURE);
                        }
                        if (!permissionsToGrant.isEmpty()) {
                            request.grant(permissionsToGrant.toArray(new String[0]));
                        } else {
                            request.deny();
                        }
                    }
                });
            }
        });

        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 va para Valenciano.
        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 { --nasta-main: %s; --nasta-mainActive: %s; --nasta-mainDisabled: %s; --nasta-secondary: %s; --nasta-secondaryDark: %s; --nasta-secondaryMiddle: %s; --nasta-secondaryLight: %s; --nasta-secondarySuperDark: %s; --nasta-font: %s; --nasta-microMaxWidth: %s; --nasta-microHeight: %s; }</style></head><body><recycling-app client-id='%s' token='%s' language='%s'></recycling-app><script src='https://recycling.nastaeco.com/recycling.umd.js'></script></body></html>", mainColor, mainActive, mainDisabled, secondary, secondaryDark, secondaryMiddle, secondaryLight, secondarySuperDark, font, maxWidth, height, clientId, token, language);

        webView.loadDataWithBaseURL("https://recycling.nastaeco.com/", htmlData, "text/html", "UTF-8", null);

        //Recuerda que para acceder a la cámara debemos de haber otorgado los permisos necesarios en la aplicación. Ejemplo:
        final int cameraPermissionRequestCode = 1;

        if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, cameraPermissionRequestCode);
        }
    }
}

Recuerda cambiar los valores de your-token por tu token y your-client-id por tu client id.

Kotlin

Para integrar el Nästa Coach a través de microfront utilizando Kotlin debes hacer lo siguiente:

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" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature android:name="android.hardware.camera.any" android:required="true" />
  <!-- .... -->
</manifest>

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>

Añade en tu código el webview con el html de Nästa 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 android.webkit.PermissionRequest
  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()

          webView.webChromeClient = object : WebChromeClient() {
              override fun onPermissionRequest(request: PermissionRequest) {
                  runOnUiThread {
                      val acceptedPermissions = listOf(PermissionRequest.RESOURCE_VIDEO_CAPTURE)
                      val resourcesToGrant = request.resources.filter { it in acceptedPermissions }
                      if (resourcesToGrant.isNotEmpty()) {
                          request.grant(resourcesToGrant.toTypedArray())
                      } else {
                          request.deny()
                      }
                  }
              }
          }

          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 va para Valenciano.*/
          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 {
                    --nasta-main: $mainColor;
                    --nasta-mainActive: $mainActive;
                    --nasta-mainDisabled: $mainDisabled;
                    --nasta-secondary: $secondary;
                    --nasta-secondaryDark: $secondaryDark;
                    --nasta-secondaryMiddle: $secondaryMiddle;
                    --nasta-secondaryLight: $secondaryLight;
                    --nasta-secondarySuperDark: $secondarySuperDark;
                    --nasta-font: $font;
                    --nasta-microMaxWidth: $maxWidth;
                    --nasta-microHeight: $height;
                  }
                </style>
              </head>
              <body>
              <recycling-app
                client-id="$clientId"
                token="$token"
                language="$language"
              ></recycling-app>
              <script src="https://recycling.nastaeco.com/recycling.umd.js"></script>
            </body>
          </html>
          """

          webView.loadDataWithBaseURL("https://recycling.nastaeco.com", htmlData, "text/html", "UTF-8", null)

          /* Recuerda que para acceder a la cámara debemos de haber otorgado los permisos necesarios en la aplicación. Ejemplo: */
          val permissionRequestCode = 1 
          if (ContextCompat.checkSelfPermission(this, android.Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
              ActivityCompat.requestPermissions(this, arrayOf(android.Manifest.permission.CAMERA), permissionRequestCode)
          }
      }
  }

Recuerda cambiar los valores de your-token por tu token y your-client-id por tu client id.