# คู่มือการผสานการทำงานพื้นฐาน Expo SDK

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

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

ในการผสานการทำงาน Pushwoosh Expo 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. ติดตั้งปลั๊กอิน

ติดตั้งปลั๊กอิน Pushwoosh Expo โดยใช้ Expo CLI

```bash
expo install pushwoosh-expo-plugin
```

ติดตั้ง Pushwoosh React Native SDK

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

### 2. ตั้งค่าคุณสมบัติของปลั๊กอิน

เพิ่มปลั๊กอินไปที่ด้านหน้าของ plugin array พร้อมกับคุณสมบัติที่จำเป็น:

```json title="app.json/app.config.js"
{
  "expo": {
    "plugins": [
      [
        "pushwoosh-expo-plugin",
        {
          "mode": "development",
          "ios": {
            "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
          },
          "android": {
            "apiToken": "__YOUR_DEVICE_API_TOKEN__"
          }
        }
      ]
    ]
  }
}
```
โดยที่:

- `mode` ใช้เพื่อกำหนดค่า APNs environment entitlement มีค่าที่เป็นไปได้คือ “Development” หรือ “production”
- `PW_API_TOKEN`, `apiToken` คือ [Pushwoosh Device API Token ของคุณ](/th/developer/api-reference/api-access-token/#device-api-token)

### 3. เริ่มต้นการทำงาน Pushwoosh

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

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

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

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

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

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

1. คัดลอกไฟล์ `google-services.json` ของคุณไปยังไดเรกทอรีรากของโปรเจกต์
2. ตั้งค่าคุณสมบัติ `googleServicesFile` เป็นพาธของ `google-services.json` ของคุณและระบุคุณสมบัติ `package`:

```json title="app.json/app.config.js"
  "expo": {
    "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

### 5. การตั้งค่า Native ของ iOS

ตั้งค่าคุณสมบัติ `bundleIdentifier` ให้กับอ็อบเจกต์ `ios`:

```json title="app.json/app.config.js"
  "expo": {
    "name": "sample",
    "ios": {
      "bundleIdentifier": "com.pushwoosh.sample"
    },
    "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

### 6. Prebuild แอป
สร้างโค้ด native และกำหนดค่า dependency สำหรับแต่ละแพลตฟอร์มโดยการรัน prebuild:
```bash
npx expo prebuild
```

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

1. บิวด์และรันโปรเจกต์:
<Tabs>
<TabItem label="Android">
```bash
npx expo run:android
```
</TabItem>

<TabItem label="iOS">
```bash
npx expo run:ios
```
</TabItem>
</Tabs>

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

## การผสานการทำงานเพิ่มเติม

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

### Event listeners สำหรับ Push notification

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

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

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

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

class PushwooshNotificationHandler {
  setupPushListeners(): void {

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

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

  }
}
```

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

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

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

class Registration {
  afterUserLogin(user: User): void {
    
    // ตั้งค่า User ID
    Pushwoosh.setUserId(user.getId());

    // ตั้งค่าอีเมลผู้ใช้
    Pushwoosh.setEmails(user.getEmailList());

    // การตั้งค่าข้อมูลผู้ใช้เพิ่มเติมเป็น tag สำหรับ Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}
```

### Tags

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

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

class UpdateUser {
  afterUserUpdateProfile(user: User): void {

    // ตั้งค่ารายการหมวดหมู่ที่ชื่นชอบ
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // ตั้งค่าข้อมูลการชำระเงิน
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}
```

### Events

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

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

class Registration {

  // ติดตาม event การเข้าสู่ระบบ
  afterUserLogin(user: User): void {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // ติดตาม event การซื้อ
  afterUserPurchase(product: Product): void {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}
```

### การติดตามการส่งข้อความสำหรับ iOS

คุณต้องเพิ่มเป้าหมาย 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 และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

### คุณสมบัติเพิ่มเติมของปลั๊กอิน

| คุณสมบัติ <div style="width:180px"></div> | ค่าเริ่มต้น <div style="width:100px"></div> | คำอธิบาย |
|-----------------|---------|-------------|
| **คุณสมบัติ iOS** | | |
| `Pushwoosh_LOG_LEVEL` | `INFO` | ระดับการบันทึกสำหรับ iOS ค่าที่เป็นไปได้: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| **คุณสมบัติ Android** | | |
| `logLevel` | `INFO` | ระดับการบันทึกสำหรับ Android หนึ่งใน: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| `multiNotificationMode`| `true` | สามารถเปลี่ยนเป็น false ได้ในกรณีที่คุณต้องการแสดงเฉพาะการแจ้งเตือนล่าสุดสำหรับผู้ใช้ |
| `icon` | - | พาธไปยังไอคอนการแจ้งเตือนที่กำหนดเองสำหรับ Android |

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

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

###### FCM registration error: Failed to retrieve token. Is firebase configured correctly?

ตรวจสอบให้แน่ใจว่าคุณสมบัติ `googleServicesFile` ของ Firebase ของคุณถูกตั้งค่าในไฟล์การกำหนดค่า Expo และไฟล์ `google-services.json` ถูกเพิ่มไปยังไดเรกทอรีรากของโปรเจกต์ของคุณ:
```json title="app.json/app.config.js"
"expo": {
  "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

###### TypeError: Cannot read property 'init' of null

คุณอาจพบข้อผิดพลาดนี้เมื่อพยายามรันแอปบนอุปกรณ์\
เพื่อแก้ไขปัญหานี้ ตรวจสอบให้แน่ใจว่าคุณได้ทำขั้นตอน prebuild เสร็จสิ้นแล้ว ขั้นตอนนี้จะสร้างโค้ด native และกำหนดค่า dependency สำหรับแต่ละแพลตฟอร์ม

```bash
npx expo prebuild
```