Giới thiệu về Onesignal, hướng dẫn cài đặt push notification cho ứng dụng React Native (p1)

Trong bài ta sẽ tìm hiểu Onesignal là gì, những tính năng mà Onesignal cung cấp và cài đặt push notification với React Native sử dụng Onesignal

(Bài viết có video hướng dẫn chi tiết __Đang cập nhật)

I. Giới thiệu về Onesignal

Đối với 1 ứng dụng mobile thì chức năng push notification là không thể thiếu. Hiện nay ta có thể có rất nhiều sự lựa chọn cho dịch vụ này nhưng ở bài viết này mình sẽ giới thiệu cho các bạn về Onesignal bởi vì một số lý do như sau:

- Hoàn toàn miễn phí

- Không giới hạn thiết bị, k giới hạn số lượng tin nhắn, có thống kê chi tiết

- Có theo dõi số lượt click tin nhắn

- Có test message

- Có thể import dữ liệu từ Parse sang

Đặc biệt Onesignal được rất nhiều hãng lớn tin tưởng dùng như Uber, zynga, 9GAG,... Trong phần 1 mình sẽ hướng dẫn các bạn cài đặt với môi trường cho thiết bị android.

II. Cài đặt Onesignal cho môi trường android

Bước 1: Add thư viện

Đối với React Native ta dùng gói thư viện react-native-onesignal. Dùng câu lệnh để cài đặt tương tự các thư viện khác

yarn add react-native-onesignal

or

npm install react-native-onesignal - --save

Sau đó link thư viện tự động bằng câu lệnh link

react-native link react-native-onesignal

Bước 2: Tạo 1 project trên firebase console và onesignal rồi kết nối chúng với nhau

Bước 3: Cấu hình project android

Ở file AndroidManifest.xml

.....

<!-- Optional - Add the necessary permissions (Choose one of those) -->

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <!-- Approximate location - If you want to use promptLocation for letting OneSignal know the user location. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <!-- Precise location If you want to use promptLocation for letting OneSignal know the user location. -->

<!-- End optional permissions -->
<application ....>
<activity
android:name=".MainActivity"
android:label="OneSignal Example"
android:launchMode="singleTop"> <!-- Add this attribute to your main activity -->
</activity>
....

Tiếp theo đó, sửa file android/app/build.gradle, thêm vào đầu file đoạn lệnh như sau

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

apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

Bên cạnh đó, có thể bạn cũng phải nâng cấp version android lên phiên bản cao

android {
    compileSdkVersion 27
    buildToolsVersion '27.0.3'
    // ...
}

Bước 4: Kết nối ứng dụng với project onesignal theo key

Để lấy được key ta đăng nhập vào onesignal => chọn project => vào setting project lấy key (các bạn có thể xem video để được hướng dẫn chi tiết hơn)

Tiếp theo vào project RN dùng câu lệnh để kết nối như sau

Screen Shot 2018-09-28 at 3.22.20 PM

Để kiểm tra thiết bị đã kết nối được chưa ta vào Onesignal tạo 1 message bắn thử 1 cái thông báo như sau:

Screen Shot 2018-09-28 at 3.27.27 PM.png

Ta có thể nhìn thấy được có bao nhiêu thiết bị có thể nhận được thông báo, ở đây mình chỉ có 1 thiết bị

Screen Shot 2018-09-28 at 3.28.30 PM.png

Kết quả nếu thành công máy sẽ nhận được thông báo test của bạn.

Tại đây, bạn cũng có thể theo dõi xem đã có ai click nhận thông báo của bạn chưa theo thống kê trên onesignal hay chưa và rất nhiều thống kê hữu ích khác.

Screen Shot 2018-09-28 at 3.31.50 PM.png

Chúc các bạn thành công!

Nguồn:

Doc React Native Onesignal

https://ntdung1128.wordpress.com/2018/09/28/gioi-thieu-ve-onesignal-huong-dan-cai-dat-push-notification-cho-ung-dung-react-native-p1/

 

Nguyễn Hoàng Dũng viết 00:26 ngày 29/09/2018

Mình cũng đang mắc phần ios, không nhận được noti.

Ramon Nguyen viết 00:37 ngày 29/09/2018

Tôi đang dùng firebase mà hay bị conflict các phiên bản gms với nhau quá, có cách nào khắc phục không bạn?

Hung Pham viết 00:50 ngày 29/09/2018

Mình có xem mấy video nhưng toàn của nước ngoài, thấy doc nó thay đổi nhiều quá mà chưa sửa nổi, hóng video

Nguyễn Dũng viết 21:36 ngày 29/09/2018

Vì lỗi kĩ thuật nên mình chưa upload được video, sẽ cập nhật sớm nhất các bạn nhé :D

Bài liên quan

Tự học kiểm thử tự động với Appium- Giới thiệu Appium và hướng dẫn cài đặt (Phần 1)

Kiểm thử tự động là một khái niệm khá quen thuộc trong kiểm thử phần mềm, nhưng để nắm bắt và update những công cụ kiểm thử tự động là một điều không hề đơn giản. Đặc biệt là những bạn ngại ngần về code. Và mình cũng không phải ngoại lệ =)). Kiểm thử tự động không quá khó như mọi người nghĩ, chỉ ...

Trịnh Tiến Mạnh viết 23:18 ngày 20/10/2018

Hướng dẫn cài đặt push notification cho ứng dụng React Native (p2)

- Nối tiếp phần 1, ở phần 2 chúng ta cùng cài đặt cho ios

Nguyễn Dũng viết 23:23 ngày 05/10/2018

Hướng dẫn cài đặt giao diện cho blogger

Trong bài viết này mình sẽ hướng dẫn các bạn từng bước cài đặt giao điện cho blog của mình. Trước tiên các bạn phải download về những giao diện mà bạn muốn cài đặt và sau khi chép về máy, các bạn nhớ giải nén nó ra nhé . Các bạn làm theo các bước như sau: Bước 1: Sau khi đặng nhập vào Bảng ...

Trần Trung Dũng viết 18:18 ngày 04/10/2018

Giới thiệu về Onesignal, hướng dẫn cài đặt push notification cho ứng dụng React Native (p1)

Trong bài ta sẽ tìm hiểu Onesignal là gì, những tính năng mà Onesignal cung cấp và cài đặt push notification với React Native sử dụng Onesignal

Nguyễn Dũng viết 22:23 ngày 28/09/2018

Hướng dẫn Kiểm thử bảo mật cho ứng dụng Web

Giới thiệu về Kiểm thử bảo mật cho ứng dụng Web Việc kiểm tra tính bảo mật cho các ứng dụng web ngày càng trở nên quan trọng do số lượng dữ liệu khổng lồ được lưu trữ và số lượng các giao dịch thông qua web ngày càng tăng. Trong bài này, chúng ta sẽ tìm hiểu chi tiết về các thuật ngữ chính được ...

Vũ Văn Thanh viết 14:03 ngày 10/09/2018

Nguyễn Dũng

4 chủ đề

9 bài viết

+10