ระบบ E-commerce แบบกำหนดเองบน Firebase
ผมสร้างเว็บไซต์ E-commerce แบบกำหนดเองขึ้นมาตั้งแต่เริ่มต้น โดยไม่ได้ใช้แพลตฟอร์มสำเร็จรูป แต่เลือกใช้ Firebase Realtime Database และ Netlify แทน
เป้าหมายคือเพื่อให้บริการแก่ตัวแทนจำหน่ายเครื่อง POS พวกเขาต้องการแคตตาล็อก, รูปแบบราคาที่หลากหลาย และแผงควบคุมสำหรับผู้ดูแลระบบ นอกจากนี้ ทีมขายยังจำเป็นต้องสามารถสั่งซื้อสินค้าผ่านเว็บไซต์ได้โดยตรง
นี่คือวิธีการที่ผมสร้างมันขึ้นมาและบทเรียนที่ผมได้รับ
The Stack • Vanilla HTML, CSS, และ JS • Firebase Realtime Database สำหรับข้อมูล • Firebase Storage สำหรับไฟล์ • Netlify สำหรับการโฮสต์และฟังก์ชันต่างๆ
Key Decisions
การแยกฐานข้อมูล ผมแยกฐานข้อมูล E-commerce ออกจากฐานข้อมูลการจัดการภายใน เพื่อป้องกันไม่ให้ข้อมูลทางการค้าไปปะปนกับข้อมูลผู้ดูแลระบบที่สำคัญ เช่น เงินเดือนหรือแผนงบประมาณ
คลังราคาแบบรวมศูนย์ (Global Pricing Archive) แทนที่จะใส่แผนราคาไว้ในสินค้าทุกชิ้น ผมสร้างโฟลเดอร์ tariffs แบบรวมศูนย์ขึ้นมา โดยสินค้าจะเก็บเพียงแค่อาร์เรย์ของ ID เท่านั้น วิธีนี้ช่วยหลีกเลี่ยงการเก็บข้อมูลซ้ำซ้อน หากมีการเปลี่ยนแผนราคา ผมก็แค่แก้ไขเพียงที่เดียว
การสั่งซื้อแบบ Atomic เมื่อมีคนสั่งซื้อพร้อมกันหลายคน คุณอาจเจอปัญหา race conditions หากมีสองคนอ่านเลขที่คำสั่งซื้อเดียวกัน คำสั่งซื้อหนึ่งอาจหายไปได้ ผมใช้ Firebase runTransaction() เพื่อให้แน่ใจว่าทุกคำสั่งซื้อจะได้รับหมายเลขที่เรียงลำดับและไม่ซ้ำกัน
การเข้าถึงแผงควบคุมที่ปลอดภัย ผมไม่ได้เก็บรหัสผ่านไว้ในซอร์สโค้ด แต่ใช้ PBKDF2 ผ่าน Web Crypto API ซึ่งทำให้การโจมตีแบบ brute-force ทำได้ยากมาก โดยในโค้ดจะมีเพียง salt และ hash เท่านั้น
Lessons Learned
• ระวังเรื่องค่า falsy: ใน JavaScript ค่า 0 คือค่า falsy หากราคาสินค้าเป็น 0 การตรวจสอบแบบง่ายๆ อย่าง "price || null" จะทำให้ราคานั้นหายไป ควรใช้ "price != null" เสมอเพื่อให้ครอบคลุมกรณีที่เป็นศูนย์ด้วย
• กำหนดค่า CSP ใน HTTP headers: Meta tags สำหรับ Content Security Policy ไม่รองรับ wildcard สำหรับ subdomain เนื่องจาก Firebase ใช้ dynamic subdomains ผมจึงย้ายการตั้งค่า CSP ไปไว้ใน netlify.toml เพื่อให้ใช้งานได้
• ใช้ Security Rules เพื่อการป้องกันที่แท้จริง: อย่าฝากความหวังไว้เพียงแค่การซ่อนปุ่มใน UI แต่ควรใช้ Firebase rules เพื่อจำกัดสิทธิ์ว่าใครสามารถอ่านหรือเขียนข้อมูลได้บ้าง
การสร้างโซลูชันแบบกำหนดเองจำเป็นต้องมีการเลือกสถาปัตยกรรมอย่างรอบคอบ รายละเอียดเล็กๆ น้อยๆ อย่างการจัดการ transaction และการตั้งค่า header สามารถช่วยป้องกันความล้มเหลวครั้งใหญ่ในระบบ production ได้
Source: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec