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
Type2

좌측 - 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
}
}
Updated 13 days ago