본 가이드는 Alli 의 안드로이드 SDK 를 연동하는 방법에 대한 가이드입니다. Alli SDK 는 안드로이드 4.4 (API 레벨 19) 혹은 그 이상을 요구합니다.

Step 1. SDK 다운로드 및 불러오기

  1. 여기 에서 SDK 를 다운로드합니다.
  2. 안드로이드 스튜디오를 실행하고 File > New > New Module 에서 다운로드한 Alli SDK 를 프로젝트로 불러옵니다.
    image2-2
  3. File > Project Structure > Dependencies에서 allisdk 를 디펜던시로 추가합니다.
    image3-1

Step 2. Alli SDK 를 디펜던시로 추가

앱 모듈의 build.gradle 파일에 Alli SDK 를 디펜던시로 추가합니다.

  dependencies {
    implementation project(":allisdk")
  }

Step 3. 앱 권한 추가

아래 내용을 AndroidManifest.xml에 추가합니다:

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

Step 4.  자바 8 언어 기능 설정

안드로이드 플러그인 버전이 3.0.0 이상임을 확인하고 아래 내용을 상응하는 build.gradle 파일에 설정합니다:

  android {
    ...
    // Java 8 언어 기능을 사용하는 모듈만 설정합니다.
    // 소스코드 혹은 디펜던시 어떤 경우에도 적용됩니다.
    // through dependencies).
    compileOptions {
      sourceCompatibility JavaVersion.VERSION_1_8
      targetCompatibility JavaVersion.VERSION_1_8
    }
  }

Steps 5. Alli SDK 초기화

  1. Alli SDK 가 주요 파일들에 임포트되었는지 확인합니다:
  import ai.allganize.allisdk.Alli;
  import ai.allganize.allisdk.AlliErrorCode;
  import ai.allganize.allisdk.AlliEventHandler;
  1. Alli 의 API 키를 이용해 아래 내용을 onCreate() 메소드로 어플리케이션의 첫 액티비티 클래스에 추가하면 Alli 라이브러리가 초기화됩니다:
  protected void onCreate(Bundle savedInstanceState) {
    ...  
    // new Alli(String apiKey, WebView webView, AlliEventHandler eventHandler, boolean showHeader, boolean showFooter, boolean showBackButton) 형식입니다.
    // showHeader - 선택 사항이며 기본값은 true 입니다. 헤더를 제거하려면 이 옵션을 끄면 됩니다.
    // showFooter - 선택 사항이면 기본값은 ture 입니다. footer 를 제거하려면 이 옵션을 끄면 됩니다.
    // showBackButton - 선택 사항이며 기본값은 ture 입니다. 헤더에서 뒤로가기 버튼을 제거하려면 이 옵션을 끄면 됩니다.
    alli = new Alli("YOUR_API_KEY", webView, this, true, true, false);
    alli.initialize();
    ...
  }

API 키는 Alli 대시보드의 설정 메뉴에서 찾을 수 있습니다:

Step 6. 대화창 생성

대화창을 생성하고 고객과 대화를 시작하려면 아래와 같이 호출합니다.

alli.event();

유저 ID 와 Placement 를 특정하고 싶다면 아래와 같이 호출합니다.

// user id: "USER-123"
// placement: "LANDING"
alli.event("USER-123", "LANDING", context);

서비스에 로그인하여 유저가 특정되어 있는 경우 위와 같이 Alli 에게 정보를 전달할 수 있습니다. 혹은 로그인되지 않은 유저를 위해 임시 ID 를 생성할 수도 있습니다.

Placement 정보는 해당 앱에서 어떤 스킬을 불러올지 결정하기 위해 사용됩니다. Placement 를 생성하고 나면 Alli 대시보드에서 원하는 스킬에 Placement 를 지정할 수 있으며, 이 방법으로 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다.

Alli 대화창은 부모 뷰 컨트롤러에서 구현해야 합니다. 이 때, 부모 뷰 컨트롤러를 위임 속성으로 할당해야합니다. 이 호출에 전달 된 ViewController가 최상위 뷰이며, 다른 뷰에 가려지면 안 됩니다. 그리고 부모 뷰는 최소의 높이와 폭이 필요합니다.

Step 7. Alli 이벤트를 위한 델리게이트 메소드

아래 델리게이트 메소드들이 챗 대화 상태에 피드백을 제공합니다.

  public protocol AlliEventHandler {
    // 성공적으로 초기화되면 호출됩니다.
    // 이 이벤트 전에 호출되면 NOT_INITIALIZE_YET 에러가 발생할 수 있습니다.
    void onInitialized(WebView view);

    // 대화가 시작되면 호출됩니다.
    void onConversationStarted(WebView view, String userId, String placement, Object context);


    // Alli.event 가 호출되었는데 대화가 시작되지 않으면 호출됩니다.
    void onConversationNotStarted(_ view: WKWebView!, userId: String, placement: String, context: Any?)


    // 유저가 챗 윈도우를 닫거나 Alli.close()가 호출되면 호출됩니다.
    void onConversationClosed(WebView view, String userId, String placement, Objective context)

    void onError(WebView view, AlliErrorCode errorCode, String userId, String placement, Object context)
  }

Step 8. 다른 앱과 연결

다른 앱으로 연결하려면 아래와 같이 입력합니다. 아래는 구글 맵으로 연결하는 예시입니다.

    @Override
    public boolean handleUrlLoading(String url) {
        Uri gmmIntentUri = Uri.parse("geo:37.4919653,127.0330243");
        Intent mapIntent = new Intent(Intent.ACTION_VIEW, gmmIntentUri);
        mapIntent.setPackage("com.google.android.apps.maps");
        startActivity(mapIntent);
        return true;

팁: Advanced WebView

안드로이드의 기본 웹뷰는 성능이 좋지 않아 많은 경우 튜닝이 필요한데요, 좋은 성능을 내는 오픈소스가 있어 Alli SDK 에 적용을 추천드립니다. 해당 라이브러리는 여기에서 확인할 수 있습니다.

이 라이브러리는 Android의 기본 WebView를 확장한 버전이므로 기존의 인터페이스를 이용할 수 있고, WebView 선언 부분만 교체하면 됩니다.

Step 1. 라이브러리 인스톨

Project의 build.gradle 에 아래와 같이 입력합니다.

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

App의 build.gradle 에 아래와 같이 입력합니다.

dependencies {
    implementation 'com.github.delight-im:Android-AdvancedWebView:v3.2.1'
}

Step 2. WebView 교체

“webview”를 “im.delight.android.webview.AdvancedWebView”로 교체합니다.

activity_main.xml:

<im.delight.android.webview.AdvancedWebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

코드에서 기본 WebView 는 아래와 같이 선언되는데,

WebView myWebView = new WebView(activityContext);

아래와 같이 AdvancedWebView 로 대체하면 됩니다.

WebView myWebView = new AdvancedWebView(activityContext);

Step 3. 빌드

Gradle sync를 진행하고 나면 라이브러리를 설치하고 빌드할 수 있게 됩니다.