อีคอมเมิร์ซผู้ดูแลระบบ-nextjs
เว็บไซต์สาธิตใช้งานไม่ได้อีกต่อไปเนื่องจาก PlanetScale เลิกใช้แผนบริการฟรี
วันที่เริ่มต้น: 26 กรกฎาคม 2023
คำอธิบาย
แดชบอร์ดผู้ดูแลระบบอีคอมเมิร์ซพร้อม Stripe Integration เป็นเว็บแอปพลิเคชันที่มีประสิทธิภาพซึ่งออกแบบมาเพื่อปรับปรุงและปรับปรุงการจัดการเว็บไซต์อีคอมเมิร์ซ ได้รับการพัฒนาโดยใช้เทคโนโลยีล้ำสมัย เช่น Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, zustand, auth auth, Cloudinary และ Stripe แดชบอร์ดที่ครอบคลุมนี้มอบชุดเครื่องมืออันทรงพลังแก่ผู้ดูแลระบบเพื่อดูแลและเพิ่มประสิทธิภาพด้านต่างๆ ของ ร้านค้าออนไลน์
คุณสมบัติที่สำคัญ
- แดชบอร์ดผู้ดูแลระบบช่วยให้ผู้ดูแลระบบของเว็บไซต์สามารถสร้าง อัปเดต และลบข้อมูลร้านค้าได้
- ผู้ดูแลระบบสามารถจัดการป้ายโฆษณาหรือแบนเนอร์ที่ปรากฏบนหน้าแรกของเว็บไซต์ได้อย่างมีประสิทธิภาพ พวกเขาสามารถอัปโหลด อัปเดต และลบแบนเนอร์ส่งเสริมการขายเพื่อดึงดูดลูกค้าและเน้นข้อเสนอหรือการขายที่กำลังดำเนินอยู่
- ด้วยแดชบอร์ดผู้ดูแลระบบ การจัดการหมวดหมู่ผลิตภัณฑ์ ขนาด และสีกลายเป็นเรื่องง่าย ผู้ดูแลระบบสามารถเพิ่ม แก้ไข หรือลบหมวดหมู่ ขนาด และสี ทำให้เว็บไซต์สามารถจัดระเบียบและแสดงผลิตภัณฑ์ได้อย่างมีประสิทธิภาพ
- เพื่อให้การสื่อสารราบรื่นระหว่างเว็บแอปพลิเคชันส่วนหน้าและส่วนหลัง แดชบอร์ดจึงรวมเส้นทาง API สิ่งนี้ทำให้มั่นใจได้ว่าข้อมูลผลิตภัณฑ์จะถูกดึงและแสดงบนเว็บไซต์ที่ติดต่อกับลูกค้าได้อย่างราบรื่น
- แดชบอร์ดผู้ดูแลระบบใช้การรับรองความถูกต้องของเสมียนเพื่อการรับรองความถูกต้องที่ปลอดภัย ทำให้มั่นใจได้ว่าเฉพาะบุคลากรที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงและจัดการข้อมูลที่ละเอียดอ่อนได้
- ด้วยการผสานรวม Planet Scale และ Prisma แอปพลิเคชันจะได้รับประโยชน์จากฐานข้อมูลที่แข็งแกร่งและปรับขนาดได้ สามารถจัดการสินค้าคงคลังของผลิตภัณฑ์ที่เพิ่มขึ้นและเพิ่มปริมาณการเข้าชมเว็บไซต์
- หัวใจของเว็บไซต์อีคอมเมิร์ซอยู่ที่ความสามารถในการจัดการผลิตภัณฑ์ แดชบอร์ดของผู้ดูแลระบบช่วยให้ผู้ดูแลระบบสามารถเพิ่มผลิตภัณฑ์ใหม่ อัปเดตผลิตภัณฑ์ที่มีอยู่ เก็บถาวรผลิตภัณฑ์ที่หมดสต็อก ทำเครื่องหมายผลิตภัณฑ์เป็นผลิตภัณฑ์แนะนำ และลบผลิตภัณฑ์ที่ไม่มีวางจำหน่ายอีกต่อไป พวกเขาสามารถกำหนดรายละเอียดสินค้า เช่น ชื่อ หมวดหมู่ ราคา รูปภาพ และคุณลักษณะเฉพาะอื่นๆ ของผลิตภัณฑ์ได้
- การจัดการคำสั่งซื้อที่มีประสิทธิภาพถือเป็นสิ่งสำคัญสำหรับเว็บไซต์อีคอมเมิร์ซ แดชบอร์ดมีเครื่องมือที่ครอบคลุมเพื่อดู ประมวลผล และจัดการคำสั่งซื้อที่เข้ามา
- ผสานรวม Stripe เป็นเกตเวย์การชำระเงินได้อย่างราบรื่น ช่วยให้ลูกค้าชำระเงินออนไลน์ได้อย่างปลอดภัยและสะดวกสบาย ผู้ดูแลระบบสามารถดูประวัติการทำธุรกรรมและรับประกันประสบการณ์การชำระเงินที่ราบรื่นสำหรับผู้ซื้อ
การทดสอบโครงการ
หากต้องการทดสอบโปรเจ็กต์ ให้ดาวน์โหลดไฟล์ zip และเปิดในโปรแกรมแก้ไขที่คุณเลือก จากนั้นรัน npm install ในเทอร์มินัลเพื่อติดตั้งการขึ้นต่อกัน
หลังจากติดตั้งการขึ้นต่อกันที่จำเป็นแล้ว คุณจะต้องสร้างไฟล์ .env ที่รากของโฟลเดอร์โปรเจ็กต์ของคุณ ตัวแปรสภาพแวดล้อมที่ต้องการมีดังนี้
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
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=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
ทำตามขั้นตอนจากเอกสารอย่างเป็นทางการสำหรับ Clerk, Planet Scale, Cloudinary และ Stripe เพื่อรับค่าสำหรับตัวแปรสภาพแวดล้อม หลังจากทำตามขั้นตอนข้างต้นเสร็จแล้ว ให้รัน npm run dev เพื่อทดสอบโปรเจ็กต์
หากคุณไม่ต้องการประสบปัญหาทั้งหมด คุณสามารถทดสอบเว็บไซต์สาธิตสำหรับโปรเจ็กต์นี้ได้เสมอ
