Firebase Studio มีอินเทอร์เฟซบนเว็บที่ช่วยให้คุณสร้างต้นแบบและสร้างเว็บแอปที่ใช้ AI ได้อย่างรวดเร็วโดยใช้พรอมต์แบบมัลติโมดอล ซึ่งรวมถึงภาษามนุษย์ รูปภาพ และเครื่องมือวาดภาพ เอเจนต์รองรับแอป Next.js และเราวางแผนที่จะรองรับแพลตฟอร์มและเฟรมเวิร์กอื่นๆ ในอนาคต
เอเจนต์การสร้างต้นแบบแอปคือขั้นตอนการพัฒนาแบบไม่มีโค้ดที่ได้รับการเพิ่มประสิทธิภาพ ซึ่ง ใช้ Generative AI ในการพัฒนา ทดสอบ ทำซ้ำ และเผยแพร่เว็บแอปแบบ Full-Stack ที่ทำงานด้วยระบบเอเจนต์ คุณอธิบายแนวคิดแอปในภาษาที่เป็นธรรมชาติพร้อมรูปภาพ (ไม่บังคับ) และ เอเจนต์จะสร้างพิมพ์เขียวของแอป โค้ด และตัวอย่างเว็บ เพื่อช่วยในการพัฒนาและเผยแพร่แอปแบบฟูลสแต็ก Firebase Studio สามารถจัดสรรบริการต่อไปนี้ให้คุณโดยอัตโนมัติ
หากแอปของคุณใช้ AI: Firebase Studio จะเพิ่ม Gemini Developer API ลงในแอปของคุณ โดยใช้ประสิทธิภาพของ Genkit เพื่อทำงานร่วมกับ Gemini คุณสามารถใช้Gemini APIคีย์ของคุณเองหรือให้ Firebase Studio จัดสรรโปรเจ็กต์ Firebase และคีย์ Gemini API ให้คุณ
หากต้องการเผยแพร่แอปไปยังเว็บ Firebase Studio จะสร้าง โปรเจ็กต์และเป็นวิธีที่รวดเร็วในการเผยแพร่แอปด้วย Firebase App Hosting
คุณสามารถปรับแต่งแอปโดยใช้ภาษาธรรมชาติ รูปภาพ และเครื่องมือวาดภาพ แก้ไขโค้ดโดยตรง ย้อนกลับการเปลี่ยนแปลง เผยแพร่แอป และตรวจสอบประสิทธิภาพของแอปได้ทั้งหมดจาก Firebase Studio
เริ่มต้นใช้งาน
หากต้องการเริ่มต้นใช้งาน App Prototyping agent ให้ทำตามขั้นตอนต่อไปนี้
เข้าสู่ระบบบัญชี Google แล้วเปิด Firebase Studio
ในช่องสร้างต้นแบบแอปด้วย AI ให้อธิบายแนวคิดแอปของคุณด้วย ภาษาที่เป็นธรรมชาติ
ตัวอย่างเช่น คุณอาจป้อนพรอมต์ต่อไปนี้เพื่อสร้างแอปสร้างสูตรอาหาร
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.
อัปโหลดรูปภาพเพื่อประกอบพรอมต์ (ไม่บังคับ) เช่น คุณ สามารถอัปโหลดรูปภาพที่มีรูปแบบสีที่ต้องการให้แอปใช้และบอก Firebase Studio ให้ใช้รูปแบบสีนั้น รูปภาพต้องมีขนาดไม่เกิน 3 MiB
คลิกสร้างต้นแบบด้วย AI
Gemini จะสร้างพิมพ์เขียวของแอปตามพรอมต์ของคุณ โดยจะแสดงชื่อแอปที่แนะนำ ฟีเจอร์ที่จำเป็น และหลักเกณฑ์ด้านสไตล์
ตรวจสอบพิมพ์เขียว ทำการเปลี่ยนแปลงเล็กน้อยหากจำเป็น เช่น คุณอาจเปลี่ยนชื่อแอปหรือรูปแบบสีที่แนะนำโดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
คลิก
ปรับแต่งและแก้ไข พิมพ์เขียวโดยตรง ทำการเปลี่ยนแปลง แล้วคลิกบันทึกในช่องอธิบาย... ในแผงแชท ให้เพิ่มคำถามที่ช่วยให้เข้าใจได้ชัดเจนยิ่งขึ้น และบริบท คุณยังอัปโหลดรูปภาพเพิ่มเติมได้ด้วย
คลิกสร้างต้นแบบแอปนี้
เอเจนต์การสร้างต้นแบบแอปจะเริ่มเขียนโค้ดแอป
- หากแอปของคุณใช้ AI ระบบจะแจ้งให้คุณเพิ่มหรือสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ App Prototyping agent จะจัดสรรโปรเจ็กต์ Firebase และคีย์ Gemini API ให้คุณ
ทดสอบ ปรับแต่ง แก้ข้อบกพร่อง และทำซ้ำ
หลังจากสร้างแอปเริ่มต้นแล้ว คุณจะทดสอบ ปรับแต่ง แก้จุดบกพร่อง และทำซ้ำได้
ตรวจสอบและโต้ตอบกับแอป: หลังจากสร้างโค้ดเสร็จสมบูรณ์ ตัวอย่างแอปจะปรากฏขึ้น คุณสามารถโต้ตอบกับตัวอย่างโดยตรงเพื่อ ทดสอบได้ ดูข้อมูลเพิ่มเติมได้ที่แสดงตัวอย่างแอป
แก้ไขข้อผิดพลาดที่เกิดขึ้น: ในกรณีส่วนใหญ่ App Prototyping agent จะแจ้งให้คุณแก้ไขข้อผิดพลาดที่เกิดขึ้น คลิกแก้ไขข้อผิดพลาดเพื่ออนุญาตให้ ระบบลองแก้ไข
หากได้รับข้อผิดพลาดที่ระบบไม่ได้แจ้งให้แก้ไขโดยอัตโนมัติ ให้คัดลอกข้อผิดพลาดและบริบทที่เกี่ยวข้อง (เช่น "คุณช่วยแก้ไขข้อผิดพลาดนี้ ในโค้ดการเริ่มต้น Firebase ของฉันได้ไหม") ลงในหน้าต่างแชท แล้ว ส่งให้ Gemini
ทดสอบและทำซ้ำโดยใช้ภาษาธรรมชาติ: ทดสอบแอปอย่างละเอียดและ ทำงานร่วมกับ App Prototyping agent เพื่อทำซ้ำโค้ดและพิมพ์เขียว จนกว่าคุณจะพอใจ
ขณะอยู่ใน Prototyper mode, you can also use the following features:
คลิก
ใส่คำอธิบายประกอบเพื่อวาดบนหน้าต่างแสดงตัวอย่างโดยตรง ใช้เครื่องมือรูปร่าง รูปภาพ และข้อความที่มีอยู่ พร้อมกับพรอมต์ข้อความที่ไม่บังคับ เพื่อ อธิบายด้วยภาพว่าคุณต้องการให้ App Prototyping agent เปลี่ยนแปลงอะไร
คลิก
เลือกเพื่อเลือกองค์ประกอบที่ต้องการ แล้วป้อนวิธีการสำหรับ App Prototyping agent ซึ่งจะช่วยให้คุณกำหนดเป้าหมายไอคอน ปุ่ม ข้อความ หรือองค์ประกอบอื่นๆ ที่เฉพาะเจาะจงได้อย่างรวดเร็ว เมื่อคลิกรูปภาพ คุณจะมีตัวเลือกในการค้นหาและเลือกภาพสต็อกจาก Unsplash ด้วย
คุณคลิก
แชร์ลิงก์ตัวอย่างเพื่อแชร์แอปแบบสาธารณะชั่วคราวโดยใช้Firebase Studio เวอร์ชันตัวอย่างแบบสาธารณะได้ (ไม่บังคับ)
แก้ไขข้อบกพร่องและทำซ้ำในโค้ดโดยตรง: คลิก
เปลี่ยนไปใช้โค้ดเพื่อเปิดมุมมอง Code ซึ่งคุณจะเห็น ไฟล์ทั้งหมดของแอปและแก้ไขโค้ดได้โดยตรง คุณเปลี่ยนกลับไปใช้ Prototyper mode at any time. ได้
ขณะอยู่ในมุมมอง Code คุณยังใช้ฟีเจอร์ที่เป็นประโยชน์ต่อไปนี้ได้ด้วย
Firebase Studioมีฟีเจอร์การแก้ไขข้อบกพร่องและการรายงานในตัวเพื่อ ตรวจสอบ แก้ไขข้อบกพร่อง และตรวจสอบแอป
ความช่วยเหลือจาก AI โดยใช้ Gemini ใน Firebase ทั้งแบบอินไลน์ภายในโค้ดหรือใช้แชทแบบอินเทอร์แอกทีฟ (ทั้ง 2 แบบ พร้อมใช้งานโดยค่าเริ่มต้น) แชทแบบอินเทอร์แอกทีฟสามารถวินิจฉัยปัญหา ให้ วิธีแก้ปัญหา และเรียกใช้เครื่องมือเพื่อช่วยแก้ไขแอปได้เร็วขึ้น หากต้องการเข้าถึงแชท ให้คลิก sparkGemini ที่ด้านล่างของพื้นที่ทำงาน
เข้าถึง Firebase Local Emulator Suite เพื่อดูฐานข้อมูลและ ข้อมูลการตรวจสอบสิทธิ์ วิธีเปิดโปรแกรมจำลองใน พื้นที่ทำงาน
คลิก
เปลี่ยนไปใช้โค้ด แล้วเปิดส่วนขยาย Firebase Studio (
Ctrl+',Ctrl+'
หรือCmd+',Cmd+'
ใน MacOS)เลื่อนไปที่พอร์ตแบ็กเอนด์ แล้วขยาย
ในคอลัมน์การดำเนินการที่สอดคล้องกับพอร์ต 4000 ให้คลิก เปิดในหน้าต่างใหม่
ทดสอบและวัดประสิทธิภาพฟีเจอร์ Generative AI: คุณสามารถใช้ UI สำหรับนักพัฒนาแอป Genkit เพื่อเรียกใช้โฟลว์ AI ของ Genkit, ทดสอบ, แก้ข้อบกพร่อง, โต้ตอบ กับโมเดลต่างๆ, ปรับแต่งพรอมต์ และอื่นๆ
หากต้องการโหลดโฟลว์ Genkit ใน UI สำหรับนักพัฒนาแอป Genkit และเริ่มทดสอบ ให้ทำดังนี้
จากเทอร์มินัลในพื้นที่ทำงาน Firebase Studio ให้เรียกใช้คำสั่งต่อไปนี้เพื่อ จัดหาคีย์ Gemini API และเริ่มเซิร์ฟเวอร์ Genkit
npm run genkit:watch
คลิกลิงก์ UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit UI สำหรับนักพัฒนาแอป Genkit จะเปิดขึ้นใน หน้าต่างใหม่พร้อมโฟลว์ พรอมต์ ตัวฝัง และโมเดลต่างๆ ที่พร้อมใช้งาน
ดูข้อมูลเพิ่มเติมเกี่ยวกับ UI สำหรับนักพัฒนาแอป Genkit ได้ที่เครื่องมือสำหรับนักพัฒนาแอป Genkit
เผยแพร่แอปด้วย Firebase App Hosting
หลังจากทดสอบแอปและพอใจกับผลลัพธ์ในพื้นที่ทํางานแล้ว คุณสามารถเผยแพร่แอปไปยังเว็บด้วย Firebase App Hosting
เมื่อตั้งค่า App Hosting Firebase Studio จะสร้าง โปรเจ็กต์ Firebase ให้คุณ (หากยังไม่ได้สร้างโดยการสร้างคีย์ Gemini API โดยอัตโนมัติ) และแนะนําขั้นตอนการลิงก์บัญชี Cloud Billing
วิธีเผยแพร่แอป
คลิกเผยแพร่เพื่อตั้งค่าโปรเจ็กต์ Firebase และเผยแพร่แอป แผงเผยแพร่แอปจะปรากฏขึ้น
ในขั้นตอนโปรเจ็กต์ Firebase App Prototyping agent จะแสดง Firebase ที่เชื่อมโยงกับพื้นที่ทํางาน หากไม่ได้สร้างโปรเจ็กต์ระหว่างGemini APIการสร้างคีย์ ระบบจะสร้างโปรเจ็กต์ใหม่ให้คุณ คลิกถัดไปเพื่อดำเนินการต่อ
ในขั้นตอนลิงก์บัญชี Cloud Billing ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
เลือกบัญชี Cloud Billing ที่ต้องการลิงก์กับโปรเจ็กต์ Firebase
หากไม่มีบัญชี Cloud Billing หรือต้องการสร้างบัญชีใหม่ ให้คลิกสร้างบัญชี Cloud Billing ซึ่งจะเปิดGoogle Cloudคอนโซล Cloud Billing ที่คุณสร้างบัญชีแบบบริการตนเองใหม่ได้ หลังจากสร้างบัญชีแล้ว ให้กลับไปที่ Firebase Studio แล้วเลือกบัญชีจากรายการลิงก์ Cloud Billing
คลิกถัดไป Firebase Studio ลิงก์บัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ ที่เชื่อมโยงกับพื้นที่ทำงานของคุณ ซึ่งสร้างขึ้นเมื่อคุณสร้างคีย์Gemini APIโดยอัตโนมัติหรือเมื่อคุณคลิกเผยแพร่
คลิกตั้งค่าบริการ เอเจนต์การสร้างต้นแบบแอปจะเริ่มจัดสรรบริการ Firebase
คลิกเผยแพร่เลย Firebase Studio ตั้งค่าบริการ Firebase การดำเนินการนี้อาจใช้เวลาหลายนาทีจึงจะเสร็จสมบูรณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลังได้ที่App Hostingกระบวนการสร้าง
เมื่อขั้นตอนการเผยแพร่เสร็จสมบูรณ์แล้ว ภาพรวมของแอปจะปรากฏพร้อมกับ URL และข้อมูลเชิงลึกของแอปที่ขับเคลื่อนโดยความสามารถในการสังเกตการณ์ของ App Hosting หากต้องการใช้โดเมนที่กำหนดเอง (เช่น example.com หรือ app.example.com) แทนโดเมนที่ Firebase สร้างขึ้น คุณสามารถเพิ่มโดเมนที่กำหนดเองในคอนโซล Firebase ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ App Hosting ได้ที่ ทำความเข้าใจ App Hosting และวิธีการทำงาน
รักษาความปลอดภัยให้แอปด้วย Firebase App Check และ reCAPTCHA Enterprise
หากคุณผสานรวมบริการ Firebase หรือ Google Cloud เข้ากับแอป Firebase App Check จะช่วยปกป้องแบ็กเอนด์ของแอปจากการละเมิดด้วยการป้องกันไม่ให้ ไคลเอ็นต์ที่ไม่ได้รับอนุญาตเข้าถึงทรัพยากร Firebase โดยจะทำงานร่วมกับทั้งบริการของ Google (รวมถึงบริการ Firebase และ Google Cloud) และแบ็กเอนด์ที่กำหนดเองของคุณเพื่อรักษาทรัพยากรให้ปลอดภัย
เราขอแนะนำให้เพิ่ม App Check ลงในแอปที่คุณโพสต์ต่อสาธารณะเพื่อปกป้อง ทรัพยากรแบ็กเอนด์จากการละเมิด
ส่วนนี้จะแนะนําวิธีการตั้งค่า App Check ภายใน Firebase Studioโดยใช้ reCAPTCHA Enterprise สําหรับเว็บแอปที่สร้างโดย App Prototyping agent แต่คุณสามารถตั้งค่า App Check ภายใน แอปใดก็ได้ที่ใช้บริการ Firebase และใช้ผู้ให้บริการที่กําหนดเองได้ ดูข้อมูลเพิ่มเติมได้ที่ Firebase App Check
reCAPTCHA Enterprise ให้การประเมินสูงสุด 10,000 รายการโดยไม่มีค่าใช้จ่าย
ขั้นตอนที่ 1: ตั้งค่า reCAPTCHA Enterprise สำหรับแอป
เปิดส่วน reCAPTCHA Enterprise ของคอนโซล Google Cloud
เลือกชื่อโปรเจ็กต์ Firebase จากเครื่องมือเลือกโปรเจ็กต์ในGoogle Cloudคอนโซล
หากได้รับแจ้งให้เปิดใช้ reCAPTCHA Enterprise API ให้ดำเนินการตามนั้น
คลิกเริ่มต้นใช้งาน แล้วเพิ่มชื่อที่แสดงสำหรับคีย์เว็บไซต์ reCAPTCHA
ยอมรับคีย์ประเภทแอปพลิเคชัน เว็บเริ่มต้น
คลิกเพิ่มโดเมน แล้วเพิ่มโดเมน คุณจะต้องเพิ่ม App Hosting โดเมน (เช่น
studio--PROJECT_ID.REGION.hosted.app
) และโดเมนที่กำหนดเองที่คุณใช้หรือวางแผนที่จะใช้กับแอปคลิกขั้นตอนถัดไป
ปล่อยให้ตัวเลือก Will you use challenges? ไม่ได้เลือก
คลิกสร้างคีย์
คัดลอกและบันทึกรหัสคีย์ แล้วไปที่กำหนดค่า App Check
ขั้นตอนที่ 2: กำหนดค่า App Check
เปิดFirebaseคอนโซล แล้วคลิกสร้าง > App Check จากเมนูการนำทาง
คลิกเริ่มต้นใช้งาน แล้วคลิกลงทะเบียนข้างแอป
คลิกเพื่อขยาย reCAPTCHA แล้ววางรหัสคีย์ที่คุณสร้างสําหรับ<0x0AreCAPTCHA Enterprise
คลิกบันทึก
ขั้นตอนที่ 3: เพิ่ม App Check ลงในโค้ด
กลับไปที่ Firebase Studio และในมุมมอง Code ให้เพิ่ม คีย์เว็บไซต์ที่คุณสร้างลงในไฟล์
.env
ดังนี้NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
หากยังไม่ได้บันทึกการกำหนดค่า Firebase ไว้ใน
.env
ให้รับการกำหนดค่าโดยทำดังนี้จากคอนโซล Firebase ให้เปิดการตั้งค่าโปรเจ็กต์ แล้วค้นหาในส่วนที่สอดคล้องกับแอปของคุณ
จากอาคารผู้โดยสารในมุมมอง Code ให้ทำดังนี้
- เข้าสู่ระบบ Firebase
firebase auth login
- เลือกโปรเจ็กต์
firebase use FIREBASE_PROJECT_ID
- รับการกำหนดค่า Firebase:
firebase apps:sdkconfig
- เข้าสู่ระบบ Firebase
เพิ่มการกำหนดค่าลงในไฟล์
.env
เพื่อให้มีลักษณะดังนี้NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
เพิ่ม App Check ลงในโค้ดแอป คุณขอให้ Gemini เพิ่ม App Check ด้วย reCAPTCHA Enterprise ลงในแอปได้ (อย่าลืมระบุ "reCAPTCHA Enterprise" และตรวจสอบอีกครั้ง) หรือ ทำตามขั้นตอนในเริ่มต้น App Check
เผยแพร่เว็บไซต์ของคุณอีกครั้งไปยัง App Hosting ลองทดสอบฟีเจอร์ Firebase เพื่อสร้างข้อมูล
ตรวจสอบว่า App Check ได้รับคำขอในคอนโซล Firebase โดยเปิดสร้าง > App Check
คลิกเพื่อตรวจสอบ บริการ Firebase หลังจากยืนยันว่าคำขอมาถึงแล้ว ให้คลิกบังคับใช้เพื่อบังคับใช้ App Check
ยืนยันและบังคับใช้สำหรับ Firebase Authentication อีกครั้ง
หากหลังจากลงทะเบียนแอปสำหรับ App Check แล้ว คุณต้องการเรียกใช้แอปในสภาพแวดล้อมที่โดยปกติแล้ว App Check จะไม่จัดประเภทว่าถูกต้อง เช่น ในเครื่องระหว่างการพัฒนา หรือจากสภาพแวดล้อมการผสานรวมอย่างต่อเนื่อง (CI) คุณสามารถสร้างบิลด์การแก้ไขข้อบกพร่องของแอปที่ใช้ผู้ให้บริการแก้ไขข้อบกพร่อง App Check แทนผู้ให้บริการการรับรองจริงได้ ดูข้อมูลเพิ่มเติม ได้ที่ใช้ App Check กับผู้ให้บริการแก้ไขข้อบกพร่องในเว็บ แอป
ตรวจสอบแอป
แผงภาพรวมของแอปใน Firebase Studio จะแสดงเมตริกและข้อมูลสำคัญเกี่ยวกับแอป ซึ่งช่วยให้คุณตรวจสอบประสิทธิภาพของเว็บแอปได้โดยใช้เครื่องมือการสังเกตการณ์ในตัวของ App Hosting หลังจากเปิดตัวเว็บไซต์แล้ว คุณจะเข้าถึงภาพรวมได้โดยคลิกเผยแพร่ จากแผงนี้ คุณจะทำสิ่งต่อไปนี้ได้
- คลิกเผยแพร่เพื่อเปิดตัวแอปเวอร์ชันใหม่
- แชร์ลิงก์ไปยังแอปหรือเปิดแอปโดยตรงใน ไปที่แอป
- ดูข้อมูลสรุปเกี่ยวกับประสิทธิภาพของแอปในช่วง 7 วันที่ผ่านมา ซึ่งรวมถึงจำนวนคำขอทั้งหมดและสถานะการเปิดตัวล่าสุด คลิกดูรายละเอียดเพื่อเข้าถึงข้อมูลเพิ่มเติมในคอนโซล Firebase
- ดูกราฟจำนวนคำขอที่แอปได้รับในช่วง 24 ชั่วโมงที่ผ่านมา โดยแบ่งตามรหัสสถานะ HTTP
หากปิดแผงภาพรวมของแอป คุณจะเปิดอีกครั้งได้ทุกเมื่อโดย คลิกเผยแพร่
ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบApp Hostingการเปิดตัวได้ที่ จัดการการเปิดตัวและรุ่น
ย้อนกลับการติดตั้งใช้งาน
หากคุณได้ติดตั้งใช้งานแอปเวอร์ชันต่างๆ ต่อเนื่องกันใน App Hosting คุณสามารถ ย้อนกลับไปเป็นเวอร์ชันก่อนหน้าได้ คุณจะนำส่วนขยายนี้ออกก็ได้
วิธีย้อนกลับเว็บไซต์ที่เผยแพร่แล้ว
ค้นหาแบ็กเอนด์ของแอป คลิกดู แล้วคลิกการเปิดตัว
คลิกเพิ่มเติม
ข้างการติดตั้งใช้งานที่ต้องการย้อนกลับ จากนั้นเลือกย้อนกลับ ไปที่บิลด์นี้ แล้วยืนยัน
ดูข้อมูลเพิ่มเติมได้ที่จัดการการเปิดตัวและการเผยแพร่
วิธีนำโดเมน App Hosting ออกจากเว็บ
จากคอนโซล Firebase ให้เปิด App Hosting แล้วคลิกดูในส่วนแอป Firebase Studio
ในส่วนข้อมูลแบ็กเอนด์ ให้คลิกจัดการ หน้าโดเมนจะโหลดขึ้น
คลิกเพิ่มเติม
ข้างโดเมน แล้วเลือกปิดใช้โดเมน และยืนยัน
การดำเนินการนี้จะนำโดเมนออกจากเว็บ หากต้องการนำApp Hostingแบ็กเอนด์ออกทั้งหมด ให้ทำตามวิธีการในลบแบ็กเอนด์
ใช้Genkitการตรวจสอบสำหรับฟีเจอร์ที่ใช้งานจริง
คุณสามารถตรวจสอบขั้นตอน อินพุต และเอาต์พุตของฟีเจอร์ Genkit ได้โดยเปิดใช้ การวัดและส่งข้อมูลทางไกลไปยังโค้ดโฟลว์ AI ฟีเจอร์การส่งข้อมูลทางไกลของ Genkit ช่วยให้คุณตรวจสอบ ประสิทธิภาพและการใช้งานโฟลว์ AI ได้ ข้อมูลนี้จะช่วยให้คุณระบุจุดที่ควรปรับปรุง แก้ไขปัญหา เพิ่มประสิทธิภาพพรอมต์และโฟลว์เพื่อให้ได้ประสิทธิภาพและต้นทุนที่มีประสิทธิภาพมากขึ้น รวมถึงติดตามการใช้งานโฟลว์เมื่อเวลาผ่านไป
หากต้องการตั้งค่าการตรวจสอบใน Genkit ให้เพิ่มการวัดและส่งข้อมูลไปยังโฟลว์ AI ของ Genkit แล้วดูผลลัพธ์ในคอนโซล Firebase
ขั้นตอนที่ 1: เพิ่มการวัดระยะไกลลงในโค้ดโฟลว์ Genkit ใน Firebase Studio
วิธีตั้งค่าการตรวจสอบในโค้ด
หากยังไม่ได้อยู่ในCodeมุมมอง ให้คลิก
เปลี่ยนไปใช้โค้ดเพื่อเปิด
ตรวจสอบ
package.json
เพื่อยืนยันเวอร์ชันของ Genkit ที่ติดตั้งเปิดเทอร์มินัล (
Ctrl-Shift-C
หรือCmd-Shift-C
ใน MacOS)คลิกภายในเทอร์มินัลและติดตั้งปลั๊กอิน Firebase โดยใช้เวอร์ชันที่ตรงกับไฟล์
package.json
ตัวอย่างเช่น หากแพ็กเกจ Genkit ในpackage.json
เป็นเวอร์ชัน 1.0.4 คุณควรเรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอินnpm i --save @genkit-ai/firebase@1.0.4
จาก Explorer ให้ขยาย
src > ai > flows
ไฟล์ TypeScript อย่างน้อย 1 ไฟล์ ที่มีโฟลว์ Genkit จะปรากฏในโฟลเดอร์flows
คลิกโฟลว์ใดโฟลว์หนึ่งเพื่อเปิด
ที่ด้านล่างของส่วนการนำเข้าของไฟล์ ให้เพิ่มข้อมูลต่อไปนี้เพื่อ นำเข้าและเปิดใช้
FirebaseTelemetry
import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
ขั้นตอนที่ 2: ตั้งค่าสิทธิ์
Firebase Studio ได้เปิดใช้ API ที่จำเป็น ให้คุณเมื่อตั้งค่าโปรเจ็กต์ Firebase แต่คุณก็ต้องให้สิทธิ์แก่บัญชีบริการ App Hosting ด้วย
วิธีตั้งค่าสิทธิ์
เปิดGoogle Cloudคอนโซล IAM เลือกโปรเจ็กต์ แล้วมอบหมายบทบาทต่อไปนี้ให้กับบัญชีบริการ App Hosting
- ผู้เขียนเมตริกการตรวจสอบ (
roles/monitoring.metricWriter
) - Agent ของ Cloud Trace (
roles/cloudtrace.agent
) - ผู้เขียนบันทึก (
roles/logging.logWriter
)
- ผู้เขียนเมตริกการตรวจสอบ (
เผยแพร่แอปอีกครั้งไปยัง App Hosting
เมื่อเผยแพร่เสร็จแล้ว ให้โหลดแอปและเริ่มใช้งาน หลังจากผ่านไป 5 นาที แอปควรเริ่มบันทึกข้อมูลการวัดและส่งข้อมูลทางไกล
ขั้นตอนที่ 3: ตรวจสอบฟีเจอร์ Generative AI ในคอนโซล Firebase
เมื่อกำหนดค่าการวัดและส่งข้อมูลแล้ว Genkit จะบันทึกจำนวนคำขอ ความสำเร็จ และเวลาในการตอบสนองสำหรับโฟลว์ทั้งหมด และสำหรับแต่ละโฟลว์ Genkit จะรวบรวมเมตริกความเสถียร แสดงกราฟแบบละเอียด และบันทึก การติดตามที่บันทึกไว้
วิธีตรวจสอบฟีเจอร์ AI ที่ใช้งานกับ Genkit
หลังจากผ่านไป 5 นาที ให้เปิด Genkit ใน Firebase คอนโซล และตรวจสอบพรอมต์และการตอบกลับของ Genkit
Genkit รวบรวมเมตริกความเสถียรต่อไปนี้
- คำขอทั้งหมด: จำนวนคำขอทั้งหมดที่โฟลว์ได้รับ
- อัตราความสำเร็จ: เปอร์เซ็นต์ของคำขอที่ประมวลผลสำเร็จ
- เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95: เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95 ของโฟลว์ ซึ่งเป็นเวลาที่ใช้ในการประมวลผลคำขอ 95%
การใช้งานโทเค็น:
- โทเค็นอินพุต: จำนวนโทเค็นที่ส่งไปยังโมเดลในพรอมต์
- โทเค็นเอาต์พุต: จำนวนโทเค็นที่โมเดลสร้างขึ้นใน การตอบกลับ
การใช้รูปภาพ:
- รูปภาพอินพุต: จำนวนรูปภาพที่ส่งไปยังโมเดลในพรอมต์
- รูปภาพเอาต์พุต: จำนวนรูปภาพที่โมเดลสร้างขึ้นใน การตอบกลับ
หากขยายเมตริกความเสถียร คุณจะเห็นกราฟแบบละเอียดดังนี้
- ปริมาณคำขอในช่วงระยะเวลาหนึ่ง
- อัตราความสำเร็จในช่วงระยะเวลาหนึ่ง
- โทเค็นอินพุตและเอาต์พุตในช่วงระยะเวลาหนึ่ง
- เวลาในการตอบสนอง (เปอร์เซ็นไทล์ที่ 95 และ 50) เมื่อเวลาผ่านไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ที่ Genkit
ขั้นตอนถัดไป
- พัฒนา เผยแพร่ และตรวจสอบเว็บแอปแบบฟูลสแต็กด้วย Firebase Studio
- พัฒนาแอปพลิเคชันด้วยเฟรมเวิร์กใดก็ได้โดยใช้เทมเพลตหรือโซลูชัน