c shopping
Minimum MVP Publishing
สวัสดีทุกคน! ยินดีต้อนรับสู่ C-Shopping การเดินทางสู่โลกของอีคอมเมิร์ซเปิดเผยสิ่งมหัศจรรย์ทางเทคโนโลยี ฉันคือ "Ji Xiaopeng" ผู้เขียนโอเพนซอร์สของ C-Shopping และวันนี้ฉันจะแนะนำคุณให้รู้จักกับแพลตฟอร์มอีคอมเมิร์ซโอเพนซอร์ซตามเทคโนโลยีล่าสุด มาสำรวจกันเถอะ!
ลิงก์การสาธิต Live Project:
Project Gateway: https://github.com/huanghanzhilian/c-hopping
ตอบสนองแอปพลิเคชันแอพมือถือดั้งเดิม:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn
หากคุณพบว่าสิ่งนี้มีประโยชน์โปรดให้ดาราฉัน มันจะเป็นกำลังใจที่ดี
ความเป็นมา:
เจตนา:
แก้ไขปัญหาที่กล่าวถึงในพื้นหลัง
วัตถุประสงค์:
สร้างระบบนิเวศที่สมบูรณ์และออกแบบมาอย่างดีเหมาะสำหรับเว็บ
ประการแรกเรามาเจาะลึกเทคโนโลยีที่อยู่เบื้องหลัง C-Shopping ฉันได้นำเทคโนโลยีที่ทันสมัยมาใช้รวมถึง Next.js, Tailwind CSS, UI แบบไม่มีหัว, Query Redux-Toolkit-Rtk, JWT และ Docker และอื่น ๆ สิ่งนี้ทำให้มั่นใจได้ว่าโครงการนี้ไม่เพียง แต่มีประสิทธิภาพ แต่ยังปรับขนาดได้สูง เรามุ่งมั่นที่จะจัดการกับจุดปวดบางอย่างของแพลตฟอร์มอีคอมเมิร์ซแบบดั้งเดิม: การขาดความสวยงามการปรับตัวไม่เพียงพอกับอุปกรณ์ต่าง ๆ และอินเทอร์เฟซที่น่าเบื่อหน่าย ด้วยการใช้เทคโนโลยีล่าสุดและหลักการออกแบบ C-Shopping สร้างประสบการณ์การพัฒนาด้านเทคนิคที่ตอบสนองได้อย่างเต็มที่สำหรับผู้ใช้
C-Shopping จัดลำดับความสำคัญประสบการณ์ของผู้ใช้ อินเทอร์เฟซของเราไม่เพียง แต่สวยงาม แต่ยังตอบสนองได้ช่วยให้ผู้ใช้เพลิดเพลินไปกับการช็อปปิ้งบนอุปกรณ์ใดก็ได้ ฟังก์ชั่นศูนย์ส่วนบุคคลและการจัดการการสั่งซื้อยังทำให้ประสบการณ์การช็อปปิ้งของคุณเป็นส่วนตัวและสะดวกยิ่งขึ้น
หนึ่งในไฮไลท์ของ C-Shopping คือการนำเทคโนโลยีขั้นสูงมาใช้รวมถึง Next.js, Tailwind CSS, UI แบบไม่มีหัว, Query Redux-Toolkit-RTK ฯลฯ ให้ผู้ใช้มีประสิทธิภาพและประสบการณ์สูงสุด เราไม่เพียง แต่มุ่งเน้นไปที่สุนทรียศาสตร์ แต่ยังมุ่งมั่นสู่ความเป็นเลิศด้านเทคโนโลยี
next.js เป็นประสบการณ์ที่รวดเร็วของสายฟ้าฟาด
C-Shopping ใช้ next.js ซึ่งหมายความว่าไม่เพียง แต่ความเร็วในการโหลดหน้าเว็บเร็วอย่างไม่น่าเชื่อ แต่ยังรองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ซึ่งให้ความราบรื่นอย่างไม่เคยปรากฏมาก่อน
- Tailwind CSS การออกแบบที่มีสไตล์
ด้วยการใช้ Tailwind CSS ทำให้ C-Shopping ฉีดความรู้สึกของสไตล์ แต่ละอินเตอร์เฟสนั้นยอดเยี่ยมทำให้การช็อปปิ้งเป็นงานฉลองภาพ
- อิสระ UI อิสระและความยืดหยุ่น
C-Shopping Opts สำหรับสไตล์ UI ที่ไม่มีหัวทำให้ผู้ใช้มีอิสระมากขึ้นในระหว่างกระบวนการช้อปปิ้ง ไม่ได้ จำกัด อยู่กับเฟรมเวิร์ก UI แบบดั้งเดิมอีกต่อไปมันเปิดประตูเพิ่มเติมสำหรับการปรับแต่ง
- ความปลอดภัยของ JWT โดยไม่ต้องกังวล
ความปลอดภัยเป็นสิ่งสำคัญยิ่ง! JWT ใช้สำหรับการรับรองความถูกต้องของผู้ใช้ให้การรับประกันที่แข็งแกร่งที่สุดสำหรับพฤติกรรมการช็อปปิ้งของคุณทำให้คุณสามารถซื้อสินค้าได้อย่างมั่นใจ
- Docker Perfect การปรับใช้
C-Shopping รวบรวมนักเทียบท่าทำให้การปรับใช้โครงการง่ายอย่างไม่น่าเชื่อ การจัดคอนเทนเนอร์ช่วยให้โครงการทั้งหมดทำงานได้อย่างราบรื่นในสภาพแวดล้อมที่แตกต่างกัน
Redux Toolkit และ RTK Query State Management Art
C-Shopping ใช้ Redux Toolkit และ Query RTK ทำให้การจัดการสถานะผ่อนคลายและสนุกสนานยิ่งขึ้น คุณสามารถติดตามการไหลของข้อมูลได้ดีขึ้นในแอปพลิเคชันเพื่อให้มั่นใจถึงความมั่นคงของประสบการณ์การช็อปปิ้ง
ทีนี้มาดูคุณสมบัติพื้นฐานบางอย่างของ C-Shopping ตั้งแต่การนำทางที่ชัดเจนและการแสดงผลิตภัณฑ์ไปจนถึงคุณสมบัติการค้นหาและตะกร้าสินค้าที่สะดวกทุกรายละเอียดได้รับการออกแบบอย่างระมัดระวังเพื่อให้ผู้ใช้ได้รับประสบการณ์การช็อปปิ้งที่น่าพอใจ
ผู้ใช้
| โมดูล | อุปกรณ์เดสก์ท็อป | อุปกรณ์พกพา |
|---|---|---|
| บ้าน | ||
| หมวดหมู่รอง | ||
| หมวดหมู่ระดับที่สาม | ||
| รายละเอียดผลิตภัณฑ์ | ||
| เข้าสู่ระบบ | ||
| ลงทะเบียน | ||
| ค้นหา | ||
| ตะกร้าสินค้า | ||
| การชำระเงิน | ||
| โปรไฟล์ผู้ใช้ | ||
| คำสั่งซื้อของฉัน | ||
| บทวิจารณ์ของฉัน | ||
| การจัดการที่อยู่ | ||
| การเยี่ยมชมล่าสุด |
ฝ่ายดูแล
| โมดูล | อุปกรณ์เดสก์ท็อป | อุปกรณ์พกพา |
|---|---|---|
| เข้าสู่ระบบ | ||
| ศูนย์ผู้ดูแลระบบ | ||
| การจัดการผู้ใช้ | ||
| การจัดการหมวดหมู่ | ||
| แผนผังหมวดหมู่ | ||
| การจัดการข้อกำหนด | ||
| การจัดการผลิตภัณฑ์ | ||
| การจัดการสั่งซื้อ | ||
| ตรวจสอบการจัดการ | ||
| การจัดการแถบเลื่อน | ||
| การจัดการแบนเนอร์ |
โครงสร้างโครงการ C-Shopping:
โครงสร้างสำคัญคำอธิบาย:
- แอพ : รหัสหลักของแอปพลิเคชัน
- ส่วนประกอบ : ส่วนประกอบปฏิกิริยาที่ใช้ซ้ำได้
- ผู้ช่วย : ฟังก์ชั่นและเครื่องมือของผู้ช่วย
- Hooks : hooks ปฏิกิริยาแบบกำหนดเอง
- โมเดล : คำจำกัดความโมเดลข้อมูล
- สาธารณะ : ทรัพยากรคงที่เช่นรูปภาพแบบอักษร ฯลฯ
- ร้านค้า : การกำหนดค่าที่เกี่ยวข้องกับการจัดการสถานะ Redux
- สไตล์ : ไฟล์สไตล์
- Utils : ยูทิลิตี้ทั่วไป
-
โครงสร้างนี้ออกแบบมาเพื่อให้โครงการจัดระเบียบง่ายต่อการบำรุงรักษาและปรับขนาดได้ แต่ละส่วนแบ่งตาม
ฟังก์ชั่นและความรับผิดชอบทำให้สมาชิกในทีมเข้าใจและทำงานร่วมกันได้ง่ายขึ้น
สภาพแวดล้อมการพัฒนา
โคลนหรือดาวน์โหลดที่เก็บโดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:
git clone https://github.com/huanghanzhilian/c-shopping.git
ติดตั้งการพึ่งพาโครงการโดยใช้ NPM หรือเส้นด้าย:
npm install
หรือ
yarn
โปรดสร้างไฟล์ .env ใหม่จากไฟล์ .env.example ในไดเรกทอรีรูทของโครงการเพื่อกำหนดตัวแปรสภาพแวดล้อมที่ต้องการ ขั้นตอนนี้มีความสำคัญ (สำหรับการอัปโหลดรูปภาพไปยัง OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
ติดตั้ง MongoDB บนเครื่องในพื้นที่ของคุณ
เรียกใช้โครงการ:
npm run dev
ลงทะเบียนบัญชี:
http://localhost:3000/register
หลังจากสร้างบัญชีให้ค้นหาบัญชีของคุณในฐานข้อมูลและแก้ไขฟิลด์ root ให้เป็นจริงและฟิลด์ role ไปยังผู้ดูแลระบบ สิ่งนี้ให้คุณสามารถเข้าถึงคุณสมบัติแผงควบคุมผู้ดูแลระบบทั้งหมด:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
ผู้ดูแลระบบทางเข้า: http: // localhost: 3000/admin
ใน MongoDB สร้างหมวดหมู่รูท:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
การปรับใช้ Docker
ไดเรกทอรีรูทของโครงการได้รับการกำหนดค่าด้วย Docker Compose แล้ว หลังจากติดตั้ง Docker เพียงเรียกใช้การปรับใช้:
docker compose up -d --build
ฉันเป็นนักสำรวจเทคโนโลยีผู้เรียนที่กระตือรือร้นและเป็นนักแก้ปัญหา
我是一个技术的探索者， 一个渴望学习的人， 一个解决问题的人。
ทำตามบัญชีอย่างเป็นทางการของ WeChat สำหรับข้อมูลเพิ่มเติม อย่าลังเลที่จะให้ข้อเสนอแนะหรือข้อเสนอแนะใด ๆ โดยการเปิดปัญหาหรือฝากข้อความไว้ในบัญชีอย่างเป็นทางการ นอกจากนี้คุณยังยินดีที่จะเพิ่มฉันใน WeChat เพื่อการสื่อสารเพิ่มเติม
| บัญชีอย่างเป็นทางการของฉัน WeChat | WeChat ของฉัน |
|---|---|
มิกซ์
ลิขสิทธิ์ (c) 2024 Jipeng Huang
C-Shopping เป็นโครงการโอเพ่นซอร์สและเรายินดีต้อนรับนักพัฒนาที่เข้าร่วมชุมชนของเรามากขึ้น คุณสามารถค้นหาซอร์สโค้ดโครงการในที่เก็บ GitHub ของเราแนะนำการปรับปรุงหรือมีส่วนร่วมในการพัฒนา
หากคุณสนใจในโครงการอย่าลังเลที่จะเข้าร่วมชุมชนของเราและมีส่วนร่วมในการเติบโตของโครงการ
