クイックスタート

このクイックスタートガイドで5-10分でNetFUNNEL 4 React Native Agentを始めましょう。

このガイドでできること

• コードベース統合: ボタン/APIレベルで正確なタイミングでトラフィックを制御

統合方法の選択

統合方法を比較し、ユースケースに最も適したアプローチを見つけるには、統合方法概要を参照してください。

---

前提条件

• NetFUNNELコンソールへのアクセス
• React Nativeプロジェクト
• JavaScript/TypeScriptの基本知識

サンプルプロジェクト

練習用の基本プロジェクトが必要ですか？サンプルプロジェクトを確認してください。

---

ステップ1: Client IDの取得

1. NetFUNNELコンソールに移動
2. 右上のプロフィールアイコンをクリック
3. 統合資格情報（Integration Credentials）メニューを選択
4. Client IDをコピー

---

ステップ2: インストールと初期化

パッケージのインストール

npm install netfunnel-rn-agent

初期化

App.jsまたはApp.tsxでNetFUNNELを初期化します：

import Netfunnel from 'netfunnel-rn-agent';

// アプリ起動時に初期化
Netfunnel.initialize({
  clientId: 'your-client-id'  // ステップ1で取得したClient ID
});

WebViewコンポーネントの追加

App.jsまたはApp.tsxでNetfunnel.WebViewComponentを追加します：

import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Netfunnel from 'netfunnel-rn-agent';

export default function App() {
  return (
    <View>
      <NavigationContainer>
        {/* Your app navigation */}
      </NavigationContainer>
      <Netfunnel.WebViewComponent />
    </View>
  );
}

---

ステップ3: 統合方法の選択

基本制御

最適な用途: ボタンクリック、API呼び出し、単一ステップ操作

1. コンソールでセグメントを作成:

   • Projects → Segment → Create Segmentに移動
   • Basic Controlを選択
   • Limited Inflowを0に設定（テスト用）

2. コードに追加:

import Netfunnel from 'netfunnel-rn-agent';

function handleButtonPress() {
  Netfunnel.nfStart(
    "{{PROJECT_KEY}}",  // コンソールから取得したプロジェクトキー
    "{{SEGMENT_KEY}}",  // コンソールから取得したセグメントキー
    function(response) {
      nfCallback(response);
    }
  );
}

function nfCallback(response) {
  const { status, statusCode, message } = response;
  switch(status) {
    case 'Success':
      // 進入またはバイパス応答を受信した場合
      // 既存のサービスロジックを実行
      break;
    case 'Error':
      // システムエラー発生時
      // 一般的にSuccessと同じように処理
      break;
    case 'NetworkError':
      // ネットワークエラー発生時
      // 再試行または通知処理
      break;
  }
}

// アクション完了後のキー返却
function handleActionComplete() {
  Netfunnel.nfStop(
    "{{PROJECT_KEY}}",
    "{{SEGMENT_KEY}}"
  );
}

区間制御

最適な用途: 決済プロセス、多段階プロセス

1. コンソールでセグメントを作成（基本制御と同じ）
2. コードに追加:

// 区間開始
Netfunnel.nfStartSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}",
  function(response) {
    nfCallback(response);
  }
);

// 区間終了（プロセス全体が完了した時）
Netfunnel.nfStopSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}"
);

---

ステップ4: テスト

1. Limited Inflowを0に設定し、待機室が正しく表示されるか確認
2. Limited Inflowを1に設定（即座に進入する必要がある）
3. Networkタブでキー返却を確認（ts.wseq?opcode=5004 HTTP 200）

---

ヘルプが必要ですか？

• トラブルシューティング: 一般的な問題と解決方法
• ブラウザコンソールでNetFUNNELログを確認（printLog: true設定）
• コンソールのプロジェクト/セグメントキーが正確に一致しているか確認