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

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

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

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

ข้อกำหนด

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

เพิ่ม Pushwoosh Capacitor SDK dependency ลงในโปรเจกต์ของคุณ:

npm install pushwoosh-capacitor-plugin

ซิงค์การกำหนดค่า Capacitor:

npx cap sync

2. การเริ่มต้น Capacitor SDK

ในไฟล์ JavaScript หลักของคุณ ให้นำเข้าและเริ่มต้น Pushwoosh SDK:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Initialize the SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__",
    projectid: "__YOUR_FCM_SENDER_ID__"
});

// Register for push notifications
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Handle successful registration
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Handle registration error
    });

โดยที่:

• __YOUR_APP_ID__ คือ application code จาก Pushwoosh Control Panel
• __YOUR_FCM_SENDER_ID__ คือ project number ของ Firebase จาก Firebase Console

3. การตั้งค่า iOS Native

3.1 ความสามารถ

ในการเปิดใช้งาน Push Notifications ในโปรเจกต์ของคุณ คุณต้องเพิ่มความสามารถบางอย่าง

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

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

หากคุณต้องการใช้ Time Sensitive Notifications (iOS 15+) ให้เพิ่มความสามารถ 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 ที่จำเป็นภายในนั้น

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. สร้างและเรียกใช้โปรเจกต์
2. ไปที่ Pushwoosh Control Panel และ ส่ง push notification
3. คุณควรเห็น notification ในแอป

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

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

Push notification event listeners

ใน Pushwoosh Capacitor SDK มีสอง callback methods สำหรับจัดการ push notifications:

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

คุณควรตั้งค่า callback เหล่านี้ทันทีหลังจากเริ่มต้น SDK:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Set up push received callback
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Handle the received notification
    }
});

// Set up push opened callback
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Handle the opened notification
    }
});

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

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {
  async afterUserLogin(user) {

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

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

แท็ก

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Set list of favorite categories
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    await Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

เหตุการณ์

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {

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

  // Track purchase event
  afterUserPurchase(product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

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

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