@channel.io/channel-talk-integration-mcp/dist/tools/get-react-native-guide.tool.js

Channel Talk Integration MCP - Installation guides for Channel Talk SDK across multiple platforms

import { z } from "zod";
export function registerGetReactNativeGuideTool(server) {
    server.tool("get_react_native_guide", `case1: 유저가 React Native 앱에 채널톡을 설치하는 방법을 알고 싶다고 말하면 이 툴을 호출합니다.
case2: 이전 툴의 next_step에서 get_react_native_guide를 호출해야할 경우 이 툴을 호출합니다.`, {
        language: z
            .enum(["ko", "en"])
            .optional()
            .describe("Language for the guide. Use 'en' for English, defaults to Korean if not specified"),
    }, (args) => {
        try {
            const language = args.language;
            const result = language === "en"
                ? getEnglishReactNativeGuide()
                : getKoreanReactNativeGuide();
            return {
                content: [
                    {
                        type: "text",
                        text: JSON.stringify(result, null, 2),
                    },
                ],
            };
        }
        catch (error) {
            const message = error instanceof Error ? error.message : String(error);
            throw new Error(`Failed to execute get_react_native_guide: ${message}`);
        }
    });
    console.log("Registered tool: get_react_native_guide");
}
function getKoreanReactNativeGuide() {
    return {
        result: `# 채널톡 React Native SDK 설치 가이드

채널톡 React Native SDK는 React Native 애플리케이션에 상담을 위한 채팅 모듈과 마케팅 기능을 쉽게 설치할 수 있도록 도와줍니다.

## 📋 설치하기 전 요구사항

### 필수 조건
- **채널톡 유료 플랜** (무료 플랜은 SDK 사용 불가)
- **React Native 0.60.0 이상** (Auto-linking 지원)
- **iOS**: Xcode 12+, CocoaPods 1.10.0+
- **Android**: Android SDK 15+, Gradle Plugin 8.0.0+

사용자가 필수 조건을 완료했는지 물어보세요. 완료되지 않았다면 필수 조건을 완료하도록 안내해주세요.
특히 무료플랜일 경우 유료 플랜으로 업그레이드 하도록 안내해주세요.

### 버전 호환성
SDK는 모바일 SDK와 호환되는 버전 목록을 가지고 있습니다. 설치 전 버전 호환성을 확인하세요.

---

## 🛠️ 설치 과정

${getReactNativeInstallationSteps()}

---

## 🚀 SDK 구현 가이드

${getReactNativeImplementationGuide()}

---

## 🔐 보안 권장사항

${getReactNativeSecurityRecommendations()}

---

## 🔧 구현 체크리스트

${getReactNativeChecklist()}

---

## 💡 문제 해결

### 자주 발생하는 이슈
1. **Boot 실패**: 플러그인 키 확인, 네트워크 연결 확인
2. **iOS 빌드 에러**: Swift 버전 설정, Pod 설치 확인
3. **Android 빌드 에러**: Maven 저장소 설정, MultiDex 설정 확인
4. **Auto-linking 문제**: React Native 0.60+ 환경 확인

### 성능 최적화
- Boot는 앱 시작 시 한 번만 실행
- 불필요한 showChannelButton 호출 최소화
- 이벤트 트래킹 적절히 활용

### 버전 관리
- SDK 버전과 모바일 SDK 호환성 확인
- 정기적인 업데이트 및 호환성 테스트

**📚 참고 문서**: https://developers.channel.io/reference/react-native-quickstart-kr

**🔗 버전 호환성**: 채널톡 개발자 문서의 버전 호환성 페이지 참조`,
    };
}
function getEnglishReactNativeGuide() {
    return {
        result: `# Channel Talk React Native SDK Installation Guide

The Channel Talk React Native SDK helps you easily install chat modules and marketing features for customer support in React Native applications.

## 📋 Requirements Before Installation

### Prerequisites
- **Channel Talk paid plan** (Free plan cannot use SDK)
- **React Native 0.60.0 or higher** (Auto-linking support)
- **iOS**: Xcode 12+, CocoaPods 1.10.0+
- **Android**: Android SDK 15+, Gradle Plugin 8.0.0+

Please ask if the user has completed the prerequisites. If not, guide them to complete the prerequisites.
Especially if they're on a free plan, guide them to upgrade to a paid plan.

### Version Compatibility
The SDK has a list of versions compatible with mobile SDKs. Check version compatibility before installation.

---

## 🛠️ Installation Process

${getReactNativeInstallationSteps()}

---

## 🚀 SDK Implementation Guide

${getReactNativeImplementationGuide()}

---

## 🔐 Security Recommendations

${getReactNativeSecurityRecommendations()}

---

## 🔧 Implementation Checklist

${getReactNativeChecklist()}

---

## 💡 Troubleshooting

### Common Issues
1. **Boot failure**: Check plugin key, network connection
2. **iOS build errors**: Check Swift version settings, Pod installation
3. **Android build errors**: Check Maven repository settings, MultiDex configuration
4. **Auto-linking issues**: Verify React Native 0.60+ environment

### Performance Optimization
- Execute Boot only once at app startup
- Minimize unnecessary showChannelButton calls
- Use event tracking appropriately

### Version Management
- Check SDK version and mobile SDK compatibility
- Regular updates and compatibility testing

**📚 Reference Documentation**: https://developers.channel.io/reference/react-native-quickstart

**🔗 Version Compatibility**: Refer to version compatibility page in Channel Talk developer documentation`,
    };
}
function getReactNativeInstallationSteps() {
    return `### 1️⃣ React Native 패키지 설치

프로젝트 루트에서 다음 명령을 실행합니다:

\`\`\`bash
npm install react-native-channel-plugin
\`\`\`

또는 Yarn을 사용하는 경우:

\`\`\`bash
yarn add react-native-channel-plugin
\`\`\`

### 2️⃣ iOS 설정

#### CocoaPods 설정

**react-native-channel-plugin 0.9.3 이상 사용 시:**

1. iOS 디렉토리로 이동하여 Pod 설치:
\`\`\`bash
cd ios
pod install
cd ..
\`\`\`

**react-native-channel-plugin 0.9.3 이하 사용 시:**

1. \`ios/Podfile\`에 다음 내용 추가:

\`\`\`ruby
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

target 'YourApplicationName' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  pod 'ChannelIOSDK', podspec: 'https://mobile-static.channel.io/ios/latest/xcframework.podspec'
  pod 'RNChannelIO', :path => '../node_modules/react-native-channel-plugin'

  target 'YourApplicationNameTests' do
    inherit! :complete
  end
end
\`\`\`

2. 특정 버전 설치 시 \`latest\`를 원하는 버전으로 변경:
\`\`\`ruby
pod 'ChannelIOSDK', podspec: 'https://mobile-static.channel.io/ios/10.0.7/xcframework.podspec'
\`\`\`

3. Pod 설치 실행:
\`\`\`bash
cd ios
pod install
cd ..
\`\`\`

#### Carthage 설정 (선택사항)

1. \`ios/Cartfile\`에 추가:
\`\`\`
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json"
\`\`\`

2. Carthage 업데이트:
\`\`\`bash
cd ios
carthage update --platform iOS --use-xcframeworks
cd ..
\`\`\`

#### iOS 추가 설정

**1. Swift 버전 명시**
- Xcode → Target → Build Settings
- 좌측 상단 \`+\` → Add User-Defined Setting
- 키: \`SWIFT_VERSION\`, 값: \`5.0\`

**2. 권한 설정 (ios/Info.plist)**
\`\`\`xml
<key>NSCameraUsageDescription</key>
<string>Accessing to camera in order to provide better user experience</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Accessing to photo library in order to save photos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Accessing to microphone to record voice for video</string>
\`\`\`

SDK 10.0.7 미만 또는 iOS 13 미만 지원 시 추가:
\`\`\`xml
<key>NSPhotoLibraryUsageDescription</key>
<string>Accessing to photo library in order to provide better user experience</string>
\`\`\`

**3. AppDelegate 초기화**
\`\`\`objc
// ios/YourApp/AppDelegate.m
#import <ChannelIOFront/ChannelIOFront-swift.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [ChannelIO initialize:application];
  return YES;
}
\`\`\`

**4. SceneDelegate 사용 시 (선택사항)**
\`\`\`objc
// ios/YourApp/SceneDelegate.m
@interface SceneDelegate ()
@property (strong, nonatomic) UIWindow * channelWindow;
@end

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
  _channelWindow = [ChannelIO initializeWindowWith:(UIWindowScene *)scene];
}
\`\`\`

### 3️⃣ Android 설정

#### Gradle 설정

**react-native-channel-plugin 0.9.0 이상 사용 시:**

1. \`android/build.gradle\`에 채널톡 저장소 추가:
\`\`\`groovy
buildscript {
    repositories {
        google()
        mavenCentral()
        maven {
            url 'https://maven.channel.io/maven2'
            name 'ChannelTalk'
        }
    }
}
\`\`\`

2. 빌드 에러 발생 시 \`android/app/build.gradle\`에 추가:
\`\`\`groovy
dependencies {
    implementation 'io.channel:plugin-android'
}
\`\`\`

#### MultiDex 설정

\`android/app/build.gradle\`에 추가:
\`\`\`groovy
android {
    defaultConfig {
        multiDexEnabled true
    }
}
\`\`\`

#### MainApplication 설정

\`android/app/src/main/java/**/MainApplication.java\`에 추가:
\`\`\`java
import android.support.multidex.MultiDexApplication;
import com.zoyi.channel.plugin.android.ChannelIO;
import com.zoyi.channel.rn.RNChannelIOPackage;

public class MainApplication extends MultiDexApplication implements ReactApplication {
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
       new RNChannelIOPackage() // ChannelIO 패키지 추가
    );
  }
  
  @Override
  public void onCreate() {
    super.onCreate();
    ChannelIO.initialize(this); // ChannelIO 초기화
  }
}
\`\`\``;
}
function getReactNativeImplementationGuide() {
    return `### 1️⃣ SDK Import

채널톡을 사용할 컴포넌트에서 SDK를 import합니다:

\`\`\`javascript
import { ChannelIO } from 'react-native-channel-plugin';
\`\`\`

### 2️⃣ Boot 설정

#### 익명 유저로 부트
\`\`\`javascript
const bootAnonymous = async () => {
  try {
    const settings = {
      pluginKey: "YOUR_PLUGIN_KEY" // 실제 키로 교체
    };

    const result = await ChannelIO.boot(settings);
    console.log('Boot 성공:', result);
  } catch (error) {
    console.error('Boot 실패:', error);
  }
};
\`\`\`

#### 멤버 유저로 부트 (로그인 사용자)
\`\`\`javascript
const bootMember = async () => {
  try {
    const settings = {
      pluginKey: "YOUR_PLUGIN_KEY",
      memberId: "USER_UNIQUE_ID",
      memberHash: "USER_MEMBER_HASH", // 보안을 위한 해시값
      profile: {
        name: "사용자명",
        email: "user@example.com",
        mobileNumber: "01012345678",
        // 커스텀 프로필 추가 가능
        customField1: "커스텀값1",
        customField2: "커스텀값2"
      }
    };

    const result = await ChannelIO.boot(settings);
    console.log('멤버 Boot 성공:', result);
  } catch (error) {
    console.error('Boot 실패:', error);
  }
};
\`\`\`

### 3️⃣ 채널 버튼 제어

\`\`\`javascript
// 채널 버튼 표시
const showButton = () => {
  ChannelIO.showChannelButton();
};

// 채널 버튼 숨기기
const hideButton = () => {
  ChannelIO.hideChannelButton();
};

// 메신저 직접 열기
const openMessenger = () => {
  ChannelIO.open();
};

// 메신저 닫기
const closeMessenger = () => {
  ChannelIO.close();
};
\`\`\`

### 4️⃣ 고급 기능

#### Shutdown (완전 종료)
\`\`\`javascript
const shutdownChannelIO = () => {
  ChannelIO.shutdown();
  console.log('ChannelIO 종료됨');
};
\`\`\`

#### 이벤트 트래킹
\`\`\`javascript
// 사용자 행동 추적
const trackEvent = (eventName, properties) => {
  ChannelIO.track(eventName, properties);
};

// 사용 예시
trackEvent('Purchase', {
  orderId: 'ORD-12345',
  amount: 29.99,
  currency: 'USD'
});

trackEvent('ViewProduct', {
  productId: 'PROD-001',
  category: 'Electronics'
});
\`\`\`

### 5️⃣ 실제 구현 예시

\`\`\`javascript
import React, { useEffect } from 'react';
import { View, Button, Alert } from 'react-native';
import { ChannelIO } from 'react-native-channel-plugin';

const App = () => {
  useEffect(() => {
    initializeChannelIO();
  }, []);

  const initializeChannelIO = async () => {
    try {
      const settings = {
        pluginKey: "YOUR_PLUGIN_KEY",
        // 로그인 사용자인 경우
        memberId: "user123",
        memberHash: "server_generated_hash",
        profile: {
          name: "홍길동",
          email: "hong@example.com"
        }
      };

      await ChannelIO.boot(settings);
      ChannelIO.showChannelButton();
    } catch (error) {
      Alert.alert('초기화 실패', error.message);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button title="채널 버튼 표시" onPress={() => ChannelIO.showChannelButton()} />
      <Button title="채널 버튼 숨기기" onPress={() => ChannelIO.hideChannelButton()} />
      <Button title="메신저 열기" onPress={() => ChannelIO.open()} />
      <Button title="구매 이벤트 추적" onPress={() => 
        ChannelIO.track('Purchase', { amount: 99.99, currency: 'USD' })
      } />
    </View>
  );
};

export default App;
\`\`\``;
}
function getReactNativeSecurityRecommendations() {
    return `### 멤버 해시 사용
\`\`\`javascript
// ❌ 예측 가능한 memberId 사용 금지
const settings = {
  pluginKey: "YOUR_PLUGIN_KEY",
  memberId: "user@email.com" // 위험: 예측 가능
};

// ✅ 서버에서 생성한 해시값 사용 권장
const settings = {
  pluginKey: "YOUR_PLUGIN_KEY",
  memberId: "USER_UNIQUE_ID",
  memberHash: serverGeneratedHash // 안전: 서버 생성 해시
};
\`\`\`

### 서버 사이드 해시 생성 예시
\`\`\`javascript
// Node.js 서버에서 memberHash 생성
const crypto = require('crypto');

const generateMemberHash = (memberId, secretKey) => {
  return crypto
    .createHmac('sha256', secretKey)
    .update(memberId)
    .digest('hex');
};
\`\`\``;
}
function getReactNativeChecklist() {
    return `### 프로젝트 설정
- [ ] 채널톡 유료 플랜 가입 확인
- [ ] React Native 0.60.0+ 환경 확인
- [ ] iOS: Xcode 12+, CocoaPods 1.10.0+ 확인
- [ ] Android: SDK 15+, Gradle Plugin 8.0.0+ 확인

### 패키지 설치
- [ ] react-native-channel-plugin 패키지 설치
- [ ] 버전 호환성 확인

### iOS 설정
- [ ] CocoaPods 또는 Carthage 설정
- [ ] Swift 버전 명시 (SWIFT_VERSION = 5.0)
- [ ] Info.plist 권한 설정
- [ ] AppDelegate 초기화 코드 추가
- [ ] SceneDelegate 설정 (필요 시)

### Android 설정
- [ ] build.gradle에 채널톡 Maven 저장소 추가
- [ ] MultiDex 설정
- [ ] MainApplication.java 설정

### 코드 구현
- [ ] ChannelIO import 추가
- [ ] 실제 플러그인 키로 "YOUR_PLUGIN_KEY" 교체
- [ ] Boot 설정 (익명 또는 멤버 유저)
- [ ] 채널 버튼 표시/숨김 로직 구현

### 고급 설정
- [ ] 이벤트 트래킹 구현 (필요 시)
- [ ] Shutdown 로직 구현 (필요 시)
- [ ] 커스텀 프로필 설정 (필요 시)

### 보안 설정
- [ ] 멤버 유저 사용 시 memberHash 구현
- [ ] 서버 사이드 해시 생성 로직 구현
- [ ] 예측 가능한 memberId 사용 금지

### 테스트
- [ ] iOS 디바이스/시뮬레이터에서 테스트
- [ ] Android 디바이스/에뮬레이터에서 테스트
- [ ] Boot 성공/실패 상황 테스트
- [ ] 채널 버튼 표시 확인
- [ ] 메신저 정상 작동 확인`;
}
//# sourceMappingURL=get-react-native-guide.tool.js.map