Trong ứng dụng di động, có thể cần gửi thông tin, cảnh báo hoặc hướng dẫn đến người dùng cuối trong ứng dụng. Một cách là gửi thông báo trong ứng dụng (in-app announcements) đến người dùng.
Trong bài viết này, chúng ta sẽ phát triển ứng dụng di động để demo cách gửi thông báo đến người dùng với serverless Redis. Sử dụng React Native phát triển app mobile và Upstash cho serverless Redis, kết nối trực tiếp đến app.
Thông báo trong ứng dụng (In-App Announcement) là gì?
Thông báo trong ứng dụng là các tin nhắn gửi đến người dùng cuối để thông báo điều quan trọng, thông báo hành động của họ hoặc hướng dẫn họ đi đâu đó.
Các thông báo này giúp dev giao tiếp với người dùng mà không cần cập nhật code hoặc phát hành bản release mới.
Trong trường hợp của chúng ta, triển khai giải pháp hiển thị thông báo mới nhất cho người dùng chỉ một lần. Triển khai này dùng cho:
- Thông báo cập nhật hoặc bản phát hành mới
- Thông báo tính năng mới trong app
- Chúc mừng người dùng như đạt 1 triệu user v.v.
Thông báo Serverless
Chúng ta muốn hiển thị thông báo mới nhất cho người dùng chỉ một lần. Do đó, một version nên được gán cho mỗi thông báo để sắp xếp, và gửi thông báo mới nhất cho user nếu họ chưa xem. Điều kiện cần thỏa mãn:
- Chỉ hiển thị thông báo mới nhất
- Hiển thị thông báo chỉ một lần cho mỗi user
Cho mục đích này, Sorted Set trong Redis chính xác là thứ chúng ta cần. Giúp theo dõi thông báo bằng cách lưu trữ và sắp xếp theo version.
Sorted Set là kiểu dữ liệu đã sắp xếp, định dạng như map nơi key là chuỗi thông điệp và value là score gán cho chuỗi. Được sắp xếp theo score, tương ứng với version thông báo trong trường hợp của chúng ta.
Bước đầu, tạo cơ sở dữ liệu Upstash console.
Sau đó, điền dữ liệu vào serverless Redis. Vì tôi thích tự động hóa bằng code, tôi thích thêm thông báo mới bằng script Python.
Đầu tiên, cấu hình Upstash Redis trong script Python:
import json
import redis
r = redis.Redis(
host='YOUR_REDIS_ENDPOINT',
port='YOUR_REDIS_PORT',
password='YOUR_REDIS_PASSWORD',
charset="utf-8",
decode_responses=True)Sau đó, thêm thông điệp mới vào Redis bằng cách lấy version mới nhất từ DB và thêm thông điệp mới theo format:
{"new_message": latest_version + 1}message = "Please update the application before using it."
last_message = r.zrange("Announcements", 0, 0, withscores=True, desc=True)
new_version = 0
if len(last_message) > 0:
new_version = last_message[0][1] + 1
r.zadd("Announcements", {message: new_version})Nhờ tính năng mới trên Upstash console, chúng ta có thể hiển thị và trực quan hóa dữ liệu trong phần "Data Browser" trên console.
Đó là cách thêm thông báo mới vào sorted set.
Tất nhiên, đây chỉ là một cách. Nếu ai thoải mái dùng console trực tiếp (https://console.upstash.com/), cũng được.
Kết nối ứng dụng với Serverless Redis
Mục tiêu chính là tạo điều khiển thông báo bằng cách kết nối trực tiếp người dùng cuối với Redis mà không cần backend service trung gian.
Để đọc thông báo trong Redis từ mobile app, chúng ta có thể lấy read-only token từ Upstash console.
Chuyển sang React Native cho mobile app. Để biết thêm về React Native, xem react native.
Để bắt đầu React Native lần đầu, làm theo environment setup.
Vì chỉ cần demo một cách triển khai in-app announcements, chúng ta chỉ thiết kế một màn hình hiển thị thông điệp mới dưới dạng alert nếu có.
Trên màn hình, kiểm tra xem thông điệp mới có tồn tại không bằng cách gửi HTTP request đến Redis dùng read-only token. Cần lưu version mới nhất lấy từ Redis trước đó.
Dùng react-native-encrypted-storage làm local storage trong React Native.
Mỗi khi user mở màn hình, cần lấy thông điệp mới nhất có version cao hơn version lưu trong local storage.
Dùng ZRANGEBYSCORE từ +inf đến version lưu local, giới hạn 1 kết quả, giải quyết vấn đề. Xem chi tiết Redis commands.
Đoạn code sau triển khai các bước trong React Native:
- Lấy version đã lưu của thông điệp mới nhất hiển thị.
- Gửi HTTP request đến Upstash lấy thông báo mới nhất, version cao hơn bước trước.
- Nếu có thông điệp mới trả về, hiển thị nó và cập nhật version trong local storage.
var version = await EncryptedStorage.getItem("announcement_version");
if (version == null) {
version = "-1";
}
version = parseInt(version);
console.log(version);
await fetch(
"REPLACE_UPSTASH_REDIS_REST_URL/zrangebyscore/Announcements/+inf/" + version + "/WITHSCORES/LIMIT/0/1",
{
method: "GET",
headers: {
Authorization: "Bearer REPLACE_UPSTASH_REDIS_REST_READONLY_TOKEN",
Accept: "application/json",
"Content-Type": "application/json",
},
}
)
.then((response) => response.json())
.then((data) => {
var announcement = data["result"];
if (announcement && announcement.length > 0) {
version = parseInt(announcement[1]) + 1;
var message = announcement[0];
EncryptedStorage.setItem("announcement_version", version.toString());
Alert.alert("You have new message!", message);
}
})
.catch((err) => {
console.error(err);
});Cuối cùng, hiển thị thông báo mới nhất dưới dạng alert và đồng bộ version local với version mới nhất trong Redis.
Mã nguồn hoàn chỉnh tại github.
Kết luận
Trong bài này, chúng ta phát triển hệ thống in-app announcement, gửi thông điệp mới cho user chỉ một lần nếu có thông điệp mới.
User nhận thông báo mới nhất mà chưa xem. Version của thông điệp nhận được lưu trong local storage. Mỗi lần user mở màn hình, app kiểm tra có thông điệp mới trong Redis hay không.
Giải pháp này triển khai được mà không cần backend service, bằng cách kết nối trực tiếp từ mobile app đến Upstash Redis qua read-only token.
Hy vọng bài viết giúp bạn giao tiếp với người dùng dễ dàng.