네이티브 연동

인쇄

네이티브 연동

인쇄

Article Summary

Share feedback

Thanks for sharing your feedback!

숏폼 연동 - Native

[Step 1] 라이브러리 추가

build.gradle에 아래 코드를 추가하세요. app/build.gradle에 통합된 라이브러리나 분할된 라이브러리를 추가하세요.

통합된 라이브러리

dependencies {
    def shoplive_sdk_version = "1.5.9"
    
    // Shoplive combined packaging
    implementation "cloud.shoplive:shoplive-sdk-all:$shoplive_sdk_version" // live + short-form
}

분할된 라이브러리

dependencies {
    def shoplive_sdk_version = "1.5.9"
    def your_exoplayer_version = "2.19.1"
    def your_media3_version = "1.1.1"
    def shoplive_exoplayer_version = your_exoplayer_version + "." + "8"
    def shoplive_media3_version = your_media3_version + "." + "8"
    
    // Shoplive split packaging
    implementation "cloud.shoplive:shoplive-common:$shoplive_sdk_version" // must required
    implementation "cloud.shoplive:shoplive-exoplayer:$shoplive_exoplayer_version" // must required
    // When using media3. Exoplayer will be deprecated soon.
    // https://developer.android.com/guide/topics/media/media3/getting-started/migration-guide
    // implementation "cloud.shoplive:shoplive-media3:$shoplive_media3_version" 
    implementation "cloud.shoplive:shoplive-network:$shoplive_sdk_version" // must required
  
    implementation "cloud.shoplive:shoplive-short-form:$shoplive_sdk_version" // for short-form player
  
    implementation "cloud.shoplive:shoplive-sdk-core:$shoplive_sdk_version" // for live player
}

Proguard Rule 추가

R8 Build를 하면 난독화 문제가 발생할 수 있습니다. 아래의 내용을 추가해주세요.

-keep public class cloud.shoplive.** { *; }
-dontwarn cloud.shoplive.**
-keep class org.json.** { *; }

[Step 2] AccessKey 적용

ShopLiveCommon.setAccessKey("your accessKey")

Access Key
Access key 와 secret key는 샵라이브 담당자로부터 제공받을 수 있습니다.

[Step 3] 네이티브 컬렉션 적용

원하는 형태의 숏폼 컬렉션을 적용합니다.
(영상의 기본 비율은 9:16입니다. 고객사가 원하는 너비, 높이를 유연하게 적용할 수 있어 고객사가 원하는 대로 Customizing 가능합니다.)

ShopLiveShortformCardTypeView - 세로 스크롤 레이아웃(격자형 목록 Large)

세로 스크롤 레이아웃(격자형 목록 Large) 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformCardTypeView 를 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformCardTypeView
    android:id="@+id/shopLiveShortformCardTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

ShopLiveShortformVerticalTypeView - 세로 스크롤 레이아웃(격자형 목록 Small)

세로 스크롤 레이아웃(격자형 목록 Large) 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformVerticalTypeView 를 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformVerticalTypeView
    android:id="@+id/shopLiveShortformVerticalTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

ShopLiveShortformHorizontalTypeView - 가로 스크롤 레이아웃

가로 스크롤 레이아웃 컬렉션을 노출할 화면에 다음과 같이 구성합니다.

고객사 xml에 ShopLiveShortformHorizontalTypeView 를 추가하세요.

<cloud.shoplive.sdk.shorts.ShopLiveShortformHorizontalTypeView
    android:id="@+id/shortsHorizontalType1View"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

View 속성 설정

목록 view를 구성하고 view의 public function으로 속성을 설정할 수 있습니다.

View 활성화

view의 속성을 구성하고 submit() 함수를 호출하여 데이터를 로드합니다.

submit() 함수를 호출하세요
submit() 함수를 호출하지 않으면 데이터가 로드되지 않아 화면에 목록 view가 구성되지 않습니다.

yourView.submit()

컬렉션 내 상품 카드 레이아웃 설정

카드 레이아웃을 설정합니다. (기본값:CARD_TYPE1)

CARD_TYPE0 : 컬렉션에 상품 카드 미노출
CARD_TYPE1 : 컬렉션에 카드형 상품 카드 노출
CARD_TYPE2 : 컬렉션에 원형 상품 카드 노출

// CARD_TYPE0, CARD_TYPE1, CARD_TYPE2
yourView.setViewType(type: ShopLiveShortform.CardViewType)

자세한 예시는 아래 내용을 참고해주세요.

TYPE0

TYPE1

TYPE2

태그 기반 컬렉션

HashTag 단위로 검색을 할 수 있습니다.

ShopLiveShortformTagSearchOperator.OR: HashTag 통합검색(기본값)
ShopLiveShortformTagSearchOperator.AND: HashTag 교차검색

yourView.setHashTags(hashTags: List<String>?, tagSearchOperator: ShopLiveShortformTagSearchOperator)

브랜드 기반 컬렉션

브랜드 단위로 검색을 할 수 있습니다. (제목, 식별자 둘 다 검색)

yourView.setBrands(brands: List<String>?)

무작위로 컬렉션 데이터 보여주기

무작위 혹은 최신순으로 보이게 설정합니다.

enableShuffle() : 숏폼을 무작위로 보여줍니다.
disableShuffle(): 숏폼을 최신 시간순으로 보여줍니다.

yourView.enableShuffle() 
yourView.disableShuffle()

스냅 효과 설정

스냅 효과를 사용하여 개별 콘텐츠 강조 여부를 설정합니다.

enableSnap(): 스냅 효과 설정
disableSnap(): 스냅 효과 해제 (기본값)

yourView.enableSnap() 
yourView.disableSnap()

영상 재생 범위(가로 스크롤 전용)

가로 스크롤에서 어떠한 view를 재생할 건지 선택할 수 있습니다.

PlayableType.First: 가시 영역의 가장 왼쪽 view만 재생 (기본값)
PlayableType.Center: 가시 영역의 중앙 view만 재생
PlayableType.All: 가시 영역에 보이는 모든 view들을 재생

yourView.setPlayableType(type: ShopLiveShortform.PlayableType)

영상 자동 재생 효과 설정

view의 영상을 자동을 재생할지 설정합니다.

enablePlayVideos(): 영상을 재생한다. (기본값)
disablePlayVideos(): 영상 재생을 해제한다.

yourView.enablePlayVideos()
yourView.disablePlayVideos()

응용하기
Pager 구조에서 탭 간 이동 시, 현재 재생 중인 뷰에서 disablePlayVideos()를 호출하여 메모리를 해제하고, 되돌아갈 때 해당 뷰에 enablePlayVideos()를 다시 호출하면 클라이언트 앱의 효과적인 메모리 관리가 가능합니다.

최상단으로 스크롤 하기

최상단으로 스크롤 합니다.

yourView.scrollToTop()

와이파이 환경에서만 영상 재생하도록 설정

와이파이 환경에서만 재생이 가능하게 할지 설정합니다.

true: wifi에서만 재생
false: 모든 네트워크에서 재생 (기본값)

yourView.setPlayOnlyWifi(isEnabled : Boolean)

아이템 간격 설정

ViewHolder 들의 간격을 custom 설정합니다. 기본 간격은 default 설정되어 있습니다.

ShopLiveShortformCardTypeView
- top: 32dp, bottom:32 dp, left:32dp, right:32dp
ShopLiveShortformVerticalTypeView
- top: 16dp, bottom:16dp, left:16dp, right:16dp
- ViewHolder 사이 간격 8dp
ShopLiveShortformHorizontalTypeView
- top: 16dp, bottom:16dp, left:16dp, right:16dp
- ViewHolder 사이 간격 8dp

yourView.addItemDecoration(object : ItemDecoration() {
	override fun getItemOffsets(
		outRect: Rect,
		view: View,
		parent: RecyclerView,
		state: RecyclerView.State
	) {
    super.getItemOffsets(outRect, view, parent, state)
    parent.getChildAdapterPosition(view)
    val itemCount = parent.adapter?.itemCount ?: 0
    if (parent.getChildAdapterPosition(view) == 0) {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 16.toDp(view.context).toInt()
        outRect.right = 4.toDp(view.context).toInt()
    } else if (parent.getChildAdapterPosition(view) == itemCount - 1) {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 4.toDp(view.context).toInt()
        outRect.right = 16.toDp(view.context).toInt()
    } else {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 4.toDp(view.context).toInt()
        outRect.right = 4.toDp(view.context).toInt()
    }
	}
})

fun Int.toDp(context: Context): Float = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    this.toFloat(),
    context.resources.displayMetrics
)

조회수 숨김 처리

상단에 있는 영상을 본 횟수를 나타내는 view를 보여주게 할지 설정합니다. (기본값:visible)

yourView.setVisibleViewCount(isVisible : Boolean)

상품 개수 숨김 처리

상품의 개수를 나타내는 view를 보여주게 할지 설정합니다. (기본값:visible)

yourView.setVisibleProductCount(isVisible : Boolean)

브랜드 숨김 처리

브랜드를 보여주게 할지 설정합니다. (기본값:visible)

yourView.setVisibleBrand(isVisible : Boolean)

제목 숨김 처리

제목을 보여주게 할지 설정합니다. (기본값:visible)

yourView.setVisibleTitle(isVisible : Boolean)

설명 숨김 처리

내용을 보여주게 할지 설정합니다. (기본값:visible)

yourView.setVisibleDescription(isVisible : Boolean)

영상 radius 값 설정

영상의 Radius 값을 설정합니다.

ShopLiveShortformCardTypeView: 16dp
ShopLiveShortformVerticalTypeView: 12dp
ShopLiveShortformHorizontalTypeView: 12dp

yourView.setRadius(radius : Float)

Placeholder 색상 설정

Placeholder 값을 설정합니다. (기본값:CBCBCB)

yourView.setCardBackgroundColor(@ColorInt colorInt: Int)

진입경로 통계 추가

진입 경로 통계를 측정할 수 있는 파라미터를 추가합니다.

yourView.setReferrer(referrer : String?)

핸들러 설정하기

view에서 발생한 알림을 클라이언트에서 Handler 함수를 통해 전달받고 필요한 처리를 합니다.

yourView.handler = object : ShopLiveShortformBaseTypeHandler() {
	override fun onError(error: ShopLiveCommonError) {
		// Do something
	}
}

What's Next

하이브리드 연동

숏폼 연동 - Native