เริ่มต้นใช้งานตัวแทนการสร้างต้นแบบแอป

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 ให้ทำตามขั้นตอนต่อไปนี้

  1. เข้าสู่ระบบบัญชี Google แล้วเปิด Firebase Studio

  2. ในช่องสร้างต้นแบบแอปด้วย 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.

  3. อัปโหลดรูปภาพเพื่อประกอบพรอมต์ (ไม่บังคับ) เช่น คุณ สามารถอัปโหลดรูปภาพที่มีรูปแบบสีที่ต้องการให้แอปใช้และบอก Firebase Studio ให้ใช้รูปแบบสีนั้น รูปภาพต้องมีขนาดไม่เกิน 3 MiB

  4. คลิกสร้างต้นแบบด้วย AI

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

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

    • คลิกปรับแต่งและแก้ไข พิมพ์เขียวโดยตรง ทำการเปลี่ยนแปลง แล้วคลิกบันทึก

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

  6. คลิกสร้างต้นแบบแอปนี้

  7. เอเจนต์การสร้างต้นแบบแอปจะเริ่มเขียนโค้ดแอป

    • หากแอปของคุณใช้ 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 คุณยังใช้ฟีเจอร์ที่เป็นประโยชน์ต่อไปนี้ได้ด้วย

  • ทดสอบและวัดประสิทธิภาพฟีเจอร์ Generative AI: คุณสามารถใช้ UI สำหรับนักพัฒนาแอป Genkit เพื่อเรียกใช้โฟลว์ AI ของ Genkit, ทดสอบ, แก้ข้อบกพร่อง, โต้ตอบ กับโมเดลต่างๆ, ปรับแต่งพรอมต์ และอื่นๆ

    หากต้องการโหลดโฟลว์ Genkit ใน UI สำหรับนักพัฒนาแอป Genkit และเริ่มทดสอบ ให้ทำดังนี้

    1. จากเทอร์มินัลในพื้นที่ทำงาน Firebase Studio ให้เรียกใช้คำสั่งต่อไปนี้เพื่อ จัดหาคีย์ Gemini API และเริ่มเซิร์ฟเวอร์ Genkit

       npm run genkit:watch

    2. คลิกลิงก์ UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit UI สำหรับนักพัฒนาแอป Genkit จะเปิดขึ้นใน หน้าต่างใหม่พร้อมโฟลว์ พรอมต์ ตัวฝัง และโมเดลต่างๆ ที่พร้อมใช้งาน

    ดูข้อมูลเพิ่มเติมเกี่ยวกับ UI สำหรับนักพัฒนาแอป Genkit ได้ที่เครื่องมือสำหรับนักพัฒนาแอป Genkit

เผยแพร่แอปด้วย Firebase App Hosting

หลังจากทดสอบแอปและพอใจกับผลลัพธ์ในพื้นที่ทํางานแล้ว คุณสามารถเผยแพร่แอปไปยังเว็บด้วย Firebase App Hosting

เมื่อตั้งค่า App Hosting Firebase Studio จะสร้าง โปรเจ็กต์ Firebase ให้คุณ (หากยังไม่ได้สร้างโดยการสร้างคีย์ Gemini API โดยอัตโนมัติ) และแนะนําขั้นตอนการลิงก์บัญชี Cloud Billing

วิธีเผยแพร่แอป

  1. คลิกเผยแพร่เพื่อตั้งค่าโปรเจ็กต์ Firebase และเผยแพร่แอป แผงเผยแพร่แอปจะปรากฏขึ้น

  2. ในขั้นตอนโปรเจ็กต์ Firebase App Prototyping agent จะแสดง Firebase ที่เชื่อมโยงกับพื้นที่ทํางาน หากไม่ได้สร้างโปรเจ็กต์ระหว่างGemini APIการสร้างคีย์ ระบบจะสร้างโปรเจ็กต์ใหม่ให้คุณ คลิกถัดไปเพื่อดำเนินการต่อ

  3. ในขั้นตอนลิงก์บัญชี Cloud Billing ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    • เลือกบัญชี Cloud Billing ที่ต้องการลิงก์กับโปรเจ็กต์ Firebase

    • หากไม่มีบัญชี Cloud Billing หรือต้องการสร้างบัญชีใหม่ ให้คลิกสร้างบัญชี Cloud Billing ซึ่งจะเปิดGoogle Cloudคอนโซล Cloud Billing ที่คุณสร้างบัญชีแบบบริการตนเองใหม่ได้ หลังจากสร้างบัญชีแล้ว ให้กลับไปที่ Firebase Studio แล้วเลือกบัญชีจากรายการลิงก์ Cloud Billing

  4. คลิกถัดไป Firebase Studio ลิงก์บัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ ที่เชื่อมโยงกับพื้นที่ทำงานของคุณ ซึ่งสร้างขึ้นเมื่อคุณสร้างคีย์Gemini APIโดยอัตโนมัติหรือเมื่อคุณคลิกเผยแพร่

  5. คลิกตั้งค่าบริการ เอเจนต์การสร้างต้นแบบแอปจะเริ่มจัดสรรบริการ Firebase

  6. คลิกเผยแพร่เลย Firebase Studio ตั้งค่าบริการ Firebase การดำเนินการนี้อาจใช้เวลาหลายนาทีจึงจะเสร็จสมบูรณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลังได้ที่App Hostingกระบวนการสร้าง

  7. เมื่อขั้นตอนการเผยแพร่เสร็จสมบูรณ์แล้ว ภาพรวมของแอปจะปรากฏพร้อมกับ 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 สำหรับแอป

  1. เปิดส่วน reCAPTCHA Enterprise ของคอนโซล Google Cloud

  2. เลือกชื่อโปรเจ็กต์ Firebase จากเครื่องมือเลือกโปรเจ็กต์ในGoogle Cloudคอนโซล

  3. หากได้รับแจ้งให้เปิดใช้ reCAPTCHA Enterprise API ให้ดำเนินการตามนั้น

  4. คลิกเริ่มต้นใช้งาน แล้วเพิ่มชื่อที่แสดงสำหรับคีย์เว็บไซต์ reCAPTCHA

  5. ยอมรับคีย์ประเภทแอปพลิเคชัน เว็บเริ่มต้น

  6. คลิกเพิ่มโดเมน แล้วเพิ่มโดเมน คุณจะต้องเพิ่ม App Hosting โดเมน (เช่น studio--PROJECT_ID.REGION.hosted.app) และโดเมนที่กำหนดเองที่คุณใช้หรือวางแผนที่จะใช้กับแอป

  7. คลิกขั้นตอนถัดไป

  8. ปล่อยให้ตัวเลือก Will you use challenges? ไม่ได้เลือก

  9. คลิกสร้างคีย์

  10. คัดลอกและบันทึกรหัสคีย์ แล้วไปที่กำหนดค่า App Check

ขั้นตอนที่ 2: กำหนดค่า App Check

  1. เปิดFirebaseคอนโซล แล้วคลิกสร้าง > App Check จากเมนูการนำทาง

  2. คลิกเริ่มต้นใช้งาน แล้วคลิกลงทะเบียนข้างแอป

  3. คลิกเพื่อขยาย reCAPTCHA แล้ววางรหัสคีย์ที่คุณสร้างสําหรับ<0x0AreCAPTCHA Enterprise

  4. คลิกบันทึก

ขั้นตอนที่ 3: เพิ่ม App Check ลงในโค้ด

  1. กลับไปที่ Firebase Studio และในมุมมอง Code ให้เพิ่ม คีย์เว็บไซต์ที่คุณสร้างลงในไฟล์ .env ดังนี้

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. หากยังไม่ได้บันทึกการกำหนดค่า Firebase ไว้ใน .env ให้รับการกำหนดค่าโดยทำดังนี้

  3. เพิ่มการกำหนดค่าลงในไฟล์ .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

  4. เพิ่ม App Check ลงในโค้ดแอป คุณขอให้ Gemini เพิ่ม App Check ด้วย reCAPTCHA Enterprise ลงในแอปได้ (อย่าลืมระบุ "reCAPTCHA Enterprise" และตรวจสอบอีกครั้ง) หรือ ทำตามขั้นตอนในเริ่มต้น App Check

  5. เผยแพร่เว็บไซต์ของคุณอีกครั้งไปยัง App Hosting ลองทดสอบฟีเจอร์ Firebase เพื่อสร้างข้อมูล

  6. ตรวจสอบว่า App Check ได้รับคำขอในคอนโซล Firebase โดยเปิดสร้าง > App Check

  7. คลิกเพื่อตรวจสอบ บริการ Firebase หลังจากยืนยันว่าคำขอมาถึงแล้ว ให้คลิกบังคับใช้เพื่อบังคับใช้ App Check

  8. ยืนยันและบังคับใช้สำหรับ Firebase Authentication อีกครั้ง

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

ตรวจสอบแอป

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

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

หากปิดแผงภาพรวมของแอป คุณจะเปิดอีกครั้งได้ทุกเมื่อโดย คลิกเผยแพร่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบApp Hostingการเปิดตัวได้ที่ จัดการการเปิดตัวและรุ่น

ย้อนกลับการติดตั้งใช้งาน

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

  • วิธีย้อนกลับเว็บไซต์ที่เผยแพร่แล้ว

    1. เปิด App Hosting ใน Firebase คอนโซล

    2. ค้นหาแบ็กเอนด์ของแอป คลิกดู แล้วคลิกการเปิดตัว

    3. คลิกเพิ่มเติม ข้างการติดตั้งใช้งานที่ต้องการย้อนกลับ จากนั้นเลือกย้อนกลับ ไปที่บิลด์นี้ แล้วยืนยัน

    ดูข้อมูลเพิ่มเติมได้ที่จัดการการเปิดตัวและการเผยแพร่

  • วิธีนำโดเมน App Hosting ออกจากเว็บ

    1. จากคอนโซล Firebase ให้เปิด App Hosting แล้วคลิกดูในส่วนแอป Firebase Studio

    2. ในส่วนข้อมูลแบ็กเอนด์ ให้คลิกจัดการ หน้าโดเมนจะโหลดขึ้น

    3. คลิกเพิ่มเติม ข้างโดเมน แล้วเลือกปิดใช้โดเมน และยืนยัน

    การดำเนินการนี้จะนำโดเมนออกจากเว็บ หากต้องการนำApp Hostingแบ็กเอนด์ออกทั้งหมด ให้ทำตามวิธีการในลบแบ็กเอนด์

ใช้Genkitการตรวจสอบสำหรับฟีเจอร์ที่ใช้งานจริง

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

หากต้องการตั้งค่าการตรวจสอบใน Genkit ให้เพิ่มการวัดและส่งข้อมูลไปยังโฟลว์ AI ของ Genkit แล้วดูผลลัพธ์ในคอนโซล Firebase

ขั้นตอนที่ 1: เพิ่มการวัดระยะไกลลงในโค้ดโฟลว์ Genkit ใน Firebase Studio

วิธีตั้งค่าการตรวจสอบในโค้ด

  1. หากยังไม่ได้อยู่ในCodeมุมมอง ให้คลิก สลับโค้ด ไอคอน เปลี่ยนไปใช้โค้ดเพื่อเปิด

  2. ตรวจสอบ package.json เพื่อยืนยันเวอร์ชันของ Genkit ที่ติดตั้ง

  3. เปิดเทอร์มินัล (Ctrl-Shift-C หรือ Cmd-Shift-C ใน MacOS)

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

    npm i --save @genkit-ai/firebase@1.0.4

  5. จาก Explorer ให้ขยาย src > ai > flows ไฟล์ TypeScript อย่างน้อย 1 ไฟล์ ที่มีโฟลว์ Genkit จะปรากฏในโฟลเดอร์ flows

  6. คลิกโฟลว์ใดโฟลว์หนึ่งเพื่อเปิด

  7. ที่ด้านล่างของส่วนการนำเข้าของไฟล์ ให้เพิ่มข้อมูลต่อไปนี้เพื่อ นำเข้าและเปิดใช้ FirebaseTelemetry

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

ขั้นตอนที่ 2: ตั้งค่าสิทธิ์

Firebase Studio ได้เปิดใช้ API ที่จำเป็น ให้คุณเมื่อตั้งค่าโปรเจ็กต์ Firebase แต่คุณก็ต้องให้สิทธิ์แก่บัญชีบริการ App Hosting ด้วย

วิธีตั้งค่าสิทธิ์

  1. เปิดGoogle Cloudคอนโซล IAM เลือกโปรเจ็กต์ แล้วมอบหมายบทบาทต่อไปนี้ให้กับบัญชีบริการ App Hosting

    • ผู้เขียนเมตริกการตรวจสอบ (roles/monitoring.metricWriter)
    • Agent ของ Cloud Trace (roles/cloudtrace.agent)
    • ผู้เขียนบันทึก (roles/logging.logWriter)

  2. เผยแพร่แอปอีกครั้งไปยัง App Hosting

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

ขั้นตอนที่ 3: ตรวจสอบฟีเจอร์ Generative AI ในคอนโซล Firebase

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

วิธีตรวจสอบฟีเจอร์ AI ที่ใช้งานกับ Genkit

  1. หลังจากผ่านไป 5 นาที ให้เปิด Genkit ใน Firebase คอนโซล และตรวจสอบพรอมต์และการตอบกลับของ Genkit

    Genkit รวบรวมเมตริกความเสถียรต่อไปนี้

    • คำขอทั้งหมด: จำนวนคำขอทั้งหมดที่โฟลว์ได้รับ
    • อัตราความสำเร็จ: เปอร์เซ็นต์ของคำขอที่ประมวลผลสำเร็จ
    • เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95: เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95 ของโฟลว์ ซึ่งเป็นเวลาที่ใช้ในการประมวลผลคำขอ 95%

    • การใช้งานโทเค็น:

      • โทเค็นอินพุต: จำนวนโทเค็นที่ส่งไปยังโมเดลในพรอมต์
      • โทเค็นเอาต์พุต: จำนวนโทเค็นที่โมเดลสร้างขึ้นใน การตอบกลับ

    • การใช้รูปภาพ:

      • รูปภาพอินพุต: จำนวนรูปภาพที่ส่งไปยังโมเดลในพรอมต์
      • รูปภาพเอาต์พุต: จำนวนรูปภาพที่โมเดลสร้างขึ้นใน การตอบกลับ

    หากขยายเมตริกความเสถียร คุณจะเห็นกราฟแบบละเอียดดังนี้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ที่ Genkit

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