ติดแล้ว..บอกต่อ – ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว

ช่วงนี้น้องๆ ม.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 จะทำงานเสร็จเรียบร้อย เราจึงต้องหาตัวช่วยอื่นๆ มาช่วยแก้ปัญหา เลยเป็นที่มาของบล็อกโพสต์อันนี้

ตัวอย่าง Sharing Metadata og:title = Mastering Web Development with React, og:description = เรียนรู้ React library และหัวข้อที่เกี่ยวข้อง…, og:image = url ของรูป

สร้าง Workflow ด้วย Firebase

เราได้เลือกใช้ Firebase เป็นตัวช่วย เนื่องจากเป็นงานด่วนงานเร่ง มีเวลาทำ 3 วันถ้วน โดยฟีเจอร์สองตัวหลักๆ ที่จะใช้คือ Firestore และ Cloud Function

Flow การทำงานของฟีเจอร์นี้

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)ในส่วนของข้อความก็สามารถเลือกใช้ฟอนต์ได้ตามความต้องการเลย

มองทุกอย่างเป็น Layer

สร้าง HTML เร็วๆ ด้วย Squirrelly

เพื่อที่จะให้ได้ Sharing Metadata ต่างๆ ของเด็กสอบติดแต่ละคน เราเลยต้องหาตัว HTML Template Generator มา โดยทีมเราเลือกใช้ Squirrelly เพราะค่อนข้างง่ายสำหรับการใช้งานของเรา

ตัวอย่าง HTML Template
ตัวอย่างการใช้ Squirrelly ในการสร้างหน้า Static HTML จาก Template ที่เตรียมไว้

ประกอบร่าง Cloud Function

เมื่อเราสามารถ Customize รูปภาพ และสร้าง Static HTML ที่มี Sharing Metadata ได้แล้ว ก็ถึงเวลาเขียน Firebase Cloud Function เพื่อ subscribe onCreate event จาก Firestore และนำข้อมูลไปประมวลผล

ตัวอย่าง Cloud Function ที่ subscribe onCreate event จาก FireStore

ด้านฝั่งเว็บ ก็จะมีการ subscribe ข้อมูลจาก Firestore เช่นกัน เพื่ออัพเดท UI หลังจากที่เราอัพโหลดรูปภาพ และ Static HTML เสร็จ และมีการอัพเดท URL เรียบร้อยแล้ว

ตัวอย่าง Component ทางฝั่ง Web ในการเชื่อมต่อข้อมูล

The devil is in the detail

ปัญหาใหญ่ที่สุดปัญหาหนึ่งของโปรเจคนี้ ไม่ใช่เรื่องการการออกแบบระบบ แต่เป็นเรื่องของการตัดคำให้ออกมาสวยงาม ซึ่งในกรณีนี้เราพบว่ามีชื่อคณะหลายๆ คณะที่ค่อนข้างยาวมาก (ส่วนหนึ่งเป็นปัญหาจากคุณภาพข้อมูลในระบบ แต่เนื่องจากประเทศนี้ไม่มี Open Data ให้เราใช้ 🙄 ให้มนุษย์นั่งกรอก มันก็จะได้แค่ประมาณนี้)

เนื่อง Image Magick ไม่สามารถตัดประโยคภาษาไทย(ที่ไม่มีเว้นวรรค)ได้ เราจึงต้องเลือกหาทางตัดคำให้เหมาะสมกับข้อมูล โดยไล่ดูข้อมูลชื่อคณะที่ยาวๆ และคิด Heuristics ง่ายๆ ขึ้นมา เพื่อใช้ในการตัดคำ (เช่น ตัดคำหน้าคำว่า “และ”)

เช็คคำที่อยากตัดดูว่าถ้าเว้นวรรคไปแล้วจะยังยาวอยู่ไหม

หลังจากที่ตัดคำได้เรียบร้อย ก็จะต้องมีการปรับตำแหน่งการแสดงผล (1 บรรทัด vs. 2 บรรทัด) และปรับขนาดฟอนต์ให้เหมาะสม

ทดสอบกับข้อมูลที่หลากหลายตลอดเวลา ให้แน่ใจว่าการปรับตำแหน่ง หรือ ขนาดฟอนต์ ไม่กระทบกับกรณีอื่นๆ

Share สวยๆ บน Social Media

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

Facebook Sharing Debugger
ถึงชื่อคณะโดนตัดไป แต่ก็ยังมีใน Description

ส่งท้าย

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


ใครอยากทำอะไรสนุกๆ แบบนี้ ทีม Skooldio กำลังเปิดรับสมาชิกใหม่เยอะมากกกก ส่ง resume ของคุณมาได้ที่ people@skooldio.com ใครที่ยังอยากรู้จักพวกเรามากขึ้นอีก ลองติดตามอ่านบล็อก Life at Skooldio ของพวกเราได้เลย