본 가이드는 Alli 의 안드로이드 SDK 를 연동하는 방법에 대한 가이드입니다.
우선 안드로이드 프로젝트에 SDK 를 추가해야 합니다.
Alli SDK 는 안드로이드 4.4 (API 레벨 19) 혹은 그 이상을 요구합니다.
Step 1. SDK 다운로드 및 불러오기
1.대시보드로 로그인하여설정 메뉴 로 이동합니다. 스크롤을 내려 안드로이드 SDK 를 확인하고 다운로드 버튼을 눌러 SDK 를 다운로드합니다..
Scroll down to find Android SDK download and download the SDK.
2.안드로이드 스튜디오를 실행하고 File > New > New Module 에서 다운로드한 Alli SDK 를 프로젝트로 불러옵니다.
3. Add allisdk 추가File > Project Structure > Dependencies에서 allisdk 를 디펜던시로 추가합니다.
Step 2. Alli SDK 를 디펜던시로 추가
앱 모듈의 build.gradle 파일에 Alli SDK 를 디펜던시로 추가합니다.
dependencies {
implementation project(":allisdk")
}
Step 3. 앱 권한 추가
아래 내용을AndroidManifest.xml에 추가합니다 :
<manifest>
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<!-- file upload permission for v5.0 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="18"/>
<!-- external storage use permission -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
</manifest>
Step 4. 자바 8 언어 기능 설정
안드로이드 플러그인 버전이 3.0.0 이상임을 확인하고 아래 내용을 상응하는 build.gradle파일에 설정합니다 :
android {
...
// Configure only for each module that uses Java 8
// language features (either in its source code or
// through dependencies).
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
Steps 5. Alli SDK 초기화
- Alli SDK 가 주요 파일들에 임포트되었는지 확인합니다:
import ai.allganize.allisdk.Alli;
import ai.allganize.allisdk.AlliErrorCode;
import ai.allganize.allisdk.AlliEventHandler;
- Alli 의 API 키를 이용해 아래 내용을 onCreate() 메소드로 어플리케이션의 첫 액티비티 클래스에 추가하면 Alli 라이브러리가 초기화됩니다:
protected void onCreate(Bundle savedInstanceState) {
...
// new Alli(String apiKey, WebView webView, AlliEventHandler eventHandler, boolean showHeader, boolean showFooter, boolean showBackButton)
// showHeader - optional, default: true, If you want to remove the header, turn off this option.
// showFooter - optional, default: true, If you want to remove the footer, turn off this option.
// showBackButton - optional, default: true, If you want to remove the back button on the header, turn off this option.
alli = new Alli("YOUR_API_KEY", webView, this, true, true, false);
alli.initialize();
...
}
Update on June 2021
이제 Javascript SDK의 모든 파라미터를 Android SDK에서 이용할 수 있습니다.
Javascript SDK의 initialize에 사용되는 파라미터를 HashMap<String, Object> 타입으로 Alli의 argument로 넘겨줄 수 있습니다.
dependencies {
implementation project(":allisdk")
}alli = new Alli(this, apikey, webView, this,
new HashMap<String, Object>(){{
put("header", true);
put("footer", false);
put("backButton", true);
put("styleOptions", new HashMap<String, Object>(){{
put("conversationContainer", new HashMap<String, Object>(){{
put("right", 50);
put("left": 50);
put("bottom": 50);
}}
}}
}});
API 키는 Alli 대시보드의 설정 > 일반 메뉴에서 찾을 수 있습니다.
- 권한 설정을 위해 동일한 액티비티 클래스에 아래 내용을 추가합니다.
Add this in the same Activity class for permissions:
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults)
{
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
alli.onRequestPermissionsResult(requestCode, permissions, grantResults);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
alli.onActivityResult(this, requestCode, resultCode, data);
}
Step 6. 대화창 생성
고객과 Alli 가 대화할 수 있는 대화창을 생성하려면 아래를 호출합니다.
alli.event();
유저 ID 와 Placement 를 특정하고 싶다면 아래와 같이 호출합니다.
// user id: "USER-123"
// placement: "LANDING"
alli.event("USER-123", "LANDING", context);
서비스에 로그인하여 유저가 특정되어 있는 경우 위와 같이 Alli 에게 정보를 전달할 수 있습니다. 혹은 로그인되지 않은 유저를 위해 임시 ID 를 생성할 수도 있습니다. 혹은 로그인되지 않은 유저를 위해 임시 ID 를 생성할 수도 있습니다.
Placement 정보는 해당 앱에서 어떤 스킬을 불러올지 결정하기 위해 사용됩니다. Placement 를 생성하고 나면 Alli 대시보드에서 원하는 스킬에 Placement 를 지정할 수 있으며, 이 방법으로 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다.
Alli 대화창은 부모 뷰 컨트롤러에서 구현해야 합니다. 이 때, 부모 뷰 컨트롤러를 위임 속성으로 할당해야합니다. 이 호출에 전달 된 ViewController가 최상위 뷰이며, 다른 뷰에 가려지면 안 됩니다. 그리고 부모 뷰는 최소의 높이와 폭이 필요합니다.
Update on June 2021
constructor와 마찬가지로 모든 파라미터를 추가할 수 있는 event 함수가 추가되었습니다.
alli.event(new HashMap<String, Object>(){{
put("user", new HashMap<String, Object>(){{
put("id", userId.getText().toString());
}});
put("placement", placement.getText().toString());
put("variables", new HashMap<String, Object>(){{
put("test", "test value");
put("AGE", 31);
put("BIRTHDAY", "2021-06-30");
put("boolean", true);
}});
}});
※ userId는 위와 같이 중첩된 형태로 써야 하는 점에 주의해주세요
Step 7. Alli 이벤트를 위한 델리게이트 메소드
아래 델리게이트 메소드들이 챗 대화 상태에 피드백을 제공합니다.
public protocol AlliEventHandler {
// Called when initialized successfully.
// You may receive NOT_INITIALIZE_YET error if
// called before this event.
void onInitialized(WebView view);
// Called when chat started successfully.
void onConversationStarted(WebView view, String userId, String placement, Object context);
// Called when conversation did not start
// even when Alli.event was called.
void onConversationNotStarted(_ view: WKWebView!, userId: String, placement: String, context: Any?)
// Called when user has closed the chat
// window or Alli.close() is called.
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”로 교체합니다.
<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를 진행하고 나면 라이브러리를 설치하고 빌드할 수 있게 됩니다.
