หลังจากทาง Facebook ได้เปิดตัว Celebrate Pride ไปนั้น
เป็นเครื่องมือที่ให้ผู้ใช้งานสามารถใส่ filter สายรุ้งในรูป profile ได้
ซึ่งพบว่ามีผู้ใช้งานกว่า 26 ล้านคนเข้ามาใช้งาน
และมีการ interact กับรูป profile เหล่านั้นกว่า 500 ล้าน
เช่น กด like, share และ comment เป็นต้น
ดังนั้นมาดูกันหน่อยว่าเครื่องมือนี้สร้างกันอย่างไร ?
ที่มา :: 72 hours to launch Celebrate Pride
เริ่มต้นของ project
มาจากเด็กฝึกงาน 2 คนเริ่มทำในงาน hackathon เพื่อสร้าง filter สำหรับรูปภาพ
เพื่อให้พนักงานภายในใช้งานกัน
ซึ่งมีแรงบันดาลใจมาจาก Price flags
จึงได้ลองสร้าง filter นี้ขึ้นมาเพื่อใช้กันภายใน และได้รับความนิยมพนักงาน facebook เองด้วย
ดังนั้นจึงตัดสินใจเปิดให้ใช้แบบ public กันทั่วโลก
ในทีมประกอบไปด้วย 2 คนแรก และเพิ่ม Designer และ PM มาในทีม
โดยทีมงานเล็กๆ นี้จะต้องทำให้ทันช่วงวันหยุด เพราะว่าจะมี Pride event นั่นเอง
ดังนั้นทีมงานจึงมาเวลาน้อยมากๆ
สิ่งที่ทีมจะต้องทำมันจึงต้องเรียบง่าย และ รวดเร็ว
แน่นอนว่า ผู้ใช้งานต้องสามารถใช้ง่ายด้วย
ดังนั้นเครื่องมือจึงเป็นแบบ single view ซึ่งในหน้าประกอบไปด้วย
- ส่วนการ preview รูปเมื่อใส่ rainbow filter
- มีช่องใส่ข้อความ
- มีปุ่มสำหรับ update รูป profile
แสดงดังรูป
เทคนิคที่ใช้ในการพัฒนา
จะใช้เพียง CSS เท่านั้น ในการแสดงตัวอย่างของรูปเมื่อใส่ filter
และจะทำการ process รูปจริงๆ เมื่อกดปุ่มเพื่อใช้งานเท่านั้น
ทำให้ code ในหน้านี้น้อย และ ทำงานเร็วมากๆ
โดยในการวางแผนนั้นจะทำทั้ง Desktop และ Mobile
ซึ่งทางทีมคาดไว้แล้วว่า ผู้ใช้งานผ่าน mobile จะสูงมากๆ
และผลที่ได้ก็เป็นไปอย่างที่คิด
ในการพัฒนาจะเริ่มสำหรับ desktop ก่อน
แล้วจึงนำ code เหล่านั้นมาใช้กับ Mobile ต่อไป
ซึ่งใช้เวลาในการพัฒนาเพียงไม่กี่ชั่วโมงสำหรับ Mobile
รวมระยะเวลาในการพัฒนาจนถึงการ release ใช้เวลาไป 72 ชั่วโมง !!
มาดูสถิติหลังจากการเปิดใช้งาน
เมื่อเปิดใช้งานทางทีมงานจะมีรายงานเพื่อดูประสิทธิภาพของระบบ
ซึ่งพบว่ามีอัตราความผิดพลาดที่สูง แสดงดังรูป
คำอธิบาย
- เส้นสีน้ำเงิน คือ จำนวน request ของการ update รูป profile
- เส้นสีแดง คือ จำนาน request ที่ทำงานสำเร็จ
จะพบว่าในช่วงแรกๆ ช่องว่างระหว่างทั้งสองเส้นมันห่างกันมาก
นั่นแสดงว่าระบบมีความผิดพลาดสูงมากๆ
เมื่อมาดูที่ปัญหาก็พบว่า
รูป profile ที่ทำงานไม่สำเร็จมันใหญ่มากคือ 2048 x 2048 ขึ้นไป !!
ดังนั้นเมื่อนำรูปมาใส่ filter ด้วย image processing แล้ว
ต้องใช้เวลาในการทำงานถึง Big O (n^2) เลย
หมายถึงว่า ในการ process แต่ละรูปต้องทำงานถึง 4 ล้านรอบตามจำนวน pixel นั่นเอง
ส่งผลให้ process มัน time out !!!
การแก้ไขก็ง่ายมากๆ คือ
เปลี่ยนไปใช้รูป profile เล็กๆ สิ
เท่านั้นปัญหาลดลงไปอย่างมาก หรือเกือบจะหายไปเลย
คุณได้เห็นอะไรจากการสร้าง Celebrate Pride ของ Facebook บ้าง ?
