สร้างระบบแชร์รูปจาก Cloud Storage for Firebase ให้ LIFF แบบไม่ง้อ Database
เดิมทีการดึงไฟล์ทั้งหมดจาก Cloud Storage for Firebase นั้น นักพัฒนาจำเป็นจะต้องเก็บ URL ของไฟล์ไว้ใน database แล้วจึง query ข้อมูล URL ออกมาใช้งาน
แต่ก็มีบาง use case ที่นักพัฒนาต้องการเพียงแค่อัพโหลดไฟล์ไปเก็บไว้ แล้วดึงไฟล์ทั้งหมดออกมาใช้ โดยปราศจากการ query ข้อมูลจาก database
นั่นจึงเป็นที่มาของบทความนี้ที่จะมาเฉลยวิธีการ list ไฟล์ทั้งหมดจาก path ที่เราต้องการออกมา ซึ่งถือเป็นภาคต่อของบทความก่อนหน้า และผมแนะนำให้ผู้ที่ยังไม่ได้อ่าน ให้อ่านก่อน เพื่อที่จะสามารถประติดประต่อระบบที่เรากำลังจะสร้างให้สมบูรณ์
ถึงตรงนี้ คิดว่าทุกคนน่าจะมี LINE Chatbot สำหรับการอัพโหลดและ resize รูปกันเรียบร้อยแล้ว ถัดไปเราจะมาสร้าง LIFF ที่ให้ดึงข้อมูลรูปทั้งหมดจาก Cloud Storage for Firebase มาแสดง พร้อมทั้งเพิ่มฟีเจอร์ให้ผู้ใช้สามารถแชร์รูปไปยังเพื่อนๆ หรือกลุ่มต่างๆได้ โดยขั้นตอนในการพัฒนามีดังนี้
- สร้าง LINE Login Channel และลงทะเบียน LIFF app
- แสดงรูปทั้งหมดจาก Cloud Storage for Firebase
- พัฒนาระบบแชร์รูปใน LIFF ด้วย Share Target Picker
- Deploy และทดลองใช้งาน
1. สร้าง LINE Login Channel และลงทะเบียน LIFF app
ขั้นตอนนี้ใครที่ยังไม่มี LIFF app ให้ทำตามบทความด้านล่างนี้ในข้อที่ 2 และ 3 ก่อน แต่สำหรับใครที่มี LIFF app แล้วก็ให้ข้ามไปลุยต่อในข้อถัดไปได้เลย
2.แสดงรูปทั้งหมดจาก Cloud Storage for Firebase
เริ่มจากเข้าไปที่ Firebase Console แล้วเลือกโปรเจคเป้าหมาย(โปรเจคเดียวกับที่ใช้ในบทความก่อนหน้านี้)
2.1 สร้าง Web app ใหม่ใน Firebase Console
เมื่อเราเข้ามาในโปรเจคเป้าหมายแล้ว ให้เรากดปุ่ม Add app ที่หน้าแรก
ตั้งชื่อให้ Web app ของเรา แถมถ้าใครจะใช้ Firebase Hosting ก็สามารถซีตุ๊ป (setup) จากตรงนี้ได้เลย
เมื่อกดปุ่ม Register app แล้วก็จะเจอหน้าแสดง SDK Configuration แบบนี้
copy โค้ดดังกล่าวออกมา แล้วแก้ไขโค้ดนิดนึง โดยตัวอย่างในบทความนี้จะไม่ได้ใช้ Google Analytics for Firebase แถมเราจะใช้ Cloud Storage for Firebase อีกด้วย
ดังนั้น ให้แก้ไขชื่อ SDK จาก firebase-analytics.js ไปเป็น firebase-storage.js แทน และลบ firebase.analytics() ออก
2.2 ดึงรูปทั้งหมดและแสดงผล
หลังจากเราได้โค้ดสำหรับการ config มาแล้ว ก็ให้ copy วางลงใน template ที่เตรียมไว้ตามตัวอย่างนี้
ถัดไปคือส่วนที่สำคัญที่สุดของบทความนี้ละ ให้เราสร้างฟังก์ชัน getImageList() เพื่อดึงรูปทั้งหมดจาก path ที่ต้องการใน Cloud Storage for Firebase แล้วไปแสดงผล
จุดสังเกตจากโค้ดตัวอย่างนี้คือ จะเห็นว่ามีการเรียก ${profile.userId} ที่เป็นส่วนหนึ่งของ path เนื่องจากบทความก่อนหน้านี้เราได้อัพโหลดรูปเข้าไปตาม userId นั่นเอง และยังมีฟังก์ชัน shareMsg() อีก ซึ่งทั้งสองจะเกี่ยวข้องกับขั้นตอนที่ 3
3. พัฒนาระบบแชร์รูปใน LIFF ด้วย Share Target Picker
3.1 สร้างและเรียกใช้ฟังก์ชัน main()
จุดเริ่มขบวนของการพัฒนา LIFF ก็คือการ import ตัว LIFF SDK เข้ามาก่อน จากนั้นก็สร้างและเรียกใช้ฟังก์ชัน main() ตามตัวอย่างด้านล่างนี้
จุดสังเกต คือ LIFF-ID ซึ่งจะเป็น ID ของ LIFF ที่ได้จากขั้นตอนที่ 1 นอกจากนั้น LIFF app ตัวนี้จะรองรับการเปิดทั้งในแอป LINE และ external browser
3.2 สร้างฟังก์ชัน shareMsg() เพื่อแชร์รูป
เพื่อให้ผู้ใช้สามารถกดที่รูปเพื่อแชร์ไปยังเพื่อนหรือกลุ่มที่ต้องการได้ เราก็จะสร้างฟังก์ชันชื่อ shareMsg() ขึ้นมา โดยรับ parameter 2 ตัวด้วยกันคือ ลำดับของรูป และ thumbnail URL
จุดสังเกต คือ originalUrl ซึ่งจะมาจากการ replace ค่าบางอย่างใน URL เป็นค่าว่าง ซึ่งมันเป็น pattern ที่มาจากการตั้งค่าใน Firebase Extensions จากบทความที่แล้วนั่นเอง
4. Deploy และทดลองใช้งาน
4.1 Source Code ฉบับสมบูรณ์
ก่อนจะไป deploy กันเรามาดู source code ฉบับสมบูรณ์สักหน่อยว่าทำตาม แล้วมันได้หน้าตามาประมาณแบบนี้มั้ย
จุดสังเกต คือ SDK URL ที่ไม่เหมือนกับที่ระบุไว้ในข้อ 2 ทั้งนี้ก็เพราะผมจะใช้ Firebase Hosting จึงสามารถใช้ dynamic SDK ได้(อ่านเพิ่มเติมใน เกร็ดความรู้ หัวข้อถัดไป)
4.2 Deploy เว็บ
เนื่องจาก Web URL ที่จะนำมาใช้กับ LIFF จะต้องรองรับ HTTPS โดยคุณจะเลือกใช้ host ที่ไหนก็ได้ แต่ถ้าใครยังไม่มี host ผมขอแนะนำ 🔥Firebase Hosting เนื่องจากฟรี SSL, CDN ทั่วโลก, พื้นที่ 1GB และมันง่ายมว๊ากในการใช้งาน ถ้าสนใจลองศึกษาบทความด้านล่างนี้ได้
4.3 อัพเดท LIFF ใน LINE Login Channel สำหรับ Production
ให้เรานำ URL ที่ได้จากการ deploy ไปอัพเดท Endpoint URL ใน Channel และเปลี่ยนสถานะของ LIFF app ที่เราสร้างจาก Developing เป็น Published เพื่อให้ผู้ใช้ทุกคนสามารถเปิดใช้งานได้ โดยให้ทำตามข้อ 4.6 ของบทความนี้ได้เลย
4.4 ทดลองใช้งาน
เกร็ดความรู้เกี่ยวกับ Firebase SDK Configuration
เราสามารถเข้าไปดู SDK Configuration ได้ตลอดเวลา โดยเข้าไปที่ Project settings เลือก tab ชื่อ General จากนั้นให้เราคลิกเลือก web app ที่เราสร้างไว้ จะเจอส่วนที่เป็น config ทางด้านขวาตามรูปนี้
จากรูปเราจะเห็นตัวเลือกทางด้านขวา 3 ตัวเลือกได้แก่
- Automatic: config แบบ dynamic ที่ใช้ได้กับ Firebase Hosting เท่านั้น
- CDN: config ที่ host ไหนก็ใช้ได้รวมถึง Firebase Hosting ด้วย
- Config: ก้อน config เท่านั้นจริงๆ อย่างอื่นไม่เกี่ยว 555
บทสรุป
บทความนี้ถือเป็นภาคต่อและภาคจบ ของการสร้างระบบ Gallery ไว้ใช้ส่วนตัวตั้งแต่ สร้าง LINE Chatbot มาเพื่อรับอัพโหลดรูป, ย่อรูป, ดึงรูปทั้งหมดมาแสดงใน LIFF และแชร์รูปที่เก็บไว้ให้เพื่อนหรือกลุ่มด้วย Share Target Picker หวังว่าเนื้อหาทั้ง 2 บทนี้จะช่วยให้คนที่สนใจเกี่ยวกับการจัดการรูปภาพใน Chatbot และ LIFF นำไปต่อยอดได้ง่ายๆนะครับ
ก่อนจากกันไปขอฝาก publication ทั้ง LINE Developers Thailand และ Firebase Thailand ให้ช่วยติดตามกันด้วยนะครับ สำหรับวันนี้ ลากันไปก่อน แล้วพบกันใหม่บทความหน้าครับ
