Storyboard UI를 위한 iOS SDK 연동

Updated on 5월 23, 2022

본 가이드는 Storyboard UI 를 위한 Alli iOS SDK 연동 가이드입니다. Alli SDK 는 iOS 10 혹은 그 이상의 버전에 설치 가능합니다.

Step 1. SDK 다운로드 및 압축 해제

  1. Alli 대시보드로 로그인하여 설정 메뉴로 이동합니다. 스크롤을 내려 iOS SDK 를 확인하고 다운로드 버튼을 눌러 SDK 를 다운로드합니다.
  2. 받은 파일의 압축을 해제하면 아래와 같은 구조를 확인할 수 있습니다.

Step 2. 프로젝트에 SDK 추가

  1. Xcode 의 프로젝트 네비게이션에서 해당 프로젝트 아이콘에 우클릭합니다.
  2. Add Files to “Your App”… 버튼을 클릭합니다. A dialog will appear.
  3. 위의 AlliFramework 폴더를 선택합니다.
  4. ‘Copy items if needed’ 가 선택되어 있는지 확인합니다.
  5. 제대로 진행되었다면 보이는 화면은 아래와 같습니다. Add 버튼을 클릭합니다.

Step 3. 임베디드 바이너리 , 프레임워크, 라이브러리 추가 Add embedded binaries, frameworks libraries

  1. 프로젝트 네비게이션에서 프로젝트 아이콘을 클릭합니다.
  2. General > ‘Frameworks, Libraries, and Embedded Content’ 로 이동하여 AlliFramework.framework 를 ‘Embeded Without Signing’ 으로 설정합니다.
  3. Build Phases > ‘Link Binary With Libraries’ 와 ‘Embed Frameworks’ 에 AlliFramwork.framework 이 추가되어 있는지 확인합니다.

Steps 4. Info.plist 권한 설정 Specify permission in Info.plist

AlliFramework.framework 폴더의 info.plist 파일을 열고 Information Property list 옆의 “+” 버튼을 클릭합니다. Privacy 항목들까지 스크롤하고 카메라 엑세스가 필요한 경우 Privacy Camera Usage Description을, 사진 라이브러리 엑세스가 필요한 경우 Privacy Photo Library Usage Description을 선택합니다. 이를 통해 유저가 영수증이나 제품 이미지 등의 자료를 업로드할 수 있도록 권한을 부여합니다.

항목들을 선택하였다면 String 형식으로 Value 필드에 입력합니다. 권한 부여를 위해 유저에게 노출되는 팝업창에 들어갈 문구를 입력하면 됩니다.

Step 5. Alli SDK 초기화

  1. Add ViewController.swift 파일의 시작 부분에 import AlliFramework   를 추가합니다. 이를 통해 Alli 프레임워크가 프로젝트에 엑세스 가능하도록 할 수 있습니다.
  2. Alli 프로젝트의 API 키를 사용해 Alli 라이브러리를 초기화하기 위해 아래 내용을 ViewController 에 추가하면 됩니다.
				
					  var alli: Alli?
  override func viewDidLoad() {
    // 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 = Alli("YOUR_API_Key", eventHandler: self, showHeader: true, showFooter: true, showBackButton: false)
  }
				
			

이제 Javascript SDK의 모든 파라미터를 iOS SDK에서 이용할 수 있습니다.
Javascript SDK의 initialize에 사용되는 파라미터를 Dictionary <String, Any> 타입으로   initWithParams argument로 넘겨줄 수 있습니다.

				
					alli = Alli.initWithParams("YOUR_API_Key", eventHandler: self,
                           params: [
                               "header": true,
                               "footer": true,
                               "backButton": true,
                               "styleOptions": ["conversationContainer": [
                                   "right": 50,
                                   "left": 50,
                                   "bottom": 50]]])
				
			

API 키는 아래와 같이 설정 메뉴에서 찾을 수 있습니다.

Step 6. 대화창 생성

고객과 Alli 가 대화할 수 있는 대화창을 생성하려면 아래를 호출합니다.

				
					alli!.event(view: parentView)
				
			

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

				
					alli!.event(userId:"YOUR_userId", placement:"YOUR_placement", view:parentView)
				
			

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

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

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

initWithParams 함수와 마찬가지로 모든 파라미터를 추가할 수 있는 eventWithParams가 추가되었습니다.

				
					alli!.eventWithParams(view: innerView, 
                      params: [
                          "user": ["id": "YOUR_userId"],
                          "placement": "YOUR_placement",
                          "variables": ["test": "test value",
                                        "AGE": 31,
                                        "BIRTHDAY": "2021-06-30",
                                        "boolean": true]])
				
			

※ userId는 위와 같이 중첩된 형태로 써야 하는 점에 주의해주세요

Step 7: Alli 이벤트 핸들을 위한 델리게이트 메소드

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

				
					import WebKit

public protocol AlliEventHandler {
    // Called when initialized successfully. 
    // You may receive NOT_INITIALIZE_YET error if 
    // called before this event.
    func onInitialized(_ view:WKWebView!)

    // Called when chat started successfully.
    func onConversationStarted(_ view: WKWebView!, userId: String, placement: String, context: Any?)

    // Called when conversation did not start 
    // even when Alli.event was called.
    func onConversationNotStarted(_ view: WKWebView!, userId: String, placement: String, context: Any?)

    // Called when user has closed the chat 
    // window or Alli.close() is called.
    func onConversationStopped(_ view: WKWebView!, userId: String, placement: String, context: Any?)

    func onError(_ view: WKWebView!, errorCode: AlliErrorCode, userId:String?, placement:String?, context:Any?)
  }
				
			

Step 8: 다른 앱과 연결

Alli 에서 http 나 https 로의 링크는 고객의 기본 브라우저를 실행시킵니다. 다른 앱으로의 링크를 추가하고 싶다면 AlliEventHandler 에서 handleUrlLoading 메소드로 구현합니다.

				
					func handleUrlLoading(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    let strUrl = navigationAction.request.url!.absoluteString
    if(<condition>) {
        UIApplication.shared.open(URL(string: strUrl)!, options: [:], completionHandler: nil)
        decisionHandler(.allow)
    }
    else {
        decisionHandler(.cancel)
    }
}
				
			

예를 들어 아래와 같이 애플 지도를 실행할 수 있습니다.

				
					let strUrl = "http://maps.apple.com/?q=seoul"