하이브리드 연동

    하이브리드 연동


    기사 요약

    코드 설치

    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.7'
          	pod 'ShopliveSDKCommon', '1.5.7'
        end

    Swift Package Manager

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

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

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

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

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


    웹 연동

    숏폼을 서비스하기 위해 웹 연동이 우선 진행되어야 합니다. 웹 연동을 위해 다음 링크를 참고 해주세요.


    네이티브 코드 적용

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

    • Handler 가이드를 참고하세요.

    import ShopLiveShortformSDK
    
    class CustomerViewController: UIViewController {
        ...
        override func viewDidLoad() {
            super.viewDidLoad()
            ShopLiveShortform.BridgeInterface.connect(webview) // Required
            ShopLiveShortform.Delegate.setDelegate(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.Delegate

    고객사 웹 UIViewController에 Delegate를 통해서 ShopLiveShortformReceiveHandlerDelegate를 설정하면, 다음과 같은 callback을 사용할 수 있습니다.

    public protocol ShopLiveShortformReceiveHandlerDelegate: AnyObject {
        // 공유하기 버튼을 눌렀을 때, 공유 URL을 전달합니다.
        func handleShare(shareUrl: String)
        func handleShare(shareMetadata : ShopLiveShareMetaData)
        // 에러가 발생하면 에러를 전달합니다. 기본적으로 error는 ShopLiveCommonError:Error로 내려갑니다.
        func onError(error: Error)
        // 숏폼에서 발생한 이벤트를 전달합니다.
        func onEvent(command: String, payload: String?)
        // 숏폼 화면의 닫힘 이벤트를 전달합니다.
        func onDidDisAppear()
        // 숏폼 화면의 열림 이벤트를 전달합니다.
        func onDidAppear()
        // 상품의 클릭 이벤트를 전달합니다.
        func handleProductItem(shortsId : String, shortsSrn : String, product : ProductData)
        // 상품 배너의 클릭 이벤트를 전달합니다.
        func handleProductBanner(shortsId : String, shortsSrn : String, scheme : String, shortsDetail : ShortsDetailData)
    }
    
    // Connect Webview to BridgeInterface 
    ShopLiveShortform.BridgeInterface.connect(webview) // Required


    What's Next