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 ของพวกเราได้เลย

Roparat Sukapirom
Head of Engineering, Skooldio

    You may also like

    ภาษา Scala คืออะไร
    Technology

    ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer

    Scala คือ ภาษา Programming ที่กำลังมาแรงและเริ่มมีความนิยมใช้กันขึ้นเรื่อย ๆ จุดเริ่มต้นภาษา Scala เรียกได้ว่าเป็นลูกอีกคนหนึ่งของภาษา Java เช่นเดียวกับภาษา Kotlin ที่พัฒนาต่อยอดมาเพื่อแก้ไขข้อบกพร่องบางอย่างของภาษา Java ในจุดประสงค์ที่แตกต่างกัน ...
    Software Architecture
    Technology

    3 Software Architecture Design ที่นิยมใช้พัฒนาระบบซอฟต์แวร์ขนาดใหญ่

    ในการออกแบบซอฟต์แวร์ขนาดใหญ่ในองค์กร มักจะมีการทำงานร่วมกันโดยคนจำนวนมาก หากเราต่างคนต่างเขียนซอฟต์แวร์ไปในทางที่ตัวเองเห็นว่าดี ซอฟต์แวร์ที่แต่ละคนทำก็อาจจะทำงานร่วมกันไม่ได้หรือมีปัญหาตอนที่ Integrate เป็น Solution ใหญ่ ดังนั้น การทำซอฟต์แวร์ในระดับนั้นจึงจำเป็นต้องมีการแบ่งสันปันส่วน และมีการออกแบบ Software Architecture เพื่อให้ทำงานร่วมกันได้ดีและมองเห็นภาพรวมไปในทางเดียวกัน ทั้งระหว่างนักพัฒนาในทีมพัฒนากันเอง ...
    Business

    ส่อง Data ครบรอบ 5 ปี Skooldio เติบโตขึ้นอย่างไรบ้าง?

    Skooldio เริ่มก่อตั้งขึ้นในเดือนมีนาคมปี 2017 เริ่มกันด้วยทีมเพียงไม่กี่คน ที่มี Passion ร่วมกัน คือการพัฒนาศักยภาพของคนไทย ให้มีสกิลที่เป็นที่ต้องการของตลาดในยุคปัจจุบัน ตลอด 5 ปีที่ผ่านมา เราได้ผจญภัยกับการเริ่มต้น เป็นแพลตฟอร์มเรียนออนไลน์เจ้าแรกๆ ของไทย ...
    หน้าปก | 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 Table ...

    Comments are closed.