เว็บไซต์และเอ็กซ์ทราเน็ตสำหรับจัดการตารางเรียนและเกรดของนักเรียน

View in another language:
ระบบลงทะเบียนอิเล็กทรอนิกส์

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

Team
ผู้อำนวยการ UX/UI 1 คน
ผู้จัดการโครงการ 1 อัตรา
1 นักออกแบบเว็บไซต์
นักพัฒนาฝั่ง Front-end จำนวน 2 คน
นักพัฒนาแบ็คเอนด์ 2 คน
Methodology
เวิร์คช็อป UX/UI
ระเบียบวิธีแบบคล่องตัว
Tools
นกกระจอก
การทำงานเป็นทีม
อะโดบี XD
Technologies
PHP, Python, Nuxt.js, Vue.JS
Timeframe
1 year

ความท้าทาย

มหาวิทยาลัยแม่ฟ้าหลวง (MFU) มุ่งหวังที่จะปรับเปลี่ยนระบบ e-Registrar ที่ใช้กันมายาวนานให้ดีกว่า ทันสมัย และใช้งานได้รวดเร็ว จึงได้จัดทำระบบใหม่ (Web Application) ขึ้นมาเพื่อทดแทนระบบเดิม

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

โดยสรุปแล้ว นี่เป็นระบบใหม่ที่ถูกออกแบบใหม่ให้ใช้งานง่าย และพัฒนาด้วยเทคโนโลยีใหม่ ทำให้ง่ายต่อการดูแลรักษา และในอนาคต รวมถึงมีฟีเจอร์ใหม่ๆ ที่เป็นประโยชน์ต่อผู้ใช้งานอีกด้วย

screencapture-reg-mfu-ac-th-new-rooms-schedule-2021-10-07-17_33_27

แนวทางและการออกแบบโครงการ

เราเริ่มโครงการด้วยการวิเคราะห์ฟีเจอร์หลักและปัญหาของลูกค้าในการสร้างฟีเจอร์ใหม่ผ่านเวิร์กช็อป

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

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

screencapture-reg-mfu-ac-th-backend-point-categories-2021-10-07-17_56_30

การพัฒนาโครงการ

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

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

ส่วนที่ค่อนข้างซับซ้อนของโครงการนี้คือระบบการจัดการผู้ใช้แบบไดนามิกตามบทบาทของผู้ใช้และคุณลักษณะต่างๆ ในระบบของเรา

นอกจากนี้เรายังได้สร้างระบบ Login Portal ที่สามารถเข้าใช้งานแอปพลิเคชั่นอื่นๆ ใน MFU หรือแอปพลิเคชั่นอื่นๆ ในอนาคตอีกด้วย

screencapture-reg-mfu-ac-th-backend-student-schedule-2021-10-07-17_55_46

สนใจเวิร์กชอปของเราไหม
พูดคุยกับทีมงานของเรา!

ติดต่อเรา
สนใจเวิร์กชอปของเราไหม
พูดคุยกับทีมงานของเรา!