Auction Website

จุดประมูล

การประมูลจุดเป็นเว็บไซต์ที่ผู้ใช้สามารถซื้อและขายสินค้าได้ เป้าหมายของฉันกับโครงการสแต็กเต็มรูปแบบนี้คือการออกแบบและพัฒนาแพลตฟอร์มการประมูลออนไลน์คล้ายกับ eBay การใช้งานดังต่อไปนี้สถาปัตยกรรม REST-API และคุณสมบัติที่สำคัญบางอย่างคือ:

• การอนุญาตและการรับรองความถูกต้องอย่างปลอดภัย
• การควบคุมการเข้าถึงตามบทบาท
• ไคลเอนต์เมลภายในแอปพลิเคชัน
• คำแนะนำโดยใช้ matrix factorisation

เทคโนโลยี

สแต็ก JavaScript ถูกใช้เพื่อการปรับใช้ที่ง่ายขึ้นและเร็วขึ้นประกอบด้วย Express และ Node.js สำหรับ back-end, MySQL สำหรับฐานข้อมูลและ ตอบสนอง สำหรับส่วนหน้า ฐานข้อมูลเชิงสัมพันธ์ที่แตกต่างกันสามารถใช้ได้ตั้งแต่การสร้างแบบจำลองข้อมูลการเชื่อมโยงและการสืบค้นจะได้รับการจัดการด้วยการทำแผนที่ความสัมพันธ์เชิงวัตถุโดยใช้ ภาคต่อ

ข้อกำหนดและการตั้งค่า

แบ็คเอนด์

1. สำหรับ mysql back-end หรือฐานข้อมูลเชิงสัมพันธ์ที่คล้ายกันเป็นสิ่งจำเป็นเช่นเดียวกับการติดตั้ง node.js และ npm

2. ในไฟล์ config.json เพิ่มการตั้งค่า MySQL ส่วนตัวของคุณ

3. ในการติดตั้ง Express, CORS และโมดูลที่จำเป็นอื่น ๆ ในโฟลเดอร์ API Run: npm install

4. ในการเชื่อมต่อภาคต่อไปยังฐานข้อมูลให้เรียกใช้คำสั่ง: sequelize init

5. ธุรกรรมถูกเข้ารหัสผ่านโปรโตคอล SSL/TLS ในการสร้างใบรับรองในเครื่องคุณสามารถใช้ mkcert จากนั้นเพิ่มเส้นทางใน:

 const sslServer = https . createServer ( {
    key : fs . readFileSync ( '/yourpath/key.pem' ) ,
    cert : fs . readFileSync ( '/yourpath/cert.pem' )
} , app ) ;

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

ในการเริ่มต้นเซิร์ฟเวอร์เพียงแค่เรียกใช้ในไดเรกทอรี API:

 npm start

ส่วนหน้า

สำหรับส่วนหน้าการพึ่งพาที่จำเป็นทั้งหมดจะถูกกำหนดไว้ในไฟล์ package.json ในการติดตั้งเพียงแค่เรียกใช้ในไดเรกทอรีด้านหน้า: npm install

ในการเริ่มต้นส่วนหน้าในการรันไดเรกทอรีด้านหน้า:

 npm start

ออกแบบ

สำหรับการออกแบบแอปพลิเคชันฉันใช้ CSS บริสุทธิ์และส่วนประกอบ UI ของวัสดุ มีการเพิ่มแอนิเมชั่นบางส่วนสำหรับการเปลี่ยนหน้าเช่นเดียวกับหน้าแก้ไข สำหรับชื่อเรื่องและองค์ประกอบหลักฉันใช้ Futura ซึ่งเป็นแบบอักษรที่เรียบง่ายและไร้กาลเวลาในขณะที่สำหรับร่างกายและรายละเอียดที่ฉันใช้ Roboto และแบบอักษร Sans-Serif อื่น ๆ ที่คล้ายกัน

หน้าต้อนรับ

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

การประมูล

จากหน้าการประมูลผู้ใช้สามารถเรียกดูรายชื่อตามหมวดหมู่การค้นหาหรือตัวกรอง หมวดหมู่มีโครงสร้างแบบลำดับชั้นซึ่งประสบความสำเร็จใน MySQL โดยใช้การอ้างอิงตนเองในต่างประเทศและโดยการสร้างต้นไม้ทั้งด้านหน้าและส่วนหลังซ้ำเมื่อจำเป็น

หน้าประมูล

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

เข้าสู่ระบบและลงทะเบียน

สำหรับเขตข้อมูลการลงทะเบียนเช่นเดียวกับรูปแบบอื่น ๆ ของเว็บไซต์ฉันใช้ Yup เพื่อทำการตรวจสอบสคีมาร่วมกับห้องสมุด Formik รหัสผ่านของผู้ใช้จะถูกเก็บไว้ในฐานข้อมูลแฮชโดยใช้ฟังก์ชัน bcrypt ซึ่งขึ้นอยู่กับ blowfish cipher

ประวัติโดยย่อ

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

ส่งจดหมาย

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

ผู้ดูแลระบบ

เมื่อเข้าสู่ระบบในผู้ดูแลระบบสามารถอนุมัติแอปพลิเคชันผู้ใช้รวมถึงส่งออกรายละเอียดการประมูลในรูปแบบ XML, JSON หรือ CSV ตามเทมเพลต eBay DTD นอกจากนี้ในการเติมฐานข้อมูลและฝึกอบรมอัลกอริทึมผู้แนะนำฉันใช้ข้อมูลจริงจากเว็บไซต์ eBay ในรูปแบบ XML ที่จัดทำโดย UCLA

เครื่องมือ

เว็บไซต์ถูกสร้างขึ้นโดยใช้ Express, Node.js, MySQL, Sequelize และ React