모바일 SDK

Contact Center AI Platform (CCAI Platform) 모바일 SDK에는 Android SDK와 iOS SDK가 포함됩니다. 이러한 SDK를 사용하면 iOS 또는 Android 모바일 앱 내에서 고객에게 음성 및 채팅 지원을 직접 제공할 수 있습니다.

Android SDK 가이드 또는 iOS SDK 가이드에 설명된 대로 모바일 SDK를 모바일 앱에 통합하는 등 다양한 방법으로 CCAI Platform과 연동되도록 모바일 앱을 설정할 수 있습니다. Flutter 또는 React Native를 사용하여 모바일 SDK를 모바일 앱에 통합할 수도 있습니다.

Flutter를 사용한 통합

이 섹션에서는 Flutter를 사용하여 모바일 SDK를 모바일 앱에 통합하는 초기 단계를 설명합니다. 이 섹션의 단계는 Android SDK와 iOS SDK 모두 동일합니다. 이 단계를 완료한 후 모바일 플랫폼에 따라 Android SDK 또는 iOS SDK에 관한 안내를 사용하여 계속 진행할 수 있습니다.

모바일 SDK를 모바일 앱에 통합하는 데 Flutter가 필요하지는 않습니다. 다음 안내에 따라 통합할 수도 있습니다.

• Android SDK 가이드

• iOS SDK 가이드

• React Native를 사용하여 통합

로컬에서 샘플 앱 실행

샘플 앱을 실행하려면 다음이 필요합니다.

• Flutter: 크로스 플랫폼 앱 빌드를 위한 프레임워크

• Android 스튜디오: Flutter 및 Android 앱 개발을 위한 통합 개발 환경입니다.

• Xcode: iOS 앱 개발을 위한 통합 개발 환경입니다.

• Cocoapods: iOS 프로젝트의 종속 항목 관리자입니다.

샘플 앱을 로컬에서 실행하려면 다음 단계를 따르세요.

1. Flutter 예시 ZIP 파일을 다운로드하고 압축을 풉니다.

2. 터미널에서 Flutter 예시 디렉터리로 이동합니다.

3. 터미널에 다음 코드를 입력합니다.

   cd example
   cp .env.example .env
   

4. .env 파일에 환경 변수 값을 입력합니다(예: API_KEY=your_api_key). 따옴표는 필요하지 않습니다.

5. 종속 항목을 설치하려면 터미널에 flutter pub get를 입력합니다.

6. 회사 정보를 업데이트하려면 android/app/src/main/res/values/strings.xml로 이동하여 ujet_company_key, ujet_subdomain, ujet_company_url를 업데이트합니다.

7. 플랫폼에 따라 Android Emulator 또는 iOS 시뮬레이터를 실행합니다.

8. 터미널에 flutter run을 입력합니다.

프로젝트로 CCAI Platform 모듈 가져오기

CCAI Platform 모듈을 프로젝트로 가져오려면 다음이 필요합니다.

• JWT 서명 API 엔드포인트입니다. 자세한 내용은 SDK 최종 사용자 인증을 참고하세요.

• Android의 경우 프로젝트의 배포 대상이 iOS 13.0 이상이어야 합니다.

• iOS의 경우 프로젝트의 minSdkVersion이 21 이상이어야 합니다.

CCAI Platform 모듈을 프로젝트로 가져오려면 다음 단계를 따르세요.

1. example/lib/ujet 디렉터리의 콘텐츠를 복사하여 Flutter 프로젝트의 lib 디렉터리에 붙여넣습니다.

2. example/android/app/src/main/kotlin/co/ujet/flutter_example_app로 이동하여 MainActivity 클래스가 있는 Flutter 프로젝트에 다음 파일을 복사합니다.

   • UJETModule.kt

   • Application.kt

   • firebase\MyFirebaseMessagingService.kt

   • firebase\FirebaseTokenManager.kt

   중요: 프로젝트의 패키지 구조에 따라 이러한 파일의 상단에 있는 패키지 선언을 변경해야 합니다.

3. Xcode를 열고 example/ios/Runner/UJETModule.swift를 프로젝트로 드래그합니다.

4. example/lib/ujet/ujet_module.dart를 열고 적절한 최종 사용자 정보를 반환하도록 _getUserData 메서드를 수정합니다. 다음 코드 샘플을 참고하세요.

   static Future<Map<String, String?>> _getUserData() async {
   
   String? name = "John Doe"; // end-user name
   String? identifier = "id1234"; // end user identifier
   String? email = "[e-mail]"; // end user email
   String? phone = "[phone]"; // end user phone
   
   return {
     "name": name,
     "identifier": identifier,
     "email": email,
     "phone": phone
     };
   }
   

5. server_api.dart에서 signPayload를 구현하여 서버 API에서 서명된 JWT 토큰을 가져옵니다. 자세한 내용은 SDK 최종 사용자 인증을 참고하세요.

초기화 및 시작

초기화하고 시작하려면 터미널에 다음 코드를 입력합니다.

 await UJET.init(key: 'your_ujet_key', baseUrl: 'your_ujet_base_url');
 await UJET.start(UjetStartOptions(skipSplashScreen: true));

알려진 문제

다음은 Flutter를 사용하여 모바일 SDK를 모바일 앱에 통합할 때 발생하는 알려진 문제입니다.

• 문제: 스크린샷 스마트 작업을 사용하여 스크린샷을 캡처할 수 없습니다.

  • 조치: Google에서 이 문제를 해결하기 위해 노력하고 있습니다.

• 문제: 공동 탐색 세션 중에 상담사 측에서 공동 탐색 화면이 프로젝션되지 않습니다 (iOS만 해당).

  • 조치: iOS 기기에서 임펠러 엔진을 사용 중지하는 것이 좋습니다. 임펠러 엔진을 사용 중지하려면 다음 단계를 따르세요.

    1. info.plist 파일을 엽니다.

    2. 다음 코드 샘플과 같이 FLTEnableImpeller 키를 false로 설정합니다.

       <key>FLTEnableImpeller</key>
       <false/>
       

통합 계속하기

Flutter를 사용하여 계속 통합하려면 모바일 플랫폼에 따라 다음 페이지 중 하나를 참고하세요.

• Android용 Flutter

• iOS용 Flutter

React Native를 사용한 통합

이 섹션에서는 React Native를 사용하여 모바일 SDK를 모바일 앱에 통합하는 초기 단계를 설명합니다. 이 섹션의 단계는 Android SDK와 iOS SDK 모두 동일합니다. 이 단계를 완료한 후 모바일 플랫폼에 따라 Android SDK 또는 iOS SDK에 관한 안내를 사용하여 계속 진행할 수 있습니다.

모바일 SDK를 모바일 앱에 통합하는 데 React Native가 필요하지 않습니다. 다음 안내에 따라 통합할 수도 있습니다.

• Android SDK 가이드

• iOS SDK 가이드

• Flutter를 사용하여 통합

로컬에서 샘플 앱 실행

샘플 앱을 로컬에서 실행하려면 다음 단계를 따르세요.

1. ujet-react-native-example.zip 샘플 앱을 다운로드하고 압축을 풉니다.

2. 추출된 폴더에서 README.md 파일을 열고 안내를 따릅니다.

로컬 서버에서 샘플 앱 실행

이전 절차에서 다운로드한 샘플 앱은 로컬 서버에서도 실행할 수 있습니다. 이를 위해 다음 단계를 따르세요.

1. React Native 예 ZIP 파일을 다운로드하고 압축을 풉니다.

2. 서버 샘플이 배포된 디렉터리에 액세스합니다.

3. 다음 명령어를 입력합니다.

   cd server
   cp .env.example .env
   Edit .env
   nvm use
   npm install
   npm start```
   

React Native 실행

React Native를 실행하려면 다음 단계를 따르세요.

1. 애플리케이션 디렉터리를 변경합니다.

2. 다음 명령어를 입력합니다.

   cd app
   nvm use
   npm install
   bundle install
   npx pod-install
   

3. 회사 정보를 업데이트합니다.

   1. src/screens/Home.tsx: UJET.initialize({})의 매개변수 업데이트

   2. android/app/src/main/res/values/strings.xml: ujet_company_key, ujet_subdomain, ujet_company_url 업데이트

4. npm start 명령어를 입력합니다.

5. Meteor 대화형 CLI 또는 원하는 IDE를 사용하여 iOS 또는 Android 모바일 앱을 실행합니다.

   참고: 명령어가 실패하면 시뮬레이터를 지정합니다(예: npm run ios -- --simulator="iPhone 15 Pro").

프로젝트로 CCAI Platform 모듈 가져오기

이 섹션에서는 CCAI Platform 모듈을 프로젝트로 가져오는 방법을 보여줍니다.

요구사항

JWT 서명 API 엔드포인트를 사용해야 합니다. 샘플 앱의 server/app.js 파일을 참고하거나 최종 사용자 인증을 참고하여 자세히 알아보세요.

절차

CCAI Platform 모듈을 프로젝트로 가져오려면 다음 단계를 따르세요.

1. 샘플 앱에서 다음 파일을 복사하여 적절한 위치에 프로젝트에 붙여넣습니다.

   1. app/src/native_modules/UJETInterfaces.ts
   2. app/src/native_modules/UJETNativeModule.ts
   3. app/ios/UJETModule.h
   4. app/ios/UJETModule.m
   5. app/android/src/main/java/com/sampleapp/UJETModule.kt

2. UJETNativeModule.ts 열기

   1. 다음 줄을 삭제합니다.

      import AsyncStorage from '@react-native-async-storage/async-storage';

   2. 정확한 최종 사용자 정보를 반환하도록 getUserData 함수를 수정합니다.

      async function getUserData({ name: anonymousName }: SignPayloadData): Promise<Object> {
        // fetch the end user information from your application
        return {
          name: 'John Doe',
          identifier: 'id1234',
          email: '[e-mail]',
          phone: '[phone]'
        }
      }
      

   3. 서명 엔드포인트를 가리키도록 SIGNING_BASE_URL을 업데이트합니다.

3. 다음 코드 샘플을 사용하여 초기화하고 시작합니다.

   import { UJET } from '../path/UJETNativeModule';
   
   UJET.initialize({
     key: 'your-key',
     baseUrl: 'your-base-url'
   });
   
   const startUJET = () => {
     UJET.start({
       skipSplashScreen: true
     });
   };
   

   • your-key를 회사 ID로 바꿉니다.
   • your-base-url를 CCAI Platform 호스트의 API 엔드포인트로 바꿉니다(예: https://ccaas-host.uc1.ccaiplatform.com/api/v2/).

통합 계속하기

React Native를 사용하여 계속 통합하려면 모바일 플랫폼에 따라 다음 페이지 중 하나를 참고하세요.

• Android용 React Native

• iOS용 React Native