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

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

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

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

expo install pushwoosh-expo-plugin

ติดตั้ง Pushwoosh React Native SDK

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

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

{
  "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 ของคุณ

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

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

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

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

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

  "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__"
        }
      }
    ]
  ]
}

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

  "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__"
        }
      }
    ]
  ]
}

สร้างโค้ดเนทีฟและกำหนดค่าการพึ่งพาสำหรับแต่ละแพลตฟอร์มโดยการรัน prebuild:

npx expo prebuild

1. บิวด์และรันโปรเจกต์:

npx expo run:android

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

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

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

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

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

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

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

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

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

"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__"
        }
      }
    ]
  ]
}

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

npx expo prebuild