ว่าด้วยเรื่องระบบ All Camp : IT Camp 14

Kasidis Chaowvasin
ITForge
Published in
3 min readJun 4, 2018

ก็จบไปแล้วสำหรับค่าย IT Camp 14 ที่จัดระหว่างวันที่ 31–3 มิถุนายน 2561 ยิงยาว 4 วัน 3 คืน ผู้เขียนนอนไปไม่ถึงสิบชั่วโมงด้วยซ้ำ

นอกจากหน้าที่ TD และเฮดค่ายย่อย IoT (I-OPOLLO) ค่ายย่อยที่ชิวเวอร์มาก พี่ๆก็หน้าตาดี (น้องค่ายไม่ได้บอกเอาไว้ แต่พี่คิดว่าน้องน่าจะคิดเหมือนกัน) อีกหน้าที่หนึ่งคือคนทำระบบ All Camp ที่ปัจจุบันก็ยังไม่มีชื่อเรียกที่จริงจังสักที เพราะว่า Requirement ระบบมันเปลี่ยนแบบ day by day มากๆ เลยไม่รู้จะตั้งอะไรดี แต่ไอเดียหลักๆคือ

ผู้เล่นจะเล่น All Camp ผ่านมือถือหรืออุปกรณ์เคลื่อนที่อื่นๆ ผู้เล่นต้องมี Profile ,Energy และ Item ของตัวเอง มีเควสให้ทำ โดยต้องมี energy และ item ตามที่กำหนด มีหลังบ้านที่ให้คนไปคุมได้ เพิ่มเควสได้ เพิ่มไอเทมได้ จัดการผู้เล่นได้

ด้วย requirement ตอนแรกตามข้างบน เลยตัดสินใจใช้ชื่อว่า ITCamp 14 — Wallet ซึ่งจะเห็นว่ามันไม่ค่อยตรงกับสิ่งที่ระบบเป็นจริงๆเท่าไหร

ตั้งโปรเจคไปก่อน แต่ชื่อยังตกลงไม่ได้ เลยใช้คำว่า Wallet

แต่เอาเถอะ มามัวแต่คิดชื่อโปรเจคคิดชื่อระบบเผลอๆไม่ต้องมีมันละระบบ อีกเจ็ดวันวันค่ายละนะ ยังไม่ได้เริ่มโค้ดอะไรเลย

ใช่ครับทุกคน อ่านไม่ผิด เจ็ดวันครับ

ณ เวลาเปิดโปรเจคคือวันอาทิตย์ บนรถระหว่างกลับจากค่ายของทางสโมสรนักศึกษาของคณะ คือมันด่วนขนาดนั้นเลยหล่ะ

ณ เวลาตอนนั้น เราต้องเลือกว่าจะใช้อะไรทำระบบนี้ขึ้นมา ซึ่งตามโจทย์และเวลา ทำให้เลือก Firebase มาเพื่อเป็นหลังบ้าน เก็บข้อมูล รวมทั้งระบบ Login ที่เชื่อมต่อกับ Facebook ด้วย ทั้งหมดคือ Firebase เลยจ้า ถือเป็นการตัดสินใจที่ดีมาก เพราะระบบมันต้อง real-time ทุก device ในงานต้องแชร์ข้อมูลชุดเดียวกันตลอดเวลา และเราก็ค่อนข้างมันใจใน Service นี้อยู่แล้วเพราะมันก็เป็นบริการขนาดใหญ่ที่ทำมาเพื่องานนี้โดยเฉพาะ รวมถึงการใช้งานที่ง่ายมากๆ ทำให้ลดเวลา develop ไปได้มากโข โดยเราจะใช้สามบริการคือ Authentication กับ Firestore และ Hosting

ข้อมูลที่เก็บบน Firebase Cloud Firestore

สาเหตุที่เราใช้ Firestore เลยคือ ความ real-time และมัน query ได้ เช่น อยากได้ข้อมูลผู้เล่นบ้าน pro หรืออยากได้ข้อมูลผู้เล่นที่มี energy มากกว่า 5000 มันก็ทำได้ และมันเก็บข้อมูลเป็นระเบียบดีมากกก

การเก็บข้อมูล เราแบ่งเป็น 6 ส่วนด้วยกัน

  • env คือสภาพแวดล้อมระบบ ใช้กับการ broadcast หรือ multicast ข้อความหรือข้อมูลไปหาผู้เล่นกลุ่มใหญ่ๆ เช่น การปิดระบบผู้เล่นทั้งหมดเหมือนที่น้องๆค่ายเห็นกันก่อนที่กิจกรรมจะเริ่มขึ้น
  • items เก็บข้อมูลไอเทม อ้างอิงจาก Unique ID ที่ Firestore จัดให้อัตโนมัติ
  • quests เก็บข้อมูลเควส อ้างอิงจากเลข 3 หลัก เช่น 056 087 เก็บว่าเควสชื่ออะไร รับที่ไหน ที่ใคร ใช้อะไรบ้าง อะไรเป็นรางวัล บลาๆ
  • sessions คือข้อมูลการเล่นของผู้เล่นในแต่ละเควส มีใครเล่นเควสนี้อยู่บ้างในรอบหนึ่ง ใครชนะใครแพ้ ต้องให้รางวัลใครบ้าง จะเก็บอยู่ในส่วนนี้
  • uid-matching เป็นส่วนที่เก็บข้อมูลไว้ match Facebook UID ของน้อง ได้มาจากตอนที่น้องสมัครค่ายตอนแรก เก็บข้อมูลพื้นฐานของน้องค่ายที่ Facebook ไม่มี เช่น บ้านในค่าย หน่วยงานในค่าย ค่ายย่อยไหน
  • users เก็บข้อมูลของผู้ใช้งานทั้งหมดในระบบ

จะพูดว่าระบบทั้งหมดทำมาแบบ code as you think มากๆ คือไม่มีแบบแผน ไม่มีโครงสร้าง คิดอะไรได้ก็โค้ดมันตรงนั้นแหละ ซึ่งไม่แนะนำเลยจริงๆ 5555 แต่ในเวลาตอนนั้น สิ่งที่สำคัญคือ มันต้องทำงานสมบูรณ์ที่สุด ก่อนงานจะเริ่ม เพราะฉะนั้นเราจะลืมทุกอย่างทิ้งไปครับ best practice อะไรๆลืมไปได้ลืม คือไม่ใช่ว่าไม่มี มันมีแหละแต่มันก็ไม่ใช่ทุกจุดไง คนเดียวทั้งดีไซน์เว็บ โค้ด front-end ทำคู่กับ back-end ในเจ็ดวัน แถมยังต้องเตรียมเนื้อหาสอนในค่ายอีก ไม่ไหวจริงๆ

Front-end ทั้งหมด ระบบ logic ต่างๆ ด้วย vuejs

สำหรับส่วนการแสดงผลทั้งหมด Front-end ของทั้ง Player และผู้ควบคุม ผมเลือกใช้ Vue.js ในการทำ ด้วยเหตุผลหลักๆเลยคือเคยเขียน Vue.js มาพอสมควรก็พอจะคุ้นเคยกับการทำงาน ความเบาของ Framework ด้วย เพราะเราต้องโฟกัสผู้ใช้หลักคือผู้เล่น ซึ่งใช้มือถือแน่ๆ ส่วน CSS Framework ผมเลือกใช้ Bootstrap 4 เพื่อความ Responsive ของเว็บไซต์ (ฝั่งผู้เล่นอ่ะ Responsive แต่ฝั่งคนคุมอ่ะไม่ ไม่ทัน 5555555) และอีกเหตุผลที่เลือก Vue.js คือ I-OPOLLO (IoT) ค่ายที่ผมเป็น TD อยู่ก็ใช้ Framework ตัวนี้เหมือนกันเพื่อให้ทำงานร่วมกับ Firebase ที่ต่อร่วมกับ Microcontroller ได้ เราจะได้มีตัวอย่างให้น้องค่ายได้ดูแล้วว้าวๆ มีกำลังใจในการโค้ดต่อไป (ได้ผลไหมอ่ะ น้องงงง)

Assigner คือหน้าที่ผู้คุมระบบจะดูข้อมูลผู้เล่นได้แบบ real-time
ปาดดดดดดด เปิดมาดูก็งงว่าโค้ดอะไรไป

ทุกๆอย่างจะเขียนแบบ component ซึ่งมันก็นะ แบ่งบ้างไม่แบ่งบ้าง คง concept เสร็จก่อนค่อยว่ากัน

พูดถึงเรื่องที่กังวล คือไม่กังวลว่า Firebase จะล่มเลย มันไม่ล่มแน่ๆอยู่แล้ว กังวลโค้ดบัคมากกว่า เพราะระบบมันไม่เคยถูกเทสแบบจริงๆจังๆสักที

ก็คือในเวลาที่ All Camp เริ่มขึ้น นั่นคือการรันระบบจริงครั้งแรกนั่นเอง

ท้าทายเวอร์ไหมล่ะ

Deploy มันยันนาทีสุดท้าย

สำหรับที่ Host เว็บก็ไม่ไกลครับ ที่เดียวกับ Database นั่นแหละ ดู URL แล้วคือรู้เลย 55555 ตอนแรกที่แผนจะให้ Custom Domain กับระบบแต่ก็กลับมาที่ข้อเดิมครับ มันไม่ทันแล้วววว

และแน่นอน บัคครับ

  • ถ้าผู้คุม reject คนเล่นในเควสปุ๊ป ผู้เล่นจะติดสถานะ Abort Quest แต่ปิดหน้าต่างเควสไม่ได้
  • บัคที่เวลา Broadcast message ออกไป พอปิดข้อความแล้ว มันยังเด้ง pop-up ออกมาอีกเป็นระยะๆ

หน้าซีดเลยทีเดียวในตอนแรก บัคหน้างานขนาดนี้ คนใช้ระบบอยู่เกือบ 200 คน แต่ด้วยความช่วยเหลือจากเพื่อนๆหลายฝ่ายที่มาช่วยอยู่ตรงโต๊ะคุมระบบ บวกกันกับระบบหลังบ้านที่ดันบังเอิญ บังเอิญจริงๆที่มีตัวแก้บัคพวกนี้ไว้แล้ว (งงเหมือนกันว่าไปโค้ดไว้ตอนไหน) ก็เลยผ่านมาได้แบบเฉียดๆ

มาพูดเรื่องค่าใช้จ่ายกันบ้างดีกว่า

สรุปแล้ว ค่าใช้จ่าย Firebase ในครั้งนี้ตกอยู่ที่….

ขอขอบคุณ GCP Credit 300 USD

0.70 USD หรือตีเป็นเงินไทย ณ ตอนนี้คือแค่ 22.40 บาทไทยเท่านั้น! แถมยังหักจาก GCP Credit 300 USD ที่ได้มาฟรีสำหรับปีแรกอีก คูลเวอร์

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

--

--

Kasidis Chaowvasin
ITForge
Writer for

Full-Stack Web Developer | Photographer | ITKMITL14 | Thriller Series Lover