สร้างแอปจดหมายข่าวที่ปรับขนาดได้โดยใช้ Upstash Redis และเวิร์กโฟลว์

import { Redis } from "@upstash/redis";
 
export const redis = new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL!,
 token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});
 
export async function getUserFrequency(email: string): Promise<number | null> {
 const data = await redis.get(`user:${email}`);
 console.log("User data:", data);
 if (!data) return null;
 
 const parsed = JSON.parse(JSON.stringify(data));
 return parsed.frequency;
}
 
export async function removeUser(email: string): Promise<void> {
 await redis.del(`user:${email}`);
}
 
export async function checkSubscription(email: string): Promise<boolean> {
 return (await getUserFrequency(email)) !== null;
}

ฟังก์ชันการส่งอีเมล

ในการส่งอีเมล เราจะใช้ API อีเมลของเราเองที่เราพัฒนาขึ้นในบล็อกโพสต์ก่อนหน้าเกี่ยวกับการสร้าง Email Scheduler ด้วย QStash Python SDK

export async function sendEmail(message: string, email: string) {
 console.log(`Sending email to ${email}`);
 const url = process.env.EMAIL_SERVICE_URL;
 const payload = {
 to_email: email,
 subject: "Upstash Newsletter",
 content: message,
 };
 
 if (!url) {
 console.error("EMAIL_SERVICE_URL is not defined.");
 return;
 }
 
 const response = await fetch(url, {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify(payload),
 });
 
 if (!response.ok) {
 console.error("Failed to send email:", await response.text());
 }
}

คำจำกัดความประเภท

เรายังต้องการคำจำกัดความประเภทสำหรับข้อมูลการสมัครสมาชิก:

export type SubscriptionData = {
 email: string;
 frequency: string;
 customFrequency?: string;
};

สมัครเส้นทาง API

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

import { NextRequest, NextResponse } from "next/server";
import { checkSubscription } from "@/lib/redis";
 
export const POST = async (request: NextRequest) => {
 try {
 const { email, frequency: freq, customFrequency } = await request.json();
 
 console.log("Email:", email);
 console.log("Frequency:", freq);
 console.log("Custom Frequency:", customFrequency);
 
 if (!email || !freq) {
 console.error("Email and frequency are required.");
 return NextResponse.json(
 { error: "Email and frequency are required." },
 { status: 400 }
 );
 }
 
 let frequency = freq;
 if (frequency === "custom") {
 if (!customFrequency) {
 console.error("Custom frequency days are required.");
 return NextResponse.json(
 { error: "Custom frequency days are required." },
 { status: 400 }
 );
 }
 frequency = customFrequency;
 }
 
 if (frequency === "daily") {
 frequency = "1";
 } else if (frequency === "weekly") {
 frequency = "7";
 } else if (frequency === "monthly") {
 frequency = "30";
 }
 
 const frequencyNumber = Number(frequency);
 
 if (isNaN(frequencyNumber) || frequencyNumber <= 0) {
 console.error("Invalid frequency value.");
 return NextResponse.json(
 { error: "Invalid frequency value." },
 { status: 400 }
 );
 }
 
 const exists = await checkSubscription(email);
 
 if (exists) {
 console.error("Email is already subscribed.");
 return NextResponse.json(
 { error: "Email is already subscribed." },
 { status: 400 }
 );
 }
 
 console.log("Subscription successful!");
 
 console.log("Enqueue the workflow");
 // Enqueue the workflow
 await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/workflow`, {
 method: "POST",
 headers: {
 Authorization: `Bearer ${process.env.QSTASH_TOKEN}`,
 "Content-Type": "application/json",
 },
 body: JSON.stringify({
 email: email,
 frequency: frequencyNumber,
 }),
 })
 .then((response) => {
 if (!response.ok) {
 console.error("Failed to enqueue workflow:", response.statusText);
 return NextResponse.json(
 { error: "Failed to enqueue workflow." },
 { status: 500 }
 );
 } else {
 console.log("Workflow enqueued successfully");
 }
 })
 .catch((error) => {
 console.error("Error enqueuing workflow:", error);
 return NextResponse.json(
 { error: "Error enqueuing workflow." },
 { status: 500 }
 );
 });
 
 return NextResponse.json({ message: "Subscription successful!" });
 } catch (error) {
 console.error("Error occurred:", error);
 return NextResponse.json(
 { error: "An error occurred during subscription." },
 { status: 500 }
 );
 }
};

ยกเลิกการสมัครเส้นทาง API

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

import { NextRequest, NextResponse } from "next/server";
import { redis } from "@/lib/redis";
import { sendEmail } from "@/lib/email";
 
export const POST = async (request: NextRequest) => {
 try {
 const { email } = await request.json();
 
 if (!email) {
 return NextResponse.json(
 { error: "Email is required." },
 { status: 400 }
 );
 }
 
 const userExists = await redis.exists(`user:${email}`);
 if (!userExists) {
 return NextResponse.json(
 { error: "Email is not subscribed." },
 { status: 400 }
 );
 }
 
 // Remove the user from Redis
 await redis.del(`user:${email}`);
 
 // Send an email to confirm unsubscription
 await sendEmail(
 "You have been unsubscribed from Upstash Newsletter.",
 email
 );
 
 return NextResponse.json({ message: "You have been unsubscribed." });
 } catch (error) {
 console.error("Unsubscribe error:", error);
 return NextResponse.json(
 { error: "An error occurred. Please try again." },
 { status: 500 }
 );
 }
};

เส้นทาง API เวิร์กโฟลว์

ตอนนี้เป็นส่วนที่สนุก! เราจะสร้างเส้นทาง API ที่จัดการขั้นตอนการทำงานสำหรับการส่งจดหมายข่าวตามช่วงความถี่ที่ระบุ

ขั้นตอนการทำงานของเราจะดำเนินการดังต่อไปนี้:

1. จัดเก็บข้อมูลการสมัครสมาชิกของผู้ใช้ใน Redis
2. ส่งอีเมลต้อนรับ
3. ป้อนวงวน:
   • รอตามระยะเวลาความถี่ที่ระบุ
   • ตรวจสอบว่าผู้ใช้ยังคงสมัครรับข้อมูลอยู่หรือไม่
   • ส่งอีเมลจดหมายข่าว
   • ทำซ้ำจนกว่าจะมีการส่งจดหมายข่าวตามจำนวนที่กำหนด เนื่องจากเราไม่ต้องการวนซ้ำไม่สิ้นสุด

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

คุณสามารถเข้าถึงและตรวจสอบขั้นตอนการทำงานของคุณได้จาก Upstash Console

ส่วนประกอบของหน้าหลัก

มาตั้งค่าหน้าหลักของแอปพลิเคชันของเรากันดีกว่า หน้านี้จะมีแบบฟอร์มสมัครสมาชิกและลิงก์ไปยังหน้ายกเลิกการสมัคร

import SubscriptionForm from "@/components/SubscriptionForm";
import Link from "next/link";
 
export default function Home() {
 return (
 <main className="flex flex-col items-center justify-center min-h-screen p-4">
 <h1 className="text-3xl font-bold mb-6">
 Subscribe to Upstash Newsletter
 </h1>
 
 {/* Subscription Form */}
 <SubscriptionForm />
 
 {/* Unsubscribe Link */}
 <div className="mt-8">
 <p className="text-gray-600">
 Already subscribed and want to unsubscribe?
 <Link
 href="/unsubscribe"
 className="text-red-500 hover:text-red-700 font-bold ml-2"
 >
 Click here to unsubscribe
 </Link>
 </p>
 </div>
 </main>
 );
}

ยกเลิกการสมัครส่วนประกอบของหน้า

สุดท้ายนี้ เรามาสร้างหน้าการยกเลิกการสมัครสมาชิกกันดีกว่า

import UnsubscribePage from "@/components/UnsubscribeForm";
 
export default function UnsubscribeHome() {
 return (
 <main className="flex flex-col items-center justify-center min-h-screen p-4">
 <h1 className="text-3xl font-bold mb-6">
 Unsubscribe from Upstash Newsletter
 </h1>
 
 {/* Unsubscribe Form */}
 <UnsubscribePage />
 </main>
 );
}

บทสรุป

และคุณก็ได้แล้ว! เราได้สร้างแอปจดหมายข่าวที่เรียบง่ายโดยไม่ต้องกังวลกับการหมดเวลาของฟังก์ชันไร้เซิร์ฟเวอร์

คุณสามารถค้นหาซอร์สโค้ดที่สมบูรณ์สำหรับโปรเจ็กต์นี้ได้บน GitHub และดูการสาธิตสดได้ที่นี่

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเวิร์กโฟลว์ Upstash โปรดดูที่เอกสารประกอบ Upstash

หากคุณมีคำถามใดๆ โปรดติดต่อเราได้ที่ Discord นอกจากนี้ อย่าลืมสำรวจ Upstash Blog เพื่อดูบทแนะนำและกรณีการใช้งานเพิ่มเติม