By ช่วงนี้น้องๆ ม.6 จะเริ่มรู้ผลกันแล้วว่าตัวเองติดมหาวิทยาลัยไหน ทาง Skooldio เองก็มีแอป TCASter ซึ่งเป็นแอปที่ช่วยให้น้องๆ ค้นหาคณะที่อยากเรียนในระบบ TCAS และเตรียมตัวสอบได้ง่ายยิ่งขึ้น เพื่อร่วมแสดงความยินดีกับน้องๆ ทีมเลยตกลงกันว่าอยากทำฟีเจอร์ให้น้องๆ แชร์ได้ว่าตัวเองติดคณะไหน
เพื่อให้การแชร์บน Social media สนุกสนาน ทีมเลยตั้งใจว่าอยากให้รูปที่น้องแชร์ personalized สำหรับน้องแต่ละคน โดยออกแบบให้ในภาพ มีชื่อน้อง ชื่อคณะและมหาวิทยาลัยที่ได้เข้าศึกษาต่อ นอกจากนี้น้องๆ ยังเลือกแปะข้อความเก๋ๆ และสติ๊กเกอร์ตัวละครจาก TCASter ได้อีกด้วย
การจะสร้างหน้าเว็บสำหรับแชร์บน Social Media นั้น เราจำเป็นที่จะต้องใส่ Sharing Metadata ต่างๆ เช่น og:title, og:description, og:image เพื่อให้ Facebook หรือ Twitter สร้างเป็นโพสต์ที่แสดงผลได้แบบสวยๆ แต่เนื่องจากตัวเว็บ TCASter เป็น Single Page Application (SPA) ทำให้เราไม่สามารถใส่ข้อมูลพวกนี้ไปบนหน้าเว็บจนกว่า JavaScript จะทำงานเสร็จเรียบร้อย เราจึงต้องหาตัวช่วยอื่นๆ มาช่วยแก้ปัญหา เลยเป็นที่มาของบล็อกโพสต์อันนี้
Table of Contents
สร้าง Workflow ด้วย Firebase
เราได้เลือกใช้ Firebase เป็นตัวช่วย เนื่องจากเป็นงานด่วนงานเร่ง มีเวลาทำ 3 วันถ้วน โดยฟีเจอร์สองตัวหลักๆ ที่จะใช้คือ Firestore และ Cloud Function
Flow การทำงานเริ่มจากตัวเว็บส่งข้อมูลเด็กสอบติดไปเก็บไว้ใน Firestore ทันทีที่มีการส่งข้อมูลใหม่ขึ้นไป Cloud Function ที่รอรับ onCreate event จาก Firestore ก็จะถูกเรียกใช้งาน โดย Cloud Function จะนำข้อมูลไปสร้างรูปภาพ (รายละเอียดในหัวข้อถัดไป) และ Static HTML ออกมา และอัพโหลดไปยัง Storage
เมื่อได้ URL ของ รูปภาพ และ Static HTML หลังจากที่การอัพโหลดเสร็จสิ้นแล้ว เราก็จะเอาข้อมูล URL กลับไปอัพเดทใน Firestore document เดิมอีกที ทางฝั่งเว็บก็สามารถนำรูปภาพมาแสดง และให้ผู้ใช้งานแชร์ URL ของ Static HTML ที่มีข้อมูล Sharing Metadata เรียบร้อยแล้ว ไปยัง Social Media Platform ต่างๆ ได้
Customize รูปภาพง่ายๆ ด้วย Image Magick
เราเลือกใช้ Image Magick เพราะได้รับการติดตั้งมากับ Google Cloud Function อยู่แล้ว เวลาจะเรียกใช้ก็สามารถเรียกผ่าน Child Process Spawn ตามตัวอย่างด้านล่างนี้ได้เลย
โดยการใช้ Image Magick ในส่วนนี้ เราจะเอารูปภาพหลายๆ รูปมาวางซ้อนกันแบบ Photoshop Layer (composite)ในส่วนของข้อความก็สามารถเลือกใช้ฟอนต์ได้ตามความต้องการเลย
สร้าง HTML เร็วๆ ด้วย Squirrelly
เพื่อที่จะให้ได้ Sharing Metadata ต่างๆ ของเด็กสอบติดแต่ละคน เราเลยต้องหาตัว HTML Template Generator มา โดยทีมเราเลือกใช้ Squirrelly เพราะค่อนข้างง่ายสำหรับการใช้งานของเรา
ประกอบร่าง Cloud Function
เมื่อเราสามารถ Customize รูปภาพ และสร้าง Static HTML ที่มี Sharing Metadata ได้แล้ว ก็ถึงเวลาเขียน Firebase Cloud Function เพื่อ subscribe onCreate event จาก Firestore และนำข้อมูลไปประมวลผล
ด้านฝั่งเว็บ ก็จะมีการ subscribe ข้อมูลจาก Firestore เช่นกัน เพื่ออัพเดท UI หลังจากที่เราอัพโหลดรูปภาพ และ Static HTML เสร็จ และมีการอัพเดท URL เรียบร้อยแล้ว
The devil is in the detail
ปัญหาใหญ่ที่สุดปัญหาหนึ่งของโปรเจคนี้ ไม่ใช่เรื่องการการออกแบบระบบ แต่เป็นเรื่องของการตัดคำให้ออกมาสวยงาม ซึ่งในกรณีนี้เราพบว่ามีชื่อคณะหลายๆ คณะที่ค่อนข้างยาวมาก (ส่วนหนึ่งเป็นปัญหาจากคุณภาพข้อมูลในระบบ แต่เนื่องจากประเทศนี้ไม่มี Open Data ให้เราใช้ 🙄 ให้มนุษย์นั่งกรอก มันก็จะได้แค่ประมาณนี้)
เนื่อง Image Magick ไม่สามารถตัดประโยคภาษาไทย(ที่ไม่มีเว้นวรรค)ได้ เราจึงต้องเลือกหาทางตัดคำให้เหมาะสมกับข้อมูล โดยไล่ดูข้อมูลชื่อคณะที่ยาวๆ และคิด Heuristics ง่ายๆ ขึ้นมา เพื่อใช้ในการตัดคำ (เช่น ตัดคำหน้าคำว่า “และ”)
หลังจากที่ตัดคำได้เรียบร้อย ก็จะต้องมีการปรับตำแหน่งการแสดงผล (1 บรรทัด vs. 2 บรรทัด) และปรับขนาดฟอนต์ให้เหมาะสม
ได้ของครบแล้ว ถ้าท้ายสุดแชร์แล้วรูปไม่ขึ้นก็เสียเปล่า ทาง Facebook และ Twitter มีเครื่องมือในการตรวจสอบผลการแชร์อยู่แล้ว เพียงแค่เอาเว็บที่อยากแชร์ไปวางก็จะเห็นว่ามันออกมาหน้าตาอย่างไร (ตรวจสอบได้ที่ Facebook Sharing Debugger กับ Twitter Card Validator)
ส่งท้าย
และทั้งหมดนี้ ก็คือเบื้องหลังของฟีเจอร์สนุกๆ อันนี้ที่ทีมใช้เวลาปลุกปั้นกันอยู่แค่เพียงไม่กี่วันเท่านั้น เดี๋ยวนี้มีเครื่องมือมากมายให้นักพัฒนาได้เลือกใช้ เพียงแค่เราเลือกใช้ของให้เหมาะสมกับการใช้งาน งานยากๆ ก็ง่ายขึ้นได้ทันตาเห็น หวังว่าบล็อกนี้จะช่วยสร้างแรงบันดาลใจให้เพื่อนๆ นักพัฒนาทำอะไรสนุกๆ กันออกมามากขึ้นครับ 😀
ใครอยากทำอะไรสนุกๆ แบบนี้ ทีม Skooldio กำลังเปิดรับสมาชิกใหม่เยอะมากกกก ส่ง resume ของคุณมาได้ที่ people@skooldio.com ใครที่ยังอยากรู้จักพวกเรามากขึ้นอีก ลองติดตามอ่านบล็อก Life at Skooldio ของพวกเราได้เลย
