Tạo Notification trong React Native thật đơn giản!

440

Gửi thông báo từ server cho client khá phổ biến với anh em phát triển Android & iOS vì số lượng ứng dụng về truyền tải thông tin, nội dung mới, chatting và social media rất nhiều. Lợi ích của việc tạo notification trong react native này, đa số chúng ta đều thấy ngay đó là thu hút sự chú ý của người dùng, chủ đề bài viết mình hướng tới là sử dụng công nghệ này như thế nào? Tất nhiên trên nền tảng native mọi người đã dùng nhiều rồi, mình xin đề cập tới việc sử dụng Firebase Cloud Message (FCM) trong React Native ngắn gọn hơn là RNFirebase (trùng tên với thư viện mà trong bài viết này mình sẽ sử dụng)

1. Khởi tạo project

Nhìn thôi cũng hiểu đây là bước đầu rồi, vì mong của bài viết là các bạn mới làm quen với react native cũng tiếp cận dễ hơn nên ai đã quen rồi thì chuyển sang bước tiếp theo nha. Mình tạo một project mới theo câu lệnh sau :

Terminal:

react-native init RNFProject

Nếu bạn nào gặp báo lỗi: Terminal không hiểu “react-native” nó là lệnh gì thì bạn cần cài đặt react native vào nhé. Xem cách cài đặt trong bài này, nó khá đơn giản để làm quen đọc bài

Cấu trúc của một project React Native :

Vậy là đã khởi tạo xong rồi, anh em đừng vội phải build nó lên chạy xem như nào vì dễ gặp lỗi ở phiên bản mới cập nhật của react, cài đặt thiếu là nó không chạy được đâu. Chúng ta chuyển sang bước sau nhé

Có thể bạn cần xem

  9 ứng dụng tuyệt vời được viết bằng React Native

2. Tạo project Firebase

Trước tiên chúng ta tạo một project trên https://console.firebase.google.com Chờ một chút nhé, nếu bạn nào đang thường phát triển Android hoặc iOS thì sẽ chỉ mong muốn chạy được project trên 1 trong 2 nền tảng thôi. Nhưng đây là react native mà nên cứ chơi cả 2 không mất gì cả nhé. Nên mình sẽ setting cho cả 2 luôn, cứ “ôm” file google-services.json dành cho Android app và GoogleService-Info.plist của iOS app ném vào folder của project tương ứng. Ok giờ mình sẽ lần lượt lấy 2 file này về nhé:

Android:

Sau khi khai báo package name và SHA1 tạm được generate từ debug.keystore, bạn sẽ có file json như sau :

iOS:

Sau khi điền bundle Id, tải file .plist về và để vào folder ios trong project của bạn nhé. (Xem lại ảnh ở trên )

Làm xong các bạn chuyển đến bước số 3

3. Cài đặt Firebase

Android

Chúng ta thiết lập ở các file build.gradle của app và của project android. Các bạn chú ý nhé , có 2 file đó =))

app/build.gradle

Thêm một số dòng sau, mình đang dùng firebase lib bản mới nhất:

Chỉnh sửa lại một chút nếu như react-native của bạn đang ở version mới nhất : “0.57.8” thì làm như sau :

Chuyển thành :

Vì lúc mình chạy trên bản mới nhất simulator báo lỗi **notmatching của 2 version Javascript 0.55.4 và React Native 0.57.8 **

Hơi rắc rối chút nhưng sắp xong bước này rồi.

build.gradle

Thêm dòng này :

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

Như vậy là xong với app Android, mình chuyển sang iOS nhé

iOS

1. Tạo APN Authen Key

Click project iOS > Project Settings > Cloud Messaging. Bạn sẽ thấy như hình ảnh :

1. Tạo APN Authen Key

Bạn cần upload file APNS .p12 lên và cần có tài khoản developer của Apple, nếu chưa có thì tạm bỏ qua bước này

2. Setting notification trên Xcode

2. Setting notification trên Xcode

Trong Podfile sửa như sau :

Như vậy là chúng ta đã setting môi trường iOS, bạn nào có tài khoản iOS developer thì chắc chắn hoàn thiện bước này khá đơn giản, ngược lại ai đang làm Android thì bước trên cũng rất đơn giản. Nhưng không sao chúng ta đều sang bước sau vì đây mới thực sự là react native nha.

Video REACT NATIVE – Overview cách làm app trong 3 tiếng

4. Cài đặt RNFirebase

Chạy lệnh cài đặt : npm install --save react-native-firebase Chạy lệnh link tới native :react-native link react-native-firebase

Android 

Đi tới file MainApplication.java và thêm dòng cài đặt firebase message như sau :

Khai báo import :

trong file settings.gradle nếu bạn thấy chưa có thì thêm vào như sau, đề phòng việc link native ở trên bị thiếu nhé

Trong build gradle thêm khai báo transitive :

Đến đây bạn chạy lệnh :react-native run-android

Việc chạy ứng dụng Android thành công nghĩa là việc kết nối với project Firebase đã hoàn thành

iOS

Thêm thư viện RNFirebase.xcodeproj

Chuột phải Libraries > Add Files To <RNFProject>. Navigate to <RNFProject>/nodemodules/react-native-firebase/ios/. Select RNFirebase.xcodeproj , click Add

Thêm thư viện UserNotifications.framework bắt buộc với iOS 10

Thêm libRNFirebase.a

Thêm value trong build setting : $(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase

Ok giờ bạn clear cache và rebuild project nhé.

Tiếp tục,

Trong file AppDelegate.h:

AppDelegate.m:

Sửa lại một chút như sau

Như vậy là việc xử lý dưới client cũng đã sắp hoàn thành, bây giờ đến việc nhận Notification nữa là xong rồi.

Trong file App.js sửa lại một chút như sau, để việc hỏi quyền truy cập từ người dùng và đăng kí token gửi – nhận notification và lắng nghe firebase gửi dữ liệu message đến

App.js

5. Tổng kết

Như vậy mình và các bạn đã thử setup RNFirebase cho việc gửi nhận notification xong rồi. Hy vọng với những thao tác trên mọi người có thêm cái nhìn mới cả về Android và iOS khi xử lý trên React Native, mong rằng sắp tới các bạn áp dụng thật tốt vào dự án của riêng mình nhé !

Người viết: Bùi Thành Việt

TopDev via Viblo