Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript
Code

Viết một Ứng dụng Thời gian thực với NativeScript: Thông báo đẩy

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

NativeScript là một framework dùng để xây dựng các ứng dụng di động đa nền tảng bằng XML, CSS và JavaScript. Trong loạt bài này, chúng ta đang thử nghiệm một số tính năng tuyệt vời mà bạn có thể thực hiện với một ứng dụng NativeScript: định vị địa lý và tích hợp Google Maps, cơ sở dữ liệu SQLite, tích hợp Firebase và thông báo đẩy. Song song đó, chúng ta đang xây dựng một ứng dụng theo dõi sức khoẻ với các tính năng thời gian thực sẽ sử dụng từng tính năng này.

Trong bài hướng dẫn này, bạn sẽ học cách để thêm thông báo đẩy vào ứng dụng NativeScript của bạn với dịch vụ Firebase Cloud Messaging.

Những gì bạn sẽ thực hiện

Lấy cột mốc từ bài hướng dẫn trước, bạn sẽ thêm thông báo đẩy vào ứng dụng. Một thông báo sẽ được kích hoạt khi người dùng phá kỷ lục hiện tại của họ hoặc khi một trong những người bạn của họ dẫn đầu.

Thiết lập Dự án

Nếu bạn đã theo hướng dẫn trước về Firebase, bạn chỉ cần sử dụng cùng một dự án và xây dựng các tính năng mà chúng ta sẽ thêm vào ở trong hướng dẫn này. Nếu không, bạn có thể tạo một dự án mới và sao chép các tập tin khởi đầu vào thư mục app của dự án.

Sau đó, bạn cũng cần cài đặt các các plugin geolocation, Google Maps, SQLite và Firebase:

Một khi đã cài đặt xong, bạn cần thiết lập cấu hình cho plugin Google Maps. Bạn có thể đọc hướng dẫn đầy đủ về cách thực hiện việc này bằng cách đọc phần Cài đặt Plugin Google Maps trong bài hướng dẫn trước đó.

Tiếp theo, cài đặt thư viện fecha để định dạng ngày tháng:

Sau đó, bạn cũng cần cấu hình plugin Firebase. Hãy đọc các phần sau trong bài hướng dẫn trước đó để làm cho ứng dụng của bạn chạy được:

  • Chạy Ứng dụng
  • Thiết lập một Ứng dụng Firebase
  • Thiết lập một Ứng dụng Facebook
  • Cài đặt Plugin Firebase
  • Cấu hình Tích hợp Facebook

Vì chúng ta đã thiết lập plugin Firebase trong bài viết trước nên chỉ còn lại một ít công việc cần phải làm để thiết lập thông báo đẩy.

Trước tiên, bạn phải cấu hình lại plugin bằng cách vào trong thư mục node_modules/nativescript-plugin-firebase và chạy npm run config. Lần này, chọn cả xác thực Facebook và Messaging.

Sau khi hoàn tất việc đó, hãy mở tập tin firebase.nativescript.json trong thư mục gốc của dự án và đảm bảo rằng messaging được thiết lập thành true:

Tiếp theo, mở app/App_Resources/Android/AndroidManifest.xml và thêm các dịch vụ sau đây vào bên trong <application>. Việc này kích hoạt dịch vụ Firebase Messaging cho ứng dụng:

Chạy Ứng dụng

Bạn có thể chạy dự án bằng cách thực thi lệnh tns run android. Nhưng vì ứng dụng này sẽ xây dựng dựa trên chức năng định vị địa lý, tôi khuyên bạn nên sử dụng GPS emulator để nhanh chóng cài đặt và thay đổi vị trí của mình. Bạn có thể tìm hiểu thêm về cách làm trong phần Chạy Ứng dụng trong hướng dẫn trước.

Nếu bạn gặp bất kỳ lỗi nào, bạn có thể xoá nền tảng và chạy lại ứng dụng:

Thiết lập Firebase Cloud Functions

Bạn sẽ sử dụng Firebase Cloud Functions để tạo một máy chủ để gởi thông báo đẩy. Tính năng này của Firebase được sử dụng để chạy code trên back-end bất cứ khi nào một sự kiện cụ thể xảy ra trong các tính năng của Firebase mà bạn đang sử dụng - ví dụ, nếu có một dữ liệu mới được lưu vào cơ sở dữ liệu thời gian thực hoặc khi có người dùng mới được thêm vào dịch vụ xác thực của Firebase. Đối với ứng dụng này, bạn sẽ sử dụng HTTP Triggers để gởi thông báo đẩy khi ứng dụng thực hiện một yêu cầu đến một endpoint cụ thể.

Để sử dụng Firebase Cloud Functions, đầu tiên bạn cần phải cài đặt gói firebase-tools trên toàn cục:

Tiếp theo, tạo một thư mục mới để chứa code trên máy chủ. Thư mục này nên nằm bên ngoài thư mục app của bạn. Bên trong thư mục đó, cài đặt gói firebase-functions:

Một khi nó đã được cài đặt, đăng nhập vào Firebase bằng cách chạy lệnh firebase login. Việc này sẽ mở một tab trình duyệt mới cho phép bạn đăng nhập bằng tài khoản Google của mình. Hãy đi qua toàn bộ quá trình và đồng ý tất cả các quyền được yêu cầu.

Một khi bạn đã đăng nhập, bạn có thể khởi tạo Firebase Functions cho một dự án Firebase cụ thể:

Điều này sẽ hỏi bạn có muốn thiết lập một dự án mặc định hay không. Chọn dự án Firebase mà bạn đã tạo trong hướng dẫn trước:

setup firebase functions

Tiếp theo, bạn sẽ được hỏi có muốn cài đặt các phụ thuộc hay không. Chọn yes.

Một khi các phụ thuộc đã được cài đặt xong, bạn sẽ thấy tập tin firebase.json và một thư mục functions bên trong thư mục này. Tập tin mà bạn sẽ làm việc cùng là functions/index.js. Hãy mở tập tin đó và bạn sẽ thấy những thứ sau đây:

Bỏ comment hàm helloWorld, và bạn sẽ lập tức nhìn thấy HTTP triggers.

Chạy lệnh sau để triển khai hàm lên cloud:

Khi đã triển khai xong, nó sẽ hiển thị cho bạn URL nơi mà hàm đã được triển khai:

deploy firebase functions

Truy cập vào URL đó từ trình duyệt của bạn để xem kết quả "Hello from Firebase!"

Thêm Code Server

Giờ bạn đã có thể thêm code cho việc cài đặt thông báo đẩy. Trước tiên, bạn sẽ thêm code cho thành phần server, sau đó là code cho ứng dụng.

Mở tập tin functions/index.js và xoá sạch nội dung của nó.

Tạo Hàm Firebase

Import các gói Firebase mà bạn sẽ cần:

Tạo hàm init_push. Lưu ý rằng HTTP trigger được gọi cho bất kỳ phương thức yêu cầu nào, vì vậy bạn phải lọc phương thức yêu cầu mà bạn muốn xử lý. Trong trường hợp này, chúng ta chỉ muốn xử lý các yêu cầu POST. Chúng ta muốn ứng dụng gởi id, stepsfriend_ids như là dữ liệu yêu cầu.

Lấy Dữ liệu Người dùng và Bạn bè

Tiếp theo, truy vấn cơ sở dữ liệu Firebase để xem ID người dùng có tồn tại hay không. Điều này đóng vai trò như là một cách để bảo mật endpoint, do đó không phải ai cũng có thể kích hoạt thông báo đẩy. (Tất nhiên, một ứng dụng thực tế cần có bảo mật back-end tốt hơn để người dùng không thể nào giả mạo dữ liệu của họ hoặc dữ liệu của người khác).

Nếu người dùng có tồn tại, hãy truy vấn lại cơ sở dữ liệu để nó trả về toàn bộ người dùng. Lưu ý rằng Firebase hiện không cung cấp cách để trả về các bản ghi dựa trên một mảng ID, vì vậy chúng ta sẽ phải tự lọc các dữ liệu có liên quan:

Tiếp theo, lặp qua các kết quả được trả về từ Firebase và tạo một mảng mới chứa friends_data. Một khi việc này đã được thực hiện xong, sắp xếp mảng theo số bước đi được bởi mỗi người dùng. Người có số bước cao nhất có chỉ số đầu tiên.

Cấu trúc Khối lượng Thông báo

Bây giờ chúng ta đã sẵn sàng để xác định ai sẽ nhận được thông báo và cấu trúc khối lượng thông báo. Ai ở vị trí đầu tiên? Có phải là người dùng hiện tại hoặc một trong những người bạn của người dùng? Bởi vì người dùng hiện tại cũng sẽ phá vỡ kỷ lục của chính họ khi họ phá vỡ kỷ lục tổng thể của những người ở vị trí đầu tiên, chúng ta chỉ cần kiểm tra xem bản gi đó đã bị phá hay chưa.

Gởi Thông báo

Cuối cùng là gởi thông báo:

Cập nhật Code Ứng dụng

Trước đó, bạn thiết lập ứng dụng để nó có thể nhận thông báo đẩy. Lần này, bạn sẽ thêm code để ứng dụng của bạn có thể xử lý các thông báo đẩy đó và hiển thị chúng cho người dùng.

Nhận Thông báo đẩy

Điều đầu tiên bạn cần làm để nhận thông báo đẩy là cập nhật cập nhật hàm firebase.init() để bao gồm một listener để nhận token của thiết bị:

Hàm này chỉ thực thi một lần, vì vậy bạn phải lưu token cục bộ bằng cài đặt ứng dụng. Sau đó, nó sẽ cho phép chúng ta lấy token của thiết bị khi người dùng đăng nhập lần đầu tiên. Nếu bạn còn nhớ hướng dẫn trước, chúng ta lưu dữ liệu của người dùng vào Firebase khi lần đầu tiên họ đăng nhập.

Tiếp theo, bạn có thể thêm listener để khi nhận được thông báo. Điều này sẽ hiển thị hộp cảnh báo với tiêu đề và nội dung của thông báo là nội dung:

Lưu Token vào Firebase

Firebase Cloud Messaging yêu cầu token của thiết bị khi gửi thông báo đẩy đến một thiết bị cụ thể. Vì chúng ta đã sử dụng Firebase nên chúng ta sẽ lưu token của thiết bị cùng với dữ liệu người dùng. Do đó, bạn cần chỉnh sửa code lưu dữ liệu của người dùng để bao gồm token của thiết bị mà chúng ta đã có trước đó:

Kích hoạt Thông báo đẩy

Thông báo đẩy được kích hoạt khi một trong hai thứ xảy ra:

  • khi người dùng phá kỷ lục hiện tại của họ
  • khi một trong những bạn bè của người dùng phá kỷ lục của họ và đi đến vị trí đầu tiên

Cái đầu tiên thì dễ, do đó thực sự không cần thiết lập bổ sung. Nhưng đối với cái thứ hai, bạn cần phải làm một ít công việc. Trước tiên, bạn phải chỉnh sửa code để khi thay đổi trạng thái xác thực. Ngay sau khi trích xuất ID bạn bè từ kết quả trên Facebook, bạn phải lưu các ID của bạn bè bằng cài đặt ứng dụng.

Tiếp theo, cập nhật code khi người dùng ngưng theo dõi bước đi của họ. Ngay sau code để cấu trúc dữ liệu người dùng cho việc cập nhật người dùng, hãy lấy các ID bạn bè từ cài đặt ứng dụng và đưa nó vào đối tượng chứa dữ liệu yêu cầu để kích hoạt thông báo đẩy.

Tạo yêu cầu đến endpoint của Firebase Cloud Functions mà bạn đã tạo ra trước đó. Một khi phản hồi thành công được trả về, khi đó dữ liệu của người dùng mới được cập nhật trên cơ sở dữ liệu Firebase.

Thử nghiệm Thông báo Đẩy

Bạn có thể thử gởi thông báo đẩy bằng cách gỡ cài đặt ứng dụng khỏi emulator hoặc thiết bị. Điều này cho phép chúng ta kích hoạt đúng hàm cho việc lấy token của thiết bị. Hãy đảm bảo thêm console.log để xuất token của thiết bị:

Khi token của thiết bị được xuất ra trong giao diện console của NativeScript, hãy sao chép nó, nhấp vào trình đơn Database trên bảng điều khiển ứng dụng Firebase của bạn và thêm nó như là một token của thiết bị vào tất cả những người dùng của ứng dụng. Sử dụng device_token làm tên thuộc tính.

Để kích hoạt thông báo đẩy, bạn có thể sử dụng curl để tạo một yêu cầu POST đến endpoint của Firebase Function:

Nếu bạn chưa cài đặt curl, bạn có thể sử dụng Postman App để gửi yêu cầu. Sử dụng các cài đặt sau cho yêu cầu:

  • Request methodPOST
  • URL: Endpoint của của Firebase Function
  • Headers KeyContent-type
  • Headers Valueapplication/json
  • Body:

Một khi đã kích hoạt, bạn sẽ thấy một kết quả tương tự như sau:

push notification received

Nếu ứng dụng hiện không mở, bạn sẽ thấy thông báo trong khu vực thông báo:

push notification outside app

Phần kết

Xin chúc mừng! Như vậy là bạn đã hoàn thành ứng dụng theo dõi thể dục. Trong suốt bốn bài hướng dẫn, bạn đã xây dựng một ứng dụng NativeScript có sử dụng Google Maps, SQLite, cơ sở dữ liệu Firebase Realtime và Firebase Cloud Messaging. Giờ đây bạn đã có một kiến thức nền khá tốt để xây dựng ứng dụng NativeScript sử dụng những công nghệ đó.

Để tìm hiểu thêm về NativeScript hoặc các công nghệ di động đa nền tảng khác, hãy xem qua một số các khóa học và hướng dẫn khác của chúng tôi ở đây trên Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.