เกริ่นนำเล็กน้อย

ในโพสต์นี้ จะเป็นการเล่าเรื่องของการทำระบบต่างๆ ส่วนหนึ่งของ CMMT 2023 ที่ผม, คุณ kana2011th และ คุณ M307 ได้ร่วมทำมาด้วยกัน โดยอาจจะแบ่งเรื่องราวที่จะเล่าออกเป็นหลายๆ องค์เพื่อความเข้าใจในหลายๆ ด้านของงานในครั้งนี้ :)

เอาหล่ะ ทีนี้มาเริ่มจากในส่วนของที่มาของงาน กันดีกว่า

ที่มาของงาน

ในส่วนของที่มาของงาน จริงๆ แล้ว งานนี้เริ่มมาจากสมาชิกคนหนึ่ง ซึ่งเคยเป็น “อดีต” ผู้บริหารของกลุ่ม maimai DX เชียงใหม่ ซึ่งตั้งอยู่ ​ณ ห้างสรรพสินค้า MAYA ที่เรียกได้ว่าอยู่ค่อนข้างใกล้กับมหาวิทยาลัยเชียงใหม่นั่นแหละครับ ซึ่งตัวของเขานั้นอยากจะจัดงานแข่งนี้ขึ้นมาด้วยเหตุผลบางประการ ซึ่งเหมือนจะอยากให้กลุ่ม maimai กลุ่มนี้นั้น ได้เติบโตขึ้นกว่าเดิม ( ซึ่งจริงๆ แล้วไม่ใช่อย่างนั้น เพราะว่า หลังจากที่จับเข่าคุยคราวนั้น ก็ยังไม่สามารถที่จะทราบคำตอบที่แน่ชัดได้ แต่ว่าจากการกระทำของมัน ก็คือพยายามที่จะสร้างงานแข่งนี้ขึ้นมา เพื่อเอาชนะงาน Chunimai ที่จัดอยู่ ณ MBK นั่นแหละครับ )

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


โอเค ผมว่าเกริ่นในส่วนของที่มาของงานประมาณนี้จริงๆ ก็น่าจะพอเข้าใจกันแล้ว ซึ่งจริงๆ ก็เพราะว่าไม่อยากจะลงลึกไปในรายละเอียดรอบนอกขนาดนั้นด้วยแหละครับ 😟


องค์ประกอบต่างๆ ของระบบหลังบ้าน

โอเคมาเริ่มเกริ่นคร่าวๆ กันก่อน จริงๆ แล้วทุกอย่างที่ท่านเห็น ไม่ว่าจะเป็น ในส่วนของเว็บหน้าแรก, Overlay ต่างๆ ที่ถูกใช้งานในสตรีม หรือว่าจะเป็น ในส่วนของฐานข้อมูลเพลง นั้น ล้วนเกิดขึ้นได้จากหลายๆ ความช่วยเหลือ ไม่ว่าจะเป็นทางของคุณ kana2011th, คุณ​ M307 และ เหล่าสมาชิกกลุ่มรากหญ้าหลายๆ คน ที่ช่วยกันสนับสนุนให้เกิด Event นี้ และ ผลงานต่างๆ นี้ขึ้นมา ต้องขอขอบคุณทุกๆ คนก่อนไว้ ณ ที่นี้เลย

เอาหล่ะ! มาเริ่มเล่ากันตาม Timeline ดีกว่า

ฐานข้อมูลเพลง

ถ้าถามว่า ทำไมผมถึงเริ่มจากในส่วนนี้ก่อน จริงๆ แล้วต้องย้อนกลับไปซักหน่อย ในตอนที่ผมกำลังนั่งทำในส่วนของ Side-Project ของผม อย่าง CaffeCorretto/Arcade-Tracking ซึ่งนั่นเป็น Project ที่ผมตั้งใจจะทำเพื่อเก็บข้อมูลคะแนนของเกมต่างๆ ที่ผมนั้นได้เล่น เนื่องจากหลายๆ เกมมีการเข้าถึงคะแนนที่ค่อนข้างยุ่งยาก และ บางเกมนั้นไม่มีแม้แต่ระบบเซฟคะแนน นั่นเลยกลายเป็นหัวต้นให้ผมได้เริ่มทำโปรเจคนี้ขึ้นมานี่แหละครับ
ซึ่ง Head ของกลุ่มรากหญ้าที่ผ่านไปผ่านมาแล้วเห็นก็เลยชวนมาทำระบบแข่งนี่แหละครับ เลยกลายเป็นว่า ผมเลยย้ายฐานข้อมูลจากระบบของเก่ามาใช้กับตรงนี้แทนเลย

ระบบหลังบ้าน (ในส่วนของ Overlay และ Controller)

ในส่วนนี้ถ้าให้พูดเต็มๆ ปากเลย คือหลังจากที่ได้ฐานข้อมูลมา ระบบสุ่มที่ได้ ณ ตอนนั้น คือสุ่มโง่ๆ แล้วจะแปะลงไลฟ์ทั้งอย่างนั้นเลย แล้วพอสุ่มก็ค่อยมานั่งสุ่มกันอีกที โดยข้างหลังเป็น Express.js เพียวๆ เลยนั่นแหละครับ จากนั้นต่อมาจึงค่อยๆ ปรับให้มี Login System เพื่อกันคนนอกมาใช้งาน มีการเชื่อมต่อ Socket.io เพื่อให้มี Controller ควบคุมระบบจากข้างหลังได้ โดยใช้ Express.js เป็นหลังบ้าน และ Svelte เป็นหน้าบ้านของระบบนี้
ซึ่งทั้งหมดนี้ ผมสามารถพูดได้เต็มๆ ปากเลยว่า มันจะเกิดขึ้นไม่ได้เลย ถ้าไม่มีคุณ kana2011th มาช่วยในส่วนนี้ ส่วนนี้ก็คงไม่ได้เกิดขึ้นมาจริงๆ นั่นแหละครับ

ในส่วนของหน้าเว็บ CMMT (cmmt.grassroot.cyou)

ในส่วนนี้ จริงๆ ต้องขอให้คนที่เพิ่งได้เข้ามาอ่านในส่วนนี้ครั้งแรก ย้อนกลับไปอ่านโพสต์ก่อนหน้านี้ก่อน ว่าผมขึ้นมาทำอะไรที่เชียงใหม่ เพราะเนื่องเหตุผลตรงนั้น เลยทำให้เกิดหน้าบ้านอันนี้ ที่ประกอบขึ้นมาจาก React.js และ TypeScript นี่แหละครับ ซึ่งหน้านี้ก็พูดได้ว่าเป็นส่วนหนึ่งของงานที่ผมเอาไปใช้ส่งบริษัทเลยก็ว่าได้ เลยทำให้หลายๆ อย่างที่อยู่ในนี้ดูค่อนข้างที่จะทำออกมาให้ดูมีองค์ประกอบหลายๆ อย่างครบเฉยๆ (รวมถึงในส่วนของ Debug ที่ผมรีบเกินไปจนไม่ได้ปิดด้วยนั่นแหละครับ)

OK! ต่อมาคือในส่วนของหน้าตาเว็บ จริงๆ แล้วถ้าหากว่าใครที่เห็นเว็บผมมาหลายๆ อันแล้วจริงๆ จะเห็นได้ว่า การจัดวางหน้าตาแบบนี้ เป็นการจัดวางเว็บที่เรียกได้ว่าค่อนข้างปกติของผมเลยก็ว่าได้ เนื่องจากในส่วนหนึ่ง ผมก็คิดไม่ออกเหมือนกันว่าจะวางยังไงดี เลยโยนทุกอย่างเข้าไปไว้ตรงกลางก่อน แล้วใส่ Card ไม่ก็ขอบขาวไปเลย อะไรแบบนี้ แต่ว่า ด้วยความที่ข้อมูลหน้าแรกนั้น ก็จำเป็นต้องมีข้อมูลหลายๆ อย่างด้วย เลยทำให้ออกมาเป็นสภาพอย่างที่เห็นนั่นแหละครับ

ระบบหลังบ้าน (ในส่วนของ Services เล็กๆ น้อยๆ)

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

ตามจริงเลย ในทุกๆ ส่วนที่ได้ออกมานี้ ก็ต้องขอขอบคุณ คุณ M307 และ คุณ kana2011th ที่มีส่วนร่วมช่วยในการทำ Services ต่างๆ ของงานแข่งนี้ให้ออกมาได้ และ จนถึงภาพรวมส่วนใหญ่ของงานในวันที่ 20 พฤษภาคม 2565 ที่ผ่านมานี้ ออกมาได้อย่างดีที่สุดด้วย ก็ต้องขอขอบคุณไว้ใน ณ ที่นี้ด้วยครับ

สำหรับวันนี้ ไว้พบกันใหม่ CYA :)