คู่มือการผสานรวม Expo SDK เบื้องต้น

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

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

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

ข้อกำหนด

• บัญชี Pushwoosh
• โปรเจกต์ Pushwoosh ที่ตั้งค่าไว้ในบัญชีของคุณ
• สำหรับการผสานรวม iOS:
  • แพลตฟอร์ม iOS ที่กำหนดค่าไว้เพื่อส่งการแจ้งเตือนแบบพุช เราแนะนำให้ใช้ การกำหนดค่าการยืนยันตัวตนแบบ Token-Based เป็นวิธีที่ง่ายที่สุด
  • ตั้งค่า Gateway เป็น Sandbox เพื่อส่งพุชไปยัง simulator
• สำหรับการผสานรวม Android:
  • แพลตฟอร์ม Android ที่กำหนดค่าไว้
  • project number (หรือที่เรียกว่า Sender ID), ไฟล์ google-services.json และ package name จากโปรเจกต์ Firebase ของคุณ
  • โปรเจกต์ Firebase ที่เชื่อมต่อกับแอปพลิเคชัน Android ของคุณ ทำตาม คู่มือการตั้งค่า Firebase หากจำเป็น
• Pushwoosh Application Code และ Pushwoosh Device API Token ของคุณจาก Pushwoosh Control Panel สำหรับแอปพลิเคชันของคุณ

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

1. ติดตั้งปลั๊กอิน

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

expo install pushwoosh-expo-plugin

ติดตั้ง Pushwoosh React Native SDK

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

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

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

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 มีค่า “Development” หรือ “production” ให้เลือก
• PW_API_TOKEN, apiToken คือ Pushwoosh Device API Token ของคุณ

3. เริ่มต้น Pushwoosh

ในคอมโพเนนต์หลักของแอปพลิเคชันของคุณ:

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

index.tsx

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

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

Pushwoosh.register();

โดยที่:

• __YOUR_APP_ID__ คือรหัสแอปพลิเคชันจาก Pushwoosh Control Panel
• __YOUR_FCM_SENDER_ID__ คือหมายเลขโปรเจกต์ Firebase จาก Firebase Console

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

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

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

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. การตั้งค่า iOS Native

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

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 และกำหนดค่า dependencies สำหรับแต่ละแพลตฟอร์มโดยการรัน prebuild:

npx expo prebuild

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

1. Build และรันโปรเจกต์:

Android

npx expo run:android

iOS

npx expo run:ios

2. ไปที่ Pushwoosh Control Panel และ ส่งการแจ้งเตือนแบบพุช
3. คุณควรเห็นการแจ้งเตือนในแอป

การผสานรวมขั้นสูง

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

ตัวฟังเหตุการณ์การแจ้งเตือนแบบพุช

ใน Pushwoosh SDK มีตัวฟังเหตุการณ์สองตัวที่ออกแบบมาสำหรับการจัดการการแจ้งเตือนแบบพุช:

• เหตุการณ์ onPushReceived จะถูกเรียกเมื่อได้รับการแจ้งเตือนแบบพุช
• เหตุการณ์ onPushAccepted จะถูกเรียกเมื่อผู้ใช้เปิดการแจ้งเตือน

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

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));
    });

  }
}

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

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

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

class Registration {
  afterUserLogin(user: User): void {

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

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

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

แท็ก

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

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

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

    // 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()
    });
  }
}

เหตุการณ์

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

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

class Registration {

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

  // Track purchase 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 เพื่อเพิ่มเป้าหมาย extension และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

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

Property	Default	Description
คุณสมบัติ iOS
Pushwoosh_LOG_LEVEL	INFO	ระดับ Log สำหรับ iOS ค่าที่เป็นไปได้: NONE, ERROR, WARN, INFO, DEBUG, NOISE
คุณสมบัติ Android
logLevel	INFO	ระดับ Log สำหรับ Android หนึ่งใน: NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	สามารถเปลี่ยนเป็น false ได้ในกรณีที่คุณต้องการแสดงเฉพาะการแจ้งเตือนล่าสุดสำหรับผู้ใช้
icon	-	พาธไปยังไอคอนการแจ้งเตือนแบบกำหนดเองสำหรับ Android

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

หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานรวม โปรดดูส่วน การสนับสนุนและชุมชน

ข้อผิดพลาดในการลงทะเบียน FCM: ไม่สามารถดึงโทเค็นได้ Firebase กำหนดค่าถูกต้องหรือไม่?

ตรวจสอบให้แน่ใจว่าคุณสมบัติ googleServicesFile ของ Firebase ของคุณได้รับการตั้งค่าในไฟล์การกำหนดค่า Expo และไฟล์ google-services.json ถูกเพิ่มไปยังไดเรกทอรีรากของโปรเจกต์ของคุณ:

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: ไม่สามารถอ่านคุณสมบัติ ‘init’ ของ null

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

npx expo prebuild