เริ่มต้นใช้งานเอเจนต์การสร้างต้นแบบแอป

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

App Prototyping agent เป็นขั้นตอนการพัฒนาแบบไม่มีโค้ดที่ได้รับการปรับปรุงแล้ว ซึ่ง ใช้ 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

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

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

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

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

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

  7. App Prototyping agent เริ่มเขียนโค้ดแอป

    • หากแอปใช้ AI ระบบจะแจ้งให้คุณเพิ่มหรือสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ App Prototyping agent จะจัดสรรโปรเจ็กต์ Firebase และคีย์ Gemini API ให้คุณ

ทดสอบ ปรับแต่ง แก้ไขข้อบกพร่อง และทำซ้ำ

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

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

  • เพิ่ม Cloud Firestore และ Firebase Authentication: ในช่วงระยะการทำซ้ำ คุณสามารถขอให้ App Prototyping agent เพิ่มการตรวจสอบสิทธิ์ของผู้ใช้และ ฐานข้อมูลโดยใช้ Cloud Firestore และ Firebase Authentication ได้ เช่น ให้ผู้ใช้ บันทึกและดาวน์โหลดสูตรอาหารได้ด้วยพรอมต์ต่อไปนี้

    Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.

  • แก้ไขข้อผิดพลาดที่เกิดขึ้น: ในกรณีส่วนใหญ่ App Prototyping agent จะแจ้งให้คุณแก้ไขข้อผิดพลาดที่เกิดขึ้น คลิกแก้ไขข้อผิดพลาดเพื่ออนุญาตให้ ระบบลองแก้ไข

    หากได้รับข้อผิดพลาดที่ระบบไม่ได้แจ้งให้แก้ไขโดยอัตโนมัติ ให้คัดลอกข้อผิดพลาดและบริบทที่เกี่ยวข้อง (เช่น "คุณช่วยแก้ไขข้อผิดพลาดนี้ ในโค้ดการเริ่มต้น Firebase ของฉันได้ไหม") ลงในหน้าต่างแชท แล้ว ส่งให้ Gemini

  • ทดสอบและทำซ้ำโดยใช้ภาษาธรรมชาติ: ทดสอบแอปอย่างละเอียดและ ทำงานร่วมกับ App Prototyping agent เพื่อทำซ้ำโค้ดและพิมพ์เขียว จนกว่าคุณจะพอใจ

    ขณะอยู่ในมุมมอง Prototyper คุณยังใช้ฟีเจอร์ต่อไปนี้ได้ด้วย

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

    • คลิก เลือกไอคอน เลือกเพื่อเลือกองค์ประกอบที่เฉพาะเจาะจงและป้อนวิธีการสำหรับ App Prototyping agent ซึ่งจะช่วยให้คุณกำหนดเป้าหมายไอคอน ปุ่ม ข้อความ หรือองค์ประกอบอื่นๆ ที่เฉพาะเจาะจงได้อย่างรวดเร็ว เมื่อคลิกรูปภาพ คุณจะมีตัวเลือกในการค้นหาและเลือกภาพสต็อกจาก Unsplash ด้วย

    คุณคลิกลิงก์ ไอคอน แชร์ลิงก์ตัวอย่างเพื่อแชร์แอปแบบสาธารณะชั่วคราวโดยใช้Firebase Studio เวอร์ชันตัวอย่างแบบสาธารณะได้ (ไม่บังคับ)

  • สร้างโปรเจ็กต์ Firebase: App Prototyping agent จะจัดสรร โปรเจ็กต์ Firebase ในนามของคุณเมื่อคุณทำสิ่งต่อไปนี้

    • สร้างคีย์ Gemini API โดยอัตโนมัติ
    • ขอให้เชื่อมต่อแอปกับโปรเจ็กต์ Firebase
    • ขอความช่วยเหลือในการเชื่อมต่อแอปกับบริการของ Firebase เช่น Cloud Firestore หรือ Firebase Authentication
    • คลิกปุ่มเผยแพร่และตั้งค่า Firebase App Hosting

    หากต้องการเปลี่ยนโปรเจ็กต์ Firebase ที่เชื่อมต่อกับพื้นที่ทํางาน ให้แจ้งApp Prototyping agentด้วยรหัสโปรเจ็กต์ที่ต้องการใช้แทน เช่น "เปลี่ยนไปใช้โปรเจ็กต์ Firebase ที่มีรหัส <your-project-id>"

  • ทดสอบแอปและยืนยันCloud Firestoreกฎของฐานข้อมูล: ในแผงแสดงตัวอย่างแอป ให้อัปโหลดรูปภาพที่แสดงอาหารต่างๆ เพื่อทดสอบความสามารถของแอป ในการระบุส่วนผสม รวมถึงสร้างและบันทึกสูตรอาหาร

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

    เมื่อคุณขอให้ App Prototyping agent เพิ่ม Cloud Firestore ระบบจะเขียน และใช้กฎฐานข้อมูล Cloud Firestore ให้คุณ ตรวจสอบกฎในFirebaseคอนโซล

  • แก้ไขข้อบกพร่องและทำซ้ำในโค้ดโดยตรง: คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนไปใช้โค้ดเพื่อเปิดมุมมอง Code ซึ่งคุณจะเห็น ไฟล์ทั้งหมดของแอปและแก้ไขโค้ดได้โดยตรง คุณเปลี่ยนกลับไปใช้โหมด Prototyper ได้ทุกเมื่อ

    ขณะอยู่ในมุมมอง Code คุณยังใช้ฟีเจอร์ที่เป็นประโยชน์ต่อไปนี้ได้ด้วย

    • Firebase Studioฟีเจอร์การแก้ไขข้อบกพร่องและการรายงานในตัวเพื่อตรวจสอบ แก้ไขข้อบกพร่อง และตรวจสอบแอป

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

    • เข้าถึง Firebase Local Emulator Suite เพื่อดูฐานข้อมูลและ ข้อมูลการตรวจสอบสิทธิ์ วิธีเปิดโปรแกรมจำลองใน พื้นที่ทำงาน

      1. คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนไปใช้โค้ด แล้วเปิดส่วนขยาย Firebase Studio (Ctrl+',Ctrl+' หรือ Cmd+',Cmd+' ใน MacOS)

      2. เลื่อนไปที่พอร์ตแบ็กเอนด์ แล้วขยาย

      3. ในคอลัมน์การดำเนินการที่สอดคล้องกับพอร์ต 4000 ให้คลิก เปิดในหน้าต่างใหม่

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

    วิธีโหลดโฟลว์ Genkit ใน Genkit Developer UI และเริ่ม ทดสอบ

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

       npm run genkit:watch

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

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

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

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

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

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

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

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

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

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

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

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

  5. คลิกตั้งค่าบริการ App Prototyping agent จะเริ่ม จัดสรรบริการ Firebase

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

  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 ลองทดสอบฟีเจอร์ฐานข้อมูลและการตรวจสอบสิทธิ์เพื่อสร้างข้อมูลบางอย่าง

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

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

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

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

ตรวจสอบแอป

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบ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 แล้วเลือกโปรเจ็กต์ Firebase

  2. มอบบทบาทต่อไปนี้ให้กับบัญชีบริการ App Hosting

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

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

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

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

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

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

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

  2. คุณดูเมตริกความเสถียรต่อไปนี้ที่รวบรวมโดย Genkit ได้

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

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

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

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

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

  3. คุณขยายเมตริกความเสถียรเพื่อดูกราฟแบบละเอียดต่อไปนี้ได้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ในเอกสารประกอบ

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