Firebase—สร้าง Short Url ในฐานข้อมูลแบบไม่เขียนโค้ด

สวัสดีเพื่อนๆ ทุกคนอีกครั้งครับ เพื่อนๆ เคยหรือเปล่าครับเวลาที่ต้องการส่งงานหรือต้องการให้ลูกค้าเปิดดูข้อมูลจาก Link Url ที่ส่งให้ แล้วพบว่า Link Url นั้นมีความยาวววววววว…มากเกินไป ซึ่งดูไม่สวยงามและจัดข้อความได้ลำบากเหลือเกิน สำหรับบริการ Short Url นั้นมีให้เลือกใช้งานได้หลากหลายมาก และเจ้าหนึ่งที่ผมใช้งานประจำเลยคือ bitly.com ที่ใช้งานง่ายและมี API ให้ใช้ด้วยครับ

วันนี้ผมเลยจะมานำเสนอการสร้าง Short Url เพิ่มลงในฐานข้อมูลของเราโดยที่เราไม่ต้องเขียนโค้ดสักบรรทัดเลย โดยผมได้มีการสร้างแบบฟอร์มสำหรับกรอกข้อมูลและรับเอกสาร พร้อมกับบันทึกลง Fire Storage และนำ Link Url ของเอกสารและข้อมูลอื่นๆ นั้นมาเก็บไว้ในฐานข้อมูลที่ Firestore และผมจะใช้ Shorten Urls ซึ่งเป็น Firebase Extension มาช่วยในการเพิ่ม Field สำหรับก็เก็บค่า Short Url นั้นไว้ในฐานข้อมูลเมื่อมีการเพิ่มข้อมูลเข้ามาใหม่ครับ

ก่อนอื่นอยากให้เพื่อนๆ ได้สร้าง Firebase Project ขึ้นมาเพื่อทดลองใช้งาน Firebase Extension ตัวนี้ก่อนครับ หากพร้อมแล้วก็ไปดูกันเลยว่ามันใช้เวลาแค่ 10 นาทีก็ทำได้แล้ว


— ให้ไปที่หน้า Firebase console เลือกเมนู Extensions แล้วเลือกดู Extensions ทั้งหมด จะเห็นว่ามี Shorten Urls ให้เลือกก็คลิ๊กเลือก Install เพื่อใช้งานได้เลย

ในหน้าแรกจะไม่มี Shorten Urls ให้เลือก
คลิ๊ก Install ได้เลย

— กำหนด Firebase Project ที่ต้องการติดตั้ง Extension ได้เลย แล้วจะเข้าสู่การตั้งค่าก็คลิ๊ก Next ไปเรื่อยๆ ได้เลยครับ ที่สำคัญ Project ต้องเป็นแบบ Blaze Plan ก่อนถึงจะติดตั้งได้

เลือก Firebase Project ที่ต้องการติดตั้ง Extension
Firebase Project ต้องเป็น Blaze Plan

— ทำการตั้งค่าต่างๆ ตามที่ Extension กำหนดไว้ได้เลยครับ

  • เลือก Location สำหรับ Clound Function ตามที่ต้องการ แนะนำที่มีให้เลือกที่ใกล้ที่สุดก็คือ Hong Kong (asia-east2)
  • ไปสร้าง Access Token เพื่อใช้งาน API ของ bitly.com แล้วนำมาใส่ได้เลย
  • กำหนด Collection path ในฐานข้อมูลที่ใช้สำหรับบันทึกข้อมูลพร้อมกำหนด document ที่มี field ข้อมูลของ url ที่ต้องการสร้าง Short Url [**ถ้ายังไม่มี ให้กำหนดข้อมูลขึ้นมาไว้ก่อนได้ครับ ค่อยมาลบออกทีหลังได้]
  • กำหนดชื่อ field สำหรับเก็บค่า Short Url

— หลังจากกำหนดค่าต่างๆ ครบแล้วก็ให้ทำการติดตั้งได้เลย ใช้เวลาประมาณ 3-5 นาที เท่านั้นเอง เดินไปชงกาแฟกลับมาก็ติดตั้งเสร็จพอดี และจะมีการอธิบายการทำงานของ Extension ให้อ่านด้วยครับ ใครที่อยากอ่าน Source code ก็ตามไปอ่านได้เลย

— เมื่อไปดูในเมนู Functions ที่หน้า Console ก็จะพบว่า Extension ได้ทำการสร้างฟังก์ชั่นให้เราใช้งานแบบอัตโนมัติเลยครับ โดยจะเป็นการทำงานเมื่อมีการเพิ่มข้อมูลใหม่ใน Collection ที่เรากำหนดไว้

— แล้วหากเรามีหลาย Collection แยกกัน และต้องการติดตั้ง Extension เหมือนกันก็ให้ทำตามขั้นตอนตั้งแต่ต้นใหม่อีกครั้ง และกำหนด Collection ให้ตรงตามที่ต้องการได้เลยครับ ก็จะได้ฟังก์ชั่นเพิ่มขึ้นมาให้ใช้งานได้เลย

— ทำการทดสอบกรอกข้อมูลเข้ามาใหม่ใน Collection ที่กำหนดไว้จะเห็นได้ว่ามีการสร้าง Field ข้อมูลของ Short Url ที่ถูกแปลงมาจาก Field url ที่บันทึกเข้ามาให้แบบอัตโนมัติเลย เวลาจะส่ง Link ก็เรียกใช้ข้อมูลจาก Field นี้ได้เลยครับ

มีการสร้าง Field สำหรับเก็บค่า Short Url ขึ้นมาให้เลย

ท้ายสุด จะเห็นได้ว่า Extension นั้นมาช่วยให้เราไม่ต้องเสียเวลาไปนั่ง Code สร้างฟังก์ชั่นขึ้นมาเอง เพียงแค่กำหนดค่าตามที่ Extension กำหนดให้ถูกต้องก็ใช้งานได้ตามต้องการแล้วครับ แต่เราต้องเข้าใจการทำงานของ Extension นั้นๆ เพื่อจะได้เอามาใช้งานได้อย่างถูกต้องครับ จะเห็นได้ว่า Firebase Extensions ยังมีอีกหลาย Extension ที่น่าสนใจให้นำมาใช้ใน Project เลยครับ ก็หวังว่บทความนี้จะเป็นแนวทางที่เป็นประโยชน์กับเพื่อนๆ อีกเช่นเคยครับผม…Happy Learning. Happy Coding…🔥🔥🔥


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12