React-Native-ส่ง-Notification-ด้วย-Onesignal-3

React Native ส่ง Notification ด้วย Onesignal [Android]

React Native ส่ง Notification ด้วย Onesignal

React Native ส่ง Notification ด้วย Onesignal

Onesignal คือบริการ Push Notification หรือตัวกลางในการส่งข้อมูลไปยังเครื่อง Client ที่สามารถทำงานได้แบบ Crossplatform ทั้งบน Website ระบบปฏิบัติการทั้ง iOS และ Android สามารถทำงานได้ในหลากหลายเทคโนโลยี คำว่าหลากหลายเทคโนโลยี ความหมายคือ ตัว Onesignal ได้ถูกพัฒนา SDK ให้สามารถนำไปใช้ได้กับหลากหลายเครื่องมือที่ใช้ในการพัฒนา เช่น Java, Objective-C, Swift, Unity, Ionic, React Native และ อื่น ๆ

React Native เป็น JavaScript Framework ตัวนึงที่พัฒนาโดย Facebook ซึ่งจะช่วยให้เราสามารถ เขียน Mobile Application แบบ Cross platform ได้ โดยจุดเด่นของ React Native ระดับ Performance ที่ใกล้เคียงกับการพัฒนาแบบ Native และเป็น Native UI ทั้ง iOS และ Android


ในบทความนี้เราจะทดสอบการใช้งาน Onesignal กับ React Native

เริ่มติดตั้งและสร้างโปรเจค React Native

สำหรับขั้นตอนการติดตั้ง React Native และเครื่องมือต่าง ๆ ที่จำเป็นในการพัฒนา แนะนำว่าให้เข้าไปดูที่เว็บไซต์หลักเลย https://facebook.github.io/react-native/ ในบทความนี้จะอธิบายเพียงคร่าว ๆ เท่านั้น

  • 1. เปิด Terminal และใช้คำสั่งสำหรับติดตั้ง React Native

  • 2. ใช้คำสั่งด้านล่างเพื่อสร้าง React Native Project ในที่นี้ตั้งชื่อว่า “HelloOnesignal” จากนั้นรอจนกว่าคำสั่งจะทำงานเสร็จเรียบร้อย

    ถ้าไม่มีอะไรผิดพลาดเราจะได้ React Native ไว้ที่ root ของเครื่องเลย ตัวอย่างดังภาพด้านล่าง


    React-Native-ส่ง-Notification-ด้วย-Onesignal-1

  • 3. ทำการติดตั้ง Onesignal sdk โดยการใช้คำสั่ง ดังนี้
    – ติดตั้ง react-native-onesignal คำสั้ง

    – เชื่อมต่อ ไลบรารี่ ด้วยคำสั่ง

  • 4. หลังจากที่เราสร้างโปรเจค React Native และติดตั้ง Onesignal SDK เสร็จเรียบร้อยแล้ว ขั้นตอนต่อไปให้สร้าง Onesignal Project และเลือกไปที่ React Native SDK ทำทุกขั้นตอนให้ถูกต้อง จนได้ App ID และ REST API KEY มา สามารถดูตัวอย่างได้ที่ ใช้งาน OneSignal ส่ง Push Notification
  • 5. ไปที่โปรเจคและ android -> app -> src -> main -> AndroidManifest.xml เพิ่มข้อมูลลงไปดังนี้

  • 6. ไปที่ android/app/build.gradle เพิ่มคำสั่งด้านล่างไว้บนสุดของไฟล์

  • 6. แก้ไข compileSdkVersion และ buildToolsVersion อย่างน้อย API ระดับ 26 หรือสูงกว่า

  • 7. เพิ่ม dependencies ดังนี้

  • 8. ไปที่ android/build.gradle เพิ่มคำสั่งที่ repositories ดังนี้

  • 9. ทดสอบใช้งานด้วยคำสั่ง

    ถ้าทุกอย่างปกติดีให้ Build APK ด้วยคำสั่ง

    จากนั้นให้ติดตั้งไฟล์ APK ลงเครื่องมือถือ หลังจากติดตั้งแล้วให้เข้าระบบที่ onesignal.com และทดสอบสร้าง message ส่งข้อมูลดู ถ้าไม่มีอะไรผิดพลาด ก็จะสามารถส่ง Push Notification ได้ปกติ ให้ตรวจสอบว่ามี device token เข้าไปที่ระบบหลังบ้านหรือไม่ และตรวจสอบก่อนการส่งว่ามี Recipient หรือป่าว


    React-Native-ส่ง-Notification-ด้วย-Onesignal-3

กระทู้ใกล้เคียง

ทำเว็บไซต์ขนาดใหญ่ ด้วย HMVC Codeigniter... ทำเว็บไซต์ขนาดใหญ่ ด้วย HMVC ทำเว็บไซต์ขนาดใหญ่ ด้วย HMVC Design Pattern คำว่า Design Pattern ในเชิงการพัฒนาเว็บไซต์ หมายถึง รูปแบบวิธีการเขียนโ...
วิธีลบหน้า Error 404 ออกจากผลการค้นหา Google Searc... วิธีลบหน้า Error 404 ออกจากผลการค้นหา Google Search Result วิธีลบหน้า Error 404 ออกจากผลการค้นหา Google Search Result คงจะไม่เป็นผลดีแน่ ๆ ถ้ามี...
PHP ส่งข้อความเข้ามือถือ ( SMS )ด้วย Nexmo SMS API... PHP ส่งข้อความเข้ามือถือ ( SMS )ด้วย Nexmo SMS API PHP ส่งข้อความเข้ามือถือ ( SMS )ด้วย Nexmo SMS API อันที่จริงมีผู้ให้บริการ SMS Gateway อยู่ห...
คำสั่งค้นหาขั้นสูง ด้วย Advanced Google Search Com... คำสั่งค้นหาขั้นสูง ด้วย Advanced Google Search Commands คำสั่งค้นหาขั้นสูง ด้วย Advanced Google Search Commands 99.5% ของผู้ใช้งานอินเตอร์เนตจากทั...