สร้างเซสชันสโตร์ที่ปลอดภัยและปรับขนาดได้ด้วย Clerk &Upstash Redis

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

การจัดการข้อมูลเซสชันผู้ใช้เป็นสิ่งสำคัญสำหรับแอปพลิเคชันทางธุรกิจต่างๆ ตัวอย่างเช่น แพลตฟอร์มการปรับเปลี่ยนในแบบของคุณใช้ Redis เพื่อจัดเก็บการโต้ตอบและการตั้งค่าของผู้ใช้ ทำให้สามารถเสนอเนื้อหาหรือคำแนะนำผลิตภัณฑ์ที่กำหนดเองได้ ในโลกของเกม Redis ช่วยจัดการข้อมูลผู้ใช้เพื่อมอบประสบการณ์ผู้เล่นหลายคนที่ราบรื่นโดยการติดตามการโต้ตอบของผู้เล่นแบบเรียลไทม์ แพลตฟอร์มการโฆษณายังใช้ Redis ในการจัดเก็บข้อมูลเซสชัน ซึ่งเพิ่มประสิทธิภาพการแสดงโฆษณาและปรับแต่งแคมเปญในอนาคตให้เป็นแบบส่วนตัว ในตัวอย่างต่อไปนี้ เราจะเน้นไปที่แอปพลิเคชันอีคอมเมิร์ซโดยเฉพาะ และสำรวจว่า Redis สามารถใช้ในการจัดการตะกร้าสินค้าได้อย่างมีประสิทธิภาพได้อย่างไร

คำอธิบายโครงการ

ในบล็อกโพสต์นี้ เราจะใช้ Clerk, Next.js และ Upstash Redis เพื่อสร้างร้านค้าเซสชันสำหรับแอปพลิเคชันช็อปปิ้ง นี่คือรายการคุณสมบัติที่เราจะใช้ในโครงการนี้:

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

โปรเจ็กต์นี้มีคุณสมบัติอื่นๆ ที่เกี่ยวข้องกับ QStash และ Upstash Ratelimit:

การกระทำบางอย่างภายในแอปพลิเคชันจะเริ่มต้นกิจกรรม ซึ่งนำไปสู่การกำหนดเวลาของอีเมลผ่าน QStash อีเมลเหล่านี้จะถูกส่งไปยัง Resend ในภายหลัง ตัวอย่างเช่น เมื่อชำระเงิน อีเมลยืนยันการจัดส่งจะถูกกำหนดเวลาไว้ 24 ชั่วโมงในภายหลัง ในทำนองเดียวกัน หลังจากซื้อสินค้า ผู้ใช้จะได้รับข้อความแจ้งหลังจากล่าช้าไประยะหนึ่ง เพื่อกระตุ้นให้พวกเขาให้คะแนนการซื้อ
ผู้ใช้ยังมีตัวเลือกในการให้คะแนนรายการต่างๆ ข้อมูลการให้คะแนนทั้งหมดจะถูกจัดเก็บอย่างพิถีพิถันในโครงสร้างข้อมูลที่เหมาะสมบน Upstash Redis เพื่อให้มั่นใจว่าการโต้ตอบของผู้ใช้เป็นไปอย่างสมดุล และป้องกันการใช้งานในทางที่ผิด เหตุการณ์การให้คะแนนจะถูกควบคุมโดยความสามารถในการจำกัดอัตราของ Upstash Ratelimit

สาธิต

คุณสามารถดูการสาธิตการใช้งานของโครงการได้ที่นี่

คุณยังสามารถเข้าถึงพื้นที่เก็บข้อมูล Github ของโปรเจ็กต์นี้ได้ที่นี่

การสร้างแอปพลิเคชัน Next.js

เปิดหน้าต่างเทอร์มินัลใหม่ และสร้างแอปพลิเคชันพร้อมข้อความด้านล่าง:

npx create-next-app@latest

ซึ่งจะถามคุณเกี่ยวกับตัวเลือกโครงการ และคุณจะเตรียมเทมเพลตโครงการ Next.js ของคุณให้พร้อม

npx create-next-app@latest
Need to install the following packages:
 create-next-app@13.4.18
Ok to proceed? (y) y
✔ What is your project named? shopstash
✔ Would you like to use TypeScript? No / -> Yes
✔ Would you like to use ESLint? No / -> Yes
✔ Would you like to use Tailwind CSS? No / -> Yes
✔ Would you like to use `src/` directory? -> No / Yes
✔ Would you like to use App Router? (recommended) No / -> Yes
✔ Would you like to customize the default import alias? -> No / Yes
Creating a new Next.js app in /Users/***/shopstash.

การบูรณาการพนักงาน

การเพิ่มพนักงานในโครงการนั้นค่อนข้างง่าย เราจะใช้ Next.js SDK ของเสมียนสำหรับส่วนประกอบและ hooks ที่สร้างไว้ล่วงหน้า ก่อนอื่น มาติดตั้งกันก่อน:

npm install clerk@nextjs

จากนั้น เราจะสร้างแอปพลิเคชันของเราบนแดชบอร์ดของเสมียน คุณสามารถกำหนดค่าข้อมูลการลงชื่อสมัครที่จำเป็นได้ ขึ้นอยู่กับตัวเลือกของคุณ เมื่อคุณสร้างแอปแล้ว ข้อมูลประจำตัวที่จำเป็นจะได้รับแจ้ง เราจะคัดลอกสิ่งเหล่านี้ไปที่ 04 ไฟล์. นี่คือตัวอย่าง:

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_********
CLERK_SECRET_KEY=sk_test_********

นอกจากนี้เรายังจะกำหนดค่าเส้นทางสำหรับเสมียนในไฟล์ '.env.local'

.env.local

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

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

รูปแบบ.tsx

import { ClerkProvider } from "@clerk/nextjs";
 
import Header from "./components/Header";
 
export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <ClerkProvider>
 <html lang="en">
 <body className="bg-white">
 <Header />
 <main className="container bg-white">
 <div className="flex min-h-screen items-start justify-center ">
 <div className="mt-5">{children}</div>
 </div>
 </main>
 </body>
 </html>
 </ClerkProvider>
 );
}

ตอนนี้ Clerk ได้รับการติดตั้งในโครงการของเราแล้ว ขั้นตอนต่อไปคือการตัดสินใจว่าจะซ่อนหน้าใดไว้หลังการรับรองความถูกต้อง เราจะดำเนินการนี้ใน 37 ไฟล์ที่วางอยู่ในโฟลเดอร์รูท

มิดเดิลแวร์.tsx

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({});
 
export const config = {
 matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

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

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

นี่คือสถานะของส่วนหัวที่ไม่มีผู้ใช้ที่ใช้งานอยู่:

สร้างเซสชันสโตร์ที่ปลอดภัยและปรับขนาดได้ด้วย Clerk &Upstash Redis

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

app/sign-in/[[...sign-up]]/page.tsx

import { SignUp } from "@clerk/nextjs";
 
const SignUpPage = () => {
 return (
 <>
 <SignUp />
 </>
 );
};
export default SignUpPage;

หน้าลงทะเบียนเกือบจะเหมือนกับการลงชื่อเข้าใช้ และเราจะนำไปใช้ในเส้นทางที่คล้ายกัน

app/sign-in/[[...sign-up]]/page.tsx

import { SignIn } from "@clerk/nextjs";
 
const SignInPage = () => {
 return (
 <>
 <SignIn />
 </>
 );
};
export default SignInPage;

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

ก่อนอื่น เราต้องกำหนดแนวคิดว่าอะไรคือรายการสินค้าในรถเข็น สิ่งนี้จะทำหน้าที่เป็นพิมพ์เขียวของเราในขณะที่เราสร้างแอปพลิเคชันที่เหลือ หากคุณต้องการเติมรายการต่างๆ ให้กับแอปพลิเคชันของคุณ เครื่องมืออย่าง ChatGPT อาจเป็นสิ่งล้ำค่าได้ อีกทางหนึ่ง แนวทางที่ตรงกว่านั้นเกี่ยวข้องกับการจัดหาพวกมันจากพื้นที่เก็บข้อมูล GitHub ที่เกี่ยวข้องกับตัวอย่างนี้ และแน่นอนว่าเพื่อทำให้ส่วนหน้าของคุณมีชีวิตชีวาอย่างแท้จริง คุณจะต้องออกแบบหรือจัดหารูปภาพที่เหมาะสมสำหรับแต่ละรายการ

สาธารณะ/items.tsx

export const items = [
 {
 id: 1,
 title: "Elegant Leather Watch",
 image: "/images/1.png",
 description: "A sophisticated leather watch for all occasions.",
 company: "Timepiece Creations",
 price: 99.99,
 },
];

การใช้ตะกร้าสินค้า

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

สร้างเซสชันสโตร์ที่ปลอดภัยและปรับขนาดได้ด้วย Clerk &Upstash Redis

เพื่อให้สิ่งนี้เป็นไปได้ เราจะใช้ React Context API ซึ่งให้การเข้าถึงการดำเนินการรถเข็นที่จำเป็น (เช่น การเพิ่มสินค้า การนำออก หรือการรีเซ็ตรถเข็น) ในระดับกึ่งสากล

หากต้องการตั้งค่าการเชื่อมต่อกับ Upstash Redis เราจะคัดลอก 55 และ 63 ค่าจากคอนโซลและวางลงใน 76 ของคุณ ไฟล์.

 .envUPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
 
 บริบทรถเข็นของเราจะอยู่ใน 86 ไฟล์. เราจะล้อมบริบทนี้รอบแอปพลิเคชันหลัก เพื่อให้เราใช้วิธีการที่มีให้ได้ ต่อไปนี้เป็นสรุปความสามารถโดยย่อ:
  ผู้ใช้สามารถเพิ่มสินค้าลงในรถเข็นและปรับจำนวนได้
 สินค้าสามารถลบออกจากรถเข็นได้
 รถเข็นทั้งหมดสามารถรีเซ็ตได้
 ยังมีคุณลักษณะการชำระเงินอีกด้วย นี่คือมุมมองโดยรวมของ Context API เราจะแจกแจงและปรับใช้แต่ละวิธีทีละขั้นตอน
 
 
 ต่อไปนี้เป็นวิธีการทำงานของอัลกอริทึมในภาพรวมที่สูงขึ้น
  รถเข็นซึ่งถือเป็นร้านค้าเซสชั่นจะถูกเก็บไว้ในแฮชบน Upstash Redis ตัวระบุที่ไม่ซ้ำกันสำหรับแฮชนี้จะขึ้นอยู่กับ ID ของผู้ใช้ ดังนั้นผู้ใช้แต่ละรายจะมีรถเข็นที่มีชื่ออยู่ในรูปแบบ 90 .
 เมื่อบันทึกข้อมูลรถเข็นไปยังแฮช Redis เราจะใช้รหัสรายการเป็นคีย์ และปริมาณของแต่ละรายการเป็นค่า ด้วยคำสั่งในตัวของ Redis การปรับเปลี่ยนรถเข็นจึงกลายเป็นเรื่องง่าย
 ในฝั่งไคลเอ็นต์ รถเข็นจะได้รับการจัดการเป็นสถานะที่ประกอบด้วยอาร์เรย์ของออบเจ็กต์รายการ เมื่อโหลดเพจแล้ว 104 hook ดึงข้อมูลรถเข็นจาก Upstash Redis หากมีการเปลี่ยนแปลงใดๆ ในรถเข็น ส่วนประกอบที่เกี่ยวข้องทั้งหมดจะถูกเรนเดอร์ใหม่
 โครงสร้างข้อมูลที่ตรงไปตรงมาของ Redis ช่วยให้การใช้งาน 119 ง่ายขึ้น และ 120 ฟังก์ชันการทำงาน โดยการปรับใช้ 139 คำสั่ง เราสามารถจัดการงานได้ตั้งแต่การเพิ่มหรือลบสินค้าไปจนถึงการปรับจำนวนสินค้าในตะกร้า ยูทิลิตี้นี้เน้นย้ำถึงความกล้าหาญของ Redis

 สำหรับ 142 ฟังก์ชั่น เราจะลบคีย์แฮชออกจากฐานข้อมูล Upstash โดยใช้ 152 .
 

 
 เมื่อคุณเข้าใจโครงร่างแนวคิดของรถเข็นแล้ว ก็ถึงเวลาพับแขนเสื้อของเราและเข้าสู่วิธีการหลัก
 กำลังเพิ่มสินค้าลงตะกร้า
 
 จากมุมมองของแฮช Redis การเพิ่มรายการหรือการเปลี่ยนแปลงปริมาณต้องใช้คำสั่งเดียวกัน 165 คำสั่งสร้างคีย์และตั้งค่าเป็น 1 หรือเพิ่มค่าที่เกี่ยวข้องตาม 179 พารามิเตอร์ของคำสั่ง
 
 ในฝั่งไคลเอ็นต์ เราจะจำลองการกระทำเหล่านี้โดยการแนะนำสินค้าใหม่หรือปรับแต่งปริมาณในสถานะของรถเข็น
 contexts/CartContext.tsxconst addItem = async (id: number) => {
 const item = items.find((i) => i.id === id);
 if (!item) return;
 
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 let newCart: Item[];
 
 if (!doesItemExist) {
 newCart = [...(cart || []), item];
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 
 //We create an item in the state object with the given id, and set the quantity to 1.
 const newCartItemIDs = { ...cartItems, [id]: 1 };
 
 setCartItemIDs(newCartItemIDs);
 setCart(newCart);
 } else {
 const item = items.find((i) => i.id === id);
 
 //This item currently exists in the state object as key, so we increase the value by 1.
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] + 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 }
};
 การนำรายการออกจากรถเข็น
 
 การลบจะคล้ายกับการดำเนินการเพิ่ม คุณสามารถลดค่าแฮชได้โดยใช้ 180 โดยให้ 191 พารามิเตอร์เป็น 203 .
 contexts/CartContext.tsxconst removeItem = async (id: number, force: boolean = false) => {
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 if (!doesItemExist) return;
 
 if (cartItems[id] === 1 || force) {
 const newCart: Item[] = cart.filter((item: { id: number }) => {
 return item.id !== id;
 });
 
 // Creating the new state object for cart
 const newCartItems = { ...cartItems };
 delete newCartItems[id];
 
 //Removing the item from Upstash Redis hashset.
 redis.hdel(`user:${userId}`, id.toString());
 
 setCart(newCart);
 setCartItems(newCartItems);
 } else if (cartItems[id] > 1) {
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] - 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), -1);
 }
};
 
 ขณะนี้ฟังก์ชันรถเข็นพร้อมใช้งานแล้ว พร้อมด้วยวิธีการที่จำเป็นทั้งหมด มีการบูรณาการอย่างราบรื่นทั่วทั้งโครงการด้วยการเข้าถึงจากทั่วโลก ต่อไปนี้เป็นตัวอย่างกรณีการใช้งานสองกรณีสำหรับคุณลักษณะนี้:
   
 หน้าดัชนี :ที่นี่รายการทั้งหมดจะแสดงขึ้น ปุ่มที่ไม่ซ้ำใครที่มาพร้อมกับสินค้าแต่ละรายการ ช่วยให้คุณสามารถเพิ่มลงในรถเข็นของคุณได้ หากมีสินค้าอยู่ในรถเข็นของคุณแล้ว คุณจะมีตัวเลือกในการลบออก
 
  
 เราจะใช้ 212 โต้ตอบไลบรารี UI และสร้างโมดอล/ชีตที่รวมรายการทั้งหมดในรถเข็นไว้ในหน้าเดียว พื้นที่นี้ไม่ได้มีไว้สำหรับท่องเว็บเท่านั้น คุณสามารถแก้ไขจำนวนรายการได้ตามต้องการ และหากคุณรู้สึกว่าต้องเปลี่ยนแปลง ตัวเลือกในการรีเซ็ตรถเข็นหรือดำเนินการชำระเงินก็อยู่ที่นั่น
 
 
 หน้าดัชนี
 
 ข้อสังเกต:รายการในหน้าดัชนีจะแสดงเฉพาะสำหรับผู้ใช้ที่ลงชื่อเข้าใช้และใช้งานอยู่เท่านั้น ขั้นแรก เราจะดึงข้อมูลผู้ใช้จากเสมียนและแสดงผลส่วนประกอบตามการตอบสนองจากเสมียน
 
 ในองค์ประกอบของการ์ด เราจะดึงฟังก์ชันที่จำเป็นและออบเจ็กต์ CartContext
 ส่วนประกอบ/CardComponent.tsxexport default function CardComponent(props: { item: cardProps }) {
 const { item } = props;
 const { id, title, image, company } = item;
 const { addItem, removeItem, cartItems } = useContext(CartContext);
 
 return (
 <>
 <Card className="transition duration-200 hover:shadow-lg">
 <Link href={`/products/${id}`}>
 <CardHeader>
 <CardTitle>{title}</CardTitle>
 </CardHeader>
 <CardContent>
 <Image src={image} alt={title} width={300} height={300}></Image>
 <CardDescription>{company}</CardDescription>
 </CardContent>
 </Link>
 <CardFooter>
 <div className="grid grid-rows-2">
 <CartButton
 id={id}
 cartItems={cartItems}
 addItem={addItem}
 removeItem={removeItem}
 />
 </div>
 </CardFooter>
 </Card>
 </>
 );
}
 
 องค์ประกอบที่สำคัญที่นี่คือปุ่มตะกร้าสินค้า ซึ่งคุณสามารถเพิ่มหรือลบสินค้าออกจากตะกร้าได้ ปุ่มนี้จะแสดงผลโดยใช้สถานะปัจจุบันของรถเข็น
 ส่วนประกอบ/CartButton.tsxconst CartButton = ({
 id,
 cartItems,
 addItem,
 removeItem,
}: {
 id: number;
 cartItems: cartContent;
 addItem: (id: number) => Promise<void>;
 removeItem: (id: number, force: boolean) => Promise<void>;
}) => {
 const itemExists: boolean = cartItems?.hasOwnProperty(id);
 const { triggerEvent } = useContext(UserStateContext);
 return (
 <button
 className={`${
 itemExists ? "bg-red-400 text-black" : "bg-cyan-500 text-black"
 } flex items-center justify-center gap-3 rounded-full px-4 py-2 transition-all duration-300`}
 onClick={() => {
 if (itemExists) {
 removeItem(id, true);
 } else {
 addItem(id);
 }
 }}
 >
 <p className="text-sm font-bold">
 {itemExists ? "Remove from Cart" : "Add to Cart"}
 </p>
 <FaCartShopping size="25" />
 </button>
 );
};
 
 เมื่อสถานะของรถเข็นของเราเป็นแบบไดนามิกแล้ว ก็สามารถแจ้งการเรนเดอร์ส่วนประกอบเฉพาะตามสถานะปัจจุบันได้ ต่อไป เราจะแนะนำส่วนประกอบรถเข็นโดยเฉพาะ พื้นที่นี้จะทำหน้าที่เป็นศูนย์กลางสำหรับการดูเนื้อหาทั้งหมดในรถเข็น ปรับเปลี่ยนปริมาณ หรือกดปุ่มรีเซ็ต
 
 เรากำลังเปลี่ยนมาใช้ส่วนประกอบแผ่น shadcn/ui เป็นฐานของเรา โดยมีแผนจะปรับแต่งการตกแต่งภายในให้เหมาะกับแต่ละบุคคล
 
 ในสถานการณ์ที่รถเข็นว่าง ส่วนประกอบจะวาดภาพสถานการณ์ที่ชัดเจน:
 
 
 
 อย่างไรก็ตาม เมื่อสินค้าไหลเข้าสู่รถเข็น สินค้าเหล่านั้นจะมองเห็นได้ง่ายในส่วนประกอบนี้ ไม่เพียงแต่คุณสามารถดูสิ่งที่คุณเลือกได้ แต่ยังมีอิสระในการปรับแต่งปริมาณหรือประเมินมูลค่ารวมของรายการของคุณ
 
 
 
 หากต้องการดูคำแนะนำโดยละเอียดเกี่ยวกับการสร้างส่วนประกอบนี้ โปรดดูด้านล่าง หากคุณกำลังมองหาสิ่งเล็กๆ น้อยๆ เช่น การกำหนดค่าปุ่ม ฉันขอแนะนำให้ไปที่พื้นที่เก็บข้อมูล GitHub ของเรา ซึ่งเป็นที่ที่คุณใช้งานโค้ดเบสทั้งหมด
 
 ด้วยโค้ดส่วนสุดท้าย โครงการของเราก็มาถึงบทสรุป เราประสบความสำเร็จในการเดินทางจากแนวคิดไปสู่การนำไปใช้ โดยนำฟีเจอร์รถเข็นของเรามาสู่ชีวิตโดยใช้พลังของ Upstash Redis และความยืดหยุ่นของไลบรารี shadcn/ui
 บทสรุป
 
 การรวมกันของเสมียนสำหรับการจัดการผู้ใช้และ Upstash Redis สำหรับการจัดเก็บข้อมูลที่มีประสิทธิภาพเป็นเครื่องมือในการสร้างระบบรถเข็นแบบไดนามิกของเรา สิ่งเหล่านี้ได้ร่วมกันสร้างแกนหลักของแอปพลิเคชันของเรา ซึ่งรับประกันทั้งความปลอดภัยและประสิทธิภาพ โปรเจ็กต์นี้เป็นตัวอย่างที่ดีว่าเครื่องมืออันทรงพลังเหล่านี้ เช่น Upstash Redis เสมียนใช้ร่วมกันในการแก้ปัญหาที่ซับซ้อนมากได้อย่างราบรื่นได้อย่างไร
 
 ต่อไปนี้เป็นข้อเสนอแนะสำหรับการปรับปรุงเพิ่มเติมในโครงการนี้:
   
 ประสบการณ์ผู้ใช้: แม้ว่าเราจะสร้างรถเข็นที่แข็งแกร่งและใช้งานได้จริง แต่การเจาะลึกลงไปถึงการปรับปรุงอินเทอร์เฟซผู้ใช้ เช่น ภาพเคลื่อนไหว ลูปความคิดเห็น หรือแม้แต่การแสดงตัวอย่างผลิตภัณฑ์โดยละเอียด ก็สามารถให้การเดินทางของผู้ใช้ที่ราบรื่นยิ่งขึ้นได้
 
  
 ประสิทธิภาพ: ด้วยการใช้ Upstash Redis ขั้นพื้นฐาน เราสามารถเจาะลึกเข้าไปในกลยุทธ์การแคชขั้นสูงเพิ่มเติมได้ ซึ่งอาจบูรณาการพนักงานบริการเพื่อปรับปรุงเวลาในการโหลดและประสบการณ์ออฟไลน์ที่สมบูรณ์ยิ่งขึ้น
 
  
 คุณสมบัติ: การขยายขีดความสามารถของรถเข็นด้วยรายการสินค้าที่ต้องการ คำแนะนำผลิตภัณฑ์ที่ปรับแต่งตามปริมาณสินค้าในรถเข็นในปัจจุบัน หรือระบบสำหรับการใช้รหัสส่งเสริมการขายสามารถยกระดับประสบการณ์การช็อปปิ้งได้
 
  
 บูรณาการ: มีศักยภาพที่จะบูรณาการเกตเวย์การชำระเงินเพื่อให้กระบวนการชำระเงินราบรื่น หรือแม้แต่เชื่อมต่อกับสินค้าคงคลังของบุคคลที่สามหรือระบบ CRM สำหรับโซลูชันอีคอมเมิร์ซที่ครอบคลุม
 
 
 
 ขอขอบคุณที่ติดตามการผจญภัยเพื่อการพัฒนานี้ เราอยากฟังความคิดเห็นของคุณและอยากเห็นนวัตกรรมที่คุณอาจนำมาสู่โครงสร้างพื้นฐานนี้! หากคุณมีคำถามหรือปัญหาเกี่ยวกับโครงการนี้ โปรดติดต่อฉันได้ที่ fahreddin@upstash.com
 
 คุณสามารถค้นหาพื้นที่เก็บข้อมูล Github ของโปรเจ็กต์ได้ที่นี่
 
 ส่วนที่เรากำหนดเวลาอีเมลโดยใช้ QStash และ Resend จะกล่าวถึงในโพสต์อื่น ในระหว่างนี้ คุณสามารถตรวจสอบตัวอย่าง repo เพื่อดูการใช้งานได้