# คู่มือการผสานรวมพื้นฐาน Cordova SDK
ส่วนนี้ประกอบด้วยข้อมูลเกี่ยวกับวิธีการผสานรวม Pushwoosh Cordova SDK เข้ากับแอปพลิเคชันของคุณ
## ข้อกำหนดเบื้องต้น
ในการผสานรวม Pushwoosh Cordova SDK เข้ากับแอปของคุณ คุณจะต้องมีสิ่งต่อไปนี้:
## ขั้นตอนการผสานรวม
### 1. เพิ่ม Dependency ของ Pushwoosh Cordova SDK
เพิ่ม dependency ของ Pushwoosh Cordova SDK ไปยังโปรเจกต์ของคุณ:
```bash
cordova plugin add pushwoosh-cordova-plugin
```
### 2. การเริ่มต้น Cordova SDK
ใน root component ของไฟล์ `index.js` ของคุณ ให้เพิ่มโค้ดต่อไปนี้ภายใน event handler `deviceready` ทำตามขั้นตอนตามลำดับที่ถูกต้อง:
```javascript title="index.js"
document.addEventListener('deviceready', function() {
var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");
// 1. Register notification callbacks before initialization
document.addEventListener('push-receive', function(event) {
var notification = event.notification;
console.log("Push received: " + JSON.stringify(notification));
});
document.addEventListener('push-notification', function(event) {
var notification = event.notification;
console.log("Push opened: " + JSON.stringify(notification));
});
// 2. Initialize Pushwoosh
pushwoosh.onDeviceReady({
appid: "__YOUR_APP_ID__"
});
// 3. Register the device to receive push notifications
pushwoosh.registerDevice(
function(status) {
var pushToken = status.pushToken;
// Handle successful registration
},
function(status) {
// Handle registration error
}
);
}, false);
```
โดยที่:
- `__YOUR_APP_ID__` คือ application code จาก Pushwoosh Control Panel
### 3. การตั้งค่า Native ของ iOS
#### 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](/th/developer/api-reference/api-access-token/#device-api-token):
```swift title="info.plist"
Pushwoosh_API_TOKEN
__PUSHWOOSH_DEVICE_API_TOKEN__
```
#### 3.3 การติดตามการส่งข้อความ
คุณต้องเพิ่ม target Notification Service Extension ไปยังโปรเจกต์ของคุณ นี่เป็นสิ่งจำเป็นสำหรับการติดตามการส่งที่แม่นยำและฟีเจอร์ต่างๆ เช่น Rich Media บน iOS
ทำตาม [ขั้นตอนในคู่มือ native](/th/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) เพื่อเพิ่ม extension target และโค้ด Pushwoosh ที่จำเป็นภายในนั้น
### 4. การตั้งค่า Native ของ Android
#### 4.1 ติดตั้ง dependencies
ตรวจสอบให้แน่ใจว่าได้เพิ่ม dependencies และปลั๊กอินที่จำเป็นลงในสคริปต์ Gradle ของคุณแล้ว:
เพิ่มปลั๊กอิน Google Services Gradle ไปยัง dependencies ของ `build.gradle` ระดับโปรเจกต์ของคุณ:
```groovy title="android/build.gradle"
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
```
ใช้ปลั๊กอินในไฟล์ `build.gradle` ระดับแอปของคุณ:
```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```
#### 4.2 เพิ่มไฟล์กำหนดค่า Firebase
วางไฟล์ `google-services.json` ลงในโฟลเดอร์ `android/app` ในไดเรกทอรีโปรเจกต์ของคุณ
#### 4.3 เพิ่ม metadata ของ Pushwoosh
ใน `main/AndroidManifest.xml` ของคุณ ให้เพิ่ม [Pushwoosh Device API Token](/th/developer/api-reference/api-access-token/#device-api-token) ภายในแท็ก ``:
```xml title="AndroidManifest.xml"
```
> **สำคัญ:** ตรวจสอบให้แน่ใจว่าได้ให้สิทธิ์การเข้าถึงของ token แก่แอปที่ถูกต้องใน Pushwoosh Control Panel ของคุณ [เรียนรู้เพิ่มเติม](/th/developer/api-reference/api-access-token/#edit-token)
### 5. เรียกใช้โปรเจกต์
1. สร้างและเรียกใช้โปรเจกต์
2. ไปที่ Pushwoosh Control Panel และ [ส่ง push notification](/th/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
3. คุณควรจะเห็น notification ในแอป
## การผสานรวมเพิ่มเติม
ณ จุดนี้ คุณได้ผสานรวม SDK และสามารถส่งและรับ push notification ได้แล้ว ตอนนี้เรามาดูฟังก์ชันการทำงานหลักกัน
### Event listeners ของ Push notification
ใน Pushwoosh SDK มี event listeners สองตัวที่ออกแบบมาเพื่อจัดการ push notification:
- event `push-receive` จะถูกทริกเกอร์เมื่อได้รับ push notification ขณะที่แอปอยู่ในเบื้องหน้า (foreground)
- event `push-notification` จะถูกทริกเกอร์เมื่อผู้ใช้เปิด notification
Event listeners เหล่านี้ **ต้อง** ลงทะเบียน **ก่อน** ที่จะเรียก `onDeviceReady()` ดังที่แสดงใน [ขั้นตอนการเริ่มต้นด้านบน](#2-cordova-sdk-initialization) คุณสามารถปรับแต่งตรรกะของ handler ให้เหมาะกับความต้องการของคุณได้:
```javascript title="index.js"
// Register before onDeviceReady()
document.addEventListener('push-receive', function(event) {
var message = event.notification.message;
var payload = event.notification.userdata;
console.log("Push received: " + message);
// Add your custom logic here
});
document.addEventListener('push-notification', function(event) {
var message = event.notification.message;
var payload = event.notification.userdata;
console.log("Push accepted: " + message);
// Add your custom logic here (e.g., navigate to a specific screen)
});
```
### การกำหนดค่าผู้ใช้
ด้วยการมุ่งเน้นไปที่พฤติกรรมและความชอบของผู้ใช้แต่ละราย คุณสามารถส่งมอบเนื้อหาที่ปรับให้เหมาะกับแต่ละบุคคล ซึ่งนำไปสู่ความพึงพอใจและความภักดีของผู้ใช้ที่เพิ่มขึ้น
```javascript
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 ที่กำหนดให้กับผู้ใช้หรืออุปกรณ์ ซึ่งช่วยให้สามารถแบ่งกลุ่มตามคุณลักษณะต่างๆ เช่น ความชอบหรือพฤติกรรม ทำให้สามารถส่งข้อความแบบกำหนดเป้าหมายได้
```javascript
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 คือการกระทำหรือเหตุการณ์เฉพาะของผู้ใช้ภายในแอปที่สามารถติดตามเพื่อวิเคราะห์พฤติกรรมและทริกเกอร์ข้อความหรือการกระทำที่สอดคล้องกัน
```javascript
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()
});
}
}
```
## การแก้ไขปัญหา
หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานรวม โปรดดูที่ส่วน [การสนับสนุนและชุมชน](/th/developer/pushwoosh-sdk/support-and-community)