Firebase + LINE LIFF กับ ความ Realtime บนโรงภาพยนตร์


หลังจากที่ผมใช้เวลางมกับ 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 ไปด้วยซะเลย)

ตั้งลงไปเนียนๆ ก่อนเข้างาน Scan ก่อนนะ!!

Pre-Production : LINE FRONT-END FRAMEWORK

สิ่งที่ผมเอามาใช้งานอีกอย่างนึงก็คือ LINE LIFF ครับ หรือก็คือ Frontend Framework นั่นเอง เพื่อใช้ในการยืนยันตัวตนของ User แต่ละคนที่เข้ามาใน Apps ของเราครับ ซึ่งแผนที่วางไว้คือ หลังจาก User Scan แล้ว ระบบจะสุ่มแบ่งทีมให้ User แต่ละคนโดยอัตโนมัติ จากนั้น จะพร้อมสำหรับการเล่นเกมส์ทันที

“Flow คร่าวๆ น่าจะประมาณนี้แล”

Pre-Production : พระเอกของงาน Firebase Realtime Database

ทีนี้ผมก็ต้องหา Tools ที่ใช้เก็บข้อมูลของแต่ละคน ในที่นี้ก็ตั้งเป้าไว้อยู่แล้วว่า จะใช้ Firebase Realtime Database ครับ เพราะ Platform นี้สามารถแสดงข้อมูลแบบ Realtime ได้ ซึ่งเราจะนำคะแนนรวมของ User ทุกคนในโรงภาพยนตร์ไปขึ้นจอนั่นเอง ก็เลยออกแบบโครงสร้างคร่าวๆ ไว้รูปที่เหน :

ตัวอย่างการเก็บข้อมูลบน Firebase RDB

จากรูปที่เห็นนี้ 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 ที่ใช้ในการ เพิ่มคะแนนในการเขย่าตามนี้เลย

ตัวอย่าง Code ในหน้า User

เอาตรงๆ ว่าผมไม่ค่อยจะมั่นใจเท่าไหร่ ที่ ระบบจะทำงานได้สมบูรณ์แบบมากน้อยแค่ไหน ไม่ว่าการ Loop เพื่อโชว์คะแนนแบบ Realtime เอย มันทำได้เร็วขนาดนั้นมั้ย? อันนี้เป็นคำถามที่ผมก็หาคำตอบไม่ได้เพราะไม่เคยเทส และไม่มี Best Practise ให้ทำตามเท่าไหร่ ก็เลยเน้น Go On เลยละกัน ถ้ามันเจ๊ง ก็คงไปเจ๊งหน้างานนั้นแหละ และนี่คือผลลัพธ์ที่ได้ครับ

แม่ง Realtime กว่าที่คิดมากกกกกกกกกกกกกกกกกกกก นึกว่าจะมีกระตุกหน่อย แต่นี้เลขวิ่งมันส์มาก!!

ผลลัพธ์เป็นที่ประทับใจมากครับ เกมส์สนุก ลูกค้าปลาบปลื้ม ได้รับคำชมเลย บางทีการทำอะไรแบบไม่ต้องยาก แต่มันก็สามารถสนุกได้ครับ สำหรับคนที่สนใจ Source ตัวนี้ เดี๋ยวผม Push ลง Github ให้ครับ (เอาจริงๆ ผมเพิ่งใช้ github เป็นเมื่อวาน โคตรมือใหม่ระดับตำนานนนน!!)

Update : https://github.com/ak3dkung/shake-game


หวังว่า Case Study นี้ จะเป็นประโยชน์ต่อ dev ท่านอื่นที่สนใจในการพัฒนา Realtime Gaming นะครับ