เพิ่มฟังก์ชันการทำงานใหม่ให้กับเว็บแอปของคุณอย่างรวดเร็วด้วย Firebase Extensions

1. บทนำ

เป้าหมาย

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

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

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

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

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

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

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

สิ่งที่คุณต้องการ

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

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

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

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

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

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

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

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

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

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

เปิดใช้งานฐานข้อมูลเรียลไทม์

แอปใช้ฐานข้อมูล Firebase Realtime เพื่อบันทึกรายการขาย

1. ในส่วน พัฒนา ที่แผงด้านซ้ายของคอนโซล Firebase ให้คลิก ฐานข้อมูล
2. เลื่อนหน้าลง ผ่านบานหน้าต่าง Cloud Firestore แล้วคลิก สร้างฐานข้อมูล ในบานหน้าต่าง ฐานข้อมูลเรียลไทม์

3. เลือก เริ่มต้นในโหมดล็อค แล้วคลิก เปิดใช้งาน

ตั้งกฎความปลอดภัย

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

1. ที่ด้านบนของแดชบอร์ดฐานข้อมูลเรียลไทม์ ให้คลิกแท็บ กฎ

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 สำหรับ Firebase เพื่อบันทึกรูปภาพของสินค้าที่ขาย

1. ในส่วน พัฒนา ที่แผงด้านซ้ายของคอนโซล Firebase ให้คลิก ที่เก็บข้อมูล
2. คลิก เริ่มต้นใช้งาน

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

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

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 ให้คลิก Fork

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

เพิ่ม Firebase Web App ให้กับโปรเจ็กต์

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

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

เพิ่มการกำหนดค่าโครงการของคุณไปยังแอปของคุณ:

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

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

ดูตัวอย่างแบบโต้ตอบทางด้านขวาของหน้าจอ StackBlitz:

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

ลองใช้แอป:

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. ค้นหาและติดตั้งส่วนขยาย

ปัญหา

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

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

การแก้ไขปัญหา

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

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

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

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

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

ทางออกที่ง่ายกว่า

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

ดูสิ! มีส่วนขยายที่เรียกว่า "Resize Images" นั่นดูมีแนวโน้ม

มาใช้ส่วนขยายนี้ในแอปของคุณกันเถอะ!

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

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

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

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

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

5. กำหนดค่าส่วนขยายใหม่

ปัญหา

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

การแก้ไขปัญหา

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

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

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

ขณะที่คุณกำลังรอการติดตั้งให้เสร็จสิ้น...

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

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

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

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

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

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

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

ดูมันในการดำเนินการ

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

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

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

คุณจะแก้ไขปัญหานี้ได้อย่างไร? มากำหนดค่าส่วนขยายที่ติดตั้งใหม่กันเถอะ!

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

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

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

ปัญหา

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

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

การแก้ไขปัญหา

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

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

ขณะที่คุณกำลังรอการติดตั้งให้เสร็จสิ้น...

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

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

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

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

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

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

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

ดูมันในการดำเนินการ

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

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

6. กลับไปที่แดชบอร์ด ฐานข้อมูลเรียลไทม์ ของคุณ ข้อมูลแม่ค้าจะหาย!

7. ขอแสดงความยินดี!

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

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

อะไรต่อไป?

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

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

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

• ลองดู Cloud Functions สำหรับ Firebase codelab

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

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

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

การเรียนรู้รายละเอียดปลีกย่อยเกี่ยวกับส่วนขยาย:

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