[Dev Story] อยากทำเว็บ ที่ส่งและแสดงข้อความได้แบบ Real Time ใช้ Firebase สิ มันดี

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

Made with Alisa

วิเคราะห์กันก่อน

อยากได้อะไรซักอย่างที่สามารถให้คนหลาย ๆ คน ส่งข้อความเข้ามาพร้อม ๆ กันได้ และมีส่วนที่แสดงข้อความเหล่านั้นด้วย ซึ่งทั้งหมดนี้ จะต้องทำงานได้แบบ Real Time

อันที่จริงแล้ว ความสามารถประมาณนี้ พวก kahoot.it หรือ Slido ก็ทำได้ เพียงแต่ว่า ค่าใช้จ่ายแบบ One Time มันแรงไปหน่อย จึงต้องมองหา Alternative Solution กัน จนสุดท้าย ตกผลึกกันว่า เราจะทำใช้งานเองก่อน แล้วค่อยต่อยอดไปเรื่อย ๆ เพื่อให้มันคุ้มค่ากับการลงมือทำ

เมื่อตกลงกันแล้วว่าจะทำเอง เราก็ต้องมาเลือก Tool และ Stackที่จะใช้กัน แน่นอนว่ามันล็อคอยู่แล้วว่าต้อง Firebase อยู่แล้ว

สาเหตุที่เลือกใช้ Firebase ก็คือ

1. มี Web Hosting ให้เราใช้รันตัว Web ได้
2. มี Firestore ให้เราใช้ความสามารถ Real Time Messaging ได้
3. ทำ Auth ได้ในตัว
4. ต่อกับ Analytics ง่าย
5. ต่อ CI/CD กับ GitHub ได้ในไม่กี่ Enter
6. เมื่อคำนวนแล้ว ฟรี แน่ ๆ (ไม่รวมค่าแรงคนทำนะ)

ส่วน Stack ที่เลือก ก็คือ

1. Plain HTML + Vanilla JS เนื่องจาก ถ้าต้องมาเสียเวลานั่งทำพวก SPA มันใช้เวลาประมาณนึงในการเริ่มทำ
2. ใช้ Transition API เพื่อให้เว็บมันไม่แข็งไป
3. Bootstrap เพราะทำได้ไวกว่า (มันมีของสำเร็จให้ใช้มากกว่าในตัวมันเอง)
4. เตรียม Implement ตัว Built-in AI on Chrome

ลงมือทำ

คำเตือน ไม่มีตัวอย่าง Code นะ อธิบายอย่างเดียว

เริ่มจาก เตรียม Repo บน GitHub อันนี้จำเป็นต้องเป็น Private ไม่สามารถเปิดได้

ต่อมาก็เป็น Firebase Project โดยเลือกให้มันต่อกับ Analytic ไปเลย เพราะวางแผนจะใช้อยู่แล้ว

จุดสำคัญต่อมาคือ Terminal เราก็เลือก ๆ ไป จุดสำคัญคือให้มันทำ GitHub Actions ให้เราเลย ไม่ต้องเสียเวลาทำเอง แต่ก็ต้องมีโมอะไรนิด ๆ หน่อย ๆ ซึ่งไม่ยาก

จากนั้น ก็ลงมือเขียน Code ได้ ระบบ มีแค่ 2 หน้า คือ หน้าสำหรับ Post Message และ Display Message แค่นั้นแหละ

แน่นอนว่าเราจะต้องมีการทำ Security Rule ให้กับตัว Firestore ด้วย โดยเราจะอนุญาตเฉพาะ Request ที่มี auth เท่านั้น และในฝั่ง Post Message เราจะทำแบบ Anonymous ส่วนฝั่ง Display Message ในตอนนี้ จะใช้แค่ Anonymous ไปก่อน แล้วหลังจากนี้ ค่อยทำ Custom Claims เพิ่ม เพื่อที่จะได้จำกัดความสามารถนี้

ในด้านการแสดงผล เราเลือกใช้ Transition API ที่ถึงแม้จะยังไม่ Full support กับ Browser ทุกตัว แต่ก็ใช้ได้แล้ว

สิ่งที่ได้เรียนรู้ในระหว่างทาง

Firestore มันมีวิธีดี ๆ ในการใช้งาน และถ้าเลือกวิธีดี ๆ ให้เหมาะกับสถาณการณ์ มันช่วยลดการใช้ Quota ได้

Anonymous Auth มันดีในหลาย ๆ สถานะการณ์

Safari แม่ง พมต

Realtime Analytics ถ้าออกแบบวิธีเก็บข้อมูลดี ๆ มันช่วยได้ดีมาก

ตอนใช้งานจริง มันทำงานได้ในแบบที่คาดไว้จริง ๆ ซึ่ง Firebase ทำได้ดีในจุดนี้

สรุป Firebase มันดี ถ้าใช้เป็น

References

View Transitions API - Web APIs | MDN

Smooth transitions with the View Transition API | View Transitions | Chrome for Developers

Built-in AI | AI on Chrome | Chrome for Developers

Prompt

/img Group of diverse people using digital devices laptops smartphones realtime messaging chat bubbles emojis notification icons abstract and colorful background representing the concept of realtime communication 8k resolution concept art masterpiece highdefinition--wh 16:9 --seed 1905567517