Guides

하이브리드 연동

Suggest Edits

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

UIKit과 WebKit을 기반으로 구축되었으며, 웹 콘텐츠와의 상호작용을 위한 다양한 메시지 핸들러와 이벤트를 지원합니다.

예제

예제 프로젝트를 실행하려면, 레포를 클론하고, Example 디렉토리에서 pod install을 실행하여 필요한 종속성을 설치한 후 예제 프로젝트를 열어보세요.

시스템 요구 사항

  • iOS 11.0 이상
  • Xcode 11.0 이상
  • Swift 5 이상

설치

CocoaPods

SauceClip_iOS는 CocoaPods을 통해 사용할 수 있습니다. Podfile에 다음 라인을 추가하여 설치하세요.

pod 'SauceClip_iOS'

Swift Package Manager

SauceClip_iOS는 Swift Package Manager를 통해서도 설치할 수 있습니다. Xcode에서 프로젝트를 열고, File > Swift Packages > Add Package Dependency...를 선택 후 레포지토리 URL을 입력하세요.

https://github.com/mobidoo-official/SauceClip_iOS.git

그 다음, 원하는 버전의 SDK를 선택하고 프로젝트에 추가합니다.

기본 설정 방법 (클립)

  1. SauceClip_iOS를 UIViewController에 Import 합니다.
    화면 전환은 아래 코드를 참고해주세요.
import UIKit
import WebKit
import SauceClip_iOS

...

// 화면 전환 시
let myCustomViewController = MyCustomViewController()    
self.present(myCustomViewController, animated: true)
  1. SauceClipViewController의 서브클래스를 생성하여 동작을 커스터마이징합니다. 
class MyCustomViewController: SauceClipViewController {
    
}
  1. SauceClipDelegate를 구현하여 웹 상호작용을 처리합니다.
extension MyCustomViewController: SauceClipDelegate {
    func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveCartMessage message: WKScriptMessage) {
      
    }
}
  1. MyCustomViewController 화면 전환시 컨피그 설정으로 구성합니다. 
import SauceClip_iOS

class MyCustomViewController: SauceClipViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let config = SauceClipConfig(
            isEnterEnabled: true,
            isExitEnabled: true,
            isMoveProductEnabled: true,
            isMoveCartEnabled: true,
            isAddCartEnabled: true,
            isOnShareEnabled: true,
            pipSize: CGSize(width: 100, height: 200), //PIP 구현시 사이즈 조절: 옵셔널
            delegate: self
        )
        configure(with: config)
        
        let sauceClipLib = SauceClipLib()
        sauceClipLib.viewController = self
        sauceClipLib.setInit(partnerID: "파트너 아이디", clipID: "클립 아이디", curationID: "큐레이션 아이디") // curationID 옵셔널
        sauceClipLib.setProductVC(on: true) // 상품페이지 웹뷰 노출여부
        sauceClipLib.setStageMode(on: true) // 개발 환경 (스테이지, 운영) 설정
        sauceClipLib.load()
    }
}

SauceClipDelegate 사용 방법

SauceClipDelegate는 SauceLiveViewController와의 상호작용을 위한 프로토콜입니다.

SauceViewControllerConfig에 true 값으로 변경한 속성값에 한해 웹 콘텐츠로부터 전송되는 다양한 메시지를 처리할 수 있습니다.

SauceClipDelegate에서 지원하는 주요 Delegate 메서드는 다음과 같습니다.

extension SauceClipView: SauceClipDelegate {
	func sauceClipManager(\_ manager: SauceClipViewController, didReceiveEnterMessage message: WKScriptMessage) {}

	func sauceClipManager(_ manager: SauceClipViewController, didReceiveExitMessage message: WKScriptMessage) {}
  
	func sauceClipManager(_ manager: SauceClipViewController, didReceiveLoginMessage message: WKScriptMessage) {}

	func sauceClipManager(_ manager: SauceClipViewController, didReceiveOnShareMessage shareInfo: SauceShareInfo?) {}

	func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveCartMessage: WKScriptMessage?) {}

	func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveProductMessage productInfo: SauceProductInfo?) {}

	func sauceClipManager(_ manager: SauceClipViewController, didReceiveAddCartMessage addCartInfo: SauceCartInfo?) {}
}

위와 같은 메서드들을 구현함으로써, SauceLiveViewController에서 발생하는 다양한 이벤트에 대응하며 사용자 정의 동작을 수행할 수 있습니다. message.body 값을 통해 특정 상품 페이지로 이동하거나, 사용자에게 쿠폰을 발급하는 등의 기능을 쉽게 구현할 수 있습니다.

SauceClipDelegate 예제

SauceClipDelegate를 사용하는 간단한 예제는 다음과 같습니다.

extension MyCustomViewController: SauceClipDelegate {
func sauceClipManager(_ manager: SauceClipViewController, didReceiveOnShareMessage shareInfo: SauceShareInfo?) {
    print(shareInfo?.clipId)
}

func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveCartMessage cartInfo: SauceCartInfo?) {
    print(cartInfo?.clipIdx)
}

func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveProductMessage productInfo: SauceProductInfo?) {
    print(productInfo?.clipIdx)
}

PIP 기능 구현

  1. 화면 전환시 아래 코드를 참고해주세요.
import UIKit
import WebKit
import SauceLive_iOS

...

// 화면 전환 시
let sauceClipViewController = MyCustomViewController()            
PIPKit.show(with: sauceClipViewController)

// 화면 닫을 시
PIPKit.dismiss(animated: true)
  1. 컨피그 설정에서 PIP Size 를 설정합니다. 
import SauceClip_iOS

class MyCustomViewController: SauceClipViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // SauceClipDelegate 에서의 처리여부 (true/false)
        let config = SauceClipConfig(
            isEnterEnabled: true,
            isExitEnabled: true,
            isMoveProductEnaled: true,
            isMoveCartEnabled: true,
            isOnShareEnabled: true,
            pipSize: CGSize(width: 100, height: 200), //PIP 구현시 사이즈 조절: 옵셔널
            delegate: self
        )
        configure(with: config)
        ...
    }
}
  1. 이벤트에 PIP 활성화 하는 코드 startPictureInPicture() 를 추가합니다. 
extension MyCustomViewController: SauceClipDelegate {
    func sauceClipManager(_ manager: SauceClipViewController, didReceiveMoveProductMessage productInfo: SauceProductInfo?) {
        startPictureInPicture()
    }
}

에러 처리 가이드

extension MyCustomViewController: SauceClipDelegate {
    func sauceClipManager(_ manager: SauceClipViewController, didReceiveErrorMessage sauceError: SauceError?) {
        print(sauceError?.errorType)
    }
}

기본 설정 방법 (큐레이션)

📘

세로형과 카드형은 지원 예정 입니다.

  1. SauceClip_iOS를 UIViewController에 Import 합니다.
    화면 전환은 아래 코드를 참고해주세요.
import UIKit
import WebKit
import SauceClip_iOS

...

// 화면 전환 시
let myCustomViewController = MyCustomViewController()    
self.present(myCustomViewController, animated: true)
  1. 큐레이션에 사용할 UIViewController 를 준비하세요
class MyCustomViewController: UIViewController {
    
}
  1. SauceClipDelegate를 구현하여 웹 상호작용을 처리합니다.
extension MyCustomViewController: SauceCurationDelegate {
    func sauceCurationManager(_ manager: SauceCurationLib, didReceiveBroadCastMessage broadCastInfo: SauceBroadcastInfo?) {}
}
  1. MyCustomViewController 화면 전환시 컨피그 설정으로 구성합니다. 
import SauceClip_iOS

class MyCustomViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let sauceCurationView = SauceCurationLib()
        sauceCurationView.delegate = self
        
        let config = SauceCurationLib.SauceCurationConfig(
            isBroadCastEnabled: true,
            delegate: self
        )
        sauceCurationView.configure(with: config)
        
        sauceCurationView.setInit(partnerID: "파트너 아이디", curationID: "큐레이션 아이디")
        sauceCurationView.setStageMode(on: true) // 스테이지 환경 사용 default: false
        sauceCurationView.setPvVisibility(true) //  전시 클립 영상 내 조회 수 노출 여부 default: true
        sauceCurationView.setHorizontalPadding(10) // 클립 좌우 여백  default: 0
        self.view.addSubview(sauceCurationView)
        sauceCurationView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            sauceCurationView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        ])
        
        sauceCurationView.load()
    }
}
  1. 전시 클립 좌우 여백
let sauceCurationView = SauceCurationLib()
sauceCurationView.setHorizontalPadding(10) //	default: 0
  1. 전시 클립 영상 내 조회 수 노출
let sauceCurationView = SauceCurationLib()
sauceCurationView.setPvVisibility(true) // default: true
  1. 프리뷰 자동 재생 기능 추가 (default : false)
let sauceCurationView = SauceCurationLib()
sauceCurationView.setPreviewAutoPlay(true) // default false

SauceCurationDelegate 사용 방법

SauceCurationDelegate는 큐레이션 플레이어와의 상호작용을 위한 프로토콜입니다.

SauceCurationConfig에 true 값으로 변경한 속성값에 한해 웹 콘텐츠로부터 전송되는 다양한 메시지를 처리할 수 있습니다.

SauceCurationDelegate에서 지원하는 주요 Delegate 메서드는 다음과 같습니다.

extension MyCustomViewController: SauceCurationDelegate {
  // 큐레이션 영상 클릭 시
    func sauceCurationManager(_ manager: SauceCurationLib, didReceiveBroadCastMessage broadCastInfo: SauceBroadcastInfo?) {
        print(broadCastInfo?.clipId)
    }
}

SauceCurationDelegate 예제

SauceCurationDelegate를 사용하는 간단한 예제는 다음과 같습니다.

extension MyCustomViewController: SauceCurationDelegate {
    func sauceCurationManager(_ manager: SauceCurationLib, didReceiveBroadCastMessage broadCastInfo: SauceBroadcastInfo?) {
        print(broadCastInfo?.clipId)
    }
}

에러 처리 가이드

extension MyCustomViewController: SauceClipDelegate {
	func sauceCurationManager(_ manager: SauceCurationLib, didReceiveErrorMessage sauceError: SauceError?) {
        print(sauceError?.errorCode)
   }
}

기본 설정 방법 (큐레이션 + 클립 플레이어)

1단계

SauceClipViewController 상속 받는 뷰 컨트롤러 준비

class SampleClipVC: SauceClipViewController {
  
  var partnerId: String?
  var clipId: Int?
  var curationId: Int?
  
  override func viewDidLoad() {
        super.viewDidLoad()
				// config 설정 및 load - 가이드 참고
    		...
  }
}

2단계

큐레이션 config 에서 isBroadCastEnabled 를 true 로 하고 델리게이트 메소드에서SauceClipViewController 을 호출합니다.

class MyCustomViewController: UIViewController {
   
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        let sauceCurationView = SauceCurationLib()
        sauceCurationView.delegate = self
        let config = SauceCurationLib.SauceCurationConfig(
            isBroadCastEnabled: true,
            delegate: self
        )
        sauceCurationView.configure(with: config)
      ...
      
    }
}

extension MyCustomViewController: SauceCurationDelegate {
    func sauceCurationManager(_ manager: SauceCurationLib, didReceiveBroadCastMessage broadCastInfo: SauceBroadcastInfo?) {
        
      let viewController = SampleClipVC()
        viewController.modalPresentationStyle = .fullScreen
        viewController.partnerId = broadCastInfo?.partnerId
        viewController.clipId = broadCastInfo?.clipId
        viewController.curationId = broadCastInfo?.curationId
        present(viewController, animated: true)
    }
}ㅊ

Git 레포지토리 예제 코드에서 해당 내용을 확인 하실수 있습니다.!

Updated about 2 months ago