[React Native + Firebase Cloud Messaging (FCM)] สร้าง Notification ให้ Mobile Application

ปัจจุบัน OS ทั้ง iOS และ Android หรือ OS อื่น ๆ มี Feature ที่ผู้พัฒนาสามารถส่งข้อความหา User ได้ ซึ่งก็คือ Notification นั่นเอง

และ Tools ที่สามารถช่วยให้ทีมผู้พัฒนาตอบสนอง Feature นี้ได้ หนึ่งในนั้นก็คือ Firebase Cloud Messaging (FCM) แถมยังเป็นที่นิยมอีกด้วย

สำหรับบทความนี้จะนำเสนอวิธีการติดตั้งและใช้งานเจ้าตัว Firebase Cloud Messaging (FCM) ให้กับ React Native ด้วย react-native-filrebase ซึ่งเป็น Libs ที่พัฒนาโดยทีมงาน invertase

invertase/react-native-firebase

Note: สำหรับบทความนี้จะพูดถึง Android เท่านั้น ส่วน iOS ทางผู้เขียนจะอัพเดทในครั้งต่อไปครับ

สร้าง Firebase Project

เริ่มต้นด้วยการสร้าง Project ก่อน สำหรับใครที่ยังไม่มี Account ของ Google ให้สมัครและเข้าไปสร้าง Firebase Project ได้ตามขั้นตอนลิงค์นี้ครับ

[Firebase] คืออะไร มาดูวิธีสร้าง Project และทำความรู้จักกับ Firebase

สร้าง React Native Project

ต่อไปก็มาสร้าง Mobile Application ด้วย React Native ตามที่ได้กล่าวไว้ โดยทางผู้เขียนจะใช้ชื่อว่า msgNotiApp สามารถทำตามแต่ละขั้นตอนได้ตามลิงค์ด้านล่าง

[React Native] ทำความรู้จัก และเริ่มต้นสร้าง Project

ติดตั้ง React Native Firebase

หลังจากที่ได้ React Native Project แล้ว เราจะเริ่มติดตั้ง React Native Firebase โดยการเปิด Terminal ขึ้นมาแล้ว cd ไปที่ Project และทำการ Run command ดังนี้

npm install --save react-native-firebase

เมื่อติดตั้งเสร็จแล้วให้ทำการ Link ต่อ

react-native link react-native-firebase

หากท่านผู้อ่านพบกับการตอบกลับมาดังด้านล่าง

Command `link` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

ซึ่งสาเหตุนี้เกิดจาก npm ในปัจจุบัน มีปัญหาที่เกิดขึ้นคือ เมื่อ run install ไปแล้ว มันจะทำการลบ file หรือ folder บางส่วน ทำให้ตัว react-native ไม่สามารถใช้คำสั่ง link ได้นั่นเอง และเมื่อเอาไปถาม Google ก็พบว่ามีท่านอื่นที่เจอปัญหานี้เช่นเดียวกัน

เมื่อเข้าไปอ่าน ก็ได้คำแนะนำจากคุณ inev ดังนี้

ก็คือให้ Delete และ Install ใหม่นั่นเอง จัดไป !

rm -rf node_modules && npm install

จากนั้นให้ Run command เดิมอีกครั้ง

react-native link react-native-firebase

เมื่อได้ผลลัพธ์ดังภาพแล้ว ถือว่าติดตั้งเรียบร้อย Step ต่อไป คือการ Config ครับ

การ Config Firebase สำหรับ Android

โดยเริ่มแรกให้เข้าไปที่หน้าหลัก Firebase Project ของเรา และเลือก Android ที่หัวข้อ “เพิ่ม Firebase ไปยัง แอป Android ของคุณ”

จะมี Step ของการ Register ในส่วนนี้ โดยเริ่มที่ระบุชื่อ Package name

ซึ่งหาได้จากไฟล์ android/app/src/main/AndroidManifest.xml โดยดูได้ที่บรรทัดนี้

Step ต่อไปให้ Download ไฟล์ google-service.json และใส่ลงไปที่ android/app/ ดังภาพด้านล่างนี้

จากนั้นให้ปิดหน้างต่างของ “เพิ่ม Firebase ไปยังแอป Android” ได้เลยครับ จากนั้นกลับมาที่ React Native Project เปิดไฟล์ android/build.gradle และทำดังนี้

• เปลี่ยน com.android.tools.build:gradle:3.0.1 เป็น classpath 'com.android.tools.build:gradle:3.1.2'
• เพิ่ม classpath 'com.google.gms:google-services:3.2.1'
• ในส่วนของ buildscript -> repositories ตรวจให้แน่ใจว่ามีการใช้ google()
• ในส่วนของ allprojects -> repositories ตรวจให้แน่ใจว่ามีการใช้ google()

จะได้ผลลัพธ์ดังภาพด้านล่าง

ต่อไปให้เปิดไฟล์ android/app/build.gradle ให้ทำดังนี้

• Firebase modules จะถูกติดตั้งในส่วน dependencies โดยเราจะทำการเรียกใช้

implementation "com.google.android.gms:play-services-base:15.0.0"
implementation "com.google.firebase:firebase-core:15.0.2"

• ในส่วนของ dependencies เปลี่ยนจาก compile เป็น implementation ให้หมด (สาเหตุเพราะตั้งแต่ Gradle Plugin 3.0+ ได้มีการแนะนำให้เลิกใช้ compile ครับ)
• ในบรรทัดล่างสุดให้ใส่ apply plugin: 'com.google.gms.google-services'

จะได้ผลลัพธ์ดังภาพ

ต่อไปให้เปิด android/gradle/wrapper/gradle-wrapper.properties และเปลี่ยนจาก gradle-4.1-all.zip เป็น gradle-4.4-all.zip จะได้ดังภาพด้านล่าง

จากนั้นให้เปิด Android Studio ขึ้นมา รอให้ Gradle ทำการ Sync หรือถ้าอยากแน่ใจให้ คลิกที่ปุ่มนี้ในด้านบนของ Program เพื่อสั่งให้ Sync

เมื่อ Sync เสร็จแล้วจะพบว่า BUILD SUCCESS จากนั้นให้คลิก Run เพื่อทำการ Build ใส่ Emulator

แต่ !!! ถ้าพบกับ Error นี้

เมื่อเอา Error ไปค้นหาใน Google ว่าจะมีใครให้คำตอบได้บ้าง ก็พบว่า Issue ใน Github ของ react-native-firebase ที่มีลักษณะคล้าย ๆ กัน จึงเข้าไปดู

และได้คำตอบดังนี้

ให้ลอง Disable instant run in android studio ก่อนเลย โดยให้เข้าไปที่

Android Studio -> Preference -> Build Execution Deployment -> Instant Run 

และทำการปิดมันซะ

Tip: Instant Run คืออะไร สามารถเข้าไปดู blog ของพี่ somkiat ได้ที่: Android Studio 2.0 :: ทำความรู้จักกับ Instant Run เร็วฟ้าผ่ากัน

คลิกที่ OK แล้วก็ลอง Run อีกครั้งครับ ถ้าขึ้น BUILD SUCCESS และเปิดแอพใน Emulator ได้ ถือว่า Config Firebase ใน Android สำเร็จ

เตรียมการเพื่อใช้งาน Firebase Cloud Messages สำหรับ Android

หลังจากที่ Config Firebase ที่เป็นส่วนหลักไปแล้ว ต่อไปจะ Config สำหรับ FCM ให้ท่านผู้อ่านเปิดไฟล์ android/app/build.gradle และเพิ่มการติดตั้ง dependensies ดังนี้

implementation "com.google.firebase:firebase-messaging:15.0.2"
implementation 'me.leolin:ShortcutBadger:1.1.21@aar'

Note: ที่แยกออกมาอีกหัวข้อ ทำให้ต้องกลับไป Config ที่ไฟล์เดิม เพราะตั้งใจแยกเป็นส่วน ๆ ถ้าผิดพลาดจะได้รู้จุด และสะดวกต่อท่านผู้อ่านในการ Config ทีละส่วน

ในส่วนของ Dependensies จะกลายเป็น

ต่อไปให้เปิดไฟล์ MainApplication.java ซึ่งจะอยู่ที่

android/app/src/main/java/com/[app name]/MainApplication.java

ในส่วนของการ import ที่ด้านบนของไฟล์ ให้ใส่เพิ่งตามด้านล่าง

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

และในส่วนของ getPackages() ให้ระบุ Package ที่จะเรียกใช้ดังด้านล่าง

new RNFirebaseMessagingPackage(),
new RNFirebaseNotificationsPackage()

ทั้งหมดในไฟล์ MainApplication.java เป็นดังนี้

ต่อไปให้เปิดไฟล์ android/app/src/main/AndroidManifest.xml ในภายใต้ <manifest …> ให้ใส่เพิ่มดังนี้

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.VIBRATE" />

และภายใต้ <application …> ให้ใส่เพิ่มดังนี้

<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>
<service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
  <intent-filter>
    <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
  </intent-filter>
</service>

และใน Tag <activity> ให้ใส่ props เพิ่มคือ

android:launchMode="singleTop"

สุดท้ายจะได้ผลลัพธ์ของไฟล์ AndroidManifest.xml ดังนี้

การ Config และการเตรียมการเสร็จเรียบร้อย ต่อไปจะเป็นการ Coding แล้วครับ

Coding สำหรับการใช้งาน Firebase Cloud Messages

สำหรับการรับ Notification จะมี Step ซึ่งทางผู้เขียนแบ่งหัวข้อตาม Document ของทางเว็บต้นฉบับ ดังนี้

• Check permission
• Request permission
• Get device token

เราจะเพิ่ม Code ที่ทำตาม Step ด้านบน ให้ท่านผู้อ่านเปิดไฟล์ App.js ขึ้นมา และพิมพ์ Code ให้เป็นตามด้านล่าง

ต่อไปจะเป็นการทดสอบโดยการส่ง Firebase Cloud Messaging ให้กับ Emulator ของเรา เปิดไปที่หน้าหลัก Firebase ของ Project ที่เราสร้าง และคลิกที่เมนู Cloud Messaging จะพบกับหน้าจอเหมือนด้านล่าง และคลิกที่ปุ่ม “ส่งข้อความแรกของคุณ”

ก่อนอื่นเราจะต้องมี Device token ด้วย ตามที่เราได้เขียนไว้ใน App.js ผู้อ่านเปิด Run App และเข้า Debug mode

สำหรับท่านผู้อ่านท่านใดที่ยังไม่ทราบวิธีเข้า Debug mode สามารถดูเพิ่มเติมได้ที่บทความของพี่ดิวด้านล่างนี้ครับ

789 งานเร่งกับ React Native (Debug)

เมื่อเราเปิด App ในขณะที่อยู่ใน Debug mode จะเห็นว่า มีค่า fcmToken ได้ถูก log ออกมาเป็นข้อความยาว ๆ ตามภาพด้านล่าง

ให้กรอกข้อมูลตามภาพด้านล่าง

ในส่วนของ เป้าหมาย เราสามารถเลือก options ได้ดังนี้

• กลุ่มผู้ใช้ คือส่วนที่ระบุส่งข้อความไปที่ User ทุกคนที่ใช้ App นี้ (อ้างอิงตาม Package name ของ App)
• หัวข้อ จะเป็นการส่งข้อความ อ้างอิงจากหัวข้อที่ User ได้เลือกไว้
• อุปกรณ์เดี่ยว จะเป็นการส่งข้อความแบบอ้างอิงจาก token เครื่องเดียว

โดยสำหรับบทความนี้จะขอพูดถึงแค่แบบ อุปกรณ์เดียว ครับ

เมื่อกรอกข้อมูลเสร็จแล้ว ให้คลิกที่ส่งข้อความครับ จะได้ผลลัพธ์ดังด้านล่าง

ตัวอย่าง Source Code สามารถ เข้าไปดูหรือ Download ได้ที่ Github ตามนี้ครับ

jedsada-jed/rn-msg-noti-app

สำหรับบทความนี้ขอจบแต่เพียงเท่านี้ ในโอกาสหน้าจะเขียนรายละเอียดของเจ้าตัว FCM ให้ลงลึกเข้าไป และการส่งข้อความแบบอื่น ๆ เช่น ส่งแบบแนบ Data มาด้วย

ขอบคุณที่อ่านจนจบ ขอบคุณที่ติดตามนะครับ

เอกสารเพิ่มเติมสำหรับการติดตั้ง React Native Firebase ทั้งหมด สามารถอ่านเพิ่มเติมได้ที่ลิงค์ด้านล่าง (ใน Documents ต้นฉบับ จะแบ่งเป็นหลายส่วนมาก ๆ ผมได้เอามารวมและแบ่ง Step ใหม่ เมื่อเข้าไปดูแล้วอาจจะงง ๆ ไม่ตรงกัน ขออภัยในความไม่สะดวก)

React Native Firebase - Simple Firebase integration for React Native

หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ อยากติชม สามารถติดต่อผู้เขียนได้เลยครับ

Reference

• รู้จัก Firebase Cloud Messaging (FCM) ตั้งแต่ Zero จนเป็น Hero
• 789 งานเร่งกับ React Native(014) Notification
• https://rnfirebase.io/docs/v4.1.x/messaging/introduction
• https://rnfirebase.io/docs/v4.1.x/notifications/introduction
• ANDROID : Gradle Plugin 3.+ เมื่อคำสั่ง “compile” จะไม่สามารถใช้งานได้อีกแล้ว
• https://github.com/invertase/react-native-firebase/issues/915#issuecomment-383020978
• https://github.com/Polidea/react-native-ble-plx/issues/98#issuecomment-312045114