ประกาศในแอปด้วย Redis แบบไร้เซิร์ฟเวอร์และ React Native

ในแอปพลิเคชันมือถือ อาจจำเป็นต้องส่งข้อมูล คำเตือน หรือคำแนะนำบางอย่างไปยังผู้ใช้ปลายทางในแอป วิธีหนึ่งในการทำเช่นนี้คือการส่งประกาศในแอปไปยังผู้ใช้

ในบล็อกโพสต์นี้ เราจะพัฒนาแอปพลิเคชันมือถือเพื่อแสดงวิธีส่งประกาศไปยังผู้ใช้ด้วย Redis แบบไร้เซิร์ฟเวอร์ เราจะใช้ React Native เพื่อพัฒนาแอปพลิเคชันมือถือและ Upstash สำหรับ Redis แบบไร้เซิร์ฟเวอร์ ซึ่งเชื่อมต่อโดยตรงกับแอป

การประกาศในแอปคืออะไร

การประกาศในแอปคือข้อความที่ส่งไปยังผู้ใช้ปลายทางเพื่อแจ้งให้ทราบเกี่ยวกับสิ่งที่สำคัญ แจ้งให้พวกเขาทราบเกี่ยวกับการกระทำของพวกเขา หรือแนะนำพวกเขาไปยังที่ใดที่หนึ่ง

ประกาศเหล่านี้ช่วยให้นักพัฒนาสามารถสื่อสารกับผู้ใช้ได้โดยไม่ต้องอัปเดตโค้ดใดๆ หรือเผยแพร่แอปรุ่นใหม่

ในกรณีของเรา เราจะใช้โซลูชันเพื่อประกาศข้อความที่ผู้ใช้จำเป็นต้องอ่านเพียงครั้งเดียว การใช้งานนี้สามารถใช้เพื่อวัตถุประสงค์บางอย่าง เช่น:

• ประกาศการอัพเดทหรือการออกรุ่นใหม่
• ประกาศคุณสมบัติใหม่ในแอป
• เฉลิมฉลองบางสิ่งกับผู้ใช้ เช่น มีผู้ใช้ถึง 1 ล้านคน ฯลฯ

ประกาศแบบไร้เซิร์ฟเวอร์

ในกรณีของเรา เราต้องการแสดงประกาศล่าสุดแก่ผู้ใช้เพียงครั้งเดียว ดังนั้นควรกำหนดเวอร์ชันให้กับแต่ละประกาศเพื่อสั่งซื้อ และส่งประกาศล่าสุดไปยังผู้ใช้หากผู้ใช้ยังไม่ได้ดู ดังนั้นเงื่อนไขที่เราจะพยายามทำให้ได้ในกรณีของเราคือ

• แสดงเฉพาะประกาศล่าสุด
• แสดงประกาศเพียงครั้งเดียวสำหรับผู้ใช้ทุกคน

ด้วยเหตุนี้ ชุดที่จัดเรียงใน Redis จึงเป็นสิ่งที่เราต้องการอย่างแท้จริง ช่วยติดตามประกาศโดยจัดเก็บและจัดเรียงตามเวอร์ชัน

ชุดที่จัดเรียงเป็นประเภทข้อมูลที่จัดเรียงซึ่งอยู่ในรูปแบบเหมือนแผนที่โดยที่คีย์คือข้อความสตริง และค่าคือคะแนนที่กำหนดให้กับข้อความสตริง โดยจะจัดเรียงตามคะแนนซึ่งสอดคล้องกับเวอร์ชันของประกาศในกรณีของเรา

ในขั้นแรก เราจำเป็นต้องสร้างคอนโซลฐานข้อมูล Upstash

จากนั้น เราสามารถเริ่มกรอกประกาศ Redis แบบไร้เซิร์ฟเวอร์ของเราได้ เนื่องจากฉันชอบทำให้ทุกอย่างเป็นอัตโนมัติด้วยการเข้ารหัส ฉันชอบที่จะเพิ่มประกาศใหม่โดยการเขียนสคริปต์ Python

ตอนแรก ฉันต้องกำหนดค่า Upstash Redis ในสคริปต์ 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)

จากนั้น ฉันสามารถเพิ่มข้อความใหม่ไปยัง Redis โดยรับเวอร์ชันล่าสุดจากฐานข้อมูลของฉัน และเพิ่มข้อความใหม่ในรูปแบบต่อไปนี้:

{“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})

ด้วยคุณลักษณะใหม่ในคอนโซล Upstash เราจึงสามารถแสดงข้อมูลของเราและเห็นภาพได้ในส่วน "เบราว์เซอร์ข้อมูล" บนคอนโซล

นั่นคือวิธีที่เราสามารถเพิ่มประกาศใหม่ไปยังชุดที่จัดเรียงของเราได้

แน่นอนว่านี่เป็นเพียงวิธีหนึ่งในการเพิ่มประกาศใหม่ หากใครสะดวกใช้คอนโซลโดยตรง ( https://console.upstash.com/ ) ก็สามารถใช้ได้เช่นกัน

การเชื่อมต่อแอปกับ Redis แบบไร้เซิร์ฟเวอร์

ในการสาธิตนี้ จุดมุ่งหมายหลักคือการสร้างการควบคุมการประกาศโดยเชื่อมต่อผู้ใช้ปลายทางกับ Redis โดยตรง โดยไม่ต้องใช้บริการแบ็กเอนด์ที่เชื่อมต่อผู้ใช้กับประกาศในฐานข้อมูล

เพื่อให้สามารถอ่านประกาศใน Redis จากแอปบนอุปกรณ์เคลื่อนที่ได้ เราสามารถรับโทเค็นแบบอ่านอย่างเดียวจากคอนโซล Upstash

ตอนนี้ เราสามารถไปยัง React Native สำหรับแอปพลิเคชันมือถือได้แล้ว หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ React Native โปรดไปที่ react native .

หากต้องการเริ่มใช้ React Native เป็นครั้งแรก โปรดทำตามขั้นตอนในการตั้งค่าสภาพแวดล้อม

เนื่องจากเราเพียงแค่ต้องแสดงวิธีการใช้วิธีหนึ่งของการประกาศในแอป เราจะออกแบบหน้าจอเดียวที่แสดงข้อความใหม่เป็นการแจ้งเตือน หากมีข้อความใหม่

บนหน้าจอ เราจำเป็นต้องตรวจสอบว่ามีข้อความใหม่หรือไม่ โดยส่งคำขอ HTTP ไปยัง Redis โดยใช้โทเค็นแบบอ่านอย่างเดียว ในการดำเนินการนี้ เราจำเป็นต้องจัดเก็บเวอร์ชันล่าสุดที่ดึงมาจาก Redis ในอดีต

เราสามารถใช้ react-native-encrypted-storage เป็นที่เก็บข้อมูลในเครื่องใน React Native

ทุกครั้งที่ผู้ใช้เปิดหน้าจอนี้ เราจำเป็นต้องได้รับข้อความล่าสุดซึ่งมีเวอร์ชันที่สูงกว่าเวอร์ชันที่จัดเก็บไว้ในที่จัดเก็บในเครื่องของโทรศัพท์มือถือ

การใช้ ZRANGEBYSCORE จาก +inf เป็นเวอร์ชันที่จัดเก็บไว้ในเครื่องโดยจำกัดผลลัพธ์ให้เหลือเพียงผลลัพธ์เดียวสามารถแก้ปัญหาของเราได้ ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับคำสั่ง Redis ได้ที่คำสั่ง Redis

ส่วนโค้ดถัดไปใช้ขั้นตอนต่อไปนี้ใน React Native:

• รับเวอร์ชันที่เก็บไว้ของข้อความล่าสุดที่แสดง
• ส่งคำขอ HTTP ไปยัง Upstash เพื่อรับประกาศล่าสุด ซึ่งมีเวอร์ชันที่สูงกว่าที่เราได้รับในขั้นตอนก่อนหน้านี้
• หากข้อความใหม่กลับมาจากคำขอ ให้แสดงและอัปเดตเวอร์ชันในที่จัดเก็บในตัวเครื่อง

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);
  });

ในตอนท้าย เราสามารถแสดงประกาศล่าสุดเป็นการแจ้งเตือนและซิงโครไนซ์เวอร์ชันท้องถิ่นกับเวอร์ชันล่าสุดใน Redis

ซอร์สโค้ดที่สมบูรณ์ของแอปพลิเคชันง่ายๆ นี้มีอยู่ใน github

สรุป

ในโพสต์นี้ เราได้พัฒนาระบบประกาศในแอป ซึ่งจะส่งข้อความใหม่ถึงผู้ใช้เพียงครั้งเดียวหากมีข้อความใหม่

ผู้ใช้ได้รับประกาศล่าสุดที่ผู้ใช้ยังไม่เคยเห็น จากนั้นเวอร์ชันของข้อความที่ได้รับจะถูกเก็บไว้ในที่จัดเก็บในตัวเครื่อง ทุกครั้งที่ผู้ใช้เปิดหน้าจอ แอปพลิเคชันจะตรวจสอบว่ามีข้อความใหม่ใน Redis หรือไม่

โซลูชันนี้สามารถใช้งานได้โดยไม่ต้องมีบริการแบ็กเอนด์โดยเชื่อมต่อโดยตรงจากแอปบนอุปกรณ์เคลื่อนที่ไปยัง Upstash Redis ผ่านโทเค็นแบบอ่านอย่างเดียว

ฉันหวังว่าโพสต์นี้จะช่วยให้คุณสื่อสารกับผู้ใช้ในวิธีที่ง่าย