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

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

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

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

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

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

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

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

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

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

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

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

  5. คลิกสร้างต้นแบบแอปนี้ Gemini จะเริ่มเขียนโค้ดแอป เนื่องจากคำอธิบายแอปอธิบายฟีเจอร์ที่ต้องอาศัย Generative AI Gemini จึงจะแจ้งให้คุณป้อนคีย์ Gemini API

  6. เพิ่มคีย์ Gemini API ของคุณเอง หรือคลิกสร้างโดยอัตโนมัติเพื่อสร้างคีย์ Gemini API

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

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

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

  2. แก้ไขแอป: ใช้อินเทอร์เฟซแชทเพื่อขอให้ Gemini เพิ่มฟีเจอร์และปรับแต่งแอปต่อไป หรือคลิก ไอคอนสวิตช์โค้ด เปลี่ยนเป็นโค้ดเพื่อเปิดมุมมอง Code ซึ่งคุณจะแก้ไขโค้ดได้โดยตรงในเวิร์กスペース Firebase Studio

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

  4. แก้ไขข้อบกพร่องของแอป: เปิด Code โดยคลิก ไอคอนสวิตช์โค้ด เปลี่ยนไปใช้โค้ดเพื่อเปิดมุมมอง Code ซึ่งคุณสามารถใช้ฟีเจอร์การแก้ไขข้อบกพร่องและการรายงานในตัวของ Firebase Studio เพื่อตรวจสอบ แก้ไขข้อบกพร่อง และตรวจสอบแอปได้ คุณสามารถกลับไปที่ App Prototyping agent ได้ทุกเมื่อ

  5. ทำซ้ำ: หากแอปไม่ทำงานตามที่คาดไว้ ให้ปรับแต่งพรอมต์ ใช้แผงแชทเพื่อขอให้ Gemini ปรับแต่งแอป หรือแก้ไขโค้ดโดยตรง Code

(ไม่บังคับ) ขั้นตอนที่ 3: เผยแพร่แอปด้วย App Hosting

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

เมื่อคุณตั้งค่า App Hosting แล้ว Firebase Studio จะสร้างโปรเจ็กต์ Firebase ให้คุณและแนะนำขั้นตอนการลิงก์บัญชี Cloud Billing

วิธีเผยแพร่แอปไปยัง Firebase App Hosting

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

  2. ในขั้นตอนโปรเจ็กต์ Firebase ให้จดชื่อโปรเจ็กต์ Firebase ที่สร้างขึ้นให้คุณ แล้วคลิกถัดไป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. เปิด App Hosting ใน Firebase console

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

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

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

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

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

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

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

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

(ไม่บังคับ) ขั้นตอนที่ 6: ใช้Genkitการตรวจสอบฟีเจอร์ที่ติดตั้งใช้งาน

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

หากต้องการตั้งค่าการตรวจสอบใน Genkit ให้เพิ่มการวัดผลลงในโฟลว์ Genkit AI แล้วดูผลลัพธ์ในคอนโซล 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

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