# 実装ガイド

`Nubrick` のエディタで作成された埋め込みエクスペリメントを、アプリ内の特定の場所に埋め込むことができます。

{% hint style="info" %}
コード側では、エクスペリメントIDまたは任意のカスタムIDを設定し、使用できます。\
場所ごとにカスタムIDを事前に設定しておくことをお勧めします。これにより、コードを編集せずに、`Nubrick` の管理画面で柔軟にエクスペリメントを変更できます。
{% endhint %}

## 基本的な使い方

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
    .frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
self.addSubview(view)
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import io.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
```

{% endtab %}

{% tab title="Flutter" %}
`height` も指定することを推奨しています。

```dart
import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding("<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>", height: 200),
    ],
  );
}
```

{% endtab %}
{% endtabs %}

## イベントハンドラーの追加

埋め込みタイプのエクスペリメントに、イベントハンドラーを追加することができます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding("<EXPERIMENT_ID>", onEvent: { event in
    print(event)
})
.frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID>", onEvent: { event in
    print(event)
})
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import io.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>",
    onEvent = { event ->
        println("Event: ${event.name}, deepLink: ${event.deepLink}")
    }
)
```

{% endtab %}

{% tab title="Flutter" %}

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  height: 200,
  onEvent: (event) {
    print("Nubrick Embedding Event: ${event.payload}");
  },
),
```

{% endtab %}
{% endtabs %}

## ローディング状態のカスタマイズ

読み込み中、失敗、完了の各フェーズでビューをカスタマイズできます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}
`SwiftUIEmbeddingPhase` を使って各フェーズをハンドリングします。

```swift
NubrickSDK.embedding("<EXPERIMENT_ID>", onEvent: nil) { phase in
    switch phase {
    case .loading:
        Text("loading")
    case .notFound:
        Text("not found")
    case .failed:
        Text("error")
    case .completed(let view):
        view.frame(height: 200)
    }
}
```

{% endtab %}

{% tab title="iOS (UIKit)" %}
`UIKitEmbeddingPhase` を使って各フェーズをハンドリングします。

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID>", onEvent: nil) { phase in
    switch phase {
    case .loading:
        return UIActivityIndicatorView()
    case .notFound:
        return UILabel()
    case .failed:
        return UILabel()
    case .completed(let component):
        return component
    }
}
```

{% endtab %}

{% tab title="Android" %}
`content` パラメータを使って `EmbeddingLoadingState` をハンドリングします。

```kotlin
import io.nubrick.nubrick.NubrickSDK
import io.nubrick.nubrick.component.EmbeddingLoadingState

NubrickSDK.Embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>") { state ->
    when (state) {
        is EmbeddingLoadingState.Loading -> CircularProgressIndicator()
        is EmbeddingLoadingState.Completed -> state.view()
        is EmbeddingLoadingState.NotFound -> Text("Not found")
        is EmbeddingLoadingState.Failed -> Text("Error")
    }
}
```

{% endtab %}

{% tab title="Flutter" %}
`builder` を使って各フェーズをハンドリングします。

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  builder: (context, phase, child) {
    case ExperimentPhase.loading:
      return const SizedBox(height: 200, child: Center(child: CircularProgressIndicator()));
    case ExperimentPhase.completed:
      return const SizedBox(height: 200, child: child);
    case ExperimentPhase.notFound:
      return const SizedBox(height: 200, child: Center(child: Text("Experiment not found.")));
    default:
      return const SizedBox.shrink();
  },
),
```

{% endtab %}
{% endtabs %}

## 引数の渡し方

`arguments` としてパラメータを渡すと、コンポーネント内で展開される動的な変数として利用することができます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding(
    "<EXPERIMENT_ID>",
    arguments: ["item_id": itemId]
)
.frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView(
    "<EXPERIMENT_ID>",
    arguments: ["item_id": itemId]
)
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import io.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>",
    arguments = mapOf("item_id" to itemId)
)
```

{% endtab %}

{% tab title="Flutter" %}

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  height: 200,
  arguments: {
    'item_id': itemId,
  },
),
```

{% endtab %}
{% endtabs %}