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

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

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

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

ข้อกำหนด

• บัญชี Pushwoosh
• โปรเจกต์ Pushwoosh ที่ตั้งค่าไว้ในบัญชีของคุณ
• สำหรับการผสานรวม iOS:
  • แพลตฟอร์ม iOS ที่กำหนดค่าไว้เพื่อส่ง push notifications เราแนะนำให้ใช้ การกำหนดค่าการตรวจสอบสิทธิ์แบบ Token-Based เป็นวิธีที่ง่ายที่สุด
  • ตั้งค่า Gateway เป็น Sandbox เพื่อส่ง pushes ไปยัง 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. เพิ่ม Dependency ของ Pushwoosh React Native SDK

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

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

2. การเริ่มต้นใช้งาน React Native SDK

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

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

index.js

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__ คือ application code จาก Pushwoosh Control Panel
• __YOUR_FCM_SENDER_ID__ คือ Firebase project number จาก Firebase Console

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:

info.plist

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

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

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

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

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

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

pod install --repo-update

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

4.1 ติดตั้ง dependencies

ตรวจสอบให้แน่ใจว่า dependencies และ plugins ที่จำเป็นถูกเพิ่มลงใน Gradle scripts ของคุณ:

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

android/build.gradle

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

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

app/build.gradle

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

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

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

4.3 เพิ่ม Pushwoosh metadata

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

AndroidManifest.xml

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

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

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

1. Build และรันโปรเจกต์
2. ไปที่ Pushwoosh Control Panel และ ส่ง push notification
3. คุณควรเห็น notification ในแอป

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

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

Push notification event listeners

ใน Pushwoosh SDK มี event listeners สองตัวที่ออกแบบมาสำหรับการจัดการ push notifications:

• event pushReceived จะถูกเรียกใช้เมื่อได้รับ push notification
• event pushOpened จะถูกเรียกใช้เมื่อผู้ใช้เปิด notification

คุณควรตั้งค่า event listeners เหล่านี้ทันทีหลังจากเริ่มต้นใช้งาน 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) {

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

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

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

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

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