> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/viewer/sdk-android/installation.md).

# 뷰어 설치하기

## 1. 프로젝트 설정

### 1.1 라이브 솔루션 뷰어 SDK 모듈 추가

프로젝트에 쇼핑라이브 라이브러리 모듈을 추가합니다. 

**File>Module>New Module** 에서 `shopping-live-libs` 모듈을 추가합니다.

`shopping-live-libs` 모듈은 샘플앱 프로젝트에서 제공하고 있습니다.

### 1.2 의존성 추가

(1) build.gradle 의 android 와 dependencies 블록에 쇼핑라이브 솔루션 뷰어 의존성을 추가합니다.

{% code title="build.gradle" %}

```kotlin
..
android {

...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.7"
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_17
    }

    buildFeatures {
        viewBinding true
        compose true
    }
}

dependencies {
    implementation project(':shopping-live-libs')
    implementation project(':shopping-live-libs-core')
    implementation "com.naver.prismplayer:prismplayer-core:4.2401.2"
    implementation "com.naver.prismplayer:prismplayer-support:4.2401.2"
    implementation "com.naver.prismplayer:prismplayer-ui:4.2401.2"
    implementation ("com.navercorp:shoppinglive:4.9.10") {
        exclude group: 'com.naver.prismplayer', module: 'prismplayer-core'
        exclude group: 'com.naver.prismplayer', module: 'prismplayer-ui'
        exclude group: 'com.naver.prismplayer', module: 'prismplayer-support'
        exclude group: 'com.naver.prismplayer', module: 'prismplayer-dolby-dva'
        exclude group: 'com.naver.nelo', module: 'sdk-android'
        exclude group: 'com.navercorp.nelo2.android', module: 'nelo2-android-sdk-common'
        exclude group: 'com.navercorp.nelo2.android', module: 'nelo2-android-sdk-thrift'
        exclude group: 'com.navercorp.nelo2.android', module: 'nelo2-android-sdk-https'
        exclude group: 'com.nhncorp.nstatlog', module: 'nstat-client-android'
        exclude group: 'api-gateway-hmac', module: 'api-gateway-hmac'
        exclude group: 'com.navercorp.ntracker', module: 'NTrackerSDK'
    }
}

```

{% endcode %}

(2) setting.gradle 에 라이브러리를 추가합니다.

<pre class="language-kotlin" data-title="setting.gradle"><code class="lang-kotlin"><strong>// 쇼핑라이브 라이브솔루션
</strong>include ':shopping-live-libs'
<strong>include ':shopping-live-libs-core'
</strong>project(":shopping-live-libs-core").projectDir = new File(settingsDir, 'shopping-live-libs/core')
</code></pre>

### 1.3 앱 매니페스트 설정

AndroidManifest.xml 추가하고, 쇼핑라이브 솔루션 뷰어를 호출하는 Activity 에 configChanges 설정값을 추가합니다.

```xml
<application
   ...
   <activity android:name="com.navercorp.android.shoppinglivesample.serviceappconfigs.SolutionViewerSampleActivity"
      android:configChanges="uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustPan"/>
...
</application>
```

## 2. 뷰어 커스텀 설정 클래스 추가

서드파티 서비스와의 연동 및 희망하는 스펙 적용을 위한 기본 설정을 추가합니다.

`ShoppingLiveSolutionConfigs` 부모 클래스를 상속받고 다음과 같은 값을 오버라이딩합니다.

{% hint style="info" %}
샘플 클래스(SampleSolutionConfigs) 에서 각 변수 및 메소드에 대한 설명을 주석으로 확인하실 수 있습니다.
{% endhint %}

### 2.1 연동을 위한 서비스ID 설정 <mark style="color:red;">\*</mark>

전달받은 솔루션 연동 ID를 설정합니다.

`ShoppingLiveSolutionConfigs`클래스의 `serviceAppName`에 전달 받은 `externalServiceId`를 오버라이딩합니다.&#x20;

```kotlin
class SampleSolutionConfigs: ShoppingLiveSolutionConfigs() {
    override val serviceAppName: String = "yourservice" 
}
```

### 2.2 공유하기 URL 설정

**뷰어>더보기>공유하기** 시에 공유할 URL을 설정합니다.

온에어 뷰어와 다시보기 뷰어의 URL을 각각 설정할 수 있습니다. 해당 방송ID를 뷰어 내부에서 %s로 설정합니다.

```kotlin
class SampleSolutionConfigs: ShoppingLiveSolutionConfigs() {
  override fun getExternalLiveShareUrlStringFormat(): String? {
        return "https://yourservice.com/share/lives/%s"
    }

    override fun getExternalReplayShareUrlStringFormat(): String? {
        return "https://yourservice.com/share/replays/%s"
    }
}
```

{% hint style="info" %}
**동작 예시**&#x20;

위 예제코드와 같이 설정한 뒤 방송ID가 12345인 라이브의 온에어 뷰어에서 공유한 경우, `https://yourservice.com/share/lives/12345` 로 공유됩니다.
{% endhint %}

### 2.3 서드파티 장바구니 URL 설정&#x20;

서드파티 상품이 설정된 라이브의 경우, 장바구니 버튼 클릭시 설정된 URL로 랜딩합니다.&#x20;

```kotlin
class SampleSolutionConfigs: ShoppingLiveSolutionConfigs() {
    override fun getExternalCartUrl(): String? {
        return "https://yourservice.com/shopping/cart"
    }
}
```

{% hint style="warning" %}
계약하신 솔루션 패키지에 따라 서드파티 상품 첨부가 불가할 수 있으며, 이 경우 본 설정값과 무관하게 동작합니다.
{% endhint %}

## 3. 뷰어 초기화 설정

**01** Application 클래스의 `onCreate()`에 아래 코드를 추가합니다.

(1) configs 파라미터에는 '2. 뷰어 커스텀 설정 클래스' 에서 추가한 클래스를 주입합니다.

(2) uiConfigs 파라미터는 필수값은 아닙니다. 필요한 경우 주입하시면 됩니다.

상세한 가이드는 다음 페이지에 나오는 '콜백 설정' 부분을 참고하시면 됩니다.

```kotlin
ShoppingLive.init(
   application = this,
   configs = SampleSolutionConfigs(),
   uiConfigs = SampleSolutionUiConfigs()
)
```

## 4. RxJava ErrorHandler 추가

이미 `RxJavaPlugins.setErrorHandler` 추가된 상태라면 이 단계를 패스하세요.

**01** 앱의 Application 클래스에 아래 메소드를 추가하고

```kotlin
private fun setRxJavaErrorHandler() {
   RxJavaPlugins.setErrorHandler { e ->
       // 필요시 로그 추가
   }
}
```

**02** Application 클래스의 `onCreate()` 에서 호출합니다.

## 5. 뷰어 실행하기

라이브 뷰어 실행이 필요한 영역에 다음 예제와 같이 뷰어를 호출합니다.&#x20;

라이브의 엔드URL을 통해 라이브를 호출할 수 있습니다.

#### 뷰어 URL 패턴&#x20;

* **라이브** : <https://view.shoppinglive.naver.com/externals/[><mark style="color:blue;">{externalServiceId}</mark>]\(#user-content-fn-1)[^1]/lives/[<mark style="color:blue;">{broadcastId}</mark>](#user-content-fn-2)[^2]
* **다시보기** : <https://view.shoppinglive.naver.com/externals/><mark style="color:blue;">{externalServiceId}</mark>/replays/<mark style="color:blue;">{broadcastId}</mark>

{% hint style="warning" %}
단, 이 때 URL은 직접 구성하지 않고, [broadcast API의 응답값](#user-content-fn-3)[^3]으로 제공합니다. 뷰어 파라미터는 상태 등에 따라 동적으로 변경되기 때문에 자체적으로 URL패턴으로 구 현하시는 경우, 유저 혜택, 통계 집계 등에 오류가 발생할 수 있습니다.
{% endhint %}

```kotlin
override fun startLiveViewer(liveEndUrl: String) {
    viewModel.onClickStartLive(liveEndUrl)

    ShoppingLive.start(
        context = activity ?: return,
        broadcastUrl = liveEndUrl
    )
}
```

[^1]: 발급받은 서비스 연동 ID

[^2]: 방송번호, 라이브 고유 ID

[^3]: 방송 조회 API 응답 필드 중 activeLinkUrl로 적용하시면,-별도의 방 송 상태에 따른 분기처리 없이도 라이브/ 다시보기 뷰어로 랜딩하도록 구현이 가 능합니다.