เริ่มต้นใช้งาน Capacitor SDK ฉบับย่อ

เริ่มต้นใช้งาน Pushwoosh Capacitor SDK ด้วยตัวอย่างที่รวดเร็วและง่ายดายนี้

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

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

ข้อกำหนด

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

ดาวน์โหลดโปรเจกต์ตัวอย่าง

โคลน repository ของ SDK:

git clone https://github.com/Pushwoosh/pushwoosh-capacitor-plugin.git

ไปที่ไดเรกทอรีของปลั๊กอิน:

cd pushwoosh-capacitor-plugin

สร้างปลั๊กอิน

ก่อนที่จะรันแอปตัวอย่าง คุณต้องสร้างปลั๊กอิน Capacitor ก่อน ติดตั้ง dependency ของปลั๊กอิน:

npm i

สร้างปลั๊กอิน:

npm run build

กำหนดค่าแอปตัวอย่าง

ไปที่ไดเรกทอรีของแอปตัวอย่าง:

cd example

ติดตั้ง dependency ของแอป:

npm i

สร้าง web assets:

npm run build

เปิด src/js/example.js และอัปเดตการเรียก Pushwoosh.onDeviceReady:

Pushwoosh.onDeviceReady({
    projectid: "__YOUR_FCM_SENDER_ID__",
    appid: "__YOUR_APP_CODE__"
});

โดยที่:

__YOUR_APP_CODE__ คือรหัสแอปพลิเคชันจาก Pushwoosh Control Panel __YOUR_FCM_SENDER_ID__ คือหมายเลขโปรเจกต์ Firebase จาก Firebase Console

iOS

1. ติดตั้ง dependency ของ CocoaPods

ไปที่ไดเรกทอรีแพลตฟอร์ม iOS และติดตั้ง dependency ของ CocoaPods:

cd ios/App
pod install --repo-update
cd ../..

2. ซิงค์ Capacitor กับ iOS

หลังจากติดตั้ง CocoaPods แล้ว ให้ซิงค์การกำหนดค่า Capacitor:

npx cap sync ios

3. เปิดโปรเจกต์ iOS

เปิดโปรเจกต์ใน Xcode:

npx cap open ios

3. ตั้งค่า Bundle Identifier

ใน Xcode ให้ตั้งค่า Bundle Identifier เป็นชื่อแพ็กเกจของแอปของคุณ (เช่น com.example.pushwoosh)

5. เพิ่ม capabilities

เพื่อเปิดใช้งาน Push Notifications คุณต้องเพิ่ม capabilities บางอย่าง

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

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

6. ตั้งค่า API Token

เปิด ios/App/App/Info.plist ใน Xcode และเพิ่มรายการต่อไปนี้พร้อมกับ Pushwoosh Device API Token ของคุณ:

Info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__YOUR_PUSHWOOSH_DEVICE_API_TOKEN__</string>

Android

1. ซิงค์ Capacitor กับ Android

ซิงค์การกำหนดค่า Capacitor กับแพลตฟอร์ม Android:

npx cap sync android

2. ตั้งค่า google-services.json

คัดลอกไฟล์ google-services.json ของคุณไปยังไดเรกทอรี android/app

3. ตั้งค่าชื่อแพ็กเกจ

เปิด android/app/build.gradle และตั้งค่า applicationId เป็นชื่อแพ็กเกจของแอปของคุณ (เช่น com.example.pushwoosh)

4. ตั้งค่า API Token

เปิดไฟล์ android/app/src/main/AndroidManifest.xml ของคุณและเพิ่ม metadata ต่อไปนี้ภายในแท็ก <application>:

AndroidManifest.xml

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

แทนที่ __YOUR_PUSHWOOSH_DEVICE_API_TOKEN__ ด้วย Pushwoosh Device API Token ของคุณ

5. เปิดโปรเจกต์ Android

เปิดโปรเจกต์ใน Android Studio:

npx cap open android

รันโปรเจกต์

1. สร้างและรันโปรเจกต์
2. แตะปุ่ม “Click Me!”
3. ให้สิทธิ์สำหรับการแจ้งเตือนแบบพุช อุปกรณ์จะถูกลงทะเบียนกับ Pushwoosh

ส่งการแจ้งเตือนแบบพุช

กลับไปที่ Pushwoosh Control Panel และ ส่งการแจ้งเตือนแบบพุช ไปยังอุปกรณ์ที่ลงทะเบียนของคุณ