เริ่มต้นใช้งาน 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 สำหรับแอปพลิเคชันของคุณ

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

โคลนที่เก็บ SDK:

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

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

cd pushwoosh-capacitor-plugin

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

ก่อนเรียกใช้แอปตัวอย่าง คุณต้องสร้างปลั๊กอิน Capacitor ติดตั้งการพึ่งพาปลั๊กอิน:

npm i

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

npm run build

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

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

cd example

ติดตั้งการพึ่งพาแอป:

npm i

สร้างเนื้อหาเว็บ:

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. ติดตั้งการพึ่งพา CocoaPods

ไปยังไดเรกทอรีแพลตฟอร์ม iOS และติดตั้งการพึ่งพา 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. เพิ่มความสามารถ

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

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

• Push Notifications
• Background Modes หลังจากเพิ่มความสามารถนี้ ให้ทำเครื่องหมายในช่องสำหรับ 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 ของคุณและเพิ่มข้อมูลเมตาต่อไปนี้ภายในแท็ก <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. ให้สิทธิ์สำหรับการแจ้งเตือนแบบ push อุปกรณ์จะถูกลงทะเบียนกับ Pushwoosh

ส่งการแจ้งเตือนแบบ push

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