iOS SDK 개발 가이드

이 가이드는 아래 내용들을 안내합니다.



▶︎ Shoplive Short-form iOS SDK 설치 요약

CocoaPods로 설치하기

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

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

    # Project에 설정된 최소 지원 버전과 동일하게 설정하세요. 
    # Shoplive iOS SDK는 iOS 11.0 이상을 지원합니다. iOS 11.0 미만으로 설정할 수 없습니다.
    platform: ios, '11.0'
    use_frameworks!

    # Shoplive iOS SDK를 설치할 Project Target을 설정하세요.
    target 'ShortformProj' do
        pod 'ShopliveShortformSDK', '1.4.0'
    end

Swift Package Manager로 설치하기

Package Dependencies 에 다음을 추가하세요.

https://github.com/shoplive/shortform-ios.git









❗️

설치가 실패한다면 캐시를 지워주세요.

터미널에서 다음의 커맨드를 실행하여, 캐시를 삭제해주세요.

rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm



하이브리드 연동하기

고객사 웹 UIViewController에 아래 코드를 추가하세요.

import ShopLiveShortformSDK

class CustomerViewController: UIViewController {
    ...
    override func viewDidLoad() {
        super.viewDidLoad()
        ShopLiveShortform.BridgeInterface.connect(webview) // Required
        ShopLiveShortform.ShortsReceiveInterface.setHandler(self) // Required
    }
    ...
}

extension CustomerViewController: ShopLiveShortformReceiveHandlerDelegate {
    func handleShare(shareUrl: String) {
        // Do something
    }
    
    func onError(error: Error) {
          // Do something
    }
    
    func onEvent(command: String, payload: String?) {
        // Do something
    }
}

ShopLiveShortform.BridgeInterface

Webview를 BridgeInterface 에 연결만으로 다음과 같은 기능이 제공됩니다.

  • 상품화면을 나가면 자동으로 preview를 종료합니다.
  • 숏폼 미리보기, 보기, 닫기가 동작합니다.

ShopLiveShortform.ShortsReceiveInterface

고객사 웹 UIViewController 에 ReceiveInterface 핸들러를 설정하면, 다음과 같은 callback 을 사용할 수 있습니다.

// 공유하기 버튼을 눌렀을 때, 공유 URL을 전달합니다.
func handleShare(shareUrl: String)

// 에러가 발생하면 에러를 전달합니다. 
func onError(error: Error)

// 숏폼에서 발생한 이벤트를 전달합니다.
func onEvent(command: String, payload: String?)
// Connect Webview to BridgeInterface 
ShopLiveShortform.BridgeInterface.connect(webview) // Required

네이티브 연동하기

Type1

좌측 - ShopLiveShortformCardTypeView  
중앙 - ShopLiveShortformVerticalTypeView  
우측 - ShopLiveShortformHorizontalTypeView

좌측 - ShopLiveShortformCardTypeView
중앙 - ShopLiveShortformVerticalTypeView
우측 - ShopLiveShortformHorizontalTypeView

Type2

좌측 - ShopLiveShortformCardTypeView  
중앙 - ShopLiveShortformVerticalTypeView  
우측 - ShopLiveShortformHorizontalTypeView

좌측 - ShopLiveShortformCardTypeView
중앙 - ShopLiveShortformVerticalTypeView
우측 - ShopLiveShortformHorizontalTypeView

Short-form의 목록을 원하는 곳에 3가지 형식으로 노출할 수 있습니다.
영상의 비율은 9 : 16입니다.

  • 콘텐츠 집중형 (CARD)
  • 세로 스크롤 (VERTICAL)
  • 가로 스크롤 (HORIZONTAL)

콘텐츠 집중형 (ShopLiveShortformCardTypeView) 적용하기

콘텐츠 집중형 목록을 노출할 화면에 다음과 같이 구성합니다.

private var builder = ShopLiveShortform.CardTypeViewBuilder()

lazy private var cardTypeView : UIView = { 
  let cardTypeView = builder.build(cardViewType: .type1,
                                       enableSnap: true,
                                       enablePlayVideo: true,
                                       playOnlyOnWifi: false,
                                       cellSpacing: 20).getView()
  return cardTypeView
}()
view.addSubView(cardTypeView)
//set constraints

세로 스크롤 (ShopLiveShortformVerticalTypeView) 적용하기

세로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.

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).getView()
  return verticalTypeView
}()

view.addSubView(verticalTypeView)
//set constraints

가로 스크롤 (ShopLiveShortformHorizontalTypeView) 적용하기

가로 스크롤 목록을 노출할 화면에 다음과 같이 구성합니다.

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).getView()
  return horizontalTypeView
}()
view.addSubView(horizontalTypeView)
//set constraints

속성 소개

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


카드 타입 설정

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

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

스냅 효과 설정

스냅 효과를 사용하여 개별 컨텐츠 강조 여부를 설정합니다.
enableSnap(): 스냅 효과를 설정
disableSnap(): 스냅 효과를 해제 (기본값)

builder.enableSnap() 
builder.disableSnap()

영상 자동 재생 효과 설정

셀의 영상을 자동을 재생할지 설정합니다.
enablePlayVideos(): 영상을 재생한다. (기본값)
disablePlayVideos(): 영상 재생을 해제 한다.

builder.enablePlayVideos()
builder.disablePlayVideos()

최상단으로 스크롤 하기

목록 뷰를 최상단으로 스크롤 합니다.

builder.scrollToTop()

wifi에서만 영상 재생하도록 설정

wifi에서만 재생이 가능하게 할지 설정합니다.

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

builder.setPlayOnlyWifi(isEnabled : Bool)

item 간격 설정

목록뷰 셀의 간격을 설정합니다.

//기본값 - 20
builder.setCellSpacing(spacing : CGFloat)

handler 설정

ShopLiveShortformSDK에서 발생한 알림을 ShopLiveShortformReceiveHandlerDelegate를 통해서 전달받고 처리할 수 있습니다.

ShopLiveShortformReceiveHandlerDelegate에는 다음 3가지의 함수로 구성되어 있습니다.


protocol ShopLiveShortformReceiveHandlerDelegate : AnyObject  {
    @objc optional func handleShare(shareUrl: String)
    @objc optional func onError(error: Error)
    @objc optional func onEvent(command: String, payload: String?)
}

//핸들러 채택하기
ShopLiveShortform.ShortsReceiveInterface.setHandler(self)

공유하기 함수

handleShare(shareUrl: String) 를 통하여 해당 숏폼의 Url정보를 String의 형태로 받아올 수 있습니다.

class ViewController : ShopLiveShortformReceiveHandlerDelegate { 
  func handleShare(shareUrl: String) { 
    if let url = URL(string : shareUrl) { 
      //Do something
    }
  }
}

에러 핸들링 함수

onError(error: Error) 를 통하여 숏폼 SDK에서 발생한 Error를 받아보고 핸들링 할 수 있습니다.

class ViewController : ShopLiveShortformReceiveHandlerDelegate { 
  func onError(error: Error) { 
    if let error = error as? ShortformError { 
      //Do something
    }
  }
}
ShortformError Type

숏폼에서 발생한 에러는 ShortformError 타입으로 전달합니다.

type설명
statusCode네트워크 응답 상태코드 에러
invalidConfig숏폼 설정 관련 에러
other기타 에러
public enum ShortformError: Error {
    case statusCode(Int)
    case invalidConfig
    case other(Error)
    var errorMessage: String {
        switch self {
        case .statusCode(let code):
            return "[Http status code : statusCode(\(code))] To use Shoplive Short-form, please contact [email protected]"
        case .invalidConfig:
            return "[Invalid config] To use Shoplive Short-form, please contact [email protected]"
        case .other(let error):
            return "[Other error] \(error.getErrorMsg())"
        }
    }
}

에러 핸들링 함수

onEvent(command: String, payload: String?) 를 통하여 숏폼에서 발생한 Event를 받아보고 핸들링 할 수 있습니다.

class ViewController : ShopLiveShortformReceiveHandlerDelegate { 
  func onEvent(command: String, payload: String?){ 
    //Do Somethig
  }
}