Life at SkooldioTechnology

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

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

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

เพื่อให้การแชร์บน Social media สนุกสนาน ทีมเลยตั้งใจว่าอยากให้รูปที่น้องแชร์ personalized สำหรับน้องแต่ละคน โดยออกแบบให้ในภาพ มีชื่อน้อง ชื่อคณะและมหาวิทยาลัยที่ได้เข้าศึกษาต่อ นอกจากนี้น้องๆ ยังเลือกแปะข้อความเก๋ๆ และสติ๊กเกอร์ตัวละครจาก TCASter ได้อีกด้วย


การจะสร้างหน้าเว็บสำหรับแชร์บน Social Media นั้น เราจำเป็นที่จะต้องใส่ Sharing Metadata ต่างๆ เช่น og:title, og:description, og:image เพื่อให้ Facebook หรือ Twitter สร้างเป็นโพสต์ที่แสดงผลได้แบบสวยๆ แต่เนื่องจากตัวเว็บ TCASter เป็น Single Page Application (SPA) ทำให้เราไม่สามารถใส่ข้อมูลพวกนี้ไปบนหน้าเว็บจนกว่า JavaScript จะทำงานเสร็จเรียบร้อย เราจึงต้องหาตัวช่วยอื่นๆ มาช่วยแก้ปัญหา เลยเป็นที่มาของบล็อกโพสต์อันนี้

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

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

สร้าง Workflow ด้วย Firebase

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
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 ตามตัวอย่างด้านล่างนี้ได้เลย

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

โดยการใช้ Image Magick ในส่วนนี้ เราจะเอารูปภาพหลายๆ รูปมาวางซ้อนกันแบบ Photoshop Layer (composite)ในส่วนของข้อความก็สามารถเลือกใช้ฟอนต์ได้ตามความต้องการเลย

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
มองทุกอย่างเป็น Layer

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

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ตัวอย่าง HTML Template
ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ตัวอย่างการใช้ Squirrelly ในการสร้างหน้า Static HTML จาก Template ที่เตรียมไว้

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

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ตัวอย่าง Cloud Function ที่ subscribe onCreate event จาก FireStore

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ตัวอย่าง Component ทางฝั่ง Web ในการเชื่อมต่อข้อมูล

The devil is in the detail

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

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

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

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

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ทดสอบกับข้อมูลที่หลากหลายตลอดเวลา ให้แน่ใจว่าการปรับตำแหน่ง หรือ ขนาดฟอนต์ ไม่กระทบกับกรณีอื่นๆ

Share สวยๆ บน Social Media

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

ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
Facebook Sharing Debugger
ติดแล้ว..บอกต่อ - ใช้ Firebase สร้างรูปเพื่อแชร์ง่ายนิดเดียว | Skooldio Blog
ถึงชื่อคณะโดนตัดไป แต่ก็ยังมีใน Description

ส่งท้าย

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


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

You may also like

Kotlin จะมาแทนที่ Java หรือไม่ ทำไม Google เลือก Kotlin เป็นภาษาหลักในการพัฒนา Android - Skooldio Blog | รูปหน้าปก
Technology

ทำไมภาษา Kotlin ถึงเป็นภาษาหลักในการพัฒนา Android? และ Kotlin จะมาแทนที่ Java หรือไม่?

ทำไมภาษา Kotlin ถึงเป็นภาษาแห่งอนาคตของนักพัฒนา Android อะไรคือเหตุผลที่ Google ประกาศรับรองให้ Kotlin เป็นภาษาหลักในการพัฒนา Android และ Kotlin จะมาแทนที่ Java หรือไม่.. ...
Business

อยากเป็นสาย Data เก่ง ๆ ต้องฝึก! 6 ทักษะช่วย Data Scientist ทำงานปัง

บทความจาก Harvard Business Review ชวนเราขบคิดถึงปัญหาของ Data Scientist ในองค์กรใหญ่ เมื่อถึงเวลาที่ต้องนำเสนอข้อมูล บ่อยครั้งที่ Data Scientist ต้องกุมขมับ เพราะไม่รู้จะพูดอย่างไรให้ผู้บริหารเข้าใจ บางครั้งเห็นข้อมูลสำคัญมากอยู่ตรงหน้า ...
Life at Skooldio

Skooldio’s 2020 Best Nine: 9 สิ่งที่ดีที่สุดในการเดินทางของเราตลอดปี 2020

Skooldio’s 2020 Best Nine 9 สิ่งที่ดีที่สุดในการเดินทางของเราตลอดปี 2020 ด้วยสถานการณ์การแพร่ระบาดของไวรัส Covid-19 ทำให้ปีที่ผ่านมาเป็นปีที่หนักหนาสาหัสสำหรับหลายๆ ธุรกิจ ที่ Skooldio เอง เราก็ได้รับผลกระทบอยู่ไม่น้อย ...
หน้าปก | Skooldio Blog - ค้นคว้า ออกแบบ ทดสอบ… กว่าจะออกมาเป็น Skooldio Virtual Workshop Life at Skooldio

ค้นคว้า ออกแบบ ทดสอบ… กว่าจะออกมาเป็น Skooldio Virtual Workshops

ในสถานการณ์วิกฤตโควิด-19 ที่กำลังทำให้ธุรกิจหลายส่วนต้องลุกขึ้นมาปรับตัวกันอย่างเร่งด่วน Skooldio เองก็โดนผลกระทบไปไม่น้อย เพราะทั้งปีเรามีตาราง Workshop แบบนั่งเรียนในคลาสวางไว้อย่างแน่นเอี๊ยดทุกสัปดาห์ เมื่อเราเห็นความสำคัญของการสร้าง Social distancing เพื่อทำให้โอกาสที่ไวรัสจะระบาดมีน้อยลง เราเลยตัดสินใจเลื่อน workshop ที่จัดในปลายเดือนมีนาคม — ...
Life at Skooldio

Skooldio’s 2019 Best Nine | 9 สิ่งที่ดีที่สุดในการเดินทางของเราตลอดปี 2019

ก้าวเข้าสู่ปีที่สามของ Skooldio แล้ว กับความมุ่งมั่นที่จะช่วยเติมความรู้ พัฒนาทักษะสมัยใหม่ให้กับคนไทย ในโอกาสปีใหม่นี้ ผมและทีมงานได้รวบรวมเรื่องราวที่ดีที่สุดของพวกเราชาว Skooldio ตลอดการเดินทางในปี 2019 ที่ผ่านมา เพื่อสะท้อนความคิดและบันทึกความทรงจำเก็บไว้ ก่อนจะออกเดินทาง(ไกล)ต่อในปี 2020 1. ...
Life at Skooldio

เก็บตก LINE Developer Day 2019 — ฉบับ Data Science และ AI (Part 0)

เมื่อสัปดาห์ที่ผ่านมา ผมมีโอกาสได้รับเชิญให้ไปร่วมงาน LINE Developer Day 2019 ที่ประเทศญี่ปุ่น ต้องชื่นชมว่างานจัดได้ดีมากๆ และที่สำคัญคือ มีทอล์กน่าสนใจเยอะมากทีเดียว (จนไม่ได้หนีออกไปเที่ยวเลย 😂) ตั้งแต่บริการใหม่ๆ ของ LINE, ...

Comments are closed.