ก่อนอื่นบทความนี้เป็นบทความที่ต่อเนื่องมาจาก https://blog.thinknet.co.th/tech/onesignal-เครื่องมือสำหรับทำ-push-notification-แบบง่ายๆ ใครยังไม่รู้ว่า OneSignal คืออะไร ไปอ่านก่อนได้ครับ

มาเริ่มกัน !!

     แอปที่เราจะทำกันจะมี Flow การทำงานที่คล้ายคลึงกับรูปด้านล่างนี่นะครับ แต่จะมีการเปลี่ยนแปลงนิดหน่อย โดยส่วนที่ (4) ผมจะใช้ PlayerID จาก Backoffice ของ Onesignal และส่วนที่ (5) ผมจะใช้ Postman Call API ของ Onesignal แทนนะครับ

1. สร้าง React Native Project กันก่อนครับ 

ใช้คำสั่งด้านล่างเพื่อ สร้าง Project

npx react-native init OnesignalProject

แล้วลง Android Studio ด้วยครับ รายละเอียดเพิ่มเติมดูได้ที่ https://reactnative.dev/docs/environment-setup

2. ติดตั้ง OneSignal Package ใน React Native ของเรา 

yarn add react-native-onesignal

หรือ

npm install react-native-onesignal --save

3. สร้าง Firebase Project 

     เพื่อนำ FCM token และ Sender ID มากผูกกับ Account OneSignal (เนื่องจาก OneSignal ใช้ Google Service ในการ Push Notification)

3.1 ตั้งชื่อ Project เลยครับ แล้วกดต่อไป

3.2 เมื่อสร้างเสร็จแล้ว เข้าที่ Firebase Project ของเราเลยครับ คลิกที่ Icon เฟือง (Setting) แล้วเลือก "การตั้งค่าโปรเจ็กต์ (Project Setting)"

3.3 คลิกที่ที่แถบ "การรับส่งข้อความในระบบคลาวด์ (Cloud Messaging)" เพียงเท่านี้เราก็ได้ FCM token (คีย์เซิร์ฟเวอร์) และ Sender ID (รหัสผู้ส่ง) มาแล้วครับ

4. สร้าง Account OneSignal และการผูก Firebase (FCM)

4.1 Create Account โดย คลิกที่ SignUp

4.2 เมื่อได้ Account แล้วให้เข้าไปที่หน้า All Applications คลิก NEW APP/WEBSITE เพื่อสร้าง OneSignal App

4.3 ตั้งชื่อ OneSignal App (ควรตั้งให้บ่งบอกถึงแอปที่กำลังทำ) แอปและเลือก Platform เป็น Android

4.4 นำ FCM token และ Sender ID ที่ได้จากขั้นตอนที่ 3 มาใส่ แล้วคลิก Next

4.5 เลือก SDK ที่ใช้ เลือก React Naitve (เป็นการเลือกเพื่อให้ OneSignal แนะเครื่องมือสำหรับ SDK เฉยๆ ไม่ได้เป็นการ lock เพื่อให้ใช้แค่ React Native อย่างเดียว) แล้วคลิก Next

4.6 เป็นการแนะนำสำหรับ SDK ที่เราเลือกไป (ขั้นตอน 4.5) ให้เราจำ App ID ไว้เพื่อใช้ในขั้นตอนต่อๆ ไป คลิก SAVE และ Leave ได้เลย เป็นการจบขั้นตอนสำหรับการผูก Firebase ครับ

5. Config React Native เพื่อให้ใช้ OneSignal

     ในขั้นตอนที่ 1 และ 2 เราได้ทำการสร้าง React Native Project และ Install OneSignal Package ไปแล้ว ต่อไปถึงเวลา Coding แล้วครับ!

5.1 แก้ไขไฟล์ App.js แล้วเปลี่ยนให้เป็น Class Component และเพิ่มโค้ดตามรูปด้านล่างไปครับ

อธิบายเพิ่มเติม

     - Line ที่ 32 เป็นการ init โดยจะทำการใส่ AppID ที่ได้จากขั้นตอนที่ 4

     - Line ที่ 34 - 36 เป็นการ Add Event ต่างๆ ของ OneSignal

     - Event 'received' (onReceived) จะทำงานก็ต่อเมื่อมี Notification เข้ามา โดยมีเงื่อนไขคือต้องเปิด App อยู่หรือมีการพับ App (ใน IOS การพับแอปจะไม่เข้า Event นี้)

     - Event 'opened' (onOpened) จะทำงานก็ต่อเมื่อมีการคลิก Notification ที่อยูในแถบ Notification All ของมือถือ

     - Event 'ids' (onIds) จะทำงานหลังจากการ addEvent เลย โดยสามารถ Get Information ต่างๆ ของ OneSignal ได้ รวมถึงค่า PlayerID ด้วย (device.userId) Event นี้ ในการใช้งานจริง เราอาจส่ง PlayerID ไปให้ Service ของเรา เผื่อไปการจำแนก PlayerID ต่างๆได้

5.2 แก้ไขไฟล์ AndroidManifest.xml (android > app > src > main > AndroidManifest.xml) เพิ่ม/เปลี่ยน android:launchMode ให้เป็น singleTask (line 17)

5.3 แก้ไขไฟล์ build.gradle (android > app > build.gradle) เพิ่ม Code ตามด้านล่างไว้บนสุดของไฟล์ 

buildscript {
  repositories {
    maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal 
  }
  dependencies {
    classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.1, 0.99.99]'
  }
}
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

ดูรายละเอียดเพิ่มเติมได้ที่ https://documentation.onesignal.com/docs/react-native-sdk-setup

6. ทดสอบ Push Notification

   ในตอนนี้ Application ของเราและ Environment ต่างๆ ก็พร้อมใช้งานแล้วครับ ในขั้นตอนนี้ผมขอใช้ Postman เป็นตัว Call API Push Notitifcation ของ OneSignal แทนการใช้ Service จริงๆ Call (CURL) ไปนะครับ

6.1 ทำการ Run ตัวแอปของเราก่อนเลยครับ

react-native run-android

เมื่อแอปเปิดขึ้นมา Onesignal Plugin จะทำการ Init และ Subscribe ให้เลยทันที สามารถเข้าไปเช็คได้ที่ หน้า Backoffice ของ Onesignal

6.2 ทำการ Copy PlayerID ในหน้า Users (ตามรูปด้านบน) โดยข้อมูลส่วนนี้จะอยู่ใน Column ท้ายๆ (การใช้งานจริงเราจะได้ PlayerID จาก Event Ids ครับ)

6.3 ทำการ Call Api Onesignal โดยใช้ Postman config ค่าต่างๆ ตามรูปเลยครับ

##แค่นี้เราก็ได้ Notification แล้วครับ

สามารถดูข้อมูลการใช้งาน Onesignal API ได้ที่ https://documentation.onesignal.com/reference/create-notification

สำหรับโค้ดเข้าไปดูได้ตามลิงค์นะครับ https://github.com/ftgs40/react-native-onesignal-example

...สำหรับบทความนี้เป็นการทำ Push notification แบบง่ายๆ หวังจะเป็นประโยชน์สำหรับผู้ที่สนใจนะครับ :) สำหรับการ Config อื่นๆ ไม่ว่าจะเป็นการจัดการไอคอน, เสียง, การแนบรูป หรือการ Implement ใน IOS สามารถเข้าไปอ่านในเว็บของ Onesignal ได้เลยครับ