บันทึกการพัฒนาเว็บ ELECT Live!
เว็บไซต์ ELECT Live! (opens new window) เป็นเว็บไซต์ที่ให้ผู้ใช้ติดตามผลการนับคะแนนเลือกตั้งได้แบบเรียลไทม์ เราตั้งใจทำให้เป็นอีกหนึ่งแพลตฟอร์ม ที่หวังจะอำนวยความสะดวกให้คนไทยมีอีกหนึ่งช่องทางในการรับข้อมูลข่าวสารเกี่ยวกับการเลือกตั้ง
เว็บไซต์นี้เกิดขึ้นจากทีม Developer และ Designer หลายคน จากที่ต่างๆ อาสามาร่วมกันพัฒนาโดยไม่มีค่าตอบแทนใดๆ ใช้เวลาพัฒนาเพียง 8 วันก่อนการเลือกตั้ง (ซึ่งเป็นเวลาส่วนตัวของอาสาสมัคร ไม่ใช่งานแบบ Full-time)
เราพัฒนาเว็บนี้กันแบบโอเพนซอร์ซ โดยมีการวางระบบการทำงาน เพื่อให้ทุกคนสามารถเข้ามาร่วมพัฒนาได้ ถึงแม้ไม่ได้อยู่ในทีมงานหลัก จนมีอาสาสมัครมาร่วมพัฒนาเว็บเรากว่า 20 คน (opens new window) และสามารถปิด issue ได้กว่า 100 issue (opens new window) ภายในเวลา 8 วัน โดยสามารถเข้าไปดูโค้ดได้ที่โปรเจกต์ codeforthailand/election-live (opens new window) บน GitHub
ในวันที่ 24 มีนาคม 2562 เว็บ ELECT Live! สามารถรองรับผู้ใช้ 100,000 คนที่เข้ามาใช้ในเวลาพร้อมกัน รวมผู้ใช้กว่า 1.5 ล้านคนในวันนั้น
มีหลายเรื่องที่เราอยากจะเล่าเกี่ยวกับการพัฒนาเว็บนี้ บันทึกนี้จึงแบ่งเป็นหลายๆ หัวข้อย่อย
Overview
Setting up the project for success
- เห็นภาพเดียวกันถึงแม้ไม่ได้อยู่ที่เดียวกัน ด้วยการ Wireframe และ Visualize กันบน Freehand
- อย่าลืมสำรวจผู้ใช้ก่อนเริ่มพัฒนา
- ออกแบบเว็บแบบ Mobile-first ไม่ต้องทำงานซ้ำสอง
- ทำ MVP ทีละหน้า แทนที่จะแบ่งหน้ากันทำแล้วอาจจะไม่เสร็จสักหน้า
- เลือกใช้ Gatsby เพราะจะได้เอาเวลามาพัฒนาเว็บ ไม่ใช่มานั่งเซ็ตอัพ webpack, Babel, React Router, ฯลฯ
- ทำให้ทุกคนเขียนโค้ดเป็นสไตล์เดียวกันโดยอัตโนมัติด้วย Prettier, Husky และ lint-staged
- ทดสอบโค้ดของคนอื่นโดยไม่ต้อง Checkout มารันเองด้วย Netlify
- แบ่งงานใหญ่ๆ เป็นงานย่อยๆ ด้วย Puzzle-Driven Development
- เตรียมโปรเจกต์ให้คนจากภายนอกสามารถมาร่วม Contribute ได้
- เตรียมรับ Traffic เยอะๆ ด้วย Static files และกลยุทธ์ caching
- ได้ดีไซน์มาอย่าเพิ่งรีบโค้ดทันที มาตั้งชื่อกันก่อน
- แบ่งคอมโพเนนต์ย่อยๆ ยังไงให้ทำงานไปพร้อมๆ กันได้โดยไม่เสียภาพรวมงาน
Engineering and development
Operations and preparing for potential problems
- สร้าง Control Panel อย่างด่วนๆ ด้วย Google Sheets
- คอมโพเนนต์เกิดปัญหาอย่าให้มันพังทั้งหน้า ใส่ ErrorBoundary กันไว้ด้วย
- ทำไมเราถึงรับ Traffic ทั้งหมดด้วยเครื่องเดียว ไม่ใช้พวก Firebase/S3/Google Cloud Storage หรือพวกระบบเก็บข้อมูลที่มัน Auto-scale ได้
- ถ้าปล่อยให้ทุกคนปล่อยเวอร์ชั่นใหม่กันเอง สับสนแน่นอน สร้างบอท ChatOps มาทำหน้าที่ Release manager แทนคนดีกว่า