เว็บจองห้อง KMITL OSRS โปรเจ็กต์เดียว 3 วิชา

กลับมาสู่ช่วงโปรเจ็กต์อีกแล้ว ครั้งนี้เป็นโปรเจ็กต์ปีสองเทอมสอง ควบทีเดียว 3 วิชา (ISAD, Database, WebPro) ที่ให้ทำเว็บด้วยภาษา Java ซึ่งเราก็เลือกทำเว็บที่เป็นระบบจองสถานที่ออนไลน์ภายในสถาบันพระจอมเกล้าฯ ลาดกระบังของเรา ในชื่อว่า KMITL Online Space Reservation System (KMITL OSRS)

งานเอกสาร

ก่อนที่เราจะเข้าสู่กระบวนการลงมือโค้ดจริงๆ ก็เป็นช่วงการวางแผนก่อน ซึ่งเป็นงานของวิชา Information System Analysis and Design (ISAD, หรือที่เรียกว่า I-sad หรือ i-s*s) โดยงานของวิชานี้ก็คือการออกไปเก็บความต้องการ (requirements) จากกลุ่มเป้าหมายที่จะใช้ระบบของเรา และเขียน use case diagram, activity diagram, data flow diagram, swim lane diagram เพื่อแสดงการทำงานของระบบออกมาเป็นแผนภาพ รวมทั้งทำผังจัดเฟสการทำงานอย่าง Gantt chart ด้วย

Word: ทำเอกสาร
Lucidchart: ทำแผนภาพ

เก็บความต้องการ

ทีมเราไปเก็บความต้องการกันหลายรอบ ออกเดินทางไปเกือบทั่วสถาบันเพื่อไปติดต่อกับงานสถานที่ (หรือที่เกี่ยวข้อง) ของคณะต่างๆ ว่ามีระบบการรับจองสถานที่อย่างไร และจากการออกไปรับฟังความต้องการนี้เองทำให้เราทราบว่า

ส่วนใหญ่มีการทำงานแบบเดียวกันคือ กรอกฟอร์มในกระดาษ แล้วเจ้าหน้าที่จะเอาไปจัดตารางในคอมฯ กันอีกที เช่นใน Outlook, Google Calendar
คณะวิศวะมีเจ้าหน้าที่จัดการห้องกว่าร้อยห้องเพียงคนเดียว (สตรองมาก)
บางคณะเคยคิดระบบที่ง่ายขึ้น เช่น ให้อาจารย์ไลน์ไปหาเจ้าหน้าที่ แต่ก็ไม่ประสบความสำเร็จเนื่องจากเดินมาติดต่อเองง่ายกว่า
ถ้ามีระบบใหม่ เจ้าหน้าที่ก็พร้อมและยินดีจะเปลี่ยนมาใช้งาน

ดังนั้นเป้าหมายของระบบที่เรากำลังจะสร้างคือ

ต้องน่าใช้และใช้งานง่าย
จองได้ในไม่กี่คลิก
ลดการใช้กระดาษ

Technology Stack

เริ่มพัฒนา!

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

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

หน้าที่หลักๆ ของผมคือการทำส่วนติดต่อผู้ใช้ คือเว็บด้านหน้านั่นเอง ความท้าทายในส่วนนี้ก็มีอยู่สองอย่าง

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

สำหรับตารางการใช้งานห้องนั้น เนื่องจากมีเวลาที่สามารถจองได้ถึง 22 ช่วงเวลา ตั้งแต่ 9 น. จนถึง 20 น. (ที่มันเป็น 22 ช่วงเพราะนับเป็น 9.00–9.30, 9.30–10.00, 10.00–10.30, …) และเราจะต้องเอา 22 ช่วงเวลานี้ไปอยู่ในพื้นที่เล็กๆ โดยที่มันต้องบอกสถานะการใช้งานห้องได้เลย และก็ต้องเห็นแล้วเข้าใจง่ายด้วย ทีแรกเราออกแบบเป็นปุ่มกลมๆ ให้คลิกเพื่อเลือกเป็นเวลา แต่ดูแล้วมันไม่เวิร์ก อาจารย์หลายท่านบอกว่าเข้าใจยาก ซึ่งมันก็ต้องทำความเข้าใจในระดับหนึ่งจริงๆ

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

เวลาผ่านไปอย่างรวดเร็ว เราได้ใช้เวลาสามเดือนทยอยพัฒนาระบบไปเรื่อยๆ การทำงานครั้งนี้ก็ไม่ได้ยึดตาม SDLC อะไรเป็นพิเศษครับ 😂😂 เป็นโฟลวธรรมดา Planning > Analysis > Design > Implementation > Test

สุดท้ายก็สามารถโค้ดเสร็จก่อนส่งได้ประมาณ 2 วัน จึงมีเวลาทดสอบและแก้บั๊ก และตรวจสอบเอกสารอีกที เพื่อให้อัพโหลดส่งวิชา ISAD ได้ในวันจันทร์

ส่งงานวิชา ISAD

และแล้วก็มาถึงวันส่ง มีกำหนดปิดระบบ FTP เวลาเที่ยงตรง และเราก็เพิ่งเจอบั๊กใหม่ตอน 10 โมงกว่าๆ รวมกับการเช็คเอกสารอีกทีไปด้วย ทำให้ตอนนั้นก็ค่อนข้างวุ่นวาย แต่เราก็จัดการแก้ไขเวอร์ชันของโค้ดใน VM เสร็จตอน 11 โมงครึ่งกว่าๆ (เราเลือกส่งเป็น VM เพื่อลดความเสี่ยงว่าไปรันในเครื่องที่ห้องพรีเซนต์ไม่ได้ คือมันเป็นเกณฑ์คะแนนหนึ่งด้วยว่าระบบต้องทำงานได้โดยไม่พึ่งอินเทอร์เน็ต พูดอีกง่ายๆ คือเปิดจากเว็บพรีเซนต์ไม่ได้ ต้องรันในเครื่อง)

เมื่อแฟ้มเอกสารพร้อมแล้ว เราก็รีบไปขอรหัสเข้า FTP และไปอัพงานกันต่อ จะหนักก็ตรงอัพโหลดไฟล์ VM ขนาดเกือบ 8 GB ภายในเวลา 20 นาทีนั่นแหละ ปกติแล้วมันจะไม่ใช่ปัญหาเลยแต่วันนั้นความเร็วอัพโหลดกลับไม่มากพอให้เสร็จได้ทัน เลยต้องไปส่งอีกทีในรอบสองซึ่งเปิดให้อัพโหลดได้ 1 ชั่วโมง แต่ก็แลกด้วยการลดคะแนน 5 คะแนน เราจึงต้องยอม และเพิ่งมาพบทีหลังว่าอัพโหลด VM ไปผิดเวอร์ชัน…

หลังจากนั้นในวันอังคารเราก็ได้ลองเช็คลองปะติดปะต่อเหตุการณ์ดู ก็พบว่าจริงๆ แล้วเราน่าจะอัพโหลดไฟล์ไปถูกแล้วนั่นแหละ 🤦‍♂️🤦‍♂️

พรีเซนต์ Database

วิชา Database เป็นวิชาแรกที่ต้องนำเสนอ และก็เป็นกลุ่มแรกในคิวเลยด้วย เรารีบไปเตรียมตัวก่อน 9 โมง และพอถึงเวลาก็เริ่มการนำเสนอได้ แต่ด้วยความที่ยังเตรียมตัวไม่ดีพอ จึงนำเสนอไปไม่ดีเท่าที่ควร

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

พรีเซนต์ ISAD

หลังจากที่เจอความไม่พร้อมจากการนำเสนอในวิชา Database มา เราจึงเตรียมตัวสำหรับการนำเสนอ ISAD ให้รอบคอบมากขึ้น

แบ่งเวลาว่าพูดแต่ละหัวข้อกี่นาที สาธิตกี่นาที เพื่อให้ทั้งหมดนี้เสร็จภายใน 15 นาที เพราะมีเวลานำเสนอ 20 นาทีและเราต้องเผื่อเวลาเซ็ตอัพระบบไว้ด้วย ซึ่งเราก็ต้องใช้เวลาให้ตรงตามนี้เป๊ะๆ ไม่เกิน
แบ่งว่าใครจะนำเสนอส่วนไหน จะได้ไม่ไปงงกันในห้อง
ลำดับการสาธิตฟีเจอร์ต่างๆ ไปตาม Use Case
ทดลองดาวน์โหลดไฟล์จากคอมฯ ในห้องที่นำเสนอว่าใช้เวลาเท่าไร และแตกไฟล์อีกเท่าไร เพื่อเอามาวางแผนการใช้เวลาด้วย
เช็คการทำงานของระบบเพื่อหาบั๊กอีกรอบ
จัดการเวลาว่า ในขณะที่กำลังพูดนำเสนอ ให้ตั้งมอนิเตอร์เป็นแบบ extended เพื่อที่บนคอมฯ เราจะได้ดาวน์โหลดและเตรียม VM ไปเลย ไม่เสียเวลา
ต้องเอาโน้ตบุ๊กไปตั้งด้านหน้าเพื่อให้มองเห็นเวลาที่ใช้ และให้อ่านโน้ตของแต่ละหน้าใน PowerPoint
นำระบบไปให้พี่หนึ่ง เจ้าหน้าที่จัดการคำร้องในห้องฟ้า ลองใช้งาน เพื่อเก็บข้อมูลเผื่ออาจารย์สงสัยอะไร และเพื่อนำไปใช้ปรับปรุงระบบต่อในเฟส 2 ด้วย
ที่สำคัญคือเข้าไปนั่งฟังการคอมเมนต์กลุ่มอื่นๆ และนำมาปรับใช้

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

สุดท้าย เราจึงเป็นกลุ่มแรกของวันนั้นที่ได้คะแนนโบนัส 3 คะแนนไป ตามเงื่อนไขว่าระบบทำงานได้ครบถ้วน และรันในคอมฯ ของห้องได้

“โอเคครับ ครบถ้วนตรงตามที่ต้องการ” — อ.มานพ

พอจบการนำเสนอแล้วก็โล่งงงงง ดีใจ คือที่เตรียมกันมาสุดๆ มันคุ้ม ก็พร้อมสำหรับการสอบปลายภาค (และปิดเทอม) แล้วฮะ!! 🤟

แถม 1

ในเฟสสอง เราก็อยากจะทำให้มันจองแบบหลายวันได้ในคราวเดียวได้ และก็มีฟีเจอร์อื่นเพิ่มด้วย แต่ก็ยังไม่รู้ว่าจะว่างทำกันอีกเมื่อไร เพราะเราก็อยากพักกัน 😂🤦‍♂️ เอาเป็นว่าก็พักก่อน

แถม 2

เอกสารในวิชา ISAD https://issuu.com/zartre/docs/isad-kmitl_osrs