네이티브 연동

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()  
             // SauceClipDelegate 에서의 처리여부 (true/false)
               let config = SauceClipConfig(
          	   isEnterEnabled: true,
           		 isExitEnabled: true,
           		 isMoveProductEnabled: true,
           		 isMoveCartEnabled: true,
           		 isOnShareEnabled: true,
           		 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 cartInfo: SauceCartInfo?) {}

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

}

위와 같은 메서드들을 구현함으로써, 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)
}

에러 처리 가이드

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.heightAnchor.constraint(equalToConstant: 350), // 높이를 350으로 설정
                sauceCurationView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
                sauceCurationView.widthAnchor.constraint(equalToConstant: 300) // 너비를 300으로 설정
              ])
        
       			  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 6 days ago