หลังจากที่ผมใช้เวลางมกับ Firebase Realtime Database เป็นระยะเวลาหลายเดือน เพราะผมถือเป็นโปรแกรมเมอร์มือสมัครเล่นสุดๆ ก็ได้มีโอกาสลองใช้งานประสิทธิภาพจริงๆของมันกันซักทีครับ
Pre-Production : วางแผนในหัว
ผมได้รับโจทย์ที่น่าตื่นเต้นจากลูกค้าสั้นๆ ง่ายๆ ว่า “ทำอะไรก็ได้ให้สนุก ในงาน Event ที่จัดในโรงภาพยนตร์ EmQuatier” เป็นโจทย์ที่กว้างแท้ ก็พยายามคิดเกมส์ในรูปแบบต่างๆ ตามศักยภาพที่ตัวเองพอจะทำได้ด้วยตัวคนเดียวครับ จนกระทั่งไปเจอ Sourcecode ตัวนี้ จาก https://qnimate.com/detect-shake-using-javascript/
<script>
var shakeEvent = new Shake({threshold: 15});
shakeEvent.start();
window.addEventListener(‘shake’, function(){
alert(“Shaked”);
}, false);
</script>
ไม่ต้องเข้าใจอะไรยากเลยครับ มันไว้สำหรับ Detect การเขย่า มือถือนั้นเอง ผมก็เลยคิดเกมส์ง่ายๆ ขึ้นมานั่นก็คือ การเขย่ามือถือเก็บคะแนนนั่นเองครับ
Pre-Production : เลือก Platform
และก็มาถึงเรื่อง Platform ที่เราใช้ เอาจริงๆ ผมก็คิดหนักนะ ว่าเราจะทำเป็น WebApps ให้คน Login แล้วเลือกทีมดี หรือจะทำเป็นยังไงดี สุดท้ายผมเลือกใช้ LINE ในการเป็น Platform หลักครับ เพราะว่า LINE เป็นสิ่งที่ User เกือบ 100% มี และพอมี QR Code มาตั้งไว้ สำหรับ User Level 1 หลายๆ คนก็จะเปิด LINE นี่แหละในการ Scan เลยจัดการตั้ง QR Code ไว้หน้าโรง เพื่อ Add Friend LINE ซะเลย (คราวหน้าถ้ามีข่าวประชาสัมพันธ์จะได้ใช้ช่องทางนี้ทำ Notification ไปด้วยซะเลย)
Pre-Production : LINE FRONT-END FRAMEWORK
สิ่งที่ผมเอามาใช้งานอีกอย่างนึงก็คือ LINE LIFF ครับ หรือก็คือ Frontend Framework นั่นเอง เพื่อใช้ในการยืนยันตัวตนของ User แต่ละคนที่เข้ามาใน Apps ของเราครับ ซึ่งแผนที่วางไว้คือ หลังจาก User Scan แล้ว ระบบจะสุ่มแบ่งทีมให้ User แต่ละคนโดยอัตโนมัติ จากนั้น จะพร้อมสำหรับการเล่นเกมส์ทันที
Pre-Production : พระเอกของงาน Firebase Realtime Database
ทีนี้ผมก็ต้องหา Tools ที่ใช้เก็บข้อมูลของแต่ละคน ในที่นี้ก็ตั้งเป้าไว้อยู่แล้วว่า จะใช้ Firebase Realtime Database ครับ เพราะ Platform นี้สามารถแสดงข้อมูลแบบ Realtime ได้ ซึ่งเราจะนำคะแนนรวมของ User ทุกคนในโรงภาพยนตร์ไปขึ้นจอนั่นเอง ก็เลยออกแบบโครงสร้างคร่าวๆ ไว้รูปที่เหน :
จากรูปที่เห็นนี้ Node 1,2,3,4 หมายถึง ทีมแต่ละทีม และในนั้น ก็จะมี Node ที่เป็น ชื่อ UserID ของแต่ละ User และลงไปยัง Sub Node ที่เป็น Score ครับ ในส่วนของ ControlGame ด้านล่าง มีไว้สำหรับการเริ่มเกมส์ครับ เพราะเราจะให้ User ทั้งโรงเขย่าพร้อมกันหมด เราต้องตั้งค่าไว้ว่า ถ้า ตัวแปรตรงนี้เป็น “on” เมื่อไหร่ user สามารถเขย่าได้ แต่ถ้าเป็น Off เขย่าไปคะแนนจะไม่ขึ้นครับ เพื่อกันไม่ให้ user เขย่าก่อนเวลาที่กำหนดนั่นเอง
Production : ได้เวลาลง Code
ด้วยความมือใหม่แบบสุดๆ ของผม ก็ Coding แบบโง่ๆ เลยครับ ความปลอดภัยไม่มี เพราะเป็นงานแทบจะเรียกว่าใช้ครั้งเดียวทิ้ง เลยตั้ง Firebase Rules แบบโง่ๆ คือ read : true, write : true ไปเลย (ห้ามทำตามนะครับ ข้อนี้เป็นข้อที่เลวร้ายมาก ทุกครั้งควรทำ Authen User ในการ Write ข้อมูลเสมอ)
ในส่วนของ LINE ผมใช้ UI ที่แสดงคะแนนส่วนบุคคล และ บนหน้าจอโรงภาพยนตร์ผมใช้ UI ที่เป็นคะแนนรวมของแต่ละทีมครับ
และตัวอย่าง Code ที่ใช้ในการ เพิ่มคะแนนในการเขย่าตามนี้เลย
เอาตรงๆ ว่าผมไม่ค่อยจะมั่นใจเท่าไหร่ ที่ ระบบจะทำงานได้สมบูรณ์แบบมากน้อยแค่ไหน ไม่ว่าการ Loop เพื่อโชว์คะแนนแบบ Realtime เอย มันทำได้เร็วขนาดนั้นมั้ย? อันนี้เป็นคำถามที่ผมก็หาคำตอบไม่ได้เพราะไม่เคยเทส และไม่มี Best Practise ให้ทำตามเท่าไหร่ ก็เลยเน้น Go On เลยละกัน ถ้ามันเจ๊ง ก็คงไปเจ๊งหน้างานนั้นแหละ และนี่คือผลลัพธ์ที่ได้ครับ
ผลลัพธ์เป็นที่ประทับใจมากครับ เกมส์สนุก ลูกค้าปลาบปลื้ม ได้รับคำชมเลย บางทีการทำอะไรแบบไม่ต้องยาก แต่มันก็สามารถสนุกได้ครับ สำหรับคนที่สนใจ Source ตัวนี้ เดี๋ยวผม Push ลง Github ให้ครับ (เอาจริงๆ ผมเพิ่งใช้ github เป็นเมื่อวาน โคตรมือใหม่ระดับตำนานนนน!!)
หวังว่า Case Study นี้ จะเป็นประโยชน์ต่อ dev ท่านอื่นที่สนใจในการพัฒนา Realtime Gaming นะครับ
