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

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

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

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

ข้อกำหนด

• บัญชี Pushwoosh account
• โปรเจกต์ Pushwoosh project ที่ตั้งค่าไว้ในบัญชีของคุณ
• สำหรับการผสานรวม 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 Cordova SDK Dependency

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

cordova plugin add pushwoosh-cordova-plugin

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

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

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

index.js

function onDeviceReady() {
    var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");

    pushwoosh.onDeviceReady({
        appid: "__YOUR_APP_ID__",
        projectid: "__YOUR_FCM_SENDER_ID__"
    });

    pushwoosh.registerDevice(
    function(status) {
        var pushToken = status.pushToken;
        // Handle successful registration
    },
    function(status) {
        // Handle registration error
  }
);

โดยที่:

• __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 ที่จำเป็นภายในนั้น

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

การผสานรวมแบบขยาย

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

Push notification event listeners

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

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

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

index.js

class PushwooshNotificationHandler {
  setupPushListeners() {

    document.addEventListener('push-receive',
      function(event) {
        console.log("Push received: " + event.notification.message);
      }
    );

    document.addEventListener('push-notification',
      function(event) {
        console.log("Push accepted: " + event.notification.message);
      }
    );
  }
}

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

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

class Registration {
  afterUserLogin(user) {

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

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

Tags

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

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

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

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

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