การออกแบบและพัฒนาระบบเว็บไซต์สำหรับการจัดการข้อมูลผลิตภัณฑ์ของธนาคาร

Design and Development of a Web-Based System for Bank Product Management

ผู้จัดทำ: นายชุติวัต บวรชาติ

อาจารย์ที่ปรึกษาโครงงาน: อาจารย์ธิติพร ประมวน

ที่มาและความสำคัญ

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

วัตถุประสงค์

• เพื่อพัฒนาระบบเว็บไซต์สำหรับนำเสนอข้อมูลผลิตภัณฑ์ของธนาคารให้เข้าถึงได้สะดวกและชัดเจนมากขึ้น

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

• เพื่ออำนวยความสะดวกให้ผู้ดูแลระบบ (Admin) สามารถจัดการข้อมูลผลิตภัณฑ์ได้อย่างรวดเร็วและเป็นระบบ

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

เทคโนโลยีที่เลือกใช้ (Tools)

• ซอฟต์แวร์ในการพัฒนา: Visual Studio Code (VS Code)

• เฟรมเวิร์กและส่วนหน้าบ้าน (Frontend): Next.js ร่วมกับ ShadCN UI และ CSS

• ระบบหลังบ้าน (Backend): พัฒนาด้วยภาษา TypeScript

• ฐานข้อมูล (Database): MongoDB ร่วมกับ Prisma ในการจัดการ Object Relational Mapping (ORM)

• เครื่องมือออกแบบ: โปรแกรม Figma

วิธีการดำเนินงาน (Methodology)

กระบวนการพัฒนาระบบและสถาปัตยกรรมเครือข่ายแบ่งออกเป็น 4 ขั้นตอนหลัก ดังนี้:

1. เก็บ Requirements และวิเคราะห์ความต้องการ: ดำเนินการสอบถามข้อมูลจากพนักงานที่ปฏิบัติหน้าที่เกี่ยวกับการจัดการผลิตภัณฑ์โดยตรง พร้อมทั้งทดสอบความเข้าใจโดยใช้พนักงานทั่วไปมาจำลองเป็นผู้ใช้งานฝั่งลูกค้า จากนั้นนำข้อมูลมาออกแบบ UI และภาพรวมโครงสร้าง (Wireframe) ผ่านโปรแกรม Figma

2. ออกแบบโครงสร้างระบบ: ใช้เฟรมเวิร์ก Next.js ในการพัฒนาโครงสร้างเว็บแอปพลิเคชัน โดยแบ่งกลุ่มผู้ใช้งานออกเป็น 2 ส่วนหลัก คือ ส่วนผู้ใช้งานทั่วไป (User) และส่วนผู้ดูแลระบบ (Admin) ซึ่งระบบประกอบไปด้วยหน้าจอหลัก 6 หน้า ได้แก่ หน้าแรก (Landing Page), หน้าสมัครสมาชิก, หน้ารวมและแสดงข้อมูลผลิตภัณฑ์, หน้ารายละเอียดผลิตภัณฑ์, หน้าจัดการผลิตภัณฑ์ และหน้าจัดการผู้สมัคร

3. การออกแบบฐานข้อมูล (Database Design): ดำเนินการกำหนดโครงสร้างข้อมูลเป็นรูปแบบ Collections และ Fields บนฐานข้อมูล MongoDB ผ่านเครื่องมือ Prisma ประกอบด้วย 4 โครงสร้างชุดข้อมูลหลัก ได้แก่:

   • Product: สำหรับจัดเก็บข้อมูลรายละเอียดผลิตภัณฑ์ทางการเงิน

   • Register: สำหรับจัดเก็บข้อมูลของลูกค้าผู้ลงทะเบียนสมัครความสนใจ

   • CarouselImages: สำหรับบันทึกรูปภาพและรายละเอียดรูปภาพต่าง ๆ ที่นำมาแสดงผล

   • BondProduct: สำหรับรองรับการจัดเก็บข้อมูลผลิตภัณฑ์อื่น ๆ ที่จะเกิดขึ้นในอนาคต

4. ทดสอบและประเมินผล: ดำเนินการทดสอบการทำงานของฟังก์ชัน (Functional Testing) ควบคู่กับการทดสอบใช้งานจริง (User Acceptance Testing) ในสถานการณ์จำลอง โดยให้พนักงานทั่วไปและผู้ดูแลระบบร่วมทดสอบ เพื่อนำมาประเมินความถูกต้อง ความสะดวกรวดเร็วในการทำงาน

ผลการดำเนินงาน (Results)

ระบบเว็บไซต์ที่พัฒนาขึ้นประสบความสำเร็จและมีตัวอย่างส่วนติดต่อผู้ใช้งานแสดงผลผ่านหน้าต่างเว็บแอปพลิเคชันหลัก 6 หน้าจอ (ได้แก่ หน้า Landing Page, หน้าแสดงผลิตภัณฑ์รวม, หน้ารายละเอียดผลิตภัณฑ์, หน้าแสดงผลิตภัณฑ์ที่สนใจ, หน้าจัดการผลิตภัณฑ์ และหน้าสำหรับสร้างผลิตภัณฑ์) โดยมีผลลัพธ์การทำงานที่เป็นประโยชน์ต่อองค์กรดังนี้:

• การจัดการฝั่งผู้ดูแลระบบ (Admin): พนักงานผู้ทดสอบระบบสามารถเข้ามาเพิ่ม ลบ แก้ไข และบริหารจัดการข้อมูลผลิตภัณฑ์ผ่านเว็บไซต์ส่วนกลางได้อย่างมีประสิทธิภาพ และมีฟีเจอร์สำคัญที่ช่วยให้พนักงานสามารถตั้งค่าเวลาล่วงหน้าที่จะเปิดตัวผลิตภัณฑ์แต่ละรายการสู่สาธารณะได้

• การใช้งานฝั่งลูกค้า (User): ลูกค้าและผู้ใช้งานทั่วไปสามารถเข้าถึงข้อมูลผลิตภัณฑ์ เปรียบเทียบข้อมูล และลงทะเบียนแสดงความสนใจผลิตภัณฑ์ทางการเงินผ่านทางหน้าเว็บไซต์ได้อย่างถูกต้อง แม่นยำ และง่ายดายกว่าระบบเดิม

สรุปผล (Conclusion)

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