네이티브 연동
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 사용 방법
기본 설정 방법
- SauceLiveView 초기화하고, 레이아웃 XML 파일에
SauceLiveView
를 추가합니다.
<com.mobidoo.saucelive.SauceLiveView
android:id="@+id/sauceLiveView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
- Activity 또는 Fragment에서 SauceLiveView를 초기화합니다.
val sauceLiveView: SauceLiveView = findViewById(R.id.sauceLiveView)
sauceLiveView.setInit("your broadcastId")
sauceLiveView.load()
- 콜백을 구현합니다.
사용자 상호 작용 및 웹 콘텐츠 이벤트를 처리하기 위해 다양한 콜백을 구현합니다:
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()
}
})
- JWT 토큰 사용 (JWT 생성 가이드)
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 사용 방법
기본 설정 방법
- SauceLiveCollection 초기화하고, 레이아웃 XML 파일에
SauceLiveCollection
를 추가합니다.
<com.mobidoo.saucelive.SauceLiveCollection
android:id="@+id/sauceCollectionView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
- Activity 또는 Fragment에서 SauceLiveCollection를 초기화합니다.
val sauceCollectionView: SauceLiveCollection = findViewById(R.id.sauceCollectionView)
sauceCollectionView.setInit("your partner Id", SauceLiveCollectionType)
sauceCollectionView.load()
- 콜백을 구현합니다.
사용자 상호 작용 및 웹 콘텐츠 이벤트를 처리하기 위해 다양한 콜백을 구현합니다:
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()
}
})
- JWT 토큰 사용 (JWT 생성 가이드)
sauceCollectionView.setMemberToken("your user access token")
sauceCollectionView.load()
- 저장된 토큰 가져오기
setMemberObject, setMemberToken 호출에서 저장된 토큰을 가져옵니다.
저장된 토큰이 없을 경우 null을 반환합니다.
sauceCollectionView.getMemberToekn()
- 토큰 제거하기
sauceCollectionView.removeAccessToken()
Updated 6 months ago