เพิ่มฟังก์ชันใหม่ลงในเว็บแอปได้อย่างรวดเร็วด้วย Firebase Extensions

1. บทนำ

เป้าหมาย

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

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะต้องเพิ่มฟีเจอร์ต่อไปนี้ลงในเว็บแอปของตลาดออนไลน์

• โหลดรูปภาพได้เร็วขึ้นเพื่อเพิ่มการคงผู้ใช้ไว้
• จํากัดรายการในฐานข้อมูลเพื่อปรับปรุงประสิทธิภาพและลดค่าบริการ
• ใช้การลบข้อมูลผู้ใช้เก่าโดยอัตโนมัติเพื่อเพิ่มการปกป้องข้อมูลผู้ใช้

สิ่งที่คุณจะได้เรียนรู้

• วิธีค้นหาส่วนขยายสำหรับกรณีการใช้งานทั่วไป
• วิธีติดตั้งและกําหนดค่าส่วนขยายในโปรเจ็กต์
• วิธีดูแลรักษา (ตรวจสอบ อัปเดต และถอนการติดตั้ง) ส่วนขยายในโปรเจ็กต์

Codelab นี้มุ่งเน้นที่ Firebase Extensions ดูข้อมูลโดยละเอียดเกี่ยวกับผลิตภัณฑ์อื่นๆ ของ Firebase ที่กล่าวถึงในโค้ดแล็บนี้ได้ในเอกสารประกอบของ Firebase และโค้ดแล็บอื่นๆ

สิ่งที่ต้องมี

• คอมพิวเตอร์ที่ติดตั้งเว็บเบราว์เซอร์สมัยใหม่ (แนะนำให้ใช้ Chrome)
• บัญชี Google

2. สร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

1. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วตั้งชื่อโปรเจ็กต์ Firebase เป็น FriendlyMarket
2. คลิกตัวเลือกการสร้างโปรเจ็กต์ ยอมรับข้อกำหนดของ Firebase ข้ามการตั้งค่า Google Analytics เนื่องจากคุณจะไม่ได้ใช้ Analytics ในแอปนี้
3. รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกต่อไป

แอปพลิเคชันที่คุณสร้างจะใช้ผลิตภัณฑ์ Firebase 2-3 รายการที่มีให้ใช้งานสำหรับเว็บแอป ดังนี้

• การตรวจสอบสิทธิ์ Firebase เพื่อระบุผู้ใช้ได้อย่างง่ายดาย
• ฐานข้อมูลเรียลไทม์ของ Firebase เพื่อบันทึก Structured Data ในระบบคลาวด์และรับการแจ้งเตือนทันทีเมื่อมีข้อมูลอัปเดต
• Cloud Storage for Firebase เพื่อบันทึกรูปภาพในระบบคลาวด์

ตอนนี้คุณเปิดใช้และกําหนดค่าผลิตภัณฑ์ Firebase เหล่านั้นได้โดยใช้คอนโซล Firebase

อัปเกรดแพ็กเกจราคาของ Firebase

หากต้องการใช้ Firebase Extensions และบริการระบบคลาวด์ที่เกี่ยวข้อง รวมถึง Cloud Storage สำหรับ Firebase โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีการเรียกเก็บเงินระบบคลาวด์

• บัญชีการเรียกเก็บเงินระบบคลาวด์ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
• หากคุณเพิ่งเริ่มใช้ Firebase และ Google Cloud ให้ตรวจสอบว่าคุณมีสิทธิ์รับเครดิตมูลค่า$300 และบัญชีการเรียกเก็บเงินระบบคลาวด์แบบทดลองใช้ฟรีหรือไม่
• หากคุณทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม โปรดสอบถามผู้จัดว่ามีเครดิต Cloud เหลืออยู่ไหม

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

1. ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
2. เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
   หากจำเป็นต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อดำเนินการอัปเกรดให้เสร็จสมบูรณ์

เปิดใช้การเข้าสู่ระบบด้วยอีเมล

แม้ว่าการตรวจสอบสิทธิ์จะไม่ใช่ประเด็นหลักของโค้ดแล็บนี้ แต่การตรวจสอบสิทธิ์รูปแบบใดรูปแบบหนึ่งในแอปเป็นสิ่งสําคัญในการระบุตัวตนของทุกคนที่ใช้แอปได้อย่างไม่ซ้ำกัน คุณจะใช้การเข้าสู่ระบบด้วยอีเมล

1. ในคอนโซล Firebase ให้คลิกพัฒนาในแผงด้านซ้าย
2. คลิกการตรวจสอบสิทธิ์ แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปที่แท็บวิธีการลงชื่อเข้าใช้โดยตรง)
3. คลิกอีเมล/รหัสผ่านในรายการผู้ให้บริการลงชื่อเข้าใช้ ตั้งสวิตช์เปิดใช้เป็นเปิด แล้วคลิกบันทึก

เปิดใช้ Realtime Database

แอปใช้ฐานข้อมูลเรียลไทม์ของ Firebase เพื่อบันทึกสินค้าสำหรับขาย

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือก ฐานข้อมูลเรียลไทม์
2. คลิกสร้างฐานข้อมูล
3. เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
   สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในขั้นตอนถัดไปของโค้ดแล็บนี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้กับข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสําหรับฐานข้อมูล
5. คลิกสร้าง

ตั้งกฎความปลอดภัยสำหรับฐานข้อมูล

ตอนนี้คุณจะต้องตั้งค่ากฎความปลอดภัยที่จําเป็นสําหรับแอปนี้ ตัวอย่างกฎพื้นฐานบางส่วนที่จะช่วยรักษาความปลอดภัยให้แอปมีดังนี้ กฎเหล่านี้อนุญาตให้ทุกคนดูสินค้าที่มีขายได้ แต่อนุญาตให้เฉพาะผู้ใช้ที่ลงชื่อเข้าใช้เท่านั้นที่จะอ่านและเขียนข้อมูลอื่นๆ ได้ ไม่ต้องกังวลเกี่ยวกับรายละเอียดของกฎเหล่านี้ คุณเพียงแค่คัดลอกและวางกฎเพื่อทำให้แอปทำงานได้

1. คลิกแท็บกฎที่ด้านบนของหน้าแดชบอร์ดของ Realtime Database

2. คัดลอกและวางชุดกฎต่อไปนี้ลงในช่องกฎในแท็บกฎ

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. คลิกเผยแพร่

ตั้งค่า Cloud Storage for Firebase

แอปใช้ Cloud Storage for Firebase เพื่อบันทึกรูปภาพสินค้าที่จะขาย

วิธีตั้งค่า Cloud Storage for Firebase ในโปรเจ็กต์ Firebase มีดังนี้

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายบิลด์ แล้วเลือกพื้นที่เก็บข้อมูล
2. คลิกเริ่มต้นใช้งาน
3. เลือกตำแหน่งสำหรับที่เก็บข้อมูล Storage เริ่มต้น
   ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้แพ็กเกจ"ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในขั้นตอนถัดไปของโค้ดแล็บนี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้กับข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
5. คลิกสร้าง

ตั้งค่ากฎความปลอดภัยสำหรับที่เก็บข้อมูลใน Storage

ตอนนี้คุณจะต้องตั้งค่ากฎความปลอดภัยที่จําเป็นสําหรับแอปนี้ กฎเหล่านี้จะอนุญาตให้ผู้ใช้ที่ตรวจสอบสิทธิ์แล้วโพสต์รูปภาพใหม่เท่านั้น แต่อนุญาตให้ทุกคนดูรูปภาพของสินค้าที่แสดง

1. คลิกแท็บกฎที่ด้านบนของแดชบอร์ดพื้นที่เก็บข้อมูล

2. คัดลอกและวางชุดกฎต่อไปนี้ลงในช่องกฎในแท็บกฎ

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
   
       match /{allPaths=**} {
         allow read, write: if request.auth != null;
       }
   
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
   
     }
   }
   

3. คลิกเผยแพร่

3. เรียกใช้แอปตัวอย่าง

แยกโปรเจ็กต์ StackBlitz

ใน Codelab นี้ คุณจะได้สร้างและติดตั้งใช้งานแอปโดยใช้ StackBlitz ซึ่งเป็นเครื่องมือแก้ไขออนไลน์ที่ผสานรวมเวิร์กโฟลว์ Firebase หลายรายการไว้ด้วยกัน Stackblitz ไม่จำเป็นต้องติดตั้งซอฟต์แวร์หรือบัญชี StackBlitz พิเศษ

StackBlitz ช่วยให้คุณแชร์โปรเจ็กต์กับผู้อื่นได้ ผู้อื่นที่มี URL โปรเจ็กต์ StackBlitz ของคุณจะเห็นโค้ดและแยกโปรเจ็กต์ของคุณได้ แต่จะแก้ไขโปรเจ็กต์ StackBlitz ไม่ได้

1. ไปที่ URL นี้เพื่อดูโค้ดเริ่มต้น: https://stackblitz.com/edit/friendlymarket-codelab
2. คลิกแยกที่ด้านบนของหน้า StackBlitz

ตอนนี้คุณมีสําเนาโค้ดเริ่มต้นเป็นโปรเจ็กต์ StackBlitz ของคุณเองแล้ว เนื่องจากคุณไม่ได้ลงชื่อเข้าใช้ "บัญชี" ของคุณจึงมีชื่อว่า @anonymous แต่ไม่เป็นไร โปรเจ็กต์มีชื่อที่ไม่ซ้ำกัน รวมถึง URL ที่ไม่ซ้ำกัน ระบบจะบันทึกไฟล์และการเปลี่ยนแปลงทั้งหมดในโปรเจ็กต์ StackBlitz นี้

เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์

1. ดูไฟล์ src/firebase-config.js ใน StackBlitz คุณจะเพิ่มออบเจ็กต์การกําหนดค่า Firebase ได้ที่นี่
2. กลับไปที่คอนโซล Firebase แล้วไปที่หน้าภาพรวมของโปรเจ็กต์โดยคลิกภาพรวมโปรเจ็กต์ที่ด้านซ้ายบน
3. คลิกไอคอนเว็บ ตรงกลางหน้าภาพรวมของโปรเจ็กต์เพื่อสร้างเว็บแอป Firebase ใหม่
4. ลงทะเบียนแอปโดยใช้ชื่อเล่น FriendlyMarket Codelab
5. สําหรับโค้ดแล็บนี้ อย่าเลือกช่องข้างตั้งค่าโฮสติ้งของ Firebase สําหรับแอปนี้ด้วย เนื่องจากคุณจะใช้แผงแสดงตัวอย่างของ StackBlitz แทน
6. คลิกลงทะเบียนแอป
7. คัดลอกออบเจ็กต์การกําหนดค่า Firebase ของแอปไปยังคลิปบอร์ด อย่าคัดลอกแท็ก <script> หมายเหตุ: หากต้องการค้นหาการกําหนดค่าในภายหลัง ให้ทําตามวิธีการที่นี่

8. คลิกดำเนินการต่อไปยังคอนโซล

เพิ่มการกําหนดค่าของโปรเจ็กต์ลงในแอป โดยทําดังนี้

1. กลับไปที่ StackBlitz แล้วไปที่ไฟล์ src/firebase-config.js
2. วางข้อมูลโค้ดการกําหนดค่าในไฟล์ หลังจากทําแล้ว ไฟล์ควรมีลักษณะดังนี้ (แต่มีค่าของโปรเจ็กต์ของคุณเองในแออบเจ็กต์การกําหนดค่า)

จุดเริ่มต้นของแอปนี้คืออะไร

ดูตัวอย่างแบบอินเทอร์แอกทีฟทางด้านขวาของหน้าจอ StackBlitz

โค้ดแล็บนี้เริ่มต้นด้วยโค้ดสําหรับแอปตลาดแบบพื้นฐาน ผู้ใช้ทุกคนดูรายการสินค้าที่มีขายและคลิกลิงก์เพื่อดูหน้ารายละเอียดของสินค้าได้ หากลงชื่อเข้าใช้ ผู้ใช้จะเห็นข้อมูลติดต่อของผู้ขายเพื่อเจรจาต่อรองราคาและซื้อสินค้า

ลองใช้แอป

1. ลงชื่อเข้าใช้ด้วยปุ่มที่ด้านบนของหน้าจอหลัก คุณใช้อีเมล ชื่อ และรหัสผ่านปลอมได้
2. คลิกปุ่มขายสินค้าที่มุมขวาล่างเพื่อสร้างข้อมูลผลิตภัณฑ์
3. ในส่วนชื่อ ให้ป้อน Xylophone
4. ในส่วนราคาเสนอ ให้ป้อน 50
5. สำหรับคำอธิบายสินค้า ให้ป้อนข้อมูลต่อไปนี้ This high quality xylophone can be used to play music.
6. ดาวน์โหลดรูปภาพไซโลโฟนนี้ลงในคอมพิวเตอร์ แล้วอัปโหลดด้วยปุ่มรูปภาพสินค้า

file_downloadดาวน์โหลดรูปภาพ

7. หลังจากกรอกข้อมูลในช่องทั้งหมดและอัปโหลดรูปภาพแล้ว ให้คลิกโพสต์
8. ค้นหาข้อมูลใหม่ คลิกสินค้าเพื่อดูหน้าจอรายละเอียด จากนั้นขยายแผงข้อมูลติดต่อผู้ขาย
9. กลับไปที่คอนโซล Firebase ในหน้าแดชบอร์ดฐานข้อมูล คุณจะเห็นรายการที่คุณโพสต์ไว้ภายใต้โหนด forsale ในหน้าแดชบอร์ดพื้นที่เก็บข้อมูล คุณจะเห็นรูปภาพที่อัปโหลดในเส้นทาง friendlymarket ด้วย

4. ค้นหาและติดตั้งส่วนขยาย

ปัญหา

หลังจากทําการวิจัยผู้ใช้สําหรับแอปแล้ว คุณพบว่าผู้ใช้ส่วนใหญ่เข้าชมเว็บไซต์จากสมาร์ทโฟน ไม่ใช่เดสก์ท็อป อย่างไรก็ตาม สถิติยังแสดงให้เห็นว่าผู้ใช้อุปกรณ์เคลื่อนที่มีแนวโน้มที่จะออกจากเว็บไซต์ ("เลิกใช้งาน") หลังจากผ่านไปเพียงไม่กี่วินาที

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

วิธีแก้ปัญหา

หลังจากอ่านวิธีเพิ่มประสิทธิภาพรูปภาพแล้ว คุณตัดสินใจที่จะทําตาม 2 ขั้นตอนต่อไปนี้เพื่อปรับปรุงประสิทธิภาพการโหลดรูปภาพ

• บีบอัดรูปภาพ แม้แต่โทรศัพท์มือถือก็ถ่ายภาพที่มีความละเอียดสูงกว่าที่แอปนี้ต้องการ การลดขนาดไฟล์จะช่วยเพิ่มความเร็วในการโหลดโดยไม่ทำให้ความละเอียดในแอปลดลงอย่างเห็นได้ชัด
• การแคช โดยค่าเริ่มต้น ออบเจ็กต์ใน Cloud Storage จะมีส่วนหัวที่บอกให้เบราว์เซอร์ไม่แคชรูปภาพ ซึ่งหมายความว่าเบราว์เซอร์ของผู้ใช้จะดาวน์โหลดรูปภาพเดิมซ้ำๆ แต่คุณเปลี่ยนส่วนหัวเหล่านี้เพื่ออนุญาตการแคชได้ ทั้ง Cloud Storage SDK ฝั่งไคลเอ็นต์และ Firebase Admin SDK ให้คุณตั้งค่าส่วนหัวเหล่านี้ได้

หากต้องการบีบอัดรูปภาพ คุณจะต้องจำกัดคุณภาพการอัปโหลดหรือมีกระบวนการฝั่งเซิร์ฟเวอร์ที่ปรับขนาดรูปภาพ มาดูข้อดีข้อเสียกัน

• ฝั่งไคลเอ็นต์ สําหรับกระบวนการฝั่งไคลเอ็นต์ คุณสามารถจํากัดขนาดไฟล์สําหรับรูปภาพที่อัปโหลดได้ ซึ่งหมายความว่าคุณไม่จําเป็นต้องเขียนหรือดูแลรักษาตรรกะเซิร์ฟเวอร์ใหม่ อย่างไรก็ตาม การดำเนินการนี้ยังหมายความว่าผู้ขายจะต้องหาวิธีปรับขนาดรูปภาพของตนเอง ซึ่งถือเป็นอุปสรรคที่ยุ่งยากและไม่สะดวกต่อการสร้างข้อมูลผลิตภัณฑ์ใหม่
• ฝั่งเซิร์ฟเวอร์ หากใช้ Cloud Functions for Firebase คุณจะเรียกใช้ฟังก์ชันที่จะปรับขนาดรูปภาพโดยอัตโนมัติเมื่ออัปโหลดได้ ซึ่งหมายความว่าผู้ขายสามารถอัปโหลดรูปภาพขนาดใดก็ได้ที่ต้องการ (ไม่ต้องทำงานเพิ่ม) และฟังก์ชันแบ็กเอนด์จะปรับขนาดรูปภาพได้อย่างราบรื่น นอกจากนี้ยังมีตัวอย่างสําหรับฟังก์ชันนี้ด้วย

ดูเหมือนว่าฝั่งเซิร์ฟเวอร์จะเป็นทางออก แต่แนวคิดนี้ยังคงเกี่ยวข้องกับการโคลน ตัวอย่าง ทำตามวิธีการตั้งค่า แล้วจึงติดตั้งใช้งานฟังก์ชันด้วย Firebase CLI การปรับขนาดรูปภาพฟังดูเป็นกรณีการใช้งานที่พบบ่อย มีวิธีอื่นที่ง่ายกว่านี้ไหม

วิธีแก้ปัญหาที่ง่ายขึ้น

คุณโชคดี แต่มีวิธีง่ายกว่านั้น นั่นคือ Firebase Extensions มาดูแคตตาล็อกส่วนขยายที่ใช้ได้ในเว็บไซต์ Firebase

ดูสิ มีส่วนขยายชื่อ "ปรับขนาดรูปภาพ" ฟังดูดี

มาลองใช้ส่วนขยายนี้ในแอปกัน

ติดตั้งส่วนขยาย

1. คลิกดูรายละเอียดเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนขยายนี้ ในส่วนสิ่งที่คุณกําหนดค่าได้ ส่วนขยายจะช่วยให้คุณกําหนดขนาดที่ต้องการเปลี่ยนขนาดได้ และคุณยังกําหนดส่วนหัวแคชได้ด้วย สมบูรณ์แบบ
2. คลิกปุ่มติดตั้งในคอนโซลในหน้ารายละเอียดของส่วนขยาย ระบบจะนําคุณไปยังหน้าคอนโซล Firebase ซึ่งแสดงโปรเจ็กต์ทั้งหมด
3. เลือกโปรเจ็กต์ FriendlyMarket ที่คุณสร้างสําหรับโค้ดแล็บนี้
4. ทำตามวิธีการบนหน้าจอจนกว่าจะถึงขั้นตอนกำหนดค่าส่วนขยาย วิธีการจะแสดงข้อมูลสรุปเบื้องต้นของส่วนขยาย รวมถึงทรัพยากรที่จะสร้างและบทบาทการเข้าถึงที่จําเป็น
5. ในช่อง **Cache-Control** ส่วนหัวสำหรับรูปภาพที่ปรับขนาด ให้ป้อนข้อมูลต่อไปนี้

public, max-age=31536000

6. ปล่อยพารามิเตอร์อื่นๆ เป็นค่าเริ่มต้น
7. คลิกติดตั้งส่วนขยาย

ขณะรอให้การติดตั้งเสร็จสมบูรณ์...

การติดตั้งด้วยอินเทอร์เฟซบรรทัดคำสั่งของ Firebase

หากใช้เครื่องมือบรรทัดคำสั่งได้คล่องกว่า คุณก็ติดตั้งและจัดการส่วนขยายโดยใช้ Firebase CLI ได้ด้วย เพียงใช้คําสั่ง firebase ext ซึ่งมีอยู่ใน CLI เวอร์ชันล่าสุด ดูข้อมูลเพิ่มเติมได้ที่นี่

(ไม่บังคับ) ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัว Cache-Control

ค่าส่วนหัว Cache-Control public, max-age=31536000 หมายความว่าระบบจะแคชรูปภาพไว้สูงสุด 1 ปี ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัว Cache-Control ได้ที่เอกสารประกอบนี้

อัปเดตโค้ดไคลเอ็นต์

ส่วนขยายที่คุณติดตั้งจะเขียนรูปภาพที่ปรับขนาดแล้วลงในที่เก็บข้อมูลเดียวกันกับรูปภาพต้นฉบับ รูปภาพที่ปรับขนาดจะมีขนาดที่กําหนดค่าไว้ต่อท้ายชื่อไฟล์ ดังนั้น หากพาธไฟล์ต้นฉบับมีลักษณะเป็น friendlymarket/user1234-car.png พาธไฟล์ของรูปภาพที่ปรับขนาดจะมีลักษณะเป็น friendlymarket/user1234-car_200x200.png

มาอัปเดตแอปเพื่อให้ดึงข้อมูลรูปภาพที่ปรับขนาดแทนรูปภาพขนาดเต็มกัน

1. เปิดไฟล์ src/firebase-refs.js ใน StackBlitz
2. แทนที่ฟังก์ชัน getImageRef ที่มีอยู่ด้วยโค้ดต่อไปนี้เพื่อสร้าง ref สำหรับรูปภาพที่ปรับขนาด

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

ทดสอบ

เนื่องจากส่วนขยายนี้จะคอยตรวจสอบการอัปโหลดรูปภาพใหม่ ระบบจะไม่ปรับขนาดรูปภาพที่มีอยู่

สร้างโพสต์ใหม่เพื่อดูการทำงานของส่วนขยาย

1. คลิก Friendly Market ในแถบด้านบนของแอปเพื่อไปยังหน้าจอหลัก
2. คลิกปุ่มขายสินค้าที่มุมขวาล่างของแอปเพื่อสร้างข้อมูล
3. ป้อน Coffee ในช่องชื่อ
4. ป้อน 1 สำหรับราคาเสนอ
5. สำหรับคำอธิบายสินค้า ให้ป้อน Selling one cafe latte. It has foam art in the shape of a bear
6. ดาวน์โหลดรูปภาพถ้วยกาแฟนี้ลงในคอมพิวเตอร์ แล้วอัปโหลดด้วยปุ่มรูปภาพสินค้า file_downloadดาวน์โหลดรูปภาพ
7. หลังจากกรอกข้อมูลในช่องทั้งหมดและอัปโหลดรูปภาพแล้ว ให้คลิกโพสต์ คุณจะเห็นข้อมูลกาแฟปรากฏใต้ไซโลโฟน
8. ในแดชบอร์ดฟังก์ชันในคอนโซล Firebase ให้คลิกแท็บบันทึก คุณควรเห็นบันทึกจากฟังก์ชันที่แสดงว่ามีการเรียกใช้

9. ไปที่แดชบอร์ดพื้นที่เก็บข้อมูลเพื่อดูทั้งรูปภาพกาแฟต้นฉบับและเวอร์ชันที่ปรับขนาดแล้วในเส้นทาง friendlymarket
10. ในแผงแสดงตัวอย่างของ StackBlitz ให้โหลดหน้าจอหลักของแอปซ้ำ 2-3 ครั้ง คุณควรเห็นว่ารูปภาพกาแฟโหลดเร็วกว่ารูปภาพระนาดเอกอย่างมาก

รูปภาพจะโหลดเร็วขึ้นในหน้าเว็บที่โหลดครั้งแรกเนื่องจากมีขนาดเล็กกว่า และเมื่อหน้าเว็บรีเฟรชในภายหลัง ระบบจะโหลดรูปภาพจากแคชของเบราว์เซอร์แทนที่จะทริกเกอร์คำขอเครือข่าย

5. กำหนดค่าส่วนขยายอีกครั้ง

ปัญหา

แอปจะบันทึกข้อมูลผลิตภัณฑ์ของผู้ขายเวอร์ชันฉบับร่างโดยอัตโนมัติ ผู้ใช้ชอบฟีเจอร์นี้ แต่สถิติของคุณน่ากังวลเล็กน้อย รายงานของคุณระบุว่ามีเพียงประมาณ 10% ของฉบับร่างเท่านั้นที่โพสต์จริง ส่วนอีก 90% ที่เหลือก็แค่กินพื้นที่ในฐานข้อมูล

วิธีแก้ปัญหา

หลังจากคำนวณคร่าวๆ แล้ว คุณพบว่าคุณจำเป็นต้องบันทึกฉบับร่างไว้เพียงประมาณ 5 ฉบับในแต่ละครั้ง

จำแคตตาล็อก Firebase Extensions ได้ไหม อาจมีวิธีแก้ปัญหาสำหรับสถานการณ์นี้อยู่แล้ว มาติดตั้งส่วนขยายจํากัดโหนดย่อยเพื่อจํากัดจำนวนฉบับร่างที่บันทึกไว้ไม่ให้เกิน 5 รายการโดยอัตโนมัติ ส่วนขยายจะลบฉบับร่างที่เก่าที่สุดทุกครั้งที่มีการเพิ่มฉบับร่างใหม่

1. คลิกปุ่มติดตั้งในหน้ารายละเอียดของส่วนขยาย
2. เลือกโปรเจ็กต์ Firebase ที่คุณใช้สำหรับเว็บแอปของมาร์เก็ตเพลซ
3. ทำตามวิธีการบนหน้าจอจนกว่าจะถึงขั้นตอนกำหนดค่าส่วนขยาย
4. ป้อน drafts สำหรับเส้นทาง Realtime Database เส้นทางนี้อยู่ในฐานข้อมูลที่บันทึกฉบับร่างไว้
5. ป้อน 5 สำหรับจำนวนโหนดสูงสุดที่จะเก็บไว้ ซึ่งหมายความว่าระบบจะบันทึกรายการฉบับร่าง 5 รายการสำหรับสินค้าแต่ละรายการ และหากเพิ่มรายการอื่น ระบบจะลบรายการฉบับร่างที่เก่าที่สุดโดยอัตโนมัติ
6. คลิกติดตั้งส่วนขยาย

ระหว่างรอให้การติดตั้งเสร็จสมบูรณ์...

ส่วนขยายการตรวจสอบ

เมื่อคุณติดตั้งส่วนขยาย กระบวนการนี้จะสร้างฟังก์ชันหลายรายการ คุณอาจต้องตรวจสอบความถี่ที่ฟังก์ชันเหล่านี้ทำงาน หรือดูบันทึกและอัตราข้อผิดพลาด ดูข้อมูลโดยละเอียดเกี่ยวกับวิธีตรวจสอบส่วนขยายได้ที่จัดการส่วนขยายที่ติดตั้ง ทำตามวิธีการในเอกสารประกอบเพื่อดูฟังก์ชันที่สร้างโดยส่วนขยายปรับขนาดรูปภาพในขั้นตอนก่อนหน้า

การถอนการติดตั้งส่วนขยาย

หากต้องการนําส่วนขยายออกจากโปรเจ็กต์ คุณอาจต้องการลบฟังก์ชันแต่ละรายการที่ส่วนขยายสร้างขึ้น แต่วิธีนี้อาจทําให้โปรเจ็กต์ทํางานผิดปกติ เนื่องจากส่วนขยายหนึ่งๆ อาจสร้างฟังก์ชันได้หลายรายการ ดูวิธีถอนการติดตั้งส่วนขยายในเอกสารประกอบ

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

การติดตั้งส่วนขยายหลายชุดในโปรเจ็กต์เดียว

คุณไม่จำเป็นต้องติดตั้งอินสแตนซ์เดียวของส่วนขยายหนึ่งๆ ในโปรเจ็กต์ หากต้องการจํากัดรายการในเส้นทางอื่น คุณสามารถติดตั้งอินสแตนซ์อื่นของส่วนขยายนี้ได้ แต่สำหรับวัตถุประสงค์ของโค้ดแล็บนี้ คุณจะต้องติดตั้งส่วนขยายเพียงครั้งเดียว

ดูการใช้งานจริง

1. ตรวจสอบว่าคุณได้เข้าสู่ระบบด้วยบัญชีที่ใช้โพสต์ไซโลโฟนหรือลาเต้
2. สร้างฉบับร่าง
3. คลิกปุ่มขายสินค้าที่มุมขวาล่างของแอป
4. แก้ไขชื่อเป็น "ฉบับร่าง 1"
5. เลื่อนลงไปที่ส่วนฉบับร่างและดูจำนวนฉบับร่าง ควรมีอย่างน้อย 2 รายการ
6. คลิกปุ่ม FRIENDLY MARKET ในแถบแอปด้านบน วิธีนี้จะช่วยให้คุณมีข้อความร่างที่บันทึกไว้แต่ไม่ต้องโพสต์
7. ทำซ้ำสำหรับ "ฉบับร่าง 2" "ฉบับร่าง 3" และต่อไปจนถึง "ฉบับร่าง 6"
8. เมื่อสร้าง "ฉบับร่าง 6" โปรดทราบว่า "ฉบับร่าง 1" จะหายไปจากส่วนฉบับร่าง
9. คุณสามารถตรวจสอบบันทึกฟังก์ชันเพื่อดูว่าฟังก์ชันใดเรียกให้แสดงผล เช่นเดียวกับที่ทำกับส่วนขยายการปรับขนาดรูปภาพ

อ๊ะ ขีดจำกัดของฉบับร่างที่จะเก็บไว้มีจำนวนน้อยเกินไป

ทีมสนับสนุนลูกค้าติดต่อมาเพื่อแจ้งให้ทราบว่าผู้ขายที่ผลิตเนื้อหามากที่สุดบางรายของคุณบ่นว่าระบบลบแบบร่างออกก่อนที่พวกเขาจะโพสต์ได้ คุณตรวจสอบการคำนวณกับสมาชิกในทีมแล้ว และพบว่าการคำนวณของคุณผิดไป 10,000 เท่า

วิธีแก้ปัญหา มากำหนดค่าส่วนขยายที่ติดตั้งอีกครั้งกัน

1. คลิกส่วนขยายในแผงด้านซ้ายของคอนโซล Firebase
2. คลิกจัดการในการ์ดของส่วนขยายที่ติดตั้ง
3. คลิกกำหนดค่าส่วนขยายใหม่ที่มุมขวาบน
4. เปลี่ยนจำนวนสูงสุดของโหนดที่จะเก็บไว้เป็น 50000
5. คลิกบันทึก

เพียงเท่านี้คุณก็พร้อมใช้งาน ในระหว่างที่ส่วนขยายกำลังอัปเดต คุณสามารถพูดคุยกับทีมสนับสนุนและแจ้งให้ทีมทราบว่ามีการเริ่มใช้งานการแก้ไขแล้ว

6. ลบข้อมูลผู้ใช้โดยอัตโนมัติ

ปัญหา

ทีมสนับสนุนลูกค้าได้ติดต่อคุณอีกครั้งแล้ว ผู้ขายที่ลบบัญชีไปแล้วยังคงได้รับอีเมลจากผู้ใช้รายอื่นอยู่และรู้สึกไม่พอใจ ผู้ขายเหล่านี้คาดหวังว่าระบบจะลบอีเมลของตนออกจากระบบของคุณเมื่อลบบัญชีแล้ว

ขณะนี้ทีมสนับสนุนได้ลบข้อมูลของผู้ใช้แต่ละรายด้วยตนเอง แต่เราจะต้องหาวิธีที่ดีกว่านี้ คุณลองพิจารณาและเขียนงานแบบเป็นกลุ่มของคุณเองซึ่งจะทํางานเป็นระยะๆ และล้างอีเมลออกจากบัญชีที่ลบไปแล้ว แต่การลบข้อมูลผู้ใช้ดูเหมือนจะเป็นปัญหาที่พบได้ทั่วไป ส่วนขยาย Firebase อาจช่วยแก้ปัญหานี้ได้เช่นกัน

วิธีแก้ปัญหา

คุณจะกำหนดค่าส่วนขยายลบข้อมูลผู้ใช้ให้ลบโหนด users/uid ในฐานข้อมูลโดยอัตโนมัติเมื่อผู้ใช้ลบบัญชี

1. คลิกปุ่มติดตั้งในหน้ารายละเอียดของส่วนขยาย
2. เลือกโปรเจ็กต์ Firebase ที่คุณใช้สำหรับเว็บแอปของมาร์เก็ตเพลซ
3. ทำตามวิธีการบนหน้าจอจนกว่าจะถึงขั้นตอนกำหนดค่าส่วนขยาย
4. สำหรับเส้นทาง Realtime Database ให้ป้อน sellers/{UID} ส่วน sellers คือโหนดที่มีโหนดย่อยซึ่งมีอีเมลของผู้ใช้ และ {UID} คือไวลด์การ์ด เมื่อใช้การกําหนดค่านี้ ส่วนขยายจะทราบว่าเมื่อผู้ใช้ที่มี UID 1234 ลบบัญชีแล้ว ส่วนขยายควรลบ sellers/1234 ออกจากฐานข้อมูล
5. คลิกติดตั้งส่วนขยาย

ขณะที่รอให้การติดตั้งเสร็จสมบูรณ์...

มาพูดถึงความสามารถในการปรับแต่ง

ในโค้ดแล็บนี้ คุณได้เห็นว่าส่วนขยาย Firebase ช่วยแก้ปัญหา Use Case ที่พบบ่อยได้ และสามารถกําหนดค่าส่วนขยายให้เหมาะกับความต้องการของแอป

อย่างไรก็ตาม ส่วนขยายไม่สามารถแก้ปัญหาทั้งหมดได้ และปัญหาการลบข้อมูลผู้ใช้ก็เป็นตัวอย่างที่ดีในเรื่องนี้ แม้ว่าส่วนขยาย "ลบข้อมูลผู้ใช้" จะจัดการกับการร้องเรียนในปัจจุบันที่ว่าอีเมลยังคงแสดงอยู่หลังจากที่ผู้ใช้ลบบัญชีแล้ว แต่ส่วนขยายดังกล่าวจะไม่ลบทุกอย่าง เช่น ข้อมูลผลิตภัณฑ์จะยังคงแสดงอยู่ และรูปภาพใน Cloud Storage จะยังคงอยู่ด้วย ส่วนขยาย "ลบข้อมูลผู้ใช้" ช่วยให้เราสามารถกำหนดค่าเส้นทางใน Cloud Storage เพื่อลบได้ แต่เนื่องจากผู้ใช้สามารถอัปโหลดไฟล์ต่างๆ หลายไฟล์ที่มีชื่อแตกต่างกัน คุณจึงไม่สามารถกำหนดค่าส่วนขยายนี้ให้ลบรายการต่างๆ เหล่านี้โดยอัตโนมัติได้ ในกรณีเช่นนี้ Cloud Functions for Firebase อาจเหมาะกว่าเพื่อให้คุณเขียนโค้ดที่เจาะจงสำหรับโมเดลข้อมูลของแอปได้

ส่วนขยายและการเรียกเก็บเงิน

ส่วนขยาย Firebase นั้นไม่มีค่าใช้จ่ายในการใช้งาน (ระบบจะเรียกเก็บเงินเฉพาะทรัพยากรพื้นฐานที่คุณใช้) แต่ทรัพยากรพื้นฐานบางอย่างที่ส่วนขยายต้องใช้อาจต้องมีการเรียกเก็บเงิน โค้ดแล็บนี้ออกแบบมาให้ทำเสร็จได้โดยไม่ต้องมีบัญชีการเรียกเก็บเงิน อย่างไรก็ตาม การตั้งค่าแพ็กเกจ Flame หรือ Blaze จะปลดล็อกส่วนขยาย Firebase ที่น่าสนใจมากมาย

เช่น คุณสามารถย่อ URL, ทริกเกอร์อีเมล, ส่งออกคอลเล็กชันไปยัง BigQuery และอื่นๆ ดูแคตตาล็อกส่วนขยายทั้งหมดได้ที่นี่

หากมีส่วนขยายที่คุณต้องการ แต่ยังไม่พร้อมใช้งานในขณะนี้ เรายินดีรับฟังความคิดเห็นของคุณ ยื่นคำขอฟีเจอร์กับทีมสนับสนุน Firebase เพื่อแนะนำส่วนขยายใหม่

ดูการใช้งานจริง

หลังจากติดตั้งส่วนขยายเสร็จแล้ว ให้ลบผู้ใช้แล้วดูสิ่งที่เกิดขึ้น

1. ในคอนโซล Firebase ให้ไปที่หน้าแดชบอร์ดฐานข้อมูลเรียลไทม์
2. ขยายโหนด sellers
3. ข้อมูลของผู้ขายแต่ละรายจะจัดเก็บตาม UID ของผู้ใช้ เลือก UID ของผู้ใช้
4. ในคอนโซล Firebase ให้ไปที่แดชบอร์ดการตรวจสอบสิทธิ์ แล้วค้นหา UID ของผู้ใช้
5. ขยายเมนูทางด้านขวาของ UID แล้วเลือกลบบัญชี

6. กลับไปที่แดชบอร์ด Realtime Database ข้อมูลผู้ขายจะหายไป

7. ยินดีด้วย

แม้ว่าคุณจะเขียนโค้ดไม่มากนักใน Codelab นี้ แต่คุณได้เพิ่มฟีเจอร์สําคัญลงในแอป Marketplace แล้ว

คุณได้เรียนรู้วิธีค้นหา กำหนดค่า ติดตั้ง และกำหนดค่าส่วนขยายอีกครั้ง นอกจากนี้ คุณยังได้ดูวิธีตรวจสอบส่วนขยายที่ติดตั้งและวิธีถอนการติดตั้งหากจำเป็น

ขั้นตอนถัดไป

ลองดูส่วนขยายอื่นๆ เหล่านี้

• แปลสตริงข้อความใน Cloud Firestore (ต้องมีบัญชีสำหรับการเรียกเก็บเงิน)
• เพิ่มผู้ใช้ใหม่ในรายชื่ออีเมล Mailchimp (ต้องมีบัญชีการเรียกเก็บเงิน)
• ย่อ URL (ต้องมีบัญชีการเรียกเก็บเงิน)

หากต้องการโค้ดฝั่งเซิร์ฟเวอร์ที่กําหนดเองเพิ่มเติม

• ดู Codelab ของ Cloud Functions for Firebase

เอกสารอื่นๆ ที่เป็นประโยชน์

การจัดการชิ้นงาน:

• ลองจัดการส่วนขยายด้วย Firebase CLI
• ตั้งการแจ้งเตือนงบประมาณ
• ตรวจสอบความถี่ที่ส่วนขยายที่ติดตั้งทำงาน
• อัปเดตส่วนขยายที่ติดตั้งเป็นเวอร์ชันใหม่
• ถอนการติดตั้งส่วนขยาย

ดูรายละเอียดเพิ่มเติมเกี่ยวกับชิ้นงาน

• ดูซอร์สโค้ดและเอกสารสำหรับส่วนขยายแต่ละรายการใน GitHub
• ดูข้อมูลเกี่ยวกับสิทธิ์และการเข้าถึงที่มอบให้แก่ส่วนขยาย