พัฒนา เผยแพร่ และตรวจสอบเว็บแอปแบบ Full Stack ด้วยตัวแทนการสร้างต้นแบบแอป

คู่มือนี้จะแสดงวิธีใช้ App Prototyping agent เพื่อพัฒนาและเผยแพร่แอปแบบ Full Stack อย่างรวดเร็วด้วยความช่วยเหลือของ Gemini ใน Firebase คุณจะใช้พรอมต์ที่เป็นภาษาธรรมชาติเพื่อสร้างแอป Next.js ที่ระบุรายการอาหารจากรูปภาพหรือกล้องในเบราว์เซอร์ และสร้างสูตรที่มีส่วนผสมที่ระบุ

เทคโนโลยีอื่นๆ ที่คุณจะใช้ขณะอ่านคู่มือนี้ ได้แก่

ขั้นตอนที่ 1: สร้างแอป

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

  2. ในช่องสร้างต้นแบบแอปด้วย AI ให้ป้อนพรอมต์ต่อไปนี้ ซึ่งจะสร้างแอปสูตรอาหารแบบรูปภาพที่ใช้กล้องเบราว์เซอร์และ Generative 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 ให้คุณ

ขั้นตอนที่ 2: ทดสอบ ปรับแต่ง แก้ไขข้อบกพร่อง และทําซ้ำ

หลังจากสร้างแอปแรกแล้ว คุณจะทดสอบ ปรับแต่ง แก้ไขข้อบกพร่อง และดำเนินการซ้ำได้

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

  • แก้ไขข้อผิดพลาดที่เกิดขึ้น: ในกรณีส่วนใหญ่ 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

(ไม่บังคับ) ขั้นตอนที่ 3: เผยแพร่แอปด้วย 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. คลิกตั้งค่าบริการ Agent การนําร่องแอปจะเริ่มจัดสรรบริการ Firebase

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

  7. เมื่อขั้นตอนเผยแพร่เสร็จสมบูรณ์แล้ว ภาพรวมแอปจะปรากฏขึ้นพร้อม URL และข้อมูลเชิงลึกของแอปที่ขับเคลื่อนโดยความสามารถในการสังเกตการณ์ App Hosting หากต้องการใช้โดเมนที่กำหนดเอง (เช่น example.com หรือ app.example.com) แทนโดเมนที่ Firebase สร้างขึ้น คุณสามารถเพิ่มโดเมนที่กำหนดเองในคอนโซล Firebase

ดูข้อมูลเพิ่มเติมเกี่ยวกับ App Hosting ได้ที่หัวข้อทำความเข้าใจ App Hosting และวิธีทํางาน

(แนะนำ) ขั้นตอนที่ 6: เพิ่ม Firebase App Check ลงในแอป

หากคุณผสานรวมบริการ 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. ปล่อยตัวเลือกคุณจะใช้มาตรการลงชื่อเข้าใช้แบบยืนยันตัวตนหรือไม่ไว้โดยไม่เลือก

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

  10. คัดลอกและบันทึกรหัสคีย์ แล้วดำเนินการต่อเพื่อกำหนดค่า App Check

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

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

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

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

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

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

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

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. หากยังไม่ได้บันทึกการกําหนดค่า Firebase ลงใน .env ให้ดําเนินการดังนี้

    • จากคอนโซล Firebase ให้เปิดการตั้งค่าโปรเจ็กต์ แล้วค้นหาในส่วนที่ตรงกับแอป

    • จากมุมมองอาคารผู้โดยสารใน Code ให้ทำดังนี้

      1. เข้าสู่ระบบ Firebase: firebase auth login
      2. เลือกโปรเจ็กต์ firebase use FIREBASE_PROJECT_ID
      3. รับการกําหนดค่า Firebase: firebase apps:sdkconfig

  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 กับผู้ให้บริการแก้ไขข้อบกพร่องในแอปบนเว็บ

(ไม่บังคับ) ขั้นตอนที่ 7: ตรวจสอบแอป

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

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

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

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

(ไม่บังคับ) ขั้นตอนที่ 8: เปลี่ยนกลับการติดตั้งใช้งาน

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

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

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

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

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

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

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

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

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

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

    ซึ่งจะนำโดเมนของคุณออกจากเว็บ หากต้องการนําApp Hostingแบ็กเอนด์ออกอย่างสมบูรณ์ ให้ทําตามวิธีการในลบแบ็กเอนด์

(ไม่บังคับ) ขั้นตอนที่ 9: ใช้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 คัดเลือกโปรเจ็กต์ แล้วให้บทบาทต่อไปนี้แก่บัญชีบริการโฮสติ้งแอป

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Cloud Trace Agent (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

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