สร้างเว็บแอปที่ขับเคลื่อนด้วย AI ด้วย Firebase Extensions

1. ก่อนที่คุณจะเริ่ม

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

ข้อกำหนดเบื้องต้น

• มีความรู้เกี่ยวกับ Node.js และ JavaScript

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

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

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

• เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
• สภาพแวดล้อมการพัฒนาพร้อมโปรแกรมแก้ไขโค้ดและเทอร์มินัล
• บัญชี Google สำหรับการสร้างและการจัดการโครงการ Firebase ของคุณ

2. ตรวจสอบเว็บแอปและบริการ Firebase

ส่วนนี้จะอธิบายเว็บแอปที่คุณจะสร้างใน Codelab นี้ และ Firebase ที่คุณจะใช้ในการสร้าง

แอพ รีวิว

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

แอพ แชทบอท

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

แอพ แนะนำวิดีโอ

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

นี่คือส่วนขยายที่ใช้ในแอป Video Hint :

• ติดป้ายกำกับวิดีโอด้วยส่วนขยาย Cloud Video AI — แยกป้ายกำกับจากวิดีโอแต่ละรายการที่อัปโหลดไปยังพื้นที่จัดเก็บข้อมูล
• งานภาษาที่มีส่วนขยาย PaLM API — สรุปป้ายกำกับเป็นคำอธิบายข้อความ
• แปลงส่วนขยายข้อความเป็นคำพูด — สร้างเวอร์ชันเสียงของคำอธิบายวิดีโอ

3. ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

ตรวจสอบเวอร์ชัน Node.js ของคุณ

1. ในเทอร์มินัลของคุณ ให้ตรวจสอบว่าคุณได้ติดตั้ง Node.js v20.0.0 หรือสูงกว่า:

   node -v
   

2. หากคุณไม่มี Node.js v20.0.0 หรือสูงกว่า ให้ดาวน์โหลดและติดตั้ง

ดาวน์โหลดที่เก็บ

1. หากคุณติดตั้ง git ให้โคลนที่เก็บ GitHub ของ codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. หากคุณไม่ได้ติดตั้ง git ให้ดาวน์โหลดที่เก็บ GitHub เป็นไฟล์ zip

ตรวจสอบโครงสร้างโฟลเดอร์

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

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

หากคุณไม่แน่ใจว่าคุณใช้โค้ดอย่างถูกต้องตามคำแนะนำใน Codelab นี้หรือไม่ คุณสามารถค้นหาโค้ดโซลูชันสำหรับแอปที่เกี่ยวข้องได้ในโฟลเดอร์ reviewly-end , chatbot-end และ video-hint-end

ติดตั้ง Firebase CLI

เรียกใช้คำสั่งต่อไปนี้เพื่อตรวจสอบว่าคุณได้ติดตั้ง Firebase CLI และเป็นเวอร์ชัน 12.5.4 หรือสูงกว่า:

firebase --version

• หากคุณติดตั้ง Firebase CLI ไว้ แต่ไม่ใช่ v12.5.4 หรือสูงกว่า ให้อัปเดต:

  npm update -g firebase-tools
  

• หากคุณไม่ได้ติดตั้ง Firebase CLI ให้ติดตั้ง:

  npm install -g firebase-tools
  

หากคุณไม่สามารถติดตั้ง Firebase CLI ได้เนื่องจากข้อผิดพลาดในการอนุญาต โปรดดู เอกสาร NPM หรือใช้ ตัวเลือกการติดตั้ง อื่น

เข้าสู่ระบบ Firebase

1. ในเทอร์มินัลของคุณ ให้นำทางไปยังโฟลเดอร์ ai-extensions-codelab และเข้าสู่ระบบ Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. หากเทอร์มินัลของคุณแจ้งว่าคุณเข้าสู่ระบบ Firebase แล้ว ให้ไปที่ส่วน ตั้งค่าโปรเจ็กต์ Firebase ของ Codelab นี้
3. ขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูลหรือไม่ ให้ป้อน Y หรือ N
4. ในเบราว์เซอร์ของคุณ ให้เลือกบัญชี Google ของคุณ จากนั้นคลิก อนุญาต

4. ตั้งค่าโปรเจ็กต์ Firebase ของคุณ

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

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

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

ดาวน์โหลดบัญชีบริการ Firebase

เว็บแอปบางตัวที่คุณจะสร้างใน Codelab นี้ใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย Next.js

Firebase Admin SDK สำหรับ Node.js ถูกใช้เพื่อให้แน่ใจว่ากฎความปลอดภัยทำงานได้จากโค้ดฝั่งเซิร์ฟเวอร์ หากต้องการใช้ API ใน Firebase Admin คุณต้องดาวน์โหลด บัญชีบริการ Firebase จากคอนโซล Firebase

1. ในคอนโซล Firebase ให้ไปที่หน้า บัญชีบริการ ใน การตั้งค่าโครงการ
2. คลิก สร้างคีย์ส่วนตัวใหม่ > สร้างคีย์
3. หลังจากดาวน์โหลดไฟล์ไปยังระบบไฟล์ของคุณแล้ว ให้รับเส้นทางแบบเต็มไปยังไฟล์นั้น
   ตัวอย่างเช่น หากคุณดาวน์โหลดไฟล์ไปยังโฟลเดอร์ ดาวน์โหลด พาธแบบเต็มอาจมีลักษณะดังนี้: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. ในเทอร์มินัลของคุณ ให้ตั้งค่าตัวแปรสภาพแวดล้อม GOOGLE_APPLICATION_CREDENTIALS เป็นเส้นทางของคีย์ส่วนตัวที่คุณดาวน์โหลด ในสภาพแวดล้อม Unix คำสั่งอาจมีลักษณะดังนี้:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

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

อัปเกรดแผนราคา Firebase ของคุณ

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

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

อย่างไรก็ตาม โปรดทราบว่าการทำ Codelab นี้เสร็จสิ้นไม่ควรมีค่าใช้จ่ายจริงใดๆ

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

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

ตั้งค่าบริการ Firebase ในคอนโซล Firebase

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

ตั้งค่าการรับรองความถูกต้อง

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

1. ในคอนโซล Firebase ให้ไปที่ Authentication
2. คลิก เริ่มต้นใช้งาน
3. ในคอลัมน์ ผู้ให้บริการเพิ่มเติม คลิก Google > เปิดใช้งาน

4. ในกล่องข้อความ ชื่อที่เปิดเผยต่อสาธารณะสำหรับโปรเจ็กต์ ให้ป้อนชื่อที่น่าจดจำ เช่น My AI Extensions Codelab
5. จากดรอปดาวน์ อีเมลสนับสนุนสำหรับโครงการ ให้เลือกที่อยู่อีเมลของคุณ
6. คลิก บันทึก
   

ตั้งค่า Cloud Firestore

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

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

ตั้งค่า Cloud Storage สำหรับ Firebase

คุณจะใช้ Cloud Storage กับแอป Video Hint และลองใช้ส่วน ขยายแปลงข้อความเป็นคำพูด (ขั้นตอนถัดไปของ Codelab)

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

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

5. ตั้งค่าส่วนขยาย "งานภาษาด้วย PaLM API" สำหรับแอป Reviewly

ติดตั้ง งานภาษาด้วยส่วนขยาย PaLM API

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

5. คลิก ถัดไป > ถัดไป
6. ในกล่องข้อความ เส้นทางคอลเลก ชัน ให้ป้อน bot
7. ในกล่องข้อความ พร้อมท์ ให้ป้อน
8. ในกล่องข้อความ ช่องตัวแปร ให้ป้อน input
9. ในกล่องข้อความ ช่องตอบกลับ ให้ป้อน text
10. จากดรอปดาวน์ ตำแหน่ง Cloud Functions ให้เลือก Iowa (us-central1) หรือตำแหน่งที่คุณเลือกไว้ก่อนหน้านี้สำหรับ Firestore และ Cloud Storage
11. จากดรอปดาวน์ โมเดลภาษา ให้เลือก text-bison-001
12. ปล่อยให้ค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น
13. คลิก ติดตั้งส่วนขยาย และรอให้ส่วนขยายติดตั้ง

ลองใช้ งานภาษาที่มีส่วนขยาย PaLM API

แม้ว่าเป้าหมายของ Codelab นี้คือการโต้ตอบกับ งานภาษาที่มีส่วนขยาย PaLM API ผ่านเว็บแอป แต่การทำความเข้าใจวิธีการทำงานของส่วนขยายโดยการทริกเกอร์ส่วนขยายโดยใช้คอนโซล Firebase ก็มีประโยชน์ ส่วนขยายจะทริกเกอร์เมื่อมีการเพิ่มเอกสาร Cloud Firestore ลงในคอ bot เลกชันบ็อต

หากต้องการดูวิธีการทำงานของส่วนขยายโดยใช้คอนโซล Firebase ให้ทำตามขั้นตอนเหล่านี้:

1. ในคอนโซล Firebase ให้ไปที่ Firestore
2. ในคอลเลกชัน bot ท คลิก เพิ่มเอกสาร .
3. ในกล่องข้อความ ID เอกสาร ให้คลิก ID อัตโนมัติ
4. ในกล่องข้อความ ฟิลด์ ให้ป้อน input
5. ในกล่องข้อความ ค่า ให้ป้อน Tell me about the moon
6. คลิก บันทึก และรอสักครู่ ขณะนี้เอกสารของคุณภายในคอลเลกชัน bot มีการตอบสนองต่อคำถามของคุณแล้ว

6. ตั้งค่าแอป Reviewly เพื่อใช้ Firebase

หากต้องการเรียกใช้แอป Reviewly คุณต้องตั้งค่าโค้ดของแอปและ Firebase CLI เพื่อโต้ตอบกับโปรเจ็กต์ Firebase ของคุณ

เพิ่มบริการ Firebase และการกำหนดค่าลงในโค้ดของแอป

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

แอปตัวอย่างของ Codelab นี้มีโค้ดการนำเข้าและการเริ่มต้นที่จำเป็นทั้งหมดสำหรับ SDK แล้ว (ดู reviewly-start/js/reviews.js ) ดังนั้นคุณไม่จำเป็นต้องเพิ่มสิ่งเหล่านี้ อย่างไรก็ตาม แอปตัวอย่างมีเพียงค่าตัวยึดตำแหน่งสำหรับการกำหนดค่า Firebase (ดู reviewly-start/js/firebase-config.js ) ดังนั้นคุณต้องลงทะเบียนแอปของคุณกับโปรเจ็กต์ Firebase เพื่อรับค่าการกำหนดค่า Firebase ที่ไม่ซ้ำกันสำหรับแอปของคุณ

1. ในคอนโซล Firebase ในโปรเจ็กต์ Firebase ของคุณ ให้ไปที่ ภาพรวมโปรเจ็กต์ จากนั้นคลิก เว็บ .
   
2. ในกล่องข้อความ ชื่อเล่นแอป ให้ป้อนชื่อเล่นแอปที่น่าจดจำ เช่น My Reviewly app
3. อย่า เลือกช่องทำเครื่องหมาย ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คุณจะทำตามขั้นตอนเหล่านี้ในภายหลังใน Codelab
4. คลิก ลงทะเบียนแอป
5. คอนโซลจะแสดงข้อมูลโค้ดสำหรับการเพิ่มและเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่า Firebase เฉพาะแอป คัดลอกคุณสมบัติทั้งหมดในออบเจ็กต์การกำหนดค่า Firebase
6. ในตัวแก้ไขโค้ด ให้เปิดไฟล์ reviewly-start/js/firebase-config.js
7. แทนที่ค่าตัวยึดตำแหน่งด้วยค่าที่คุณเพิ่งคัดลอก ไม่เป็นไรหากคุณมีคุณสมบัติและค่าสำหรับบริการ Firebase ที่คุณไม่ได้ใช้ในแอป Reviewly
8. บันทึกไฟล์.
9. กลับไปที่คอนโซล Firebase คลิก ดำเนินการต่อไปยังคอนโซล

ตั้งค่าเทอร์มินัลของคุณเพื่อรันคำสั่ง Firebase CLI กับโปรเจ็กต์ Firebase ของคุณ

1. ในเทอร์มินัลของคุณ ให้นำทางไปยังโฟลเดอร์ ai-extensions-codelab ที่คุณดาวน์โหลดไว้ก่อนหน้านี้
2. นำทางไปยังโฟลเดอร์แอปพลิเคชันเว็บ reviewly-start :

   cd reviewly-start
   

3. ทำให้คำสั่งเรียกใช้ Firebase CLI กับโปรเจ็กต์ Firebase เฉพาะ:

   firebase use YOUR_PROJECT_ID
   

เรียกใช้และดูเว็บแอป Reviewly

หากต้องการเรียกใช้และดูเว็บแอป ให้ทำตามขั้นตอนเหล่านี้:

1. ในเทอร์มินัลของคุณ ให้ติดตั้งการขึ้นต่อกัน จากนั้นรันเว็บแอป:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. ในเบราว์เซอร์ของคุณ ให้นำทางไปยัง URL ที่แสดงในเทอร์มินัลของคุณ ตัวอย่างเช่น: http://localhost:8080

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

7. เพิ่มฟังก์ชันการทำงานให้กับแอป Reviewly

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

ปรับใช้กฎความปลอดภัย

แอปตัวอย่างของ Codelab นี้มีชุดกฎความปลอดภัยสำหรับ Firestore และสำหรับ Cloud Storage สำหรับ Firebase หลังจากที่คุณปรับใช้กฎความปลอดภัยเหล่านี้กับโปรเจ็กต์ Firebase แล้ว ข้อมูลในฐานข้อมูลและบัคเก็ตของคุณจะได้รับการปกป้องจากการใช้ในทางที่ผิดได้ดีขึ้น

คุณสามารถดูกฎเหล่านี้ได้ในไฟล์ firestore.rules และ storage.rules

1. หากต้องการปรับใช้กฎความปลอดภัยเหล่านี้ ให้รันคำสั่งนี้ในเทอร์มินัลของคุณ:

   firebase deploy --only firestore:rules,storage
   

2. หากระบบถาม: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ให้เลือก ใช่

อัปเดตโค้ดของแอปเพื่อทริกเกอร์ส่วนขยาย

ในแอป Reviewly บทวิจารณ์ใหม่ที่เพิ่มลงใน Firestore จะทริกเกอร์ส่วนขยายเพื่อสรุปบทวิจารณ์

1. ในตัวแก้ไขโค้ด ให้เปิดไฟล์ functions/add-mock-reviews.js
2. แทนที่ตัวแปร reviewWithPrompt ด้วยโค้ดต่อไปนี้ ซึ่งจะพร้อมต์โมเดลภาษาสำหรับการตรวจสอบที่สั้นลง

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. หลังจากตัวแปร reviewWithPrompt ให้แทนที่ตัวแปร reviewDocument ด้วยโค้ดต่อไปนี้ ซึ่งจะสร้างเอกสารการตรวจสอบเพื่อให้สามารถเพิ่มลงใน Firestore ได้

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. บันทึกไฟล์.
5. ในไฟล์ js/reviews.js หลังจาก Insert code below, to import your Firebase Callable Cloud Function ให้นำเข้าฟังก์ชันที่เรียกได้ของ Firebase HTTP ด้วย httpsCallable helper :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. หลังจาก Insert code below, to invoke your Firebase Callable Cloud Function ให้เรียกใช้ฟังก์ชันที่เรียกใช้ Firebase HTTP ของคุณ:

   await addMockReviews();
   

7. บันทึกไฟล์.

ปรับใช้ฟังก์ชันเพื่อเพิ่มบทวิจารณ์ใหม่

เว็บแอป Reviewly ใช้ฟังก์ชันคลาวด์เพื่อเพิ่มบทวิจารณ์ แต่ขณะนี้ Cloud Function ยังไม่ได้ใช้งาน

หากต้องการปรับใช้ฟังก์ชันของคุณด้วย Firebase CLI ให้ทำตามขั้นตอนเหล่านี้:

1. ในเทอร์มินัลของคุณในขณะที่ยังอยู่ในโฟลเดอร์ reviewly-start ให้กด Control+C เพื่อหยุดเซิร์ฟเวอร์
2. ปรับใช้ฟังก์ชันของคุณ:

   firebase deploy --only functions
   

3. หากคุณเห็น Permission denied while using the Eventarc Service Agent หรือมีข้อผิดพลาดที่คล้ายกัน ให้รอสักครู่ แล้วลองคำสั่งอีกครั้ง

คุณเพิ่งปรับใช้ฟังก์ชันที่กำหนดเองครั้งแรกกับ Cloud Functions คอนโซล Firebase มี แดชบอร์ด ที่คุณสามารถดูฟังก์ชันทั้งหมดที่คุณปรับใช้กับโปรเจ็กต์ Firebase ของคุณ

เรียกใช้และดูเว็บแอป Reviewly อีกครั้ง (ขณะนี้มีฟังก์ชันการทำงาน)

หากต้องการเรียกใช้และดูเว็บแอปที่ใช้งานได้ในขณะนี้ ให้ทำตามขั้นตอนเหล่านี้:

1. ในเทอร์มินัลของคุณ ให้รันเซิร์ฟเวอร์อีกครั้ง:

   npm run dev
   

2. ในเบราว์เซอร์ของคุณ ให้นำทางไปยัง URL ที่แสดงในเทอร์มินัลของคุณ ตัวอย่างเช่น: http://localhost:8080
3. ในแอป ให้คลิก เพิ่มบทวิจารณ์จำลอง และรอสักครู่เพื่อให้บทวิจารณ์ยาวๆ ปรากฏขึ้น
   ในเบื้องหลัง งานภาษาที่มีส่วนขยาย PaLM API จะตอบสนองต่อเอกสารใหม่ที่แสดงถึงการตรวจสอบใหม่ พร้อมท์ที่คุณเพิ่มไว้ก่อนหน้านี้ขอข้อมูลสรุปที่สั้นลงจากโมเดลภาษา
4. หากต้องการดูบทวิจารณ์ทั้งหมดและข้อความแจ้งที่ใช้สำหรับการตรวจสอบ ให้คลิกบทวิจารณ์รายการใดรายการหนึ่ง จากนั้นเลือก แสดงพร้อมท์ PaLM

8. ตั้งค่าส่วนขยาย "Chatbot with PaLM API" สำหรับแอป Chatbot

ติดตั้ง Chatbot พร้อมส่วนขยาย PaLM API

1. ไปที่ Chatbot ที่มีส่วนขยาย PaLM API
2. คลิก ติดตั้งในคอนโซล Firebase
3. เลือกโปรเจ็กต์ Firebase ของคุณ
4. คลิก ถัดไป > ถัดไป > ถัดไป จนกว่าคุณจะไปถึงส่วน กำหนดค่าส่วนขยาย
5. ในกล่องข้อความ เส้นทางคอลเลก ชัน ให้ป้อน users/{uid}/discussion/{discussionId}/messages
6. จากดรอปดาวน์ ตำแหน่ง Cloud Functions ให้เลือก Iowa (us-central1) หรือตำแหน่งที่คุณเลือกไว้ก่อนหน้านี้สำหรับ Firestore และ Cloud Storage
7. จากดรอปดาวน์ โมเดลภาษา ให้เลือก chat-bison
8. ปล่อยให้ค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น
9. คลิก ติดตั้งส่วนขยาย และรอให้ส่วนขยายติดตั้ง

ลองใช้ Chatbot พร้อมส่วนขยาย PaLM API

แม้ว่าเป้าหมายของ Codelab นี้คือการโต้ตอบกับ Chatbot ที่มีส่วนขยาย PaLM API ผ่านเว็บแอป แต่การทำความเข้าใจวิธีการทำงานของส่วนขยายด้วยการทริกเกอร์ส่วนขยายโดยใช้คอนโซล Firebase ก็มีประโยชน์ ส่วนขยายจะทริกเกอร์เมื่อมีการสร้างเอกสาร Cloud Firestore ในคอลเลกชัน users/{uid}/discussion/{discussionId}/messages

1. ในคอนโซล Firebase ให้ไปที่ Firestore
2. คลิก เริ่มสะสม .
   1. ในกล่องข้อความ รหัสคอลเลก ชัน ให้ป้อน users คลิก ถัดไป
   2. ในกล่องข้อความ ID เอกสาร ให้คลิก ID อัตโนมัติ แล้วคลิก บันทึก
3. ในคอลเลกชัน users คลิก เริ่มสะสม .
   
   1. ในกล่องข้อความ รหัสคอลเลก ชัน ให้ป้อน discussion จากนั้นคลิก ถัดไป
   2. ในกล่องข้อความ ID เอกสาร ให้คลิก ID อัตโนมัติ แล้วคลิก บันทึก
4. ในคอลเลกชัน discussion คลิก เริ่มสะสม .
   
   1. ในกล่องข้อความ รหัสคอลเลก ชัน ให้ป้อน messages นั้นคลิก ถัดไป
   2. ในกล่องข้อความ ID เอกสาร ให้คลิก ID อัตโนมัติ
   3. ในกล่องข้อความ ฟิลด์ ให้ป้อน prompt
   4. ในกล่องข้อความ Value ให้ป้อน Tell me 5 random fruits
   5. คลิก บันทึก และรอสักครู่ ขณะนี้คอลเลกชัน messages มีเอกสารที่ประกอบด้วยคำตอบสำหรับคำถามของคุณ

5. ในคอลเลกชัน messages คลิก เพิ่มเอกสาร .
   1. ในกล่องข้อความ ID เอกสาร ให้คลิก ID อัตโนมัติ
   2. ในกล่องข้อความ ฟิลด์ ให้ป้อน prompt
   3. ในกล่องข้อความ ค่า ให้ป้อน And now, vegetables
   4. คลิก บันทึก และรอสักครู่ ขณะนี้คอลเลกชัน messages มีเอกสารที่ประกอบด้วยคำตอบสำหรับคำถามของคุณ

9. ตั้งค่าแอป Chatbot เพื่อใช้ Firebase

หากต้องการเรียกใช้แอป Chatbot คุณต้องตั้งค่าโค้ดของแอปและ Firebase CLI เพื่อโต้ตอบกับโปรเจ็กต์ Firebase ของคุณ

เพิ่มบริการ Firebase และการกำหนดค่าลงในโค้ดของแอป

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

แอปตัวอย่างของ Codelab นี้มีโค้ดการนำเข้าและการเริ่มต้นที่จำเป็นทั้งหมดสำหรับ SDK แล้ว (ดู chatbot-start/lib/firebase/firebase.js ) ดังนั้นคุณไม่จำเป็นต้องเพิ่มสิ่งเหล่านี้ อย่างไรก็ตาม แอปตัวอย่างมีเพียงค่าตัวยึดตำแหน่งสำหรับการกำหนดค่า Firebase (ดู chatbot-start/lib/firebase/firebase-config.js ) ดังนั้นคุณต้องลงทะเบียนแอปของคุณกับโปรเจ็กต์ Firebase เพื่อรับค่าการกำหนดค่า Firebase ที่ไม่ซ้ำกันสำหรับ แอป.

1. ในคอนโซล Firebase ในโปรเจ็กต์ Firebase ของคุณ ให้ไปที่ ภาพรวมโปรเจ็กต์ จากนั้นคลิก เว็บ (หรือคลิก เพิ่มแอป หากคุณได้ลงทะเบียนแอปกับโปรเจ็กต์แล้ว)
2. ในกล่องข้อความ ชื่อเล่นของแอป ให้ป้อนชื่อเล่นของแอปที่น่าจดจำ เช่น My Chatbot app
3. อย่า เลือกช่องทำเครื่องหมาย ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คุณจะทำตามขั้นตอนเหล่านี้ในภายหลังใน Codelab
4. คลิก ลงทะเบียนแอป
5. คอนโซลจะแสดงข้อมูลโค้ดสำหรับการเพิ่มและเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่า Firebase เฉพาะแอป คัดลอกคุณสมบัติทั้งหมดในออบเจ็กต์การกำหนดค่า Firebase
6. ในตัวแก้ไขโค้ด ให้เปิดไฟล์ chatbot-start/lib/firebase/firebase-config.js
7. แทนที่ค่าตัวยึดตำแหน่งด้วยค่าที่คุณเพิ่งคัดลอก ไม่เป็นไรหากคุณมีคุณสมบัติและค่าสำหรับบริการ Firebase ที่คุณไม่ได้ใช้ในแอป Chatbot
8. บันทึกไฟล์.
9. กลับไปที่คอนโซล Firebase คลิก ดำเนินการต่อไปยังคอนโซล

ตั้งค่าเทอร์มินัลของคุณเพื่อรันคำสั่ง Firebase CLI กับโปรเจ็กต์ Firebase ของคุณ

1. ในเทอร์มินัลของคุณ ให้กด Control+C เพื่อหยุดเซิร์ฟเวอร์ไม่ให้เรียกใช้เว็บแอปก่อนหน้า
2. ในเทอร์มินัลของคุณ ให้นำทางไปยังโฟลเดอร์เว็บแอป chatbot-start :

   cd ../chatbot-start
   

3. ทำให้คำสั่งเรียกใช้ Firebase CLI กับโปรเจ็กต์ Firebase เฉพาะ:

   firebase use YOUR_PROJECT_ID
   

ตั้งค่าฐานโค้ดของแอปเพื่อใช้ Firebase Hosting ที่คำนึงถึงเฟรมเวิร์ก

Codelab นี้ใช้ เฟรมเวิร์กเว็บพร้อมโฮสติ้ง (ตัวอย่าง) กับเว็บแอป Chatbot

1. ในเทอร์มินัลของคุณ ให้เปิดใช้งานเฟรมเวิร์กเว็บด้วย Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. เริ่มต้นโฮสติ้ง Firebase:

   firebase init hosting
   

3. เมื่อได้รับแจ้งพร้อม Detected an existing โค้ดเบส Next.js ที่มีอยู่ codebase in your current directory, should we use this? , กด Y
4. เมื่อได้รับแจ้งด้วย In which region would you like to host server-side content, if applicable? เลือกภูมิภาคเริ่มต้นหรือตำแหน่งที่คุณเลือกไว้ก่อนหน้านี้สำหรับ Firestore และ Cloud Storage จากนั้นกด Enter (หรือ return บน macOS)
5. เมื่อได้รับแจ้งด้วย Set up automatic builds and deploys with GitHub? ให้กด N

เรียกใช้และดูเว็บแอป Chatbot

1. ในเทอร์มินัลของคุณ ให้ติดตั้งการขึ้นต่อกัน จากนั้นรันเว็บแอป:

   npm install
   firebase emulators:start --only hosting
   

2. ในเบราว์เซอร์ของคุณ ให้ไปที่ URL โฮสติ้งที่โฮสต์ในเครื่อง ส่วนใหญ่จะเป็น http://localhost:5000/ หรืออะไรที่คล้ายกัน

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

แก้ไขปัญหาการเรียกใช้เว็บแอป

หากคุณเห็นข้อผิดพลาดในหน้าเว็บที่เริ่มต้นดังนี้: Error: Firebase session cookie has incorrect... คุณต้องลบคุกกี้ทั้งหมดของคุณในสภาพแวดล้อมโลคัลโฮสต์ของคุณ โดยทำตามคำแนะนำใน การลบคุกกี้ | เอกสาร DevTools .

10. เพิ่มฟังก์ชันการทำงานให้กับแอป Chatbot

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

ปรับใช้กฎความปลอดภัย

แอปตัวอย่างของ Codelab นี้มีชุดกฎความปลอดภัยสำหรับ Firestore และสำหรับ Cloud Storage สำหรับ Firebase หลังจากที่คุณปรับใช้กฎความปลอดภัยเหล่านี้กับโปรเจ็กต์ Firebase แล้ว ข้อมูลในฐานข้อมูลและบัคเก็ตของคุณจะได้รับการปกป้องจากการใช้ในทางที่ผิดได้ดีขึ้น

คุณสามารถดูกฎเหล่านี้ได้ในไฟล์ firestore.rules และ storage.rules

1. หากต้องการปรับใช้กฎความปลอดภัยเหล่านี้ ให้รันคำสั่งนี้ในเทอร์มินัลของคุณ:

   firebase deploy --only firestore:rules,storage
   

2. หากระบบถาม: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ให้เลือก ใช่

อัปเดตโค้ดเพื่อเพิ่มข้อความไปยัง Cloud Firestore

ในแอป Chatbot ข้อความใหม่จากผู้ใช้จะถูกเพิ่มลงใน Firestore และจะกระตุ้นให้ส่วนขยายสร้างการตอบกลับ

1. ในตัวแก้ไขโค้ด ให้เปิดไฟล์ lib/firebase/firestore.js
2. ใกล้จุดสิ้นสุดของไฟล์ ให้ค้นหาฟังก์ชัน addNewMessage ซึ่งจัดการการเพิ่มข้อความใหม่
   ฟังก์ชันนี้รับคุณสมบัติของวัตถุต่อไปนี้แล้ว:
   

   พารามิเตอร์	คำอธิบาย
   userId	ID ของผู้ใช้ที่เข้าสู่ระบบ
   discussionId	ID การสนทนาที่มีการเพิ่มข้อความ
   message	เนื้อหาข้อความ
   db	อินสแตนซ์ฐานข้อมูล Firestore

   เมื่อตัวแปรเหล่านี้พร้อมแล้ว คุณจะเพิ่มเอกสาร Cloud Firestore เพื่อแสดงข้อความใหม่ได้
3. ในเนื้อความของฟังก์ชัน addNewMessage หลังจาก // Insert your code below ⬇️ แสดงความคิดเห็น ให้เพิ่มโค้ดต่อไปนี้:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

อัปเดตโค้ดเพื่อสร้างแบบสอบถามเพื่อรับข้อความ

1. ยังอยู่ในไฟล์ lib/firebase/firestore.js ให้ค้นหาฟังก์ชัน getMessagesQuery ซึ่งจำเป็นต้องส่งคืน การสืบค้น Cloud Firestore ที่ระบุข้อความที่จัดเก็บไว้ในเส้นทางการรวบรวม users/{uid}/discussion/{discussionId}/messages
2. แทนที่ฟังก์ชัน getMessagesQuery ทั้งหมดด้วยโค้ดต่อไปนี้:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

อัปเดตโค้ดเพื่อจัดการเอกสารข้อความ Cloud Firestore

1. ยังอยู่ในไฟล์ lib/firebase/firestore.js ให้ค้นหาฟังก์ชัน handleMessageDoc ซึ่งรับเอกสาร Cloud Firestore ที่แสดงถึงข้อความเดียว
   ฟังก์ชันนี้จำเป็นต้องจัดรูปแบบและโครงสร้างข้อมูลในลักษณะที่เหมาะสมสำหรับ UI ของแอป Chatbot
2. แทนที่ฟังก์ชัน handleMessageDoc ทั้งหมดด้วยรหัสต่อไปนี้:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. บันทึกไฟล์.

เรียกใช้และดูเว็บแอป Chatbot อีกครั้ง (ขณะนี้มีฟังก์ชันการทำงาน)

หากต้องการเรียกใช้และดูเว็บแอปที่ใช้งานได้ในขณะนี้ ให้ทำตามขั้นตอนเหล่านี้:

1. ในเบราว์เซอร์ ให้กลับไปที่แท็บที่มีเว็บแอป Chatbot แล้วโหลดหน้านี้ซ้ำ
2. คลิก ลงชื่อเข้าใช้ด้วย Google
3. หากจำเป็น ให้เลือกบัญชี Google ของคุณ
4. หลังจากที่คุณลงชื่อเข้าใช้แล้ว ให้โหลดหน้านี้ใหม่
5. ในกล่องข้อความ ป้อนข้อความของคุณ ให้ป้อนข้อความ เช่น Tell me about space
6. คลิก ส่ง และรอสักครู่เพื่อให้เว็บแอป Chatbot ตอบกลับ

ข้อดีอีกประการหนึ่งของ Chatbot พร้อมส่วนขยาย PaLM API ก็คือประวัติการสนทนา

หากต้องการดูตัวอย่างความสามารถในการสนทนากับบริบททางประวัติศาสตร์ ให้ทำตามขั้นตอนเหล่านี้:

1. ในกล่องข้อความ ป้อนข้อความของคุณ ให้ถามคำถาม เช่น What are five random fruits? .
2. ในกล่อง ข้อความป้อนข้อความของคุณ ให้ถามคำถามติดตามผลที่เกี่ยวข้องกับคำถามก่อนหน้า เช่น And what about vegetables? .

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

11. ตั้งค่าส่วนขยาย "แปลงข้อความเป็นคำพูด" สำหรับแอปวิดีโอคำแนะนำ

ติดตั้ง ข้อความแปลงเป็นส่วนขยายการพูด

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

6. คลิก ถัดไป จากนั้นเลือก แกรนท์ ถัดจากสิทธิ์ใด ๆ ที่แนะนำให้คุณ

7. คลิก ถัดไป
8. ในกล่องข้อความ เส้นทางการรวบรวม ให้ป้อน bot
9. ในกล่องข้อความ Path Storage Path ให้ป้อน tts
10. ปล่อยให้ค่าอื่น ๆ ทั้งหมดเป็นตัวเลือกเริ่มต้น
11. คลิก ติดตั้งส่วนขยาย และรอให้ส่วนขยายติดตั้ง

ลองใช้ ข้อความแปลงเป็นส่วนขยายการพูด

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

หากต้องการดูว่าส่วนขยายทำงานอย่างไรโดยใช้คอนโซล Firebase ให้ทำตามขั้นตอนเหล่านี้:

1. ในคอนโซล Firebase นำทางไปยัง Firestore
2. คลิก เริ่มต้นคอลเลกชัน
3. ในกล่องข้อความ ID คอลเลก ชันให้ป้อน bot
4. คลิก ถัดไป

5. ในกล่องข้อความ ID เอกสาร คลิก Auto-ID
6. ในกล่องข้อความ ฟิลด์ ป้อน text
7. ในกล่องข้อความ ค่า ให้ป้อน The quick brown fox jumps over the lazy dog
8. คลิก บันทึก

หากต้องการดูและฟังไฟล์ MP3 ที่คุณสร้างให้ทำตามขั้นตอนเหล่านี้:

1. ในคอนโซล Firebase นำทางไปยังที่ เก็บข้อมูล
2. ในบานหน้าต่างที่คุณสามารถอัปโหลดไฟล์จดบันทึกชื่อถังของคุณหลังจาก gs:// value นี่คือชื่อของถังเริ่มต้นของคุณสำหรับโครงการนี้ คุณต้องการมันในงานต่าง ๆ ตลอด codelab นี้

3. ใน Google Cloud Console นำทางไปยังที่ เก็บข้อมูลบนคลาวด์
4. เลือกโครงการของคุณ
   หากคุณไม่เห็นโครงการของคุณภายในรายการโครงการล่าสุดคลิก เลือกโครงการ เพื่อค้นหาโครงการของคุณในตัวเลือกโครงการ

5. เลือกถังเก็บข้อมูลเริ่มต้นของคุณ
6. นำทางไปยัง tts/ โฟลเดอร์
7. คลิกไฟล์ MP3
8. ในตอนท้ายของไฟล์ MP3 คลิก และสังเกตว่าข้อความของคุณถูกแปลงเป็นคำพูด

12. ตั้งค่าส่วนขยาย "ฉลากวิดีโอด้วยคลาวด์วิดีโอ AI" สำหรับแอพวิดีโอคำแนะนำวิดีโอ

ติดตั้ง วิดีโอฉลากด้วยส่วนขยายวิดีโอคลาวด์ AI

1. นำทางไปยัง วิดีโอฉลากด้วยส่วนขยายวิดีโอคลาวด์ AI
2. คลิก ติดตั้งในคอนโซล Firebase
3. เลือกโครงการ Firebase ของคุณ
4. คลิก ถัดไป> ถัดไป> ถัดไป จนกว่าคุณจะไปถึงส่วน การกำหนดค่าส่วนขยาย
5. จาก ฟังก์ชั่นคลาวด์แบบเลื่อนลงตำแหน่ง เลือกตำแหน่งที่รองรับ (ไม่ว่าจะเป็นตำแหน่งที่คุณเลือกก่อนหน้านี้สำหรับ Firestore และที่เก็บข้อมูลบนคลาวด์หรือที่ใกล้ที่สุด) สำหรับสถานที่ที่รองรับดูส่วน location_id ใน AnnotateVideoRequest
6. จาก แบบ เลื่อนลงของรุ่นเลือก ล่าสุด
7. จาก กล้องแบบ ดรอปดาวน์ของกล้องที่อยู่กับที่เลือก ไม่
8. ปล่อยให้ค่าอื่น ๆ ทั้งหมดเป็นค่าเริ่มต้น
9. คลิก ติดตั้งส่วนขยาย และรอให้ส่วนขยายติดตั้ง

ลองใช้ วิดีโอฉลากด้วยส่วนขยายวิดีโอคลาวด์ AI

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

หากต้องการดูว่าส่วนขยายทำงานอย่างไรโดยใช้คอนโซล Firebase ให้ทำตามขั้นตอนเหล่านี้:

1. นำทางไปยังที่ เก็บข้อมูล ภายในโครงการ Firebase ของคุณ > สร้างโฟลเดอร์
2. ในกล่องข้อความ ชื่อโฟลเดอร์ ป้อน video_annotation_input

3. คลิก เพิ่มโฟลเดอร์
4. ในโฟลเดอร์ video_annotation_input ให้คลิก อัปโหลดไฟล์
5. ในโฟลเดอร์ ai-extensions-codelab/video-hint-start/public/videos ที่คุณโคลนหรือดาวน์โหลดก่อนหน้านี้เลือกไฟล์วิดีโอแรก
6. ย้อนกลับไปในเบราว์เซอร์ของคุณใน Google Cloud Console นำทางไปยังที่ เก็บข้อมูลบนคลาวด์
7. เลือกถังเก็บข้อมูลเริ่มต้นของคุณซึ่งคุณสังเกตเห็นก่อนหน้านี้
8. คลิกโฟลเดอร์ video_annotation_output
   หากคุณไม่เห็นโฟลเดอร์ video_annotation_output ให้รอสักครู่และรีเฟรชหน้าเนื่องจากวิดีโอ API Intelligence Video อาจยังคงประมวลผลวิดีโออยู่

9. สังเกตไฟล์ JSON ที่มีชื่อคล้ายกับไฟล์ที่คุณอัปโหลดก่อนหน้านี้
10. คลิก ดาวน์โหลดชื่อไฟล์
11. เปิดไฟล์ JSON ที่ดาวน์โหลดในโปรแกรมแก้ไขรหัสของคุณ มันมีเอาต์พุตดิบจากวิดีโอ API ซึ่งรวมถึงฉลากที่ตรวจพบของวิดีโอที่คุณอัปโหลด

13. ตั้งค่าแอพวิดีโอคำแนะนำให้ใช้ Firebase

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

เพิ่มบริการ Firebase และการกำหนดค่าลงในรหัสของแอปของคุณ

ในการใช้ Firebase Codebase ของแอปของคุณต้องการ Firebase SDKs สำหรับบริการที่คุณต้องการใช้และการกำหนดค่า Firebase ที่บอก SDK เหล่านั้นว่าโครงการ Firebase ที่ใช้

แอพตัวอย่างของ codeLab นี้รวมถึงรหัสนำเข้าและการเริ่มต้นที่จำเป็นทั้งหมดสำหรับ SDKs (ดู video-hint-start/lib/firebase/firebase.js ) ดังนั้นคุณไม่จำเป็นต้องเพิ่มสิ่งเหล่านี้ อย่างไรก็ตามแอพตัวอย่างมีค่าตัวยึดตำแหน่งสำหรับการกำหนดค่า firebase เท่านั้น (ดู video-hint-start/lib/firebase/firebase-config.js ) ดังนั้นคุณต้องลงทะเบียนแอปของคุณด้วยโครงการ Firebase ของคุณเพื่อรับค่าการกำหนดค่า Firebase ที่ไม่ซ้ำกัน สำหรับแอพของคุณ

1. ในคอนโซล Firebase ในโครงการ Firebase ของคุณนำทางไปยัง ภาพรวมโครงการ แล้วคลิก เว็บ (หรือคลิก เพิ่มแอพ หากคุณลงทะเบียนแอปด้วยโครงการแล้ว)
2. ในกล่องข้อความ ชื่อเล่นของแอพ ให้ป้อนชื่อเล่นแอพที่น่าจดจำเช่น My Video Hint app
3. อย่า เลือก การตั้งค่า Firebase Hosting สำหรับช่องทำเครื่องหมายแอพนี้ คุณจะทำตามขั้นตอนเหล่านี้ใน Codelab
4. คลิก ลงทะเบียนแอป
5. คอนโซลแสดงตัวอย่างโค้ดสำหรับการเพิ่มและเริ่มต้น Firebase SDK ด้วยวัตถุการกำหนดค่า Firebase เฉพาะแอพ คัดลอกคุณสมบัติทั้งหมดในวัตถุการกำหนดค่า Firebase
6. ในตัวแก้ไขรหัสของคุณเปิด video-hint-start/lib/firebase/firebase-config.js
7. แทนที่ค่าตัวยึดตำแหน่งด้วยค่าที่คุณเพิ่งคัดลอก ไม่เป็นไรถ้าคุณมีคุณสมบัติและค่านิยมสำหรับบริการ Firebase ที่คุณไม่ได้ใช้ในแอพ Video Hint
8. บันทึกไฟล์
9. ย้อนกลับไปในคอนโซล Firebase คลิก ดำเนินการต่อเพื่อคอนโซล

ตั้งค่าเทอร์มินัลของคุณเพื่อเรียกใช้คำสั่ง Firebase CLI กับโครงการ Firebase ของคุณ

1. ในเทอร์มินัลของคุณกด Control+C เพื่อหยุดเซิร์ฟเวอร์จากการเรียกใช้เว็บแอปก่อนหน้า
2. ในเทอร์มินัลของคุณนำทางไปยังโฟลเดอร์แอป video-hint-start :

   cd ../video-hint-start
   

3. ทำให้คำสั่ง Run Firebase CLI กับโครงการ Firebase เฉพาะ:

   firebase use YOUR_PROJECT_ID
   

ตั้งค่า codebase ของแอปของคุณเพื่อใช้ Framework-Aware Firebase Hosting

codeLab นี้ใช้ เฟรมเวิร์กเว็บกับโฮสติ้ง (ดูตัวอย่าง) กับแอพ วิดีโอคำใบ้

1. ในเทอร์มินัลของคุณเปิดใช้งานเฟรมเวิร์กเว็บด้วย Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. เริ่มต้น Firebase Hosting:

   firebase init hosting
   

3. เมื่อได้รับแจ้งเมื่อ Detected an existing Next.js codebase in your current directory, should we use this? กด Y
4. เมื่อได้รับแจ้ง In which region would you like to host server-side content, if applicable? เลือกภูมิภาคเริ่มต้นหรือตำแหน่งที่คุณเลือกก่อนหน้านี้สำหรับที่เก็บ Firestore และ Cloud ที่เก็บข้อมูลจากนั้นกด Enter (หรือ return ที่ MacOS)
5. เมื่อได้รับแจ้งจาก Set up automatic builds and deploys with GitHub? , กด N .

เรียกใช้และดูแอพ วิดีโอคำแนะนำวิดีโอ

1. ในเทอร์มินัลของคุณให้ติดตั้งการพึ่งพาในโฟลเดอร์และ functions ชั่น video-hint-start และฟังก์ชั่นจากนั้นเรียกใช้แอพ:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. ในเบราว์เซอร์ของคุณนำทางไปยัง URL โฮสติ้งโฮสติ้งที่โฮสต์ในท้องถิ่น ในกรณีส่วนใหญ่มันเป็น http: // localhost: 5000/ หรือสิ่งที่คล้ายกัน

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

แก้ไขปัญหาการเรียกใช้เว็บแอป

หากคุณเห็นข้อความแสดงข้อผิดพลาดเช่น Error: The query requires an index. You can create it here: https://console.firebase.google.com ในบานหน้าต่าง คอนโซล ของ Devtools ทำตามขั้นตอนเหล่านี้:

1. นำทางไปยัง URL ที่ให้ไว้

2. คลิก บันทึก และรอให้สถานะเปลี่ยนจาก การสร้าง เป็น เปิดใช้งาน

14. เพิ่มฟังก์ชันการทำงานลงในแอพวิดีโอคำแนะนำ

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

ปรับใช้กฎความปลอดภัย

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

คุณสามารถดูกฎเหล่านี้ใน firestore.rules และ storage.rules ไฟล์

1. ในการปรับใช้กฎความปลอดภัยเหล่านี้ให้เรียกใช้คำสั่งนี้ในเทอร์มินัลของคุณ:

   firebase deploy --only firestore:rules,storage
   

2. หากคุณถูกถามว่า: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" เลือก ใช่

อัปเดตรหัสเพื่อรวมฟังก์ชั่น

1. ในตัวแก้ไขรหัสของคุณขยายโฟลเดอร์ functions
   โฟลเดอร์นี้มีฟังก์ชั่นหลายอย่างซึ่งรวมเข้ากับ รูปแบบไปป์ไลน์ ส่วนขยาย ตารางต่อไปนี้แสดงรายการและอธิบายแต่ละฟังก์ชัน:

   การทำงาน	คำอธิบาย
   functions/01-handle-video-upload.js	ขั้นตอนแรกในไปป์ไลน์ส่วนขยาย มันประมวลผลไฟล์วิดีโอที่ผู้ใช้อัปโหลด
   functions/02-handle-video-labels.js	ขั้นตอนที่สองในไปป์ไลน์ส่วนขยาย มันประมวลผลไฟล์ป้ายวิดีโอซึ่งถูกสร้างขึ้นโดยส่วนขยายของ storage-label-videos
   functions/03-handle-audio-file.js	ขั้นตอนที่สามในไปป์ไลน์ส่วนขยาย มันจัดการไฟล์เสียงที่ถอดความ

   อย่างไรก็ตามคุณยังต้องเพิ่มไฟล์ที่จัดกลุ่มฟังก์ชั่นเหล่านี้เข้าด้วยกัน
2. ในไฟล์ functions/index.js เพิ่มรหัสต่อไปนี้:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

รหัสนี้ใช้ โมดูล JavaScript เพื่อนำเข้าและส่งออกฟังก์ชั่นจากไฟล์ index.js เพื่อให้มีตำแหน่งส่วนกลางหนึ่งตำแหน่งสำหรับฟังก์ชั่นทั้งหมด

อัปเดตรหัสเพื่อจัดการการอัปโหลดวิดีโอ

1. ในตัวแก้ไขรหัสของคุณเปิดไฟล์ lib/firebase/storage.js
2. ค้นหาฟังก์ชั่น uploadVideo
   ฟังก์ชั่นนี้ได้รับพารามิเตอร์ userId , filePath และ file ข้อมูลนี้เพียงพอที่จะอัปโหลดไฟล์ไปยังที่เก็บข้อมูลบนคลาวด์
3. ในร่างกายของฟังก์ชั่น uploadVideo เพิ่มรหัสต่อไปนี้:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

ปรับใช้ฟังก์ชั่นของคุณ

ในการปรับใช้ฟังก์ชั่นของคุณกับ Firebase CLI ให้ทำตามขั้นตอนเหล่านี้:

1. ในเทอร์มินัลของคุณในขณะที่ยังคงอยู่ในโฟลเดอร์ video-hint-start สตาร์ตให้กด Control+C เพื่อหยุดกระบวนการปัจจุบัน
2. ปรับใช้ฟังก์ชั่นของคุณ:

   firebase deploy --only functions
   

   หากคุณถูกถามเกี่ยวกับการลบฟังก์ชั่นคลาวด์ก่อนหน้านี้เลือก No
3. หากคุณเห็นข้อความคล้ายกับ Permission denied while using the Eventarc Service Agent ให้รอสักครู่ แล้วลองใช้คำสั่งอีกครั้ง
4. หลังจากคำสั่งเสร็จสิ้นให้เรียกใช้แอพในเครื่องอีกครั้ง:

   firebase emulators:start --only hosting
   

เรียกใช้และดู วิดีโอเว็บแอปพลิเคชัน อีกครั้ง (ตอนนี้มีฟังก์ชั่น)

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

1. ในเบราว์เซอร์ของคุณค้นหาแท็บที่คุณนำทางไปยัง http: // localhost: 5000
2. หากจำเป็นให้คลิก ลงชื่อเข้าใช้กับ Google และเลือกบัญชี Google ของคุณ
3. คลิก อัปโหลดตัวอย่างวิดีโอ #1 และรอสักครู่เพื่อดูผลลัพธ์ของสรุปวิดีโอ
4. หากคุณไม่เห็นผลลัพธ์ใด ๆ หลังจากที่คุณอัปโหลดวิดีโอดู แก้ไขข้อผิดพลาดด้วยฟังก์ชั่นคลาวด์ ในภาคผนวกของ codeLab นี้

15. บทสรุป

ยินดีด้วย! คุณประสบความสำเร็จอย่างมากใน codelab นี้!

ส่วนขยายที่ติดตั้งและกำหนดค่า Firebase

คุณใช้คอนโซล Firebase เพื่อกำหนดค่าและติดตั้ง ส่วนขยาย AI ต่างๆ การใช้ส่วนขยายนั้นสะดวกเพราะคุณไม่จำเป็นต้องเขียนรหัสหม้อไอน้ำจำนวนมากที่เกี่ยวข้องกับการรับรองความถูกต้องกับ Google Cloud Services การอ่านและการเขียนจาก Firestore และการโต้ตอบกับ Google Cloud Services - และความแตกต่างต่าง ๆ ที่เกี่ยวข้องกับงานเหล่านั้น

ทำงานกับส่วนขยายโดยใช้คอนโซล Firebase

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

สร้างเว็บแอปที่ใช้พลังงาน AI สามตัวที่ใช้ส่วนขยาย Firebase

อย่างตรวจสอบ

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

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

แชทบอท

ในแอปพลิเคชันเว็บ Chatbot คุณใช้ chatbot กับส่วนขยาย Palm API เพื่อให้ผู้ใช้กับอินเทอร์เฟซแชทแบบโต้ตอบซึ่งรวมถึงบริบททางประวัติศาสตร์ในการสนทนา - ที่แต่ละข้อความจะถูกเก็บไว้ในเอกสาร Firestore ที่กำหนดขอบเขตให้กับผู้ใช้เฉพาะ

แบบฝึกหัดทางเลือก : นักเรียนพอใจกับ chatbot แต่พนักงานต้องการการปรับปรุงเล็กน้อย นักเรียนควรได้รับคำถามที่กระตุ้นความคิดหลังจากได้รับคำตอบแล้ว ตัวอย่างเช่น:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

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

คำใบ้วิดีโอ

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

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

16. ภาคผนวก: แก้ไขข้อผิดพลาดด้วยฟังก์ชั่นคลาวด์

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

อนุญาตให้เข้าถึงสาธารณะได้โดยไม่ได้รับการรับรอง

หากคุณได้รับข้อผิดพลาดที่เกี่ยวข้องกับการอนุญาตในแผง คอนโซล ของ Chrome Devtools ให้ทำตามขั้นตอนเหล่านี้:

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

3. นำทางกลับไปที่แอพ ตรวจสอบ ตัวอย่างเช่น: http: // localhost: 8080
4. คลิก เพิ่มรีวิวจำลอง และรอสักครู่
   • หากรีวิวปรากฏขึ้น: คุณไม่จำเป็นต้องดำเนินการต่อด้วยขั้นตอนการแก้ไขปัญหาเหล่านี้และสามารถกระโดดได้ตรงเพื่อ ตั้งค่าส่วนแอปพลิเคชันเว็บ chatbot ใน codelab นี้ ..
   • หากบทวิจารณ์ไม่ปรากฏขึ้น: ดำเนินการต่อกับส่วนการแก้ไขปัญหานี้

จัดการข้อผิดพลาดการอนุญาตไม่เพียงพอ

1. ในคอนโซล Firebase นำทางไปยัง ฟังก์ชั่น
2. วางเมาส์เหนือฟังก์ชั่น addMockReviews จากนั้นคลิก > ดูบันทึก

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

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. ใน Google Cloud Console นำทางไปยัง หน้า การอนุญาต IAM จากนั้นเลือกโครงการของคุณ
5. ในตารางค้นหาคอลัมน์ ชื่อ
   ในหน้า IAM & Admin มีตารางผู้ใช้และบทบาท คอลัมน์ชื่อในตารางอธิบายสิ่งที่ผู้ใช้หรือเงินต้นมีไว้สำหรับ คุณอาจมีเงินต้นที่มีชื่อของ บัญชีบริการคำนวณเริ่มต้น

หากคุณเห็น บัญชีการคำนวณเริ่มต้น ให้ทำตามขั้นตอนเหล่านี้:

1. คลิก แก้ไขหลัก

2. ดำเนินการต่อด้วย การเพิ่มบทบาทไปยังส่วนบัญชีการคำนวณเริ่มต้น ใน codelab นี้

หากคุณไม่เห็น บัญชีบริการคำนวณเริ่มต้น ทำตามขั้นตอนเหล่านี้:

1. คลิก การเข้าถึง Grant
2. ในกล่องข้อความ หลักใหม่ ให้ป้อน compute
3. ในเมนูของ AutoSuggestions ที่ปรากฏขึ้นให้เลือก บัญชีบริการคำนวณเริ่มต้น

เพิ่มบทบาทในบัญชีบริการคำนวณเริ่มต้น

ในส่วน บทบาทการกำหนด ของ บัญชีบริการคำนวณเริ่มต้น :

1. ขยายเมนู เลือกบทบาท
2. ในกล่องข้อความ ตัวกรอง ให้ป้อน Cloud Datastore User
3. ในเมนูของ AutoSuggestions ที่ปรากฏขึ้นให้เลือก ผู้ใช้ Cloud Datastore
4. คลิก เพิ่มบทบาทอื่น
   1. ขยายเมนู เลือกบทบาท
   2. ในกล่องข้อความ ตัวกรอง ให้ป้อน Cloud Storage for Firebase Admin
   3. ในเมนูของ Autosuggestions ที่ปรากฏขึ้นให้เลือก ที่เก็บข้อมูลบนคลาวด์สำหรับผู้ดูแลระบบ Firebase
5. คลิก เพิ่มบทบาทอื่น
   1. ขยายเมนู เลือกบทบาท
   2. ในกล่องข้อความ ตัวกรอง ให้ป้อน Cloud Storage for Firebase Service Agent
   3. ในเมนูของ AutoSuggestions ที่ปรากฏขึ้นให้เลือก ที่เก็บข้อมูลบนคลาวด์สำหรับตัวแทนบริการ Firebase
6. คลิก บันทึก