# คู่มือการผสานการทำงานพื้นฐานของ Flutter SDK ส่วนนี้ประกอบด้วยข้อมูลเกี่ยวกับวิธีการผสานการทำงาน Pushwoosh Flutter SDK เข้ากับแอปพลิเคชันของคุณ ## ข้อกำหนดเบื้องต้น ในการผสานการทำงาน Pushwoosh Flutter SDK เข้ากับแอปของคุณ คุณจะต้องมีสิ่งต่อไปนี้: ## ขั้นตอนการผสานการทำงาน ### 1. เพิ่ม Dependency ของ Pushwoosh Flutter SDK เพิ่ม package `pushwoosh_flutter` ไปยังไฟล์ `pubspec.yaml` ของคุณ: ```yaml title="pubspec.yaml" dependencies: flutter: sdk: flutter # Use the latest version from https://pub.dev/packages/pushwoosh_flutter pushwoosh_flutter: ^[LATEST_VERSION] ``` ตรวจสอบ [เวอร์ชันล่าสุด](https://pub.dev/packages/pushwoosh_flutter) บน pub.dev จากนั้น รันคำสั่งต่อไปนี้ในไดเรกทอรีรากของโปรเจกต์ของคุณเพื่อติดตั้ง dependency: ```bash flutter pub get ``` ตรวจสอบอีกครั้งว่า package ได้รับการติดตั้งอย่างถูกต้อง: ```bash flutter pub deps | grep pushwoosh_flutter # Example output: # ❯ flutter pub deps | grep pushwoosh_flutter # └── pushwoosh_flutter 2.3.11 ``` ### 2. การเริ่มต้น Flutter SDK ใน root component ของไฟล์ `main.dart` ของคุณ: - นำเข้า package `pushwoosh_flutter` - เริ่มต้น Pushwoosh SDK - เรียกใช้ `registerForPushNotifications()` ในตรรกะการเริ่มต้นของคุณเพื่อลงทะเบียนสำหรับ push notification ```dart title="main.dart" import 'package:pushwoosh_flutter/pushwoosh_flutter.dart'; void main() async { runApp(const MyApp()); Pushwoosh.initialize({ "app_id": "__YOUR_APP_ID__" }); Pushwoosh.getInstance.registerForPushNotifications(); } ``` โดยที่: - `__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 ที่จำเป็นภายในนั้น เพื่อให้แน่ใจว่า Notification Service Extension ได้รับการผสานการทำงานอย่างถูกต้องในโปรเจกต์ Flutter ของคุณ คุณต้องใช้การกำหนดค่า Podfile ต่อไปนี้: ```ruby title="Podfile" target 'NotificationServiceExtension' do use_frameworks! use_modular_headers! pod 'PushwooshXCFramework' inherit! :search_paths end ``` #### 3.4 การติดตั้ง dependencies สำหรับโปรเจกต์ iOS Flutter ในการติดตั้ง dependencies สำหรับโปรเจกต์ iOS Flutter ให้รันคำสั่งต่อไปนี้: ```bash flutter run ``` หรือไปที่โฟลเดอร์ `ios` ใน terminal แล้วรัน: ```bash pod install --repo-update ``` ### 4. การตั้งค่า Native ของ Android #### 4.1 ติดตั้ง dependencies ตรวจสอบให้แน่ใจว่าได้เพิ่ม dependencies และ plugin ที่จำเป็นลงในสคริปต์ Gradle ของคุณแล้ว: เพิ่ม Google Services Gradle plugin ไปยัง dependencies ของ `build.gradle` ระดับโปรเจกต์ของคุณ: ```groovy title="android/build.gradle" buildscript { dependencies { classpath 'com.google.gms:google-services:4.3.15' } } ``` ใช้ plugin ในไฟล์ `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. คุณควรจะเห็นการแจ้งเตือนในแอป ## การผสานการทำงานเพิ่มเติม ณ จุดนี้ คุณได้ผสานการทำงาน SDK และสามารถส่งและรับ push notification ได้แล้ว ตอนนี้ เรามาดูฟังก์ชันการทำงานหลักกัน ### Event listener สำหรับ Push notification ใน Pushwoosh SDK มี event listener สองตัวที่ออกแบบมาเพื่อจัดการ push notification: - event `onPushReceived` จะถูกทริกเกอร์เมื่อได้รับ push notification - event `onPushAccepted` จะถูกทริกเกอร์เมื่อผู้ใช้เปิดการแจ้งเตือน คุณควรตั้งค่า event listener เหล่านี้ทันทีหลังจากการเริ่มต้น SDK เมื่อแอปพลิเคชันเริ่มทำงาน: ```dart import 'package:pushwoosh_flutter/pushwoosh_flutter.dart'; class PushwooshNotificationHandler { void setupPushListeners(Pushwoosh pushwoosh) { pushwoosh.onPushReceived.listen((event) { print("Push received: ${event.pushwooshMessage.payload}"); }); pushwoosh.onPushAccepted.listen((event) { print("Push accepted: ${event.pushwooshMessage.payload}"); }); } } ``` ### การกำหนดค่าผู้ใช้ โดยการมุ่งเน้นไปที่พฤติกรรมและความชอบของผู้ใช้แต่ละราย คุณสามารถส่งมอบเนื้อหาที่ปรับให้เหมาะกับแต่ละบุคคล ซึ่งนำไปสู่ความพึงพอใจและความภักดีของผู้ใช้ที่เพิ่มขึ้น ```dart import 'package:pushwoosh_flutter/pushwoosh_flutter.dart'; class Registration { void afterUserLogin(User user) { // ตั้งค่า User ID Pushwoosh().setUserId(user.getId()); // ตั้งค่าอีเมลผู้ใช้ Pushwoosh().setEmail(user.getEmail()); // ลงทะเบียนหมายเลข SMS // หมายเลข SMS และ WhatsApp ต้องอยู่ในรูปแบบ E.164 (เช่น "+1234567890") และต้องถูกต้อง Pushwoosh().registerSmsNumber(user.getSmsNumber()); // ลงทะเบียนหมายเลข WhatsApp Pushwoosh().registerWhatsappNumber(user.getWhatsappNumber()); // การตั้งค่าข้อมูลผู้ใช้เพิ่มเติมเป็น tag สำหรับ Pushwoosh Pushwoosh().setTags({ "age": user.getAge(), "name": user.getName(), "last_login": user.getLastLoginDate() }); } } ``` ### Tags Tag คือคู่ของคีย์-ค่าที่กำหนดให้กับผู้ใช้หรืออุปกรณ์ ช่วยให้สามารถแบ่งกลุ่มตามคุณลักษณะต่างๆ เช่น ความชอบหรือพฤติกรรม ทำให้สามารถส่งข้อความแบบกำหนดเป้าหมายได้ ```dart import 'package:pushwoosh_flutter/pushwoosh_flutter.dart'; class UpdateUser { void afterUserUpdateProfile(User user) { // ตั้งค่ารายการหมวดหมู่โปรด Pushwoosh().setTags({ "favorite_categories": user.getFavoriteCategoriesList() }); // ตั้งค่าข้อมูลการชำระเงิน Pushwoosh().setTags({ "is_subscribed": user.isSubscribed(), "payment_status": user.getPaymentStatus(), "billing_address": user.getBillingAddress() }); } } ``` ### Events Event คือการกระทำหรือเหตุการณ์ที่เกิดขึ้นโดยเฉพาะของผู้ใช้ภายในแอป ซึ่งสามารถติดตามเพื่อวิเคราะห์พฤติกรรมและทริกเกอร์ข้อความหรือการกระทำที่สอดคล้องกันได้ ```dart import 'package:pushwoosh_flutter/pushwoosh_flutter.dart'; class Registration { // ติดตาม event การล็อกอิน void afterUserLogin(User user) { Pushwoosh().postEvent("login", { "name": user.getName(), "last_login": user.getLastLoginDate() }); } void afterUserPurchase(Product product) { // ติดตาม event การซื้อ Pushwoosh().postEvent("purchase", { "product_id": product.getId(), "product_name": product.getName(), "price": product.getPrice(), "quantity": product.getQuantity() }); } } ``` ## การใช้ ProGuard ดังนั้น คุณอาจได้รับ exception นี้: ```java java.lang.IllegalStateException: Could not find class for name: com.pushwoosh.plugin.PushwooshNotificationServiceExtension ``` ในกรณีนี้มีสองวิธีแก้ไข: 1. ใช้คำสั่ง `flutter build apk --no-shrink` เพื่อคอมไพล์โค้ดของคุณโดยไม่มีการ obfuscation 2. หรือคุณสามารถเปิดใช้งาน ProGuard ด้วยตนเองและเพิ่ม rule ที่จำเป็น ในการเปิดใช้งาน ProGuard สำหรับโปรเจกต์ของคุณ ให้เพิ่มสตริงต่อไปนี้ลงในไฟล์ `build.gradle` ของคุณ: ```java title="build.gradle" buildTypes { release { minifyEnabled true useProguard true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.debug } } ``` จากนั้น เพิ่ม rule ต่อไปนี้ไปยัง `android/app/proguard-rules.pro` ```java title="proguard-rules.pro" #Pushwoosh Flutter -keep class com.pushwoosh.plugin.PushwooshPlugin { *; } -keep class com.pushwoosh.plugin.PushwooshNotificationServiceExtension { *; } ``` ## การแก้ไขปัญหา หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานการทำงาน โปรดอ้างอิงถึงส่วน [การสนับสนุนและชุมชน](/th/developer/pushwoosh-sdk/support-and-community)