Guides

네이티브 연동

Suggest Edits

SauceLive_Android는 Android 애플리케이션 내에서 웹 콘텐츠를 향상시키기 위해 설계된 Android SDK입니다. JavaScript 지원, PIP(화면 속 화면) 모드 지원 및 웹 콘텐츠 상호 작용에 대한 다양한 콜백을 제공합니다.

시스템 요구 사항

  • Android SDK 26
  • Android Studio

설치

SauceLive_Android를 Android 프로젝트에 통합하려면, build.gradle 파일에 다음 종속성을 추가하세요:

dependencies {
    implementation 'com.github.mobidoo-official:SauceLive_Android:1.0.2'
}

root build.gradle 파일의 repositories 끝에 다음 내용을 추가하세요

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    mavenCentral()
    maven { url 'https://jitpack.io' }
  }
}

Player 사용 방법

기본 설정 방법

  1. SauceLiveView 초기화하고, 레이아웃 XML 파일에 SauceLiveView를 추가합니다.
<com.mobidoo.saucelive.SauceLiveView
    android:id="@+id/sauceLiveView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Activity 또는 Fragment에서 SauceLiveView를 초기화합니다.
val sauceLiveView: SauceLiveView = findViewById(R.id.sauceLiveView)
sauceLiveView.setInit("your broadcastId") 
sauceLiveView.load()
  1. 콜백을 구현합니다.

사용자 상호 작용 및 웹 콘텐츠 이벤트를 처리하기 위해 다양한 콜백을 구현합니다:

SauceLive.openPipActivity(
    context = this,
    broadcastId = "your broadcast id",
    pip = true,
    accessToken = "회원 연동을 위한 JWT 토큰",
    member = "회원 연동을 위한 Member Object"
    onEnter = { /* 라이브 입장 시 실행할 작업 */ },
    onMoveExit = { /* 라이브 종료 버튼 클릭 시 실행할 작업 */ },
    onMoveLogin = { /* 로그인 시도 시 실행할 작업 */ },
    onShare = { message -> /* 공유하기 시 실행할 작업 */ },
    onPictureInPicture = { /* PIP 모드 활성화 시 실행할 작업 */ },
    onMoveBanner = { message -> /* 배너 클릭 시 실행할 작업 */ },
    onWebviewReloading = { message -> /* 웹뷰 리로딩 시 실행할 작업 */ },
    onMoveReward = { message -> /* 리워드 시 실행할 작업 */ },
    onMoveProduct = { message -> /* 제품 이동 시 실행할 작업 */ },
    onPipModeOn = {/* PIP 모드 실행 시 실행할 작업 */},
    onPipModeOff = {/* PIP 모드 종료 시 실행할 작업  */}
)

sauceLiveView.setOnEnterListener { /* 라이브 입장 시 실행할 작업 */ }
sauceLiveView.setOnMoveExitListener { /* 라이브 종료 버튼 클릭 시 실행할 작업 */ }
sauceLiveView.setOnMoveLoginListener { /* 로그인 버튼 클릭 시 실행할 작업 */ }
sauceLiveView.setOnShareListener { message ->  /* 공유 버튼 클릭 시 실행할 작업 */ }
sauceLiveView.setOnPictureInPictureListener { /* PIP 버튼 클릭 시 실행할 작업 */ }
sauceLiveView.setOnMoveBannerListener { message -> /* 배너 클릭 시 실행할 작업 */ }
sauceLiveView.setOnWebviewReloadingListener { message -> /* 웹뷰 리로딩 시 실행할 작업 */ }
sauceLiveView.setOnMoveRewardListener { message -> /* 리워드 완료 버튼 시 실행할 작업 */ }
sauceLiveView.setOnMoveProductListener { message -> /* 상품 클릭 시 실행할 작업 */ }

*URL 구성

📘

https://player.sauceflex.com/broadcast/{BroadcastIdx}?accessToken={생성된accessToken}

참고

그 밖의 기능

PIP 모드

PIP 모드를 지원하기 위해 Activity에서 PIP 모드 변경을 처리합니다.

override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode)
    if (isInPictureInPictureMode) {
        // 액티비티가 PIP 모드에 있습니다.
    } else {
        // 액티비티가 PIP 모드에서 나왔습니다.
    }
}

PIP 액티비티 열기

SauceLive 클래스를 사용하여 PIP 모드에서 직접 웹 콘텐츠를 열 수 있습니다.

SauceLive.openPipActivity(context, "your broadcast id", true)

회원 연동

  • 사용자 정보를 직접 입력하여 플레이어에서 회원 로그인 및 채팅서비스를 이용할 수 있습니다.
    (callback에서 SauceLiveView를 load() 해주어야합니다.)
sauceLiveView.setMemberObject(Member("memberId", "nickName", "age", "gender", memberType), object :  
                MemberObjectCallback {  
                override fun onSuccess() {  
                    YourSauceView.load()  
                }  
            override fun onError(error: String?) {  
                YourSauceView.load()  
            }  
        })

sauceLiveView.setMemberToken("your user access token")
sauceLiveView.load()
  • 저장된 토큰 가져오기
    setMemberObject, setMemberToken 호출에서 저장된 토큰을 가져옵니다.
    저장된 토큰이 없을 경우 null을 반환합니다.
sauceLiveView.getMemberToekn()
  • 토큰 제거하기
sauceLiveView.removeAccessToken()

결제 트래킹 연동

  • 결제 트래킹 등록
SauceLive.createPaymentTracker(orderCallBackId: String,
            orderId: String,
            payClickTime: String,
            productQuantity: String,
            amount: String,
            memberId: String,
            callback: PaymentTrackerCallback)
  • 결제 트래킹 복수 등록
SauceLive.createPaymentListTracker(payments: List<PaymentData>,
            callback: PaymentTrackerCallback)
  • 결제 트래킹 수정
SauceLive.updatePaymentTracker(orderCallBackId: String,
            orderId: String,
            findProductQuantity: String,
            findAmount: String,
            updateProductQuantity: String,
            updateAmount: String,
            callback: PaymentTrackerCallback)
  • 결제 트래킹 삭제
SauceLive.deletePaymentTracker(orderCallBackId: String,
            orderId: String,
            payCancelTime: String,
            callback: PaymentTrackerCallback)

이벤트 처리

SDK를 사용하면 웹 콘텐츠로부터 전달받은 메시지를 JSON 형태로 처리할 수 있습니다. 각 메시지의data\ 필드는 message.body 을 통해 정보를 확인할 수 있으며, 이벤트의 종류는 다음과 같습니다

라이브 입장

  • 페이지 진입 시 자동으로 호출됩니다.
  • 이벤트 데이터: 
    {
    "params": null
}

라이브 종료

  • 이벤트 데이터: 
    {
    "params": null
}

로그인 시도

  • 이벤트 데이터: 
    {
    "params": null
}

상품 클릭

  • 상품 상세 정보 페이지로 이동합니다.
  • 이벤트 데이터: 
    {
    "params": {
        "linkUrl": "String | null", // 상품 상세 정보의 URL
        "broadcastIdx": "String"    // 방송 번호
    }
}

공유하기

  • 이벤트 데이터: 
    {
    "params": {
        "linkUrl": "String", // 공유된 주소
        "shortUrl": "String" // short url
    }
}

배너 클릭

  • 배너에 등록된 URL로 이동합니다.
  • 이벤트 데이터: 
    {
    "params": {
        "bannerId": "String", // 배너 고유 아이디
        "linkUrl": "String", // 배너에 등록된 URL
        "broadcastIdx": "String" // 방송 번호
    }
}

이러한 메시지 처리 방식을 통해 개발자는 웹 콘텐츠와의 상호작용을 통해 얻은 데이터를 앱 내에서 유용하게 활용할 수 있습니다.


Collection 사용 방법

기본 설정 방법

  1. SauceLiveCollection 초기화하고, 레이아웃 XML 파일에 SauceLiveCollection를 추가합니다.
<com.mobidoo.saucelive.SauceLiveCollection
    android:id="@+id/sauceCollectionView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Activity 또는 Fragment에서 SauceLiveCollection를 초기화합니다.
val sauceCollectionView: SauceLiveCollection = findViewById(R.id.sauceCollectionView)
sauceCollectionView.setInit("your partner Id", SauceLiveCollectionType) 
sauceCollectionView.load()
  1. 콜백을 구현합니다.

사용자 상호 작용 및 웹 콘텐츠 이벤트를 처리하기 위해 다양한 콜백을 구현합니다:

sauceCollectionView.setOnMoveTopBanner { message -> /* 탑 배너 클릭시 */ }
sauceCollectionView.setOnMoveContentBanner { message -> /* 컨텐츠 배너 클릭시 */ }
sauceCollectionView.setOnMoveBroadcast { message -> /* 방송 클릭시 */ }
sauceCollectionView.setOnMoveProduct { message -> /* 상품 클릭시 */ }
sauceCollectionView.setOnClickCuration { message -> /* 큐레이션 클릭시 */ }
sauceCollectionView.setOnApplyForNotification { message -> /* 알림 등록시 */ }
sauceCollectionView.setOnCancelForNotification { message -> /* 알림 등록 취소시 */ }

회원 연동

사용자 정보를 직접 입력하여 콜렉션에서 회원 로그인 및 채팅서비스를 이용할 수 있습니다.
(callback에서 SauceLiveCollection를 load() 해주어야합니다.)

  • 사용자 정보를 직접 입력하여 플레이어에서 회원 로그인 및 채팅서비스를 이용할 수 있습니다.
    (callback에서 SauceLiveView를 load() 해주어야합니다.)
sauceCollectionView.setMemberObject(Member("memberId", "nickName", "age", "gender", memberType), object :  
                MemberObjectCallback {  
                override fun onSuccess() {
                    val token = YourCollectionView.getMemberToekn()
                    YourCollectionView.setMemberToken(token)
                    // 다른 Collection View가 동일한 화면에 있을 경우
                    AnotherCollectionView.setMemberToken(token)
                }  
            override fun onError(error: String?) {  
                YourCollectionView.load()
                // 다른 Collection View가 동일한 화면에 있을 경우
                AnotherCollectionView.load()
            }  
        })

sauceCollectionView.setMemberToken("your user access token")
sauceCollectionView.load()
  • 저장된 토큰 가져오기
    setMemberObject, setMemberToken 호출에서 저장된 토큰을 가져옵니다.
    저장된 토큰이 없을 경우 null을 반환합니다.
sauceCollectionView.getMemberToekn()
  • 토큰 제거하기
sauceCollectionView.removeAccessToken()

Updated 4 days ago