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

วันนี้เราจะมาดูกับถึงเรื่อง Notification หรือ การแจ้งเตือนผ่าน ทำไมต้องใช้? แล้วจะใช้ทำอะไรได้บ้าง งั้นไปดูกันเลยยย…

Intro

ทำไมต้อง Notification

งั้นลองถามตัวเองก่อนเคยทำแบบนี้ไหม?

เวลาทำ App ที่ต้องดึงข้อมูลจาก Server แล้วอยากให้ข้อมูลที่แสดงบน App เป็นข้อมูลใหม่อยู่ตลอดเวลา สิ่งแรกๆที่เรามักนึกถึงคือ

วนลูป loop ให้ App ไปดึงข้อมูลที่ Server ทุกๆ xx วินาที แค่นี้เอง

ลองมาคิดง่ายๆนะครับ ถ้า App เราให้ดึงข้อมูลที่ Server ทุกๆ 10 วินาที โดยสมมุติให้ขนาดข้อมูลมีขนาด 2k เมื่อ App นี้มีผู้ใช้งาน 1 คนจะเป็นดังภาพ

คือทุกๆ 10 วินาที จะมีการร้องขอ(request) ข้อมูลไปที่ Server/Web Service มีประมาณข้อมูล 2k

แล้วถ้าแบบนี้หล่ะ

ถ้ามีผู้ใช้เป็นหลักหมื่น หลักแสน จะมีการร้องขอมาที่ Server/Web Service ทุกๆ 10 วินาที จำนวนมาก ทั้งๆที่ข้อมูลในฝั่ง Server อาจจะไม่มีการเปลี่ยนแปลงเลย จึงทำให้สิ้นเปลืองทรัพยากร

แล้วทีนี้จะแก้ปัญหาเหล่านี้อย่างไร

จึงเกิดเป็นที่มาของการนำ Notification มาใช้งาน โดยจะมีกระบวนการดังนี้

1. เมื่อข้อมูลที่ Server เปลี่ยนแปลง เราจะสั่งให้ Server ส่ง Notification ออกไปให้ผู้ใช้ระบบ เพื่อเป็นการแจ้งเตือนถึงข้อมูลใหม่
2. ในกรณีผู้ใช้งานเปิด App อยู่แล้วได้รับ Notification ที่ส่งมาก็จะทำการดึงข้อมูลจาก Server ใหม่
3. แต่ในกรณีถ้าผู้ใช้งานไม่ได้เปิด App จะทำการแสดงข้อความแจ้งเตือน และเมื่อผู้ใช้งานเปิด App อีกครั้งก็จะทำการดึงข้อมูลใหม่จาก Server

ซึ่งตรงนี้จะทำการลดภาระการทำงานของ Server ลงได้ส่วนนึง ซึ่งจริงๆแล้วมีวิธีการที่ดีกว่านี้แต่จะหาโอกาสอธิบายในตอนต่อๆไป

ส่ง Notification ด้วย firebase cloud messaging(FCM)

ปกติแล้วการส่ง Notification นั้นทั้ง Android และ iOS ต่างมีวิธีการส่ง Notification ต่างกัน แต่เมื่อ FCM เปิดตัวจึงทำให้การส่ง Notification สามารถใช้วิธีเดียว สามารถส่งไปได้ทั้ง Android และ iOS โดยมีรูปแบบดังนี้

ที่มา: http://jayantpaliwal.com/

จากภาพจะเห็นว่าในการส่ง Notification นั้นสามารถส่งให้ 2 วิธีหลักๆ

1. ส่งผ่าน Notification Console GUI ของ Firebase เอง
2. ทำการเขียนโปรแกรมเองเพื่อส่ง แบบนี้จะมีข้อดีกว่าคือสามารถเขียนโปรแกรมให้มันส่งแบบอัตโนมัติได้เลยไม่ต้องมานั่งส่งเอง

สำหรับตัว FCM นั้นสามารถใช้งานได้ฟรี ไม่เสียค่าใช้จ่ายสำหรับ Android แต่สำหรับ iOS ยังจำเป็นต้องมี license apple developer ก่อนนะครับ

สิ่งที่ต้องใช้ในบทความนี้

1. บัญชี Gmail
2. Browser Google Chrome
3. ต้องมีการสร้าง Project React Native มาแล้ว ถ้ายังไม่เคยทำสามารถอ่านได้จากบทความนี้ครับ Startup Project เร่งด่วนภายใน 1 ชม. ด้วย RN

ตั้งค่า firebase cloud messaging(FCM)

สำหรับ FCM เป็นส่วนนึงของ google firebase ภายใน firebase ยังมีอีกหลายๆส่วนที่น่าใช้และคิดว่าจะกล่าวถึงในบทความต่อๆไป

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

1.เข้า Web https://console.firebase.google.com/ แล้วทำการ Login ด้วยบัญชี Gmail ให้เรียบร้อย จะพบหน้าตาแบบรูปด้าน

2.ทำการ Add project ใหม่ได้เลยครับ โดยเมื่อกดปุ่ม App project จะปรากฏ ส่วนที่ให้กรอก ชื่อ Project และเลือกประเทศที่ใช้งาน ให้ทำการกรอกได้ตามต้องการดังภาพ

ตรงนี้ผมลบตัว Project ID ออกไปนะครับ

3.ทำการ Create Project โดยการกดปุ่ม CREATE PROJECT หลังจากนั้นจะเข้าสู้หน้าหลักดังภาพ

4.ทำการเลือกว่าเราจะนำตัว FCM ไปใช้กับอุปกรณ์อะไรบ้าง เช่น Android App หรือ iOS App ซึ่งในบทความนี้เราจะให้ Android App เนื่องจากไม่จำเป็นต้องใช้ license แต่ถ้าในอนาคตเราจะมี iOS App ก็สามารถมาเพิ่มที่หลังได้นะครับ

5.เลือก Add Firebase to your Android app จะแสดงหน้าต่างให้กรอกรายละเอียดังภาพ

6.Android package name สามารถเปิดดูได้จากไฟล์ AndroidManifest.xml ซึ่งไฟล์จะอยู่ที่

กล่อง Project > android > app > src > main > AndroidManifest.xml

ชื่อ package name จะแสดงอยู่บรรทัดที่ 2 ในภาพครับ

7.App nickname ตรงนี้เป็นเหมือนชื่อเล่น เพื่อให้เราสามารถจดจำได้ง่ายครับ สามารถตั้งได้ตามใจชอบครับ

8.Debug signing certificate SHA-1 สามารถหาได้โดยการ เปิด Terminal หรือ Cmd.exe

สำหรับ MacOS

keytool -exportcert -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

สำหรับ Windows

keytool -exportcert -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

ส่วน Password คือ android หลังจากใส่ Password จะได้ดังภาพ

เซนเซอร์บางจุดไว้นะครับ

หลังจากนั้นให้ คัดลอก ข้อความในส่วน Certificate fingerprint: SHA1: มาใส่

9.หลังจากนั้นทำการ Register App ได้เลย

10.เมื่อทำการ Register App แล้วจะขึ้นหน้าจอดังภาพ

ให้ทำตามได้เลย เริ่มจาก Download แล้วนำไฟล์ไปวางไว้ใน path ตามรูป

หลังจากนั้นให้กด Continue ไป

11.เมื่อContinue ไปแล้วจะพบกับหน้าจอดังภาพ

ให้ทำการ Finish ได้เลยครับ

เป็นอันจบการตั้งค่า FCM

Install Package FCM

ต่อมาจะเป็นการ ติดตั้ง package ที่ช่วยในการเชื่อมต่อกับ FCM ใน React Native

เริ่มจาก เปิด Terminal หรือ Cmd.exe แล้วไปที่ Path ที่สร้าง Project ไว้

จัดการลง Package react-native-fcm โดยใช้คำสั่ง yarn add

yarn add react-native-fcm

รอสักครู่จนติดตั้งสำเร็จดังภาพ

ต่อมาให้ทำการ link package เข้ากับ project ของเราโดยใช้คำสั่ง

react-native link

Config Package FCM

ต่อมาจะเป็นการตั้งค่าดังนี้

1.แก้ไขไฟล์ android/build.gradle โดยไฟล์จะอยู่ที่ Project > android > build.gradle

ทำการเพิ่ม บรรทัดด้านล่างเข้าไป

classpath 'com.google.gms:google-services:3.0.0'

จะได้ดังภาพ

2.แก้ไขไฟล์ android/app/build.gradle โดยไฟล์จะอยู่ที่ Project > android > app > build.gradle

โดยทำการเพิ่ม

apply plugin: 'com.google.gms.google-services'

และ

compile 'com.google.firebase:firebase-core:10.0.1'

3.แก้ไขไฟล์ AndroidManifest.xml โดยไฟล์จะอยู่ที่ Project > android > app > src > main > AndroidManifest.xml

ทำการเพิ่ม Code เหล่านี้ลงไป ภายใน <application …>

   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
     <intent-filter>
       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
     </intent-filter>
   </service>

   <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
     <intent-filter>
       <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
     </intent-filter>
   </service>

ต่อมาทำการเพิ่ม

android:launchMode="singleTop"

ที่ .MainActivity

ใช้งาน FCM

ตอนนี้เราจะมาทดลองใช้ตัว FCM ที่เราพึ่งติดตั้งเสร็จไปนะครับโดยเริ่มจาก

แก้ไขไฟล์หลัก

เปิดไฟล์หลักขึ้นมาแก้ไข(ไฟล์ที่มีการตั้งค่า Router) ในที่นี้คือไฟล์ MainApp.js

1.import FCM package

import FCM, {FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType} from 'react-native-fcm';

2.เรียกใช้ FCM ใน componentDidMount

ทำการใส่ code การขอเปิดการแจ้งเตือนในอุปกรณ์

FCM.requestPermissions().then(() => console.log(‘granted’)).catch(() => console.log(‘notification permission rejected’));

ต่อมาทำการ register ไปที่ server FCM เพื่อเอา token(รหัสประจำอุปกรณ์) สำหรับไว้ส่ง notification หาอุปกรณ์นั้นๆ

ภายใน function นี้เมื่อทำการ register จะได้ token แนะนำให้จัดเก็บ token นี้ไว้ที่ server เพื่อให้เวลาต้องการส่ง notification มาให้อุปกรณ์นี้ จะได้สะดวก

FCM.getFCMToken().then(token => {
console.log(token)
// store fcm token in your server
});

จากcode ด้านบนจะเห็นว่า เรามีการ log ค่า token มาแสดงใน console เพื่อจะลองนำไปใช้ในการทดลองส่ง notification

สุดท้ายสร้าง function เพื่อรอรับการส่ง Notification ที่มาจากServer

FCM.on(FCMEvent.Notification, async (notif) => {
console.log(notif)
if (notif.opened_from_tray) {
}
});

จากcodeด้านบนจะเห็นว่าใน function นี้จะมีการรับตัวแปรมา 1 ตัวคือ notif โดยตัวแปรนี้จะทำการเก็บค่า notification ที่ได้รับมาจาก Server

หลังจากนนั้นเราทำการ log ค่า notif มาแสดงใน console เพื่อจะลองดูว่าค่าที่ส่งมาจาก Server จะได้ค่าอะไรบ้าง

ต่อมาเราจะพบเงื่อนไข if ที่ใช้สำหรับตรวจสอบว่า notification ที่ส่งมานี้ ส่งมาตอนที่เปิด App อยู่ หรือApp ถูกปิดอยู่แล้ว notification แจ้งเตือน หลังจากนั้นผู้ใช้งานจึงเปิด App

ดังนั้นถ้าเราต้องการให้ทุกครั้งที่มีการรับ notification มาแล้วให้ไปเรียกใช้งาน function อะไรต่อ ก็ควรมาเขียนตรงนี้ครับ

สุดท้ายเมื่อใส่code ครบแล้วจะเป็นดังภาพ

เป็นอันสำเร็จการตั้งค่า

ทำการทดสอบ

ทำการ run project ขึ้นมา แล้วทำการเปิด Debug

โดยการเปิด Menu

สำหรับ MacOS

⌘M

สำหรับ Windows

Ctrl+M

จากนั้นเลือก Debug JS Remotely

เมื่อเลือกแล้วจะมีการเปิดตัว Google Chrome ขึ้นหน้า Debug มาให้

ให้ทำการเปิด Developer Tools โดยกด

สำหรับ MacOS

⌘+Option+J

สำหรับ Windows

Control+Shift+J

จะทำการเปิดหน้า Console มาดังภาพ

เราจะพบว่าในบรรทัดสุดท้ายจะมี ชุดข้อความผสมตัวเลขอยู่ ชุดข้อความนั้นคือตัว token ที่เรา log ออกมา

ให้ทำการ คัดลอก ชุดข้อความนี้ไว้

ต่อมาให้กลับไปที่ Web firebase console ของเรา

ให้มองเมนูด้านซ้ายมือ เลื่อนลงมาด้านล่างจะเจอเมนู Notifications

ให้ทำการเข้าไปที่เมนู Notifications

จากนั้นให้ทำการ สร้าง Message แรก โดยการกดที่ SEND YOUR FIRST MESSAGE

เมื่อกดสร้างmessage มาแล้วจะพบกับหน้าการกรอกรายละเอียดต่างๆ

โดยจะมีช่องให้สามารถเลือกและใส่ข้อมูลได้หลายช่อง แต่จะแนะนำเฉพาะบางช่องก่อนนะครับ

1.Message text = ข้อความที่ต้องการให้แสดง

2.Delivery date = วันเวลาในการส่ง

3.Target = ตรงส่วนนี้สามารถเลือกได้ 3 แบบ คือ

• User segment ส่งเฉพาะผู้ใช้งานตามประเภทผู้ใช้งาน เช่น เพราะผู้ใช้งาน App บท Android เท่านั้น
• Topic ส่งเฉพาะผู้ที่ subscription ชื่อ Topic นั้นๆ
• Single device ส่งเฉพาะเครื่องเท่านั้น ตรงนี้ต้องใช้ token

4.Advanced option

4.1 Title คือชื่อหัวข้อที่จะแสดงตอนส่ง ซึ่งปกติแล้วถ้าไม่กรอกระบบจะแสดงเป็นชื่อ Aoo

4.2 Custom data ส่วนนี้เป็นส่วนที่เราจะสามารถส่งข้อมูลบางอย่างตามต้องการไปพร้อมกับตัว notification message นี้ได้ เช่น ส่งเลข id รายการข้อมูลใหม่เข้าไป เพื่อให้App ทำ highlight รายการนั้น

4.3 Priority ระดับความสำคัญ

4.4 Sound คือต้องการให้เปิดเสียงหรือไม่

ทีนี้มาลองใส่เล่นๆดูครับ อย่าลืมเอา Token ที่คัดลอกมาลองใช้กับ Taget Single device นะครับ

ต่อมาให้ลอง ส่งmessage ตอน App อยู่และตอนปิด App นะครับ

โดยการกด SEND MESSAGE เพื่อส่ง message

จากนั้นลองไปดูใน Log ว่าจะขึ้นเหมือนกับที่เรากรอกไปหรือเปล่าครับ

หน้าจอรับ notification message ตอนปิด app อยู่

สรุป

กระบวนการทำงานของ Notificaiton ไม่ได้อยากครับ แต่ต้องใช้เวลาเข้าใจมันนิดนึงหลังจากเข้าใจแล้ว ก็จะมองออกว่าสามารถเอาเจ้าnotificationนี้ไปต่อยอดอะไรต่างๆได้อีกมากมาย