Blog: บันทึกเบื้องหลังโปรเจกต์เว็บไซต์ BNK48 Janken Tournament 2023 Social Media Report

โปรเจกต์พิเศษที่ทำให้การลุ้นผล BNK48 Janken Tournament พิเศษไปอีกขั้นนึง ที่นอกจากจะต้องลุ้นผลแพ้ชนะแล้ว ยังต้องลุ้นให้เว็บไซต์ทำงานได้ตามปกติอีกด้วย

ลิงก์โปรเจกต์: https://withmywish.com/bnk48-janken-report/

จุดเริ่มต้น

ส่วนตัวเป็นแฟนคลับคนหนึ่งที่ติดตามทั้ง BNK48 และ CGM48 อยู่แล้ว และเห็นว่าฝั่งสมาคมผู้ปกครองซีจีเอ็ม (ชื่อเรียกแฟนคลับ CGM48) เค้ามีทำเว็บไซต์ที่ Support Community ของแฟนคลับกันเอง อย่าง Handshake Planner วางแผนงานจับมือ ของบ้าน Sitagram หรือ Matsuri Planner วางแผนงานมัตสึริ ของเว็บสมาคมผู้ปกครองซีจีเอ็ม ที่เป็นการร่วมมือกันจาก 3 บ้านแฟนคลับ ทีนี้ พอรู้ว่าจะมีงานจังเก้น ในหัวเราก็มีแพลนว่าอยากทำเว็บ Live Report ของอีเวนท์จังเก้นดูบ้าง เพื่อที่จะเป็นส่วนเล็กๆ ที่มา Support Community นี้

จับสายการแข่งขัน

วันไลฟ์จับสายการแข่งขัน อยู่ดีๆ ดูไลฟ์อยู่ เราดันอยากลองทำ Live Report ผลการจับสายดูแบบ Realtime โดยวันนั้นคือไม่ได้เตรียมอะไรเลย บทความคือกด Add New สร้างใหม่ระหว่างไลฟ์

สิ่งที่ได้คือ รู้เลยว่างาน Realtime มันเหนื่อย เพราะวันนั้นขนาดเราแค่ดูไลฟ์แล้วพิมพ์ชื่อเมมเบอร์ตาม คือยังทำไม่ทันหรือหลุดไปเลย ต้องมาเก็บข้อมูลจาก Twitter ตามหลังเอาอีกที


เริ่มต้นโปรเจกต์เว็บรายงานผล

หลังจากผลจับคู่ออกมาแล้ว เราก็คือใช้เวลาว่างจากงานมานั่งทำโปรเจกต์นี้ โดยโจทย์ที่เราวางไว้คือเว็บรายงานผล ที่อยากแก้ Pain Point จากปีก่อนหน้าที่เราดูไลฟ์นะ แต่เราไม่รู้ว่ามีเมมเบอร์ไหนที่ชนะไปแล้วบ้าง แล้วรอบต่อไปเค้าต้องไปเจอกับใครต่อ

โจทย์แรกที่ตั้งไว้คือ ต้องดูแล้วเข้าใจง่าย ซึ่งอันนี้เรามี Case Study จากบทความจับสายการแข่งขันจังเก้น ที่เราได้ลองผิดลองถูกจนได้ออกมาเป็นตารางรายชื่อที่รู้สึกว่าดูแล้วเข้าใจง่ายที่สุด

ตอนแรกจะใช้สีในการบอกผู้ชนะ-แพ้ แต่ลองทำดูแล้วมันรู้สึกดูยากจนเกินไป เราจึงเพิ่มคอลัมน์ผู้ชนะแยกไปเลยให้ชัดเจนกว่า แต่ก็ต้องแลกมากับตัวหนังสือที่ต้องเล็กลงกับข้อความ vs. ที่หายไปอีกด้วย

โจทย์ต่อมาคือ หลังบ้านต้องอัปเดตได้ง่ายและสะดวก เราเลยเลือกใช้ Google Sheet ในการอัปเดตข้อมูล ซึ่งตอบโจทย์ สามารถอัปเดตผ่านแอปในมือถือได้ หรือในคอมพิวเตอร์ก็ได้ และที่ตอบโจทย์อีกคือ เราสามารถเชื่อม Cell ให้มันแสดงผลผู้ชนะ และเอาผู้ชนะมาแสดงผลในรอบถัดๆ ไป ได้เลย คือดี!

โจทย์สุดท้ายคือ หน้าเว็บไซต์ต้องอัปเดตเรียลไทม์ได้โดยไม่ต้องรีเฟรชหน้าจอแบบเว็บรายงานผลการเลือกตั้ง ซึ่งเราใช้วิธีในการดึงข้อมูลจาก Google Sheet ทุกๆ 2 นาที แล้วนำไปแสดงในหน้าเว็บไซต์

ปรับดีไซน์กับเพิ่มหน้าในวันสุดท้าย

หลังจากวางระบบกับดีไซน์เว็บไซต์จนเสร็จระดับนึงแล้ว แต่ก็ยังรู้สึกแปลกๆ จึงไปปรึกษาขอคำแนะนำกับพี่พี @happywindz ที่เป็นคนทำเว็บไซต์แฟนคลับคิมแจฮวาน kjh-windpark.com ซึ่งต้องขอบคุณพี่พีที่แนะนำเรื่องการปรับเลย์เอ้าท์บางจุดมาให้ รวมถึงเสนอให้เพิ่มตารางสรุปเซ็มบัตสึขึ้นมาอีกอันนึง ซึ่งทางนี้ก็เห็นด้วยเลยทำระบบสรุปเพิ่มขึ้นมา แต่ด้วยข้อจำกัดดีไซน์เลยทำเป็นแท็บแยกระหว่างหน้ารายงานผล กับแท็บหน้าสรุปผลเซ็มบัตสึแทน ซึ่งสุดท้ายกลายเป็นหน้ายอดฮิตในการแคปหน้าจอเลย


ทำระบบพร้อมแล้ว อ้าว! งานจังเก้นไม่มีไลฟ์

แพลนที่เราวางไว้ตั้งแต่ต้นคือ เราดูไลฟ์จังเก้นแล้วอัปเดตผลเรียลไทม์เลย แต่ว่าปีนี้งานจังเก้นไม่มีไลฟ์ และเราไม่ได้ไปงานจังเก้นด้วยเหตุผลบางประการ ทำให้เราปรับการรายงานผลเป็นรูปแบบ Social Media Report ที่เราจะรวมเอาข้อมูลผลแพ้ชนะจากคนที่ไปงานจริงๆ มาใส่แทน


วันงานจริง เริ่มรายงานผล

หลังจากที่ PR ไปในทวิตเตอร์ผ่าน #BNK48JankenTournament2023 ช่วง 5 ทุ่มวันเสาร์ ก่อนงานเริ่มไม่ถึง 16 ชั่วโมง แต่ผลการตอบรับมากเกินคาด ด้วยเพราะงานจังเก้นมีแฟนคลับสนใจเยอะ แต่ไม่มีไลฟ์ จนหวั่นๆ ว่า เว็บไซต์จะล่มตอนใช้งานจริง จนถึงขนาดเตรียมเว็บสำรองไว้เผื่อฉุกเฉินอีกด้วย

ส่วนผลแพ้ชนะ หลังจากเริ่มมีรายงานมาในทวิตเตอร์ เราก็บันทึกข้อมูลรายงานผลทันที ทุกอย่างเป็นไปตามปกติ รวมถึงระหว่างนี้ก็คือมอนิเตอร์ตัวเว็บไซต์ไปด้วยว่ายังใช้งานได้ตามปกติไหม ซึ่งต้องลุ้นทั้งผลแพ้ชนะ ลุ้นทั้งเว็บไซต์ใช้งานได้ปกติไหม ตื่นเต้นหนักกว่าเชียร์ปกติอีกเดิมอีก (ฮา)

ระหว่างที่เรามอนิเตอร์ทวิตเตอร์อยู่ ก็เห็นทวิตที่เป็นการแคปรูปภาพจากหน้าเว็บไซต์รายงานผลในแท็กอย่างเป็นระยะๆ ตลอดเวลา อย่างที่แมสหน่อยก็เป็นทวิตของน้องพาแว ที่เราแอบสงสัยอยู่ว่าเว็บไซต์เราไปถึงนั่นได้ยังไง และมีหลายทวิตด้วยนะ

https://twitter.com/nongpawhere/status/1644998350939492354

แต่สุดท้ายก็มีปัญหาจนได้ เราเชื่อม Cell ของ Google Sheet ที่เป็นหลังบ้านไว้ผิดช่อง ทำให้รอบ Semi Final เว็บไซต์แสดงผลผิด ซึ่งเรารีบแก้ให้ถูกและรีบทวิตขอโทษพร้อมแจ้งรายการที่ถูกต้อง ถึงแม้ระบบจะอัปเดตเมมเบอร์ทุก 2 นาทีก็ตาม แต่ว่ารูปตารางที่ผิดนั้นถูกแคปลงทวิตและกลายเป็นดิจิทัลฟุตปริ้นไปแล้วเรียบร้อย

Stat Realtime ใน Google Analytics ที่เรา Monitor ตลอดเวลา มีจำนวนคนเข้าเว็บไซต์สูงกว่าที่เราคาดไว้มากๆ โดยในการแข่งขันช่วง Semi-Final จนถึง Final เป็นช่วงที่มีผู้ใช้งานเยอะที่สุด

สุดท้าย ถึงแม้จะมีปัญหาบ้าง แต่ในที่สุดแล้วยังสามารถรายงานผลจังเก้นได้จนจบ และครบทุกคู่การแข่งขัน


โมเมนต์หลังรายงานผล

หลังงานจบแล้ว ก็ยังมีอีกโมเมนต์ที่ทำให้รู้สึกภูมิใจกับงานชิ้นนี้อีกคือ Angel CGM48 ที่เป็นผู้ชนะ Janken Queen และเป็นหนึ่งในคนที่เราเชียร์และลุ้นผลสุดๆ ได้เห็น(ส่วนนึงของ)เว็บไซต์เราด้วย และแชร์ลงใน IG Stories ของตัวเอง

และอาจเป็นความบังเอิญที่เราใช้ผลชนะเป็นโทนสีเขียว ที่ดันเข้ากับสีเขียวมินต์ของ CGM48 ด้วย จนพี่พีแซวว่า เธอทำนายผลมาแล้วแน่ๆ แต่นี่ตอบกลับไปว่าอาจจะเป็นผลบุญที่ทำเว็บไซต์รายงานผลอันนี้ก็ได้นะ (ฮา) แต่ก็เสียดายที่ฟอร์จูนที่เป็นอีกหนึ่งคนที่เราเชียร์ไม่ได้ติดเซ็มบัตสึไปด้วยกัน


ส่งท้ายโปรเจกต์

เว็บไซต์นี้เป็นอีกโปรเจกต์ที่ได้ลองทำอะไรใหม่ๆ สนุกกับการทำงาน รู้สึกภูมิใจและประทับใจที่งานที่เราทำได้เป็นส่วนหนึ่งที่ Support Community นี้จริงๆ

ขอบคุณรายงานผลจากทุกคนในแท็ก #BNK48JankenTournament2023 ในทวิตเตอร์ด้วยเช่นกัน ถ้าขาดข้อมูลรายงานผลจากในแท็กไป เราก็รายงานผลในเว็บไซต์ไม่ได้เช่นเดียวกัน

ขอบคุณทุกความสนใจ ทุกการรีทวิต ทุกการแชร์ และทุกคำติชม กับ Special Project ชิ้นนี้ด้วย

สำหรับงานจังเก้นครั้งหน้า หวังว่า อฟช. จะมีรายงานผลเรียลไทม์กับเค้าบ้างนะ