Nike Store

ตารางเนื้อหา

1. รายละเอียดโปรเจค
2. Tech Stack
3. ฟีเจอร์หลัก
4. ขั้นตอนการติดตั้งโปรเจค
5. ภาพตัวอย่าง
6. สมาชิกในกลุ่ม

รายละเอียดโปรเจค

โปรเจคนี้เป็นส่วนหนึ่งของวิชา Web Technology and Web Services รหัสวิชา 01418441 กลุ่มของพวกเราได้ทำการพัฒนาเว็บไซต์ E-commerce ขายของออนไลน์ ในรูปแบบธีมเว็บไซต์ nike.com เพื่อขายของอย่างรองเท้า nike ที่แสดงสินค้าอยู่ในตัวเว็บไซต์ของพวกเรา ตัวโปรเจคนี้เป็น Full Stack Application มีทั้งในส่วน Frontend และ Backend ทำงานร่วมกันในระบบ แล้ว มีการใช้งานฐานข้อมูลเชิงสัมพันธ์ (RDBMS) และ services ต่างๆเข้าด้วยกันอีกมากมายนี้เป็นรายละเอียดสังเขปแบบคร่าวๆของโปรเจคนี้

Tech Stack

Libraries, Frameworks และ Servies ทั้งหมดที่ใช้ในการพัฒนาตัวโปรเจค

Frontend

         

---

Backend

             

---

Cloud

     

---

ฟีเจอร์หลักของระบบ

• ดูสินค้าทั้งหมด แสดงรายละเอียดสินค้า
• ระบบสมัครสมาชิก, ระบบลงทะเบียน ด้วย Email, Google, Facebook, Microsoft และ Github
• ระบบส่งการแจ้งเตือนอีเมล เช่น การส่ง OTP
• ระบบค้นหาสินค้า การขัดกรองสินค้า
• ระบบกดไลค์สินค้า
• ระบบตะกร้าสินค้า
• ระบบสั่งซื้อสินค้า
• ดูประวัติการสั่งซื้อสินค้าในส่วนของเราและผู้อื่น
• ระบบเพิ่มที่อยู่จัดส่งสินค้า
• ระบบการตั้งค่าผู้ใช้งาน เช่น การเปลี่ยนชื่อ, เปลี่ยนรหัสผ่าน, การแก้ไขรูปโปรไฟล์, และ การลบบัญชี
• ระบบตรวจสอบสิทธิ์
• ระบบการจัดการ admin เช่น การเพิ่ม, ลบ, แก้ไข ข้อมูลสินค้า, การดูข้อมูลกราฟ และ การแก้ไขสิทธิ์ผู้ใช้งาน และ ลบบัญชีผู้ใช้งานคนอื่น

ขั้นตอนการติดตั้งโปรเจค

1. clone โปรเจค

git clone https://github.com/WarinCode/nike-store.git

2. เปิด Terminals ทั้ง 2 ตัวแล้วเข้าไปยัง directory ของ frontend และ backend

# terminal อันที่ 1
cd ./nike-store/frontend
# terminal อันที่ 2
cd ./nike-store/backend

3. ติดตั้ง dependencies ที่จำเป็นสำหรับโปรเจค

# terminal อันที่ 1
npm install
# terminal อันที่ 2
npm install

5. ระหว่างช่วงติดตั้ง dependencies อยู่ให้เปิด terminal ใหม่ขึ้นมาเพื่อติดตั้ง Scoop โดยใช้คำสั่งนี้

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

6. เมื่อติดตั้ง Scoop เสร็จให้ใช้คำสั่งนี้ติดตั้ง Stripe CLI

scoop bucket add stripe https://github.com/stripe/scoop-stripe-cli.git
scoop install stripe

7. เมื่อติดตั้ง Stripe CLI เสร็จให้ทำการ login

stripe login

8. ที่ Terminal จะแสดงลิ้งค์ที่ไปยังหน้า login ให้คลิกไปที่ลิ้งค์เพื่อ login

Your pairing code is: enjoy-enough-outwit-win
This pairing code verifies your authentication with Stripe.
Press Enter to open the browser or visit https://dashboard.stripe.com/stripecli/confirm_auth?t=THQdJfL3x12udFkNorJL8OF1iFlN8Az1 (^C to quit)

9. หลังติดตั้ง dependencies เสร็จให้สร้างไฟล์ .env.local ในฝั่ง frontend ไฟล์จะอยู่ใน path /frontend แล้วกำหนดตัวแปรสภาพแวดล้อมดังนี้

# url ของฝั่งหลังบ้าน
BETTER_AUTH_URL=
# url ของฝั่งหลังบ้าน
NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_BASE_URL=

10. มาที่ฝั่ง backend ให้สร้างไฟล์ .env.dev ไฟล์จะอยู่ใน path /backend แล้ว กำหนดตัวแปรสภาพแวดล้อมดังนี้

# url หน้าบ้านในโปรเจคจะใช้หมายเลข port 5000
FRONTEND_URL=
# parameters สำหรับเชื่อมต่อฐานข้อมูล PostgreSQL
PG_HOST=
PG_DATABASE=
PG_SERVER=
PG_USER=
PG_PASSWORD=
PG_PORT=
CONNECTION_STRING=
# หมายเลข port ฝั่ง backend
PORT=
# ตัวแปรสำหรับ Nodemailer
NODEMAILER_HOST=
NODEMAILER_PORT=
NODEMAILER_USER=
NODEMAILER_PASSWORD=
# ของ Better Auth
BETTER_AUTH_SECRET=
# url ของฝั่งหน้าบ้าน
BETTER_AUTH_URL=
# ทำการสร้างโปรเจคใน Google, Facebook, Microsoft และ Github ตามลิ้งค์ที่ระบุแล้วนำ Client ID และ Client Secret มาใส่ในตัวแปร
# https://github.com/settings/developers
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
# https://console.cloud.google.com/apis/dashboard
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# https://developers.facebook.com
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
# https://entra.microsoft.com
MICROSOFT_CLIENT_ID=
MICROSOFT_CLIENT_SECRET=
# https://dashboard.stripe.com
STRIPE_SECRET_KEY=
STRIPE_PUBLISHABLE_KEY=
# ได้มาจากการรันคำสั่ง npm run webhook จะมี token ขึ้นมาใน terminal ทำการคัดลอกแล้วมาใส่ในตัวแปร
STRIPE_WEBHOOK_SECRET=
# https://cloudinary.com
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

11. เมื่อกำหนดตัวแปรเสร็จหมดแล้วให้เปิด Terminal ใหม่แล้วเข้าไปยัง directory /backend ทำการรันตัวโปรเจคทั้ง frontend และ backend ขึ้นมา

# terminal อันที่ 1 ของ frontend
npm run dev
# terminal อันที่ 2 ของ backend
npm run dev
# terminal อันที่ 3 ของ backend
npm run webhook

12. หลังรันเสร็จให้เปิดลิ้งค์ localhost:5000 บน Browser จะแสดงผลหน้าเว็บตามดัง ภาพตัวอย่าง

ภาพตัวอย่าง

สมาชิกในกลุ่ม

ชื่อ - นามสกุล	รหัสนิสิต	หมู่เรียน
นาย วรินทร์ สายปัญญา	6630250435	870, 880
นางสาว อัมพุชินี บุญรักษ์	6630250532	870, 880
นางสาว อุปริมา อิทธิอนันตเกษม	6630250541	870, 880
นาย ปุณณภพ มีฤทธิ์	6630250591	870, 880