คู่มือการผสานการทำงานพื้นฐานสำหรับ React Native SDK

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

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

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

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

ใน root component ของไฟล์ index.js ของคุณ:

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

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

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

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

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

ในส่วน Signing & Capabilities ให้เพิ่ม capabilities ต่อไปนี้:

• Push Notifications
• Background Modes หลังจากเพิ่ม capability นี้แล้ว ให้เลือกช่องสำหรับ Remote notifications

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

ในไฟล์ Runner/Info.plist ของคุณ ให้ตั้งค่าคีย์ __PUSHWOOSH_DEVICE_API_TOKEN__ เป็น Pushwoosh Device API Token:

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

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

ทำตาม ขั้นตอนในคู่มือ native เพื่อเพิ่ม extension target และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

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

pod install --repo-update

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

เพิ่มปลั๊กอิน Google Services Gradle ไปยัง dependencies ของ build.gradle ในระดับโปรเจกต์:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

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

apply plugin: 'com.google.gms.google-services'

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

ในไฟล์ main/AndroidManifest.xml ของคุณ เพิ่ม Pushwoosh Device API Token ภายในแท็ก <application>:

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

สำคัญ: ตรวจสอบให้แน่ใจว่าได้ให้สิทธิ์โทเค็นในการเข้าถึงแอปที่ถูกต้องใน Pushwoosh Control Panel ของคุณ เรียนรู้เพิ่มเติม

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

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

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

• อีเวนต์ pushReceived จะถูกทริกเกอร์เมื่อได้รับการแจ้งเตือนแบบพุช
• อีเวนต์ pushOpened จะถูกทริกเกอร์เมื่อผู้ใช้เปิดการแจ้งเตือน

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

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

  }
}

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

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

class Registration {
  afterUserLogin(user: User) {

    // ตั้งค่า ID ผู้ใช้
    Pushwoosh.setUserId(user.getId());

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

    // การตั้งค่าข้อมูลผู้ใช้เพิ่มเติมเป็นแท็กสำหรับ 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) {

    // ตั้งค่ารายการหมวดหมู่โปรด
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

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

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

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

class Registration {

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

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

หากคุณพบปัญหาใดๆ ในระหว่างขั้นตอนการผสานการทำงาน โปรดอ้างอิงถึงส่วน การสนับสนุนและชุมชน