socket.io ระบบนับบัณฑิตแบบ Real-time ควันหลงงานรับปริญญา

ดอกลำดวนช่อที่ 15 ของมหาวิทยาลัยแม่ฟ้าหลวง เพิ่งเข้าสู่พิธีรับพระราชทานปริญญาบัตร ประจำปีการศึกษา 2559 ไปเมื่อวันที่ 12 กุมภาพันธ์ 2561 พอดีผมกับทีมมีโอกาสได้ถวายงานเบื้องหลัง ในส่วนของระบบนับบัณฑิต เพื่อช่วยให้ทีมฝ่ายเตรียมงานได้ทราบสถานการณ์โดยรวมทั้งหมดและเตรียมพร้อมสำหรับการดำเนินกิจกรรมตามกำหนดการทั้งหมด เวลาที่ใช้งานระบบนี้ใช้เวลาทั้งหมด 1 ชม. 30 นาที แต่ใช้เวลารวมทดสอบแล้วทั้งหมด 3 วัน ทั้งนี้เพื่อความถูกต้องแม่นยำและไม่ให้เกิดข้อผิดพลาด

วันแรกที่ได้รับข้อมูล ว่าต้องทำระบบนี้

2 เดือนก่อนวันเริ่มงาน  เมื่อได้รับ Line ส่วนตัวจากทีมจัดงาน ว่าต้องการให้มีระบบ RF-ID เพื่อช่วยในการนับจำนวนบันฑิต และรายงานผลโดยแสดงจำนวนบัณฑิตที่เข้ารับพระราชทานปริญญาบัตร โดยต้องแสดงแบบนับลง และแสดงจำนวนคนต่อนาที ซึ่งตัวเลขเป้าหมายที่ยอมรับได้ที่ทำให้ฝ่ายซ้อมบัณฑิตต้องทำงานกันอย่างหนักคือ 30 คน/นาที ซึ่งหมายความว่า บัณฑิตแต่ละคนใช้เวลาประมาณ 2 วินาที เรียกว่าวินาทีชีวิตกันเลยทีเดียว (มาทราบทีหลังว่า มีบาง ม. ทำได้ถึง 33 – 37 คนต่อนาทีเลยทีเดียว)

เนื่องจากดูเรื่องของเวลา กระบวนการจัดซื้อ และข้อมูลที่เรามีอยู่ในมือ ทำให้ผมตัดสินใจตอบไปในทันทีว่าด้วยเวลาตอนนี้ ถ้าใช้ RF-ID ไม่น่าจะทัน เพราะกว่าจะทำ Tag กว่าจะ process เรื่องของการซื้อหรือเช่าอุปกรณ์ต่างๆ และให้ข้อมูลกับบัณฑิต เลยเป็นที่มาของแผน 2 คือการใช้คนเคาะนับในจังหวะที่บัณฑิตเข้ารับพระราชทาน แต่มีโจทย์หลักคือ ต้อง Real-time และมีความแม่นยำระดับวินาที ส่วนโจทย์รองคือ การแสดงผลที่รองรับอุปกรณ์หลายขนาด ตั้งแต่จอโทรศัพท์มือถือ ไปจนถึงทีวีขนาด 55 นิ้ว ทำให้สุดท้ายหวยมาออกที่ระบบ web application ที่ทำให้รองรับ responsive และจัดการส่วน Real-time ด้วยเทคโนโลยี socket.io

ระบบเล็กๆ ทำ MVP คืนเดียวเสร็จ มีของแถมให้ด้วย

system_model2

ด้วยที่เราเล่น socket.io อยู่แล้ว โจทย์ Real-time เลยกลายเป็นเรื่องเล็ก แต่ก็มีโจทย์อื่นๆ ที่ต้องคิดและทำให้ไว โดยคร่าวๆจากความต้องการที่ได้มามีดังนี้

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

ของแถม

  • ระบบจะเชื่อมกับระบบควบคุม Smart Screen ที่เคยทำไว้ก่อนแล้ว (วันหลังจะมาเล่าให้ฟัง) โดยเมื่อเปลี่ยนเป็นโหมด Live สดจะต้องแสดงชื่อของบัณฑิตและสาขาวิชาไปพร้อมๆกัน
  • ระบบซ้อมขานชื่อ ที่สามารถแสดงผลบนแทบเล็ต สำหรับคณบดีไว้ฝึกซ้อมขานชื่อ

 

เนื่องจากมีของอยู่แล้วบางส่วนผมใช้เวลา 1 คืนในการจัดให้ตามคำขอ โดยเทคโนโลยีที่ใช้ก็เลือกง่ายๆ แค่ Javascript jQuery, socket.io , CSS3, Bootstrap และ HTML5 ซึ่งขึ้นงานได้เร็วและรองรับงานในลักษณะ real-time โดย Sever ที่เลือกใช้คือ Node.js + Express ซึ่งรองรับทั้งการเป็น Web Server, REST APIs, และ Socket.io Server ในตัวเดียว ส่วนฐานข้อมูลใช้วิธีเก็บเป็นไฟล์ json ใน server หลังจากการ parsing เรียบร้อยแล้ว และดึงมาเก็บไว้ที่ localStorage ของ Web Browser ของระบบนับอีกครั้งเพื่อความรวดเร็วในการตอบสนอง ระบบทั้งหมดรันบน Ubuntu และใช้ PM2 ในการทำให้ Node.js กลายเป็น Service เช้าของอีกวันก็เอาไป Demo ให้ทีมดู

ก่อนเอาไปใช้งาน ได้มีการทดสอบกับคนในครอบครัวลองขานชื่อบัณฑิตผ่านระบบเพื่อให้ได้ User Experience ที่ดีที่สุดและปรับแต่งอีกนิดหน่อย

เมื่อเราไม่แน่ใจ ว่าตกลงผู้ใช้ต้องการอะไร?

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

สิ่งที่คนฝ่ายซ้อมบัณฑิตต้องการคือ การนับการอ่านทุกบรรทัด ไม่ใช่แค่ชื่อคน @__@

มองเผินๆ เหมือนไม่มีอะไร แต่ตัว Dataset ที่ผมใช้วิธีการ import ข้อมูลจาก clipboard ของ excel มาเราทำให้มันแยก dataset ออกเป็น ชื่อสาขา กับ ชื่อบัณฑิต และแยกกลุ่ม id กันชัดเจน เลยถึงเวลารื้อโค้ดกันอีกรอบ หลายวันผ่านไป version 2 ก็ยังไม่คลอด เนื่องจากไม่มีเวลาทำ รอจนใกล้จะต้องใช้งาน เอาจริงๆก็ทำ วันเดียวเสร็จ

วันทดสอบระบบวันแรก เก็บผลgrad2

สิ่งที่นักพัฒนาทุกคนไม่อยากให้เกิด ก็เกิดขึ้นกับงานนี้ พอเอาระบบมาใช้นับบัณฑิตในวันซ้อม ผลปรากฎว่า การนับชื่อสาขา ทำให้คนเค๊าะค่อนข้างลำบากถึงลำบากมากเลยทีเดียว (ซึ่งรับไม่ได้ในแง่ของ User Experience ที่ผมเน้นเรื่องนี้มาก) เนื่องจากการเค๊าะใช้วิธีดูจากภาพสดเพียงอย่างเดียว จะไม่ได้ใช้การฟังเสียงขานชื่อจากคณบดี (ซึ่งอาจไม่สัมพันธ์กับการเข้ารับของบัณฑิต) ทำให้เป็นสิ่งแรกที่ต้องรีบปรับก่อนเพื่อนำมาทดสอบในวันถัดไป (ข่าวร้ายคือ นี่มัน version 2.0 ผมเปลี่ยนยุบรวม dataset มาเหลือก้อนเดียว แล้วอันที่อยากได้คือเอาแบบ version 1.0 “เสียใจแพร้บ”) **มีความต้องการเพิ่มเติมอีกนิดหน่อยคือ จอแสดงผลในห้องประชุม ที่จะแสดงเฉพาะตัวเลขเท่านั้น**

สิ่งที่คนเค๊าะนับจำนวนคือ ต้องการนับเฉพาะจำนวนบัณฑิต ไม่สนใจบรรทัดของสาขาวิชา T__T

ปรับปรุง ปรับปรุง และปรับปรุง

หลังจากแก้ไขทุกอย่างเรียบร้อย ระบบก็พร้อมสำหรับวันซ้อมใหญ่ การนับทำได้ง่ายขึ้นเนื่องจากเน้นที่คนเพียงอย่างเดียว ไม่ต้องพะวงกับการต้องกด 2 ครั้งเมื่อถึงการอ่านชื่อสาขา (จริงๆ คนเค๊าะต้องไม่ฟังเลยด้วยซ้ำ เน้นการดูด้วยตาเพียงอย่างเดียว) ผลวันซ้อมใหญ่เป็นที่น่าพอใจ หลังซ้อมรอบบ่ายทุกคนโล่งอก ส่วนตัวผมก็แอบทำการทดลองเล็กๆ ควบคู่กันไปด้วย เรื่องของเวลาประมาณการว่าอีกกี่นาทีจะรับเสร็จทั้งหมด ลองจับเวลาเทียบดู ผลคือ +- ไม่เกิน 5 วินาที ทำให้ค่อนข้างมั่นใจว่าพรุ่งนี้ทุกอย่างจะราบรื่น

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

** ระบบมีบั๊กนิดๆ หน่อยๆ ดีใจที่ทุกคนต่างก็ช่วยกันเสนอวิธีแก้ปัญหา ผมก็ได้แต่นั่งยิ้ม เพราะโค้ดทุกบรรทัดเราเขียนเองกับมือ เรารู้อยู่แล้วว่าต้องแก้ตรงไหน ถ้าใจไม่นิ่งไปแก้ตามที่เค้าบอก คงพังไปกันใหญ่ แต่ก็ดีใจนะที่ทุกคนเอาใจช่วย ^__^ **

ฉากจบที่สวยงาม ทุกคนคลายความตึงเครียด

วันจริง ทุกอย่างดูเหมือนผ่านไปอย่างเชื่องช้า หลังการพักเบรกครึ่งแรก มือเค๊าะของเรารีบวิ่งไปพัก และกลับมาอย่างรวดเร็ว ตัวหน้าจอผลการนับถูกส่งลิงค์ไปให้ทุกฝ่ายที่เกี่ยวข้องกับการเตรียมงานให้ใช้เป็นข้อมูลในการเตรียมรับเสด็จ ด้านหลังของพวกเรา มีฝ่ายประสานงานกองสำนักราชวัง มากำกับดูแลและคอยรายงานผลทางวิทยุสื่อสารทุกๆการรับ 100 คน จนถึงร้อยคนสุดท้ายฝ่ายประสานงานก็เดินจากไป ผมเองก็ต้องรีบเก็บของเพราะต้องไปเตรียมรับเสด็จในอีกจุดหนึ่ง เมื่อถึง 10 คนสุดท้ายรู้เลยทุกคนนับถอยหลังอยู่ในใจ เมื่อถึงคนทึ่ 5..4…3…2…1 และ counter นับถึง 0 ในหอประชุมทุกคนส่งเสียงปรบมือให้กับบัณฑิตดังกึกก้อง และพวกเราทีมงานด้านหลังแอบปรมมือไปด้วยแบบเนียนๆ ภาระอันหนักอึ้งได้ผ่านพ้นไปแล้ว มีแต่ความปิติยินดีกับบัณฑิต และยินที่ที่ได้เป็นส่วนหนึ่งของการถวายงานresult

ภาพสุดท้าย ของหน้าจอนับจำนวน ทุกคนยินดีกับบัณฑิตทั้ง 2,444 คน ^_^

มีเรื่องตื่นเต้นนิดหน่อยคือ ผมมีการแก้โค้ดบางส่วน แต่ยังไม่ได้ทดสอบ หลังจากโยนขึ้น server แล้ว กลับลำดึง version ก่อนหน้าที่เคยใช้วันซ้อมใหญ่กลับมาแทน ตอน 5 นาทีก่อนทุกอย่างจะเริ่ม จะเห็นความสำคัญของการคุม version และการ backup code ก็ตอนนี้แหละ ^__^

 ครั้งหน้าเจอกันใหม่

จากข้อเสนอแนะของทีมตามเสด็จ และทีมทำงาน ในครั้งหน้ายังคงมีสิ่งที่ต้องปรับปรุงและพัฒนาอีกหลายจุด

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

บทสรุปการถวายงานครั้งนี้

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

  1. ระบบไม่ทำให้เกิดผลกระทบการประสบการณ์การใช้งานของบัณฑิต ไม่ต้องค่อยพะวงว่า RF-ID Tag จะใช้ได้หรือไม่ได้หรือหลุดสูญหาย
  2. ไม่มีต้นทุนด้านอุปกรณ์ และกระบวนการในการแจก หรือแจ้งซ่อมชำรุดเสียหาย ทุกคนแค่มาซ้อม และตั้งใจเข้ารับตามปกติ
  3. ด้วยจำนวนบัณฑิตที่ยังไม่มาก (2444 คน) ทำให้ยังคงสามารถใช้คนเค๊าะเพียงคนเดียว ความแม่นยำยังเป็นระดับวินาที ซึ่งในมุมมองผมโอกาสที่เซนเซอร์ไม่ทำงานยังมีมากกว่าด้วยซ้ำ (แต่ถ้ามีบัณฑิตมากกว่านี้คงต้องเพิ่มคนเค๊าะเปลี่ยนผลัดกันเพื่อความเสถียรของระบบ)
  4. การปรับแต่ง รวมถึงการแก้ไขข้อผิดพลาดต่างๆ สามารถทำได้อย่างรวดเร็วและส่งผลทันที ที่สำคัญ Time-to-market เร็วมาก โค้ดสามารถแก้และ update ทันที

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

ผมเล่าให้ น.ศ. ฟังในวิชา Software Architecture เป็น case study มี น.ศ. คนหนึ่งยกมือถามว่า ถ้าจะขาย อ. จะขายระบบนี้เท่าไหร่ ผมตอบแบบไม่คิดเลยว่า “ผมแจกฟรีครับ” ม.ไหนอยากจะใช้ ติดต่อมาได้เลย เพราะคิดว่านี่คื่อส่วนหนึ่งของการถวายงาน เราใช้ระบบเพื่อช่วยให้ทีมเตรียมการถวายงานได้อย่างราบรื่น ก็เท่ากับได้รับใช้พระองค์ท่าน

น้องๆ ที่อยู่ในวัยมัธยม ที่กำลังเตรียมเข้าศึกษาต่อในระดับมหาวิทยาลัย ถ้าชอบใจงานแนวพัฒนาระบบ ชอบสร้างสรรค์สิ่งใหม่ๆ ให้ได้อย่างที่ใจเราคิด แนะนำให้ส่ง Portfolio มาที่สาขาวิชา Software Engineering สำนักวิชา เทคโนโลยีสานสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง แล้วมาเจอกันกับผมครับ มาร่วมเป็นส่วนหนึ่งของ #TeamSoftware มาแล้วมาถามหา อาจารย์บี ได้ ^__^

“อยากมีของ ลองมาคุยกัน”

เรียน Software Engineering ม.แม่ฟ้าหลวง ดียังไง มาดูกัน

 

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage