Guides

하이브리드 연동

Suggest Edits

SauceClip_Android는 Android 애플리케이션 내에서 웹 콘텐츠를 향상시키기 위해 설계된 Android SDK입니다. 웹 콘텐츠 상호 작용에 대한 다양한 콜백을 제공합니다.

시스템 요구 사항

  • Android SDK 버전 24
  • Android Studio

설치

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

dependencies {
    implementation 'com.github.mobidoo-official:SauceClip_Android:1.0.2-hotfix-1'
}

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

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

사용 방법

기본 설정 방법

  1. SauceClipView 초기화하고, 레이아웃 XML 파일에 SauceClipView를 추가합니다.
<com.mobidoo.sauceclip.SauceClipView
    android:id="@+id/sauceClipView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Activity 또는 Fragment에서 SauceClipView를 초기화합니다.
val sauceClipView: SauceClipView = findViewById(R.id.sauceClipView)
sauceClipView.setInit("your parter id","your clip id", "your curation id", "your curation id (optional)")// curation id 옵셔널
sauceClipView.load()
  1. 콜백을 구현합니다.

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

// 소스클립 플레이어 액티비티
SauceClip.openClipActivity(
    context = this,
    partnerId = "your partner id",
    clipId = "your clip id",
    curationId = "your curation id (optional)",
    openProductActivity = true, // 상품 페이지 activity 열기 여부,
    stageMode = false, // stage mode 여부,
    onEnter = { SauceClipActivity -> /* 클립 입장 시 실행할 작업 */ },
    onMoveExit = { SauceClipActivity -> /* 클립 종료 버튼 클릭 시 실행할 작업 */ },
    onShare = { SauceShareInfo -> /* 공유하기 시 실행할 작업 */ },
    onMoveProduct = { SauceProductInfo, SauceClipActivity -> /* 상품 클릭 시 실행할 작업 */ },
    onMoveCart = { SauceClipActivity -> /* 장바구니 이동 클릭 시 실행할 작업 */ },
    onAddCart = { SauceCartInfo, SauceClipActivity -> /* 장바구니 클릭 시 실행할 작업 */ },
    onError = { SauceErrorInfo -> /* 에러 발생 시 실행할 작업 */ },
  )

// 소스클립 플레이어 뷰
sauceClipView.setOnEnterListener { /* 클립 입장 시 실행할 작업 */ }
sauceClipView.setOnMoveExitListener { /* 클립 종료 버튼 클릭 시 실행할 작업 */ }
sauceClipView.setOnShareListener { SauceShareInfo ->  /* 공유 버튼 클릭 시 실행할 작업 */ }
sauceClipView.setOnMoveProductListener { SauceProductInfo -> /* 상품 클릭 시 실행할 작업 */ }
sauceClipView.setOnMoveCartListener { /* 장바구니 이동 클릭 시 실행할 작업 */ }
sauceClipView.setOnAddCartListener { SauceCartInfo -> /* 장바구니 클릭 시 실행할 작업 */ }
sauceClipView.setOnErrorListener{ SauceErrorInfo -> /* 에러 발생 시 실행할 작업 */ }

// 소스클립 전시
saucecurationView.setOnMoveBroadcast { SauceBroadcastInfo -> /* 전시 클릭 시 실행할 작업 */ }
saucecurationView.setOnCollectionError { SauceErrorInfo -> /* 에러 발생 시 실행할 작업 */ }

Clip Activity

  • SauceClip.openClipActivity(
    context = this,
    partnerId = "your partner id",
    clipId = "your clip id",
    curationId = "your curation id (optional)",
    openProductActivity = true, // 상품 페이지 activity 열기 여부,
    stageMode = false, // stage mode 여부,
    onEnter = { SauceClipActivity -> /* 클립 입장 시 실행할 작업 */ },
    onMoveExit = { SauceClipActivity -> /* 클립 종료 버튼 클릭 시 실행할 작업 */ },
    onShare = { SauceShareInfo -> /* 공유하기 시 실행할 작업 */ },
    onMoveProduct = { SauceProductInfo, SauceClipActivity -> /* 상품 클릭 시 실행할 작업 */ },
    onMoveCart = { SauceCartInfo, SauceClipActivity -> /* 장바구니 클릭 시 실행할 작업 */ },
  )
  • 클립 플레이어 액티비티 PIP (Android SDK 버전 26 이상) 
      //ex
  SauceClip.openClipActivity(
    this,
    message.partnerId,
    "${message.clipId}",
    "${message.curationId}",
    true,
    stageMode,
    {
			// pip 전환
      it.pipOn()
    },
    { it.finish() },
    null,
    { productInfo, clipActivity ->
			// 상품 클릭시 pip 전환
      clipActivity.pipOn()
    },
    { cartInfo, clipActivity -> },
    { errorInfo -> })

Curation View

📘

세로형과 카드형은 지원 예정

  • 전시 뷰 (xml) 
    <com.mobidoo.sauceclip.SauceCurationView
        android:id="@+id/curation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
  • 전시 뷰 
    YourCurationView.setInit("your partner id", "your curation id")
YourCurationView.load()
  • 전시 클립 좌우 여백 
    // 전시 클립 영상 좌우 여백
YourCurationView.setHorizontalPadding(10) // default 0
YourCurationView.load()
  • 전시 클립 영상 내 조회 수 노출 
    // 전시 클립 영상 내 조회 수 노출 여부
YourCurationView.setPvVisibility(false) // default true
YourCurationView.load()
  • 프리뷰 자동 재생 (default : false) 
    curationView.setPreviewAutoplay(true) // default false
curationView.load()


클립 상품페이지(Activity) 이동

  • 상품 클릭시 별도의 구현없이 상품페이지로 이동합니다. 
    YourClipView.setProductActivity(true)

검증 및 테스트를 위한 Stage Mode

  • 운영과 스테이지 환경을 구분할 수 있습니다.

    YourClipView.setInit("your parter id","your clip id")
// stage mode 여부
YourClipView.setStageMode(true/false)
YourClipView.load()

YourCurationView.setInit("your partner id", "your curation id")
// stage mode 여부
YourCurationView.setStageMode(true/false)
YourCurationView.load()

(ex) 소스클립 전시, 플레이어 사용 예

// 전시뷰
YourCurationView.setInit("your partner id", "your curation id")
// stage mode 여부
YourCurationView.setStageMode(true/false)
YourCurationView.load()
YourCurationView.setOnMoveBroadcast { message ->
  // 전시뷰 카드 클릭시 클립 액티비티 실행
  SauceClip.openClipActivity(
    this,
    message.partnerId,
    "${message.clipId}",
    "${message.curationId}",
  )
}

Updated about 1 month ago