cosmetics check single page app

ส่วนผสมบำรุงผิวค้นหาเว็บไซต์

โครงการนี้จัดทำขึ้นเพื่อสร้างเว็บไซต์สำหรับค้นหาส่วนผสมของผลิตภัณฑ์เครื่องสำอางว่ามีส่วนผสมที่เป็นอันตรายสำหรับหญิงตั้งครรภ์หรือไม่ ข้อมูลผลิตภัณฑ์ทั้งหมดรวบรวมโดยโครงการ sephoraCrawler ซึ่งเป็นเว็บสไปเดอร์ที่เขียนด้วย Python ฐานข้อมูลประกอบด้วยข้อมูลผลิตภัณฑ์สำหรับผู้หญิงทั้งหมด (7000+) บน www.sephora.com

เริ่มต้นใช้งาน

ในการรันไคลเอนต์

• ขั้นแรกให้ติดตั้งแพ็คเกจ ป้อน npm install
• รันไคลเอ็นต์บน localhost npm start และเปิด http://localhost:3000/

โครงร่างโครงการ

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

การออกแบบส่วนหน้า

Front-End ได้รับการออกแบบให้เป็น SPA (แอปพลิเคชันหน้าเดียว) ที่จัดการเส้นทางและการไหลของข้อมูลทั้งหมดบนฝั่งไคลเอ็นต์ ในโปรเจ็กต์นี้ React ซึ่งเป็น ไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ รวมกับ React-Router และ Redux ซึ่งเป็น คอนเทนเนอร์สถานะที่คาดเดาได้สำหรับแอป JavaScript จะถูกนำมาใช้เพื่อใช้งานแอป

แอพส่วนใหญ่ประกอบด้วย 2 ฟังก์ชั่น หนึ่งคือการค้นหาผลิตภัณฑ์และอีกหนึ่งคือการตรวจสอบส่วนผสม

กำลังค้นหา

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

หลังจากพิมพ์แบรนด์หรือชื่อผลิตภัณฑ์ (เช่น คลีนิกข์) แล้วกด Enter ผู้ใช้จะถูกนำทางไปยังหน้าแสดงผล สินค้าจัดเรียงเป็น 4 รายการในแต่ละแถว และ 60 รายการในแต่ละหน้า และที่ด้านบนสุดด้านล่างแถบค้นหา เราจะเห็นจำนวนผลการค้นหาทั้งหมด ด้านล่างขวามีลูกศรสีชมพูใช้เลื่อนขึ้นด้านบนเพื่อความสะดวก และมีป้ายลอยอยู่ด้านซ้าย ระบุว่า อวตารสีเขียว หมายถึง พบส่วนผสมที่ไม่รู้จัก และ อวตารสีแดง หมายถึง พบส่วนผสมที่เป็นอันตราย หากไม่มีรูปประจำตัวปรากฏบนการ์ดผลิตภัณฑ์ แสดงว่าปลอดภัยสำหรับหญิงตั้งครรภ์

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

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

ตรวจสอบส่วนผสม

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

หากไม่พบส่วนผสมที่เป็นอันตราย การแจ้งเตือนสีน้ำเงินจะปรากฏขึ้น หากพบส่วนผสมที่เป็นอันตราย การแจ้งเตือนสีแดงจะปรากฏขึ้นพร้อมกับคำเฉพาะที่เน้นด้วยสีเหลือง