In-App Announcements แบบ Real-time ด้วย Serverless Redis + React Native

ในแอปมือถือ บางครั้งต้องส่งข้อมูล/เตือน/แนะนำให้ผู้ใช้โดยไม่ต้องอัปเดตโค้ดหรือปล่อย Release ใหม่ วิธีหนึ่งคือ In-App Announcements

In-App Announcement คืออะไร?

ข้อความที่ส่งถึงผู้ใช้ในแอปเพื่อ:

• ประกาศอัปเดต/Release ใหม่
• แจ้งฟีเจอร์ใหม่
• เฉลิมฉลองマイル스โตน (เช่น 1 ล้านผู้ใช้)

ในตัวอย่างนี้เราจะทำระบบที่:

1. แสดงเฉพาะประกาศล่าสุด
2. แสดงเพียงครั้งเดียวต่อผู้ใช้แต่ละคน

Serverless Architecture ด้วย Upstash Redis

ทำไมต้อง Sorted Set?

Redis Sorted Set เหมาะที่สุดเพราะ:

• เก็บข้อความ (Member) พร้อม Score (Version)
• เรียงลำดับอัตโนมาติตาม Score
• Query ได้เฉพาะช่วง Score ที่ต้องการ (ZRANGEBYSCORE)

1. สร้าง Upstash Database

สร้างที่ Upstash Console แล้วเก็บ Credentials

2. เพิ่ม Announcement ด้วย Python Script

import redis

r = redis.Redis(
    host='YOUR_REDIS_ENDPOINT',
    port=YOUR_REDIS_PORT,
    password='YOUR_REDIS_PASSWORD',
    charset="utf-8",
    decode_responses=True
)

message = "Please update the application before using it."

# หา Version ล่าสุด
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})

สามารถดูข้อมูลใน Upstash Console → Data Browser ได้เลย

3. สร้าง Read-Only Token

ใน Upstash Console → Database Details → สร้าง Read-Only Token เพื่อให้ Mobile App เรียกได้โดยปลอดภัย (อ่านอย่างเดียว ไม่เขียนได้)

4. React Native Implementation

ใช้ react-native-encrypted-storage เก็บ Version ล่าสุดที่ผู้ใช้เคยเห็น

import EncryptedStorage from 'react-native-encrypted-storage';
import { Alert } from 'react-native';

async function checkAnnouncement() {
  // 1. อ่าน Version ที่เก็บไว้ใน Local
  let version = await EncryptedStorage.getItem("announcement_version");
  if (version == null) version = "-1";
  version = parseInt(version);

  // 2. เรียก Upstash REST API หาข้อความที่ Version > Local Version
  // ZRANGEBYSCORE Announcements +inf {version} WITHSCORES LIMIT 0 1
  const url = `${process.env.UPSTASH_REDIS_REST_URL}/zrangebyscore/Announcements/+inf/${version}/WITHSCORES/LIMIT/0/1`;

  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${process.env.UPSTASH_REDIS_REST_READONLY_TOKEN}`,
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });

    const data = await response.json();
    const announcement = data.result;

    if (announcement && announcement.length > 0) {
      // 3. พบข้อความใหม่ - แสดงและอัปเดต Version
      const newVersion = parseInt(announcement[1]) + 1;
      const message = announcement[0];

      await EncryptedStorage.setItem("announcement_version", newVersion.toString());
      Alert.alert("You have new message!", message);
    }
  } catch (err) {
    console.error(err);
  }
}

// เรียกใน useEffect หรือ componentDidMount
useEffect(() => {
  checkAnnouncement();
}, []);

สรุป

• ระบบ Announcement แบบ Serverless - ไม่ต้องมี Backend Server
• Mobile App เรียก Upstash Redis โดยตรงผ่าน Read-Only Token (ปลอดภัย)
• ใช้ Sorted Set จัดการ Version และเรียงลำดับอัตโนมัติ
• เก็บ Version ใน Local Storage (Encrypted) ของ Device
• ทุกครั้งที่เปิดแอป/หน้าจอ → เช็คข้อความใหม่ → แสดงครั้งเดียว

Source Code: GitHub Repository

หวังว่าบทความนี้จะช่วยให้คุณสื่อสารกับผู้ใช้ได้ง่ายขึ้นครับ!