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

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

เครื่องมือสร้างต้นแบบแอปเป็นขั้นตอนการพัฒนาแบบไม่ต้องเขียนโค้ดที่มีประสิทธิภาพ ซึ่งใช้ Generative AI เพื่อพัฒนา ทดสอบ ทำซ้ำ และเผยแพร่เว็บแอปแบบ Full Stack ที่เขียนโค้ดแบบตัวแทน คุณสามารถอธิบายแนวคิดแอปเป็นภาษาที่เป็นธรรมชาติพร้อมรูปภาพ (ไม่บังคับ) แล้วเครื่องมือจะสร้างผังแอป โค้ด และตัวอย่างเว็บ Firebase Studio สามารถจัดสรรบริการต่อไปนี้ให้คุณโดยอัตโนมัติเพื่อช่วยในการพัฒนาและเผยแพร่แอปแบบ Full Stack

  • หากต้องการเผยแพร่แอปไปยังเว็บ Firebase Studio จะสร้างโปรเจ็กต์และมอบวิธีด่วนในการเผยแพร่แอปด้วย Firebase App Hosting

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

เริ่มต้นใช้งาน

หากต้องการเริ่มต้นใช้งาน App Prototyping agent ให้ทำตามขั้นตอนต่อไปนี้

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

  2. ในช่องสร้างต้นแบบแอปด้วย AI ให้อธิบายแนวคิดแอปเป็นภาษาที่เป็นธรรมชาติ

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

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

    ตัวแทนการสร้างต้นแบบแอปจะแสดงผลผังแอป ซึ่งระบุชื่อแอปที่เสนอ ฟีเจอร์หลัก และหลักเกณฑ์ด้านสไตล์

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

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

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

  5. เมื่ออนุมัติพิมพ์เขียวแล้ว ให้คลิกสร้างต้นแบบแอปนี้

    Gemini จะสร้างโค้ดจากพิมพ์เขียวและแสดงตัวอย่างเว็บให้คุณตรวจสอบ

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

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

  • ทดสอบและปรับปรุง: ทดสอบแอปอย่างละเอียดและทํางานร่วมกับ App Prototyping agent เพื่อปรับปรุงโค้ดและพิมพ์เขียวจนกว่าคุณจะพอใจ นอกจากนี้ คุณยังคลิก </> เพื่อเข้าสู่มุมมองโค้ดและแก้ไขโค้ดในพื้นที่ทำงาน Firebase Studio ได้ด้วย

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

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

  • เผยแพร่แอปด้วย Firebase App Hosting: คลิกเผยแพร่เพื่อเผยแพร่แอปใน App Hosting

  • ตรวจสอบและเพิ่มประสิทธิภาพแอปและฟีเจอร์ AI: ตรวจสอบประสิทธิภาพและการใช้งานของเว็บแอปด้วยความสามารถในการสังเกตได้ใน App Hosting และตรวจสอบขั้นตอนการทํางานของ Generative AI ด้วยการเก็บรวบรวมข้อมูล Firebase ใน Genkit ดูข้อมูลเพิ่มเติมที่ตรวจสอบเว็บแอป

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