Deploy ChatBot to your Android App.

[sanju_joseph]

Can we think of having Conversational AI that is standalone, The Use Case pretty much require this to open on a Mobile Device irrespective of whether it's  Android or an iOS.  The blog is my attempt to provide steps on how to launch the SAP Conversational AI on Android App, I will cover the iOS stuff probably in my next blog.

Well you don’t need to have an expertise in mobile development and the steps provided here are straightforward so that even the non-mobile developer can deploy this easily and fast.

Before I go ahead and explain the steps, here is the Architecture of SAP Conversational AI. Please pay special attention to WebChat as that is what i am going to cover down below.

Architecture

Prerequisite:

Install the latest version of Android Studio and Android Studio Virtual Device.

Here are the steps that demonstrate on how to load WebChat Content in an Android Webview.

1. 
   
   
   
   1. On the Connect tab of your bot, activate the Webchat.
      
   
   
   2. Configure details like color, title of the button, bot picture, user picture, and so on.
   
   
   3. Copy the WebChat Script to your web page, let's create a simple html page that contain your webchat script, note this is just for testing and to see if the chat is working correctly. We may have to copy this script and deploy it somewhere in the android WebView that is explained in the subsequent steps.
   
   
   4. Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.
      A) Choose Empty Activity.
      B) Name: Some Meaningful name
      C) Package Name: Don’t Change
      D) Save Location: This should point to AndroidStudioProject folder, don’t change this until you prefer to store your project somewhere else.
      E) Language: Java
      F) Minimum SDK: I have used Marshmallow API 23, Probably you can try with something latest and if some APIs are deprecated then try replacing this with
      the latest one, Though there is an option to override this and continue to use the deprecated APIs.
   
   
   5. Deploy the html code in folder app->src->main->assets->www-> “your .html file” ( Note: First i have created the folder ‘www’ inside the assets folder via an option New->Directory and then have created the .html page inside this via an option New->file).
      Add your script here
      
   
   
   6. Next is open the .html file in the chrome Browser and to see if this is opening the chatbot correctly.( Sometime there is a popup blocker that can block the application to launch, you may then need to disable this).
      Right click on your .html file and open in browser->chrome.If you encounter any error here, probably you may need to enable popup and redirect.
   
   
   7. Add the following code to Location: app->src->main->res->layout->activity_main.xml
      In the below script, we have taken web view to show html content.
      

      <?xml version="1.0" encoding="utf-8"?>
      
      <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
      
          xmlns:app = "http://schemas.android.com/apk/res-auto"
      
          xmlns:tools = "http://schemas.android.com/tools"
      
          android:layout_width = "match_parent"
      
          android:gravity = "center"
      
          android:layout_height = "match_parent"
      
          tools:context = ".MainActivity"
      
          android:orientation = "vertical">
      
          <WebView
      
              android:id = "@+id/web_view"
      
              android:layout_width = "match_parent"
      
              android:layout_height = "match_parent" />
      
      </LinearLayout>
      
      ​

      
       
   
   
   8. Add the following code to Location:app->src->java->(folder)->MainActivity.java
      web_view.loadUrl : is pointing to location where .html file is located, note that the folder name is android_asset , however the actual location is named as an assets with one additional 's' at the end, which is ok, as it still can find the location.
      

      package com.example.myapplication;
      
      
      
      import androidx.appcompat.app.AppCompatActivity;
      
      import android.app.ProgressDialog;
      
      import android.os.Bundle;
      
      import android.webkit.WebChromeClient;
      
      import android.webkit.WebView;
      
      
      
      public class MainActivity extends AppCompatActivity {
      
          @Override
      
          protected void onCreate(Bundle savedInstanceState) {
      
              super.onCreate(savedInstanceState);
      
              setContentView(R.layout.activity_main);
      
              final ProgressDialog progressDialog = new ProgressDialog(this);
      
              progressDialog.setMessage("Loading Data...");
      
              progressDialog.setCancelable(false);
      
              WebView web_view = findViewById(R.id.web_view);
      
              web_view.loadUrl("file:///android_asset/www/ChatBot.html");
      
              web_view.setWebChromeClient(new WebChromeClient());
      
              web_view.getSettings().setSupportMultipleWindows(true);
      
              web_view.getSettings().setDomStorageEnabled(true);
      
              web_view.getSettings().setJavaScriptEnabled(true);
      
              web_view.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
      
              web_view.setWebChromeClient(new WebChromeClient() {
      
                  public void onProgressChanged(WebView view, int progress) {
      
                      if (progress < 100) {
      
                          progressDialog.show();
      
                      }
      
                      if (progress == 100) {
      
                          progressDialog.dismiss();
      
                      }
      
                  }
      
              });
      
      
      
      
      
          }
      
      
      
      

      
      Your AndroidManifest.xml should probably look something similar.
      Location: app->src->main->AndroidManifest.xml
      

      <?xml version="1.0" encoding="utf-8"?>
      
      <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      
          package="com.example.myapplication">
      
      
      
          <application
      
              android:allowBackup="true"
      
              android:usesCleartextTraffic="true"
      
              android:icon="@mipmap/ic_launcher"
      
              android:label="@string/app_name"
      
              android:roundIcon="@mipmap/ic_launcher_round"
      
              android:supportsRtl="true"
      
              android:theme="@style/AppTheme">
      
              <activity android:name=".MainActivity">
      
                  <intent-filter>
      
                      <action android:name="android.intent.action.MAIN" />
      
      
      
                      <category android:name="android.intent.category.LAUNCHER" />
      
                  </intent-filter>
      
              </activity>
      
      </application>
      
          <uses-permission android:name="android.permission.INTERNET" />
      
      </manifest>
      
      
      
      ​

      
       
      
      The difference could be on the following code, in case this is missed out, then add this in the script as shown above .
      

      android:usesCleartextTraffic="true"
      
      <uses-permission android:name="android.permission.INTERNET" />​

      
      
      
   
   
   9. 
      

      Now we have reached the last step,we can now Execute/Run the Main Activity: you can test the chatbot functionality in the simulation mode. To run the app from android studio, open one of your project's activity files and click Run icon from the toolbar. Select your mobile device as an option which will display the default screen –

      
      The blog showcases open-sourced WebChat to allow the client to customize the web chat and to run this on any website that can be launched from an Android/iOS app.
      
      For more information on SAP Conversational AI WebChat:
      
      webchat
      
      Do share your thoughts in the comments.
      
      Cheers