# คู่มือการผสานรวมพื้นฐาน React Native SDK

ส่วนนี้ประกอบด้วยข้อมูลเกี่ยวกับวิธีการผสานรวม Pushwoosh React Native SDK เข้ากับแอปพลิเคชันของคุณ

## ข้อกำหนดเบื้องต้น

ในการผสานรวม Pushwoosh React Native SDK เข้ากับแอปของคุณ คุณจะต้องมีสิ่งต่อไปนี้:

<Aside type="note" title="ข้อกำหนด">
 -  [บัญชี Pushwoosh](https://sso.pushwoosh.com/login)
 -  [โปรเจกต์ Pushwoosh](/th/product/first-steps/start-with-your-project/create-your-project) ที่ตั้งค่าไว้ในบัญชีของคุณ
 - **สำหรับการผสานรวม iOS:**
    - แพลตฟอร์ม iOS ที่กำหนดค่าให้ส่ง push notification เราขอแนะนำให้ใช้ [การกำหนดค่า Token-Based Authentication](/th/developer/first-steps/connect-messaging-services/ios-configuration/ios-token-based-configuration/) เป็นวิธีที่ง่ายที่สุด
    - ตั้งค่า Gateway เป็น `Sandbox` เพื่อส่ง push ไปยัง simulator
 - **สำหรับการผสานรวม Android:**
    -  [แพลตฟอร์ม Android ที่กำหนดค่าแล้ว](/th/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration)
    - ไฟล์ `google-services.json` และ `package name` จากโปรเจกต์ Firebase ของคุณ
    - โปรเจกต์ Firebase ที่เชื่อมต่อกับแอปพลิเคชัน Android ของคุณ ทำตาม [คู่มือการตั้งค่า Firebase](https://firebase.google.com/docs/android/setup#manually_add_firebase) หากจำเป็น
 - `Pushwoosh Application Code` และ [Pushwoosh Device API Token](/th/developer/api-reference/api-access-token/#device-api-token) ของคุณจาก Pushwoosh Control Panel สำหรับแอปพลิเคชันของคุณ
</Aside>

## ขั้นตอนการผสานรวม

### 1. เพิ่ม Dependency ของ Pushwoosh React Native SDK

เพิ่ม dependency ของ Pushwoosh React Native SDK ไปยังโปรเจกต์ของคุณ:

```bash
npm install pushwoosh-react-native-plugin --save
```

### 2. การเริ่มต้น React Native SDK

ใน root component ของไฟล์ `index.js` ของคุณ:
- นำเข้า `pushwoosh-react-native-plugin`
- เริ่มต้น Pushwoosh SDK
- เรียกใช้ `register()` ในตรรกะการเริ่มต้นของคุณเพื่อลงทะเบียนสำหรับ push notification

```javascript title="index.js"
import Pushwoosh from 'pushwoosh-react-native-plugin';

AppRegistry.registerComponent(appName, () => App);

Pushwoosh.init({
    "pw_appid" : "__YOUR_APP_ID__"
});

Pushwoosh.register();
```

โดยที่:
- `__YOUR_APP_ID__` คือ application code จาก Pushwoosh Control Panel


### 3. การตั้งค่า iOS Native

#### 3.1 Capabilities

เพื่อเปิดใช้งาน Push Notifications ในโปรเจกต์ของคุณ คุณต้องเพิ่ม capabilities บางอย่าง

ในส่วน Signing & Capabilities ให้เพิ่ม capabilities ต่อไปนี้:
- `Push Notifications`
- `Background Modes` หลังจากเพิ่ม capability นี้แล้ว ให้เลือกช่องสำหรับ `Remote notifications`

หากคุณต้องการใช้ Time Sensitive Notifications (iOS 15+) ให้เพิ่ม capability `Time Sensitive Notifications` ด้วย

#### 3.2 Info.plist

ใน `Runner/Info.plist` ของคุณ ให้ตั้งค่าคีย์ `__PUSHWOOSH_DEVICE_API_TOKEN__` เป็น [Pushwoosh Device API Token](/th/developer/api-reference/api-access-token/#device-api-token):
```swift title="info.plist"
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>
```

#### 3.3 การติดตามการส่งข้อความ

คุณต้องเพิ่ม target Notification Service Extension ไปยังโปรเจกต์ของคุณ นี่เป็นสิ่งจำเป็นสำหรับการติดตามการส่งที่แม่นยำและฟีเจอร์ต่างๆ เช่น Rich Media บน iOS

ทำตาม [ขั้นตอนในคู่มือ native](/th/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) เพื่อเพิ่ม extension target และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

#### 3.4 การติดตั้ง dependencies สำหรับโปรเจกต์ iOS React Native

ในการติดตั้ง dependencies สำหรับโปรเจกต์ iOS React Native ให้ไปที่โฟลเดอร์ ```ios``` ใน terminal แล้วรันคำสั่ง:

```bash
pod install --repo-update
```

### 4. การตั้งค่า Android Native

#### 4.1 ติดตั้ง dependencies

ตรวจสอบให้แน่ใจว่าได้เพิ่ม dependencies และ plugin ที่จำเป็นลงในสคริปต์ Gradle ของคุณแล้ว:

เพิ่ม Google Services Gradle plugin ไปยัง dependencies ของ `build.gradle` ระดับโปรเจกต์ของคุณ:

```groovy title="android/build.gradle"
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}
```

ใช้ plugin ในไฟล์ `build.gradle` ระดับแอปของคุณ:

```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```

#### 4.2 เพิ่มไฟล์การกำหนดค่า Firebase

วางไฟล์ `google-services.json` ลงในโฟลเดอร์ `android/app` ในไดเรกทอรีโปรเจกต์ของคุณ

#### 4.3 เพิ่ม metadata ของ Pushwoosh

ใน `main/AndroidManifest.xml` ของคุณ ให้เพิ่ม [Pushwoosh Device API Token](/th/developer/api-reference/api-access-token/#device-api-token) ภายในแท็ก `<application>`:

```xml title="AndroidManifest.xml"
<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />
```

> **สำคัญ:** ตรวจสอบให้แน่ใจว่าได้ให้สิทธิ์การเข้าถึงของ token กับแอปที่ถูกต้องใน Pushwoosh Control Panel ของคุณ [เรียนรู้เพิ่มเติม](/th/developer/api-reference/api-access-token/#edit-token)

### 5. รันโปรเจกต์

1. บิวด์และรันโปรเจกต์
2. ไปที่ Pushwoosh Control Panel และ [ส่ง push notification](/th/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
3. คุณควรจะเห็นการแจ้งเตือนในแอป

## การผสานรวมเพิ่มเติม

ณ จุดนี้ คุณได้ผสานรวม SDK และสามารถส่งและรับ push notification ได้แล้ว ตอนนี้เรามาดูฟังก์ชันการทำงานหลักกัน

### ตัวดักจับ event ของ Push notification

ใน Pushwoosh SDK มี event listener สองตัวที่ออกแบบมาเพื่อจัดการ push notification:

- event `pushReceived` จะถูกทริกเกอร์เมื่อได้รับ push notification
- event `pushOpened` จะถูกทริกเกอร์เมื่อผู้ใช้เปิดการแจ้งเตือน

คุณควรตั้งค่า event listener เหล่านี้ทันทีหลังจากการเริ่มต้น SDK เมื่อแอปพลิเคชันเริ่มทำงาน:

```javascript
import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}
```

### การกำหนดค่าผู้ใช้

ด้วยการมุ่งเน้นไปที่พฤติกรรมและความชอบของผู้ใช้แต่ละราย คุณสามารถส่งมอบเนื้อหาที่ปรับให้เหมาะกับแต่ละบุคคล ซึ่งนำไปสู่ความพึงพอใจและความภักดีของผู้ใช้ที่เพิ่มขึ้น

```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user WhatsApp number
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}
```

### Tags

Tags คือคู่ของ key-value ที่กำหนดให้กับผู้ใช้หรืออุปกรณ์ ซึ่งช่วยให้สามารถแบ่งกลุ่มตามคุณลักษณะต่างๆ เช่น ความชอบหรือพฤติกรรม ทำให้สามารถส่งข้อความแบบกำหนดเป้าหมายได้

```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Set list of favorite categories
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}
```

### Events

Events คือการกระทำหรือเหตุการณ์เฉพาะของผู้ใช้ภายในแอปที่สามารถติดตามเพื่อวิเคราะห์พฤติกรรมและทริกเกอร์ข้อความหรือการกระทำที่สอดคล้องกัน

```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Track login event
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}
```

## การแก้ไขปัญหา

หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานรวม โปรดอ้างอิงถึงส่วน [การสนับสนุนและชุมชน](/th/developer/pushwoosh-sdk/support-and-community)