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

1. บทนำ

เป้าหมาย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เปิดใช้ Realtime Database

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

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

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

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

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

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

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

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

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

Fork โปรเจ็กต์ StackBlitz

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

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

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

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

เพิ่ม Firebase Web App ลงในโปรเจ็กต์

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

8. คลิกไปยังคอนโซล

เพิ่มการกำหนดค่าของโปรเจ็กต์ลงในแอป

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

แอปนี้เริ่มต้นจากอะไร

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

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

ลองใช้แอป

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 ที่คุณสร้างไว้สำหรับ Codelab นี้
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. สำหรับเส้นทาง Realtime Database ให้ป้อน drafts นี่คือเส้นทางในฐานข้อมูลที่ระบบบันทึกฉบับร่าง
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 เองนั้นไม่มีค่าใช้จ่ายในการใช้งาน (ระบบจะเรียกเก็บเงินเฉพาะทรัพยากรพื้นฐานที่คุณใช้) แต่ทรัพยากรพื้นฐานบางอย่างที่ส่วนขยายต้องการอาจต้องมีการเรียกเก็บเงิน Codelab นี้ออกแบบมาให้ทำได้โดยไม่ต้องมีบัญชีสำหรับการเรียกเก็บเงิน อย่างไรก็ตาม การตั้งค่าแพ็กเกจ Flame หรือ Blaze จะช่วยให้คุณใช้ส่วนขยาย Firebase ที่น่าสนใจมากมายได้

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

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

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

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

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

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

7. ยินดีด้วย

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

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

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

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

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

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

• ดู Codelab ของ Cloud Functions for Firebase

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

การจัดการส่วนขยาย:

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

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

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