Español

Nästa Coach Android Integration

Java

To integrate the Nästa Coach via microfront using Java you need to do this:

Add Permissions in 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>

Add WebView in the layout XML:

<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>

Add in your code the webview with the html adapted to the Nästa webview filling in the custom variables:

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 = "" // If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "va" for valencian
        String mainColor = "#4b858e"; // You can change the default values
        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);

        // Remember that to access the camera you must have granted the necessary permissions in your application. Example:
        final int cameraPermissionRequestCode = 1;

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

Remember to change the values of your-token to your token and your-client-id to your client id.

Kotlin

To integrate the Nästa Coach via microfront using Kotlin you need to do this:

Add Permissions in 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>

Add WebView in the layout XML:

<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>

Add in your code the webview with the html adapted to the Nästa webview filling in the custom variables:

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 = "" /* If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "va" for valencian */
        val mainColor = "#4b858e" /* You can change the default values */
        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)

        /* Remember that to access the camera you must have granted the necessary permissions in your application. Example: */
        val permissionRequestCode = 1

        if (ContextCompat.checkSelfPermission(this, android.Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, arrayOf(android.Manifest.permission.CAMERA), permissionRequestCode)
        }
    }

}

Remember to change the values of your-token to your token and your-client-id to your client id.