네이티브 연동

인쇄

네이티브 연동

인쇄

Article Summary

Share feedback

Thanks for sharing your feedback!

숏폼 연동 - Native

[Step 1] 코드 설치

CocoaPods

Podfile에 아래 코드를 추가하세요.

source 'https://github.com/CocoaPods/Specs.git'

    # Match the Version with the Project's Minimum Supported Version
    # Shoplive iOS SDK requires iOS 11.0 or later.
    platform :ios, '11.0'
    use_frameworks!

    # Set the Project Target for Shoplive iOS SDK Installation
    target 'ShortformProj' do
        pod 'ShopliveShortformSDK', '1.5.8'
      	pod 'ShopliveSDKCommon', '1.5.8'
    end

Swift Package Manager

Package Dependencies 에 다음 내용을 추가하세요

dependencies: [
    .package(url: "https://github.com/shoplive/shortform-ios", .exact(from: "1.5.8")),
    .package(url: "https://github.com/shoplive/common-ios", .exact(from: "1.5.8"))
]

설치가 실패한다면 캐시를 지워주세요.
터미널에서 다음 커맨드를 실행하여, 캐시를 삭제해주세요.
rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm

[Step 2] AccessKey 적용

import ShopliveSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
      ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESSKEY") //required
      return true
    }
}

Access Key
Access key 와 secret key는 샵라이브 담당자를 통해 확인할 수 있습니다.

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

원하는 형태의 컬렉션을 적용하세요

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

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.CardTypeViewBuilder()
  
  lazy private var cardTypeView : UIView = {
    let cardTypeView = builder.build(cardViewType: .type1,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return cardTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(cardTypeView)
		//set constraints
    cardTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         cardTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         cardTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         cardTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         cardTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

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

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var verticalTypeView : UIView = {
    let verticalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .vertical,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return verticalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(verticalTypeView)
    //set constraints
    verticalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         verticalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         verticalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         verticalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         verticalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

ShopLiveShortformHorizontalTypeView - 가로 스크롤 레이아웃

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var horizontalTypeView : UIView = {
    let horizontalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .horizontal,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return horizontalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(horizontalTypeView)
    //set constraints
    horizontalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         horizontalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         horizontalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         horizontalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         horizontalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

View 속성 설정

목록 View를 구성할 때 builder를 통하여 다음과 같은 속성들을 설정할 수 있습니다.

View 활성화

builder를 통해 뷰를 구성하고 submit() 함수를 호출하여 데이터를 로드합니다.
(submit() 함수를 호출하지 않으면 데이터가 로드되지 않아 화면에 목록 View가 구성되지 않습니다.)

builder.submit()

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

카드 레이아웃을 설정합니다.

.type0 : 컬렉션에 상품 카드 미노출
.type1 : 컬렉션에 카드형 상품 카드 노출
.type2 : 컬렉션에 원형 상품 카드 노출

//.type0, .type1 , .type2
builder.setCardViewType(type : ShopLiveShortform.CardTypeView)

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

Type0

Type1

Type2

태그 기반 컬렉션

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

ShopLiveTagSearchOperator.OR : HashTag 통합 검색 (Default)
ShopLiveTagSearchOperator.AND : HashTag 교차 검색

builder.setHashTags(tags :[String]?, tagSearchOperator : ShopLiveTagSearchOperator?)

브랜드 기반 컬렉션

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

builder.setBrands(brands : [String]?)

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

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

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

builder.enableShuffle() 
builder.disableShuffle()

스냅 효과 설정

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

enableSnap(): 스냅 효과 설정
disableSnap(): 스냅 효과 해제 (Default)

builder.enableSnap() 
builder.disableSnap()

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

가로 스크롤 레이아웃에서 어떤 셀을 재생할지 설정합니다.

ShopLiveShortform.PlayableType.First: 가시 영역의 가장 왼쪽 셀만 재생 (Default)
ShopLiveShortform.PlayableType.Center: 가시 영역의 중앙 셀만 재생
ShopLiveShortform.PlayableType.All: 가시 영역의 모든 셀을 재생

builder.setPlayableType(type : ShopLiveShortform.PlayableType)

영상 자동 재생 설정

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

enablePlayVideos(): 영상 자동 재생 설정 (Default)
disablePlayVideos(): 영상 자동 재생 해제

builder.enablePlayVideos()
builder.disablePlayVideos()

최상단으로 스크롤 하기

페이지의 최상단으로 스크롤합니다.

builder.scrollToTop()

와이파이 환경에서만 재생 설정

와이파이 환경에서만 재생이 가능하도록 설정합니다.

true: 와이파이 환경에서만 재생
false: 모든 네트워크 환경에서 재생 (Default)

builder.setPlayOnlyWifi(isEnabled : Bool)

셀 간격 설정

셀의 간격을 설정합니다.

builder.setCellSpacing(spacing : CGFloat)

데이터 갱신

데이터를 갱신합니다.

builder.reloadItems()

조회수 숨김 처리

영상 조회 수를 위한 view의 노출 여부를 설정합니다. (Default: visible)

builder.setVisibleViewCount(isVisible : Bool)

상품 갯수 숨김 처리

상품 갯수를 위한 view의 노출 여부를 설정합니다. (Default: visible)

builder.setVisibleProductCount(isVisible : Bool)

브랜드 숨김 처리

브랜드를 위한 view의 노출 여부를 설정합니다. (Default: visible)

builder.setVisibleBrand(isVisible : Bool)

제목 숨김 처리

제목 노출 여부를 설정합니다. (Default: visible)

builder.setVisibleTitle(isVisible : Bool)

설명 숨김 처리

설명 노출 여부를 설정합니다. (Default: visible)

builder.setVisibleDescription(isVisible : Bool)

셀의 Corner Radius 설정

셀의 cornerRadius를 설정합니다. (Default:6px)

builder.setCellCornerRadius(radius : CGFloat)

셀의 placeholder 색상 설정

셀의 placeholder 값을 설정합니다. (Default: CBCBCB)

builder.setCellBackgroundColor(color: UIColor)

화면 회전 이벤트 전달

목록 view의 superview가 회전되면 builder?.notifyViewRotated() 함수를 호출하여 레이아웃을 다시 그릴 수 있습니다.

// ViewController, UIWindow가 회전하였을때 목록뷰에 화면 회전 이벤트를 전달
builder.notifyViewRotated()

ListViewDelegate 설정

ShopLiveShortformListViewDelegate 를 통해 해당 목록 뷰로부터 알림을 수신하고 처리할 수 있습니다.
ShopLiveShortformListViewDelegate 에는 다음 1가지의 함수로 구성되어 있습니다.

protocol ShopLiveShortformListViewDelegate : NSObject  {
    func onListViewError(error : Error)
}

//delegate 채택하기
builder.build(...listViewDelegate : self,...).getView()

에러 핸들링 함수

onListViewError(error: Error) 를 통하여 목록 view에서 발생한 에러를 핸들링할 수 있습니다.

class ViewController : ShopLiveShortformListViewDelegate { 
  func onListViewError(error: Error) { 
    // 목록뷰 Api Error 및 목록뷰의 avplayer error받아서 처리할 수 있습니다.
  }
}

What's Next

하이브리드 연동

숏폼 연동 - Native