ลองใช้ Gemini ใน Firebase Studio

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

คุณเริ่มใช้ Gemini ได้ทันทีโดยไม่ต้องตั้งค่าใดๆ ดังนี้

โปรดทราบว่า การเติมโค้ดอัตโนมัติในบรรทัดและการจัดทำดัชนีฐานของโค้ดจะเปิดอยู่โดยค่าเริ่มต้น ดูวิธีปรับการตั้งค่า

Gemini จะพร้อมใช้งานเมื่อคุณ อยู่ในมุมมอง Code คุณสามารถใช้ Gemini กับแอปที่คุณเริ่มใน Firebase Studio, แอปที่คุณนำเข้าไปยัง Firebase Studio, และแอป ที่สร้างโดย App Prototyping agent

แชทกับ Gemini

Firebase Studio ช่วยให้เวิร์กโฟลว์การพัฒนาของคุณง่ายขึ้นด้วยการแชทที่ได้รับความช่วยเหลือจาก AI

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

  1. เปิดหรือสร้างพื้นที่ทำงานใน Firebase Studio

  2. คลิก sparkGemini ที่ด้านล่างของพื้นที่ทำงาน

  3. เริ่มแชทกับ Gemini

  4. (ไม่บังคับ) ส่งพรอมต์มัลติโมดัลไปยัง Gemini โดยคลิก ไอคอนแนบ แนบ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    • ภาพวาด: ใช้เครื่องมือวาดภาพเพื่อออกแบบตามที่ต้องการ จากนั้นพิมพ์พรอมต์แล้วคลิกส่ง
    • รูปภาพ: อัปโหลดรูปภาพ เพิ่มพรอมต์ แล้วคลิกส่ง
    • ไฟล์: เลือกไฟล์จากพื้นที่ทำงานเพื่อใช้เป็นบริบท เพิ่มพรอมต์ แล้วคลิกส่ง

  5. (ไม่บังคับ) เปลี่ยนโหมดที่ Gemini ใช้เพื่อตอบสนองต่อคำขอ

    • ถาม: สร้างแผน ในโหมดนี้ Gemini จะตอบคำถาม โดยไม่เสนอการเปลี่ยนแปลงโค้ด
    • Agent: ทำการเปลี่ยนแปลงในแอป ในโหมดนี้ Gemini จะเสนอการเปลี่ยนแปลงในแอป แต่จะไม่ใช้การเปลี่ยนแปลงดังกล่าวหากไม่ได้รับการ ยืนยันจากคุณ
    • Agent (เรียกใช้โดยอัตโนมัติ): ใช้การเปลี่ยนแปลงในแอปโดยอัตโนมัติ ในโหมดนี้ Gemini จะทำการเปลี่ยนแปลงโค้ดโดยอัตโนมัติตาม คำขอของคุณ แต่จะยังคงขอการยืนยันเพื่อเรียกใช้คำสั่งเทอร์มินัล

  6. (ไม่บังคับ) เพิ่มคีย์ Gemini API ของคุณเองและเลือกโมเดล Gemini อื่น ดูข้อมูลเพิ่มเติมได้ที่หัวข้อ นำคีย์ของคุณเองมาใช้: ใช้โมเดล Gemini อื่นๆ ในแชท

  7. (ไม่บังคับ) ปรับแต่งวิธีที่ Gemini ช่วยคุณโดยปรับ การตั้งค่าและเพิ่มไฟล์กฎ AI ดูข้อมูลเพิ่มเติม

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

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

    • อัปเดตไฟล์: อัปเดตไฟล์โดยตรงด้วยการเปลี่ยนแปลงที่ Gemini's เสนอ
    • ตรวจสอบการเปลี่ยนแปลง: เปิดการเปลี่ยนแปลงที่เสนอในหน้าต่างอื่นเพื่อตรวจสอบก่อนที่จะนำไปใช้

  • เรียกใช้คำสั่งเทอร์มินัล: Gemini สามารถเรียกใช้คำสั่งต่างๆ เช่น การติดตั้งการขึ้นต่อกันหรือการเริ่มเซิร์ฟเวอร์การพัฒนา โดยอาจเสนอ คำสั่งเหล่านี้ด้วยตัวเอง หรือคุณจะขอให้ Gemini เรียกใช้ก็ได้ หลังจากที่ Gemini เสนอคำสั่งแล้ว ปุ่มเรียกใช้คำสั่ง เทอร์มินัล จะปรากฏขึ้น คลิกปุ่มดังกล่าวเพื่อเรียกใช้คำสั่งในเทอร์มินัล ภายใน Firebase Studio Gemini จะเรียกใช้คำสั่ง และตีความผลลัพธ์ให้คุณในหน้าต่างแชท รวมถึงช่วย กำหนดขั้นตอนถัดไป

ทำงานที่ซับซ้อนให้เสร็จสมบูรณ์ด้วยแชท

Gemini สามารถช่วยคุณทำงานพัฒนาที่ซับซ้อน ให้เสร็จสมบูรณ์ได้ เช่น

  • การจัดทำเอกสารโค้ด: Gemini สามารถ สร้างเอกสารในรูปแบบที่เหมาะสมสำหรับโค้ดของคุณโดยอัตโนมัติเมื่อคุณ ขอให้ "เขียนเอกสารของฉัน"
  • การเขียนกรณีทดสอบ: Gemini สามารถอัปเดตและสร้างการทดสอบหน่วยโดยอัตโนมัติ หากคุณขอให้ Gemini เพื่อ "เขียนการทดสอบของฉัน" Gemini จะค้นหาไฟล์การทดสอบหน่วยที่มีอยู่ และเพิ่มการทดสอบที่ขาดหายไปลงในไฟล์ได้ หากไม่พบไฟล์การทดสอบหน่วยที่มีอยู่ ระบบจะสร้างการทดสอบหน่วยให้คุณตรวจสอบ ทำซ้ำ และยอมรับ ซึ่งคุณสามารถขอให้ Gemini ดำเนินการได้ด้วย
  • การจัดการการขึ้นต่อกัน: คุณสามารถขอให้ Gemini ตรวจหา การขึ้นต่อกันที่ขาดหายไปในโค้ดและแก้ไขการขึ้นต่อกันเหล่านั้นได้โดยตรงจากอินเทอร์เฟซ แชท
  • การปรับโครงสร้างโค้ด: คุณสามารถขอให้ Gemini ปรับโครงสร้างโค้ด ในนามของคุณได้ เช่น แยกฟังก์ชันหรือเปลี่ยนชื่อ ตัวแปรในหลายไฟล์ Gemini จะสร้าง รายการการเปลี่ยนแปลงที่เสนอ และหลังจากตรวจสอบและใช้การเปลี่ยนแปลงแล้ว คุณ สามารถขอให้ Gemini อัปเดตและเรียกใช้การทดสอบหน่วยเพื่อยืนยัน การปรับโครงสร้างและตรวจสอบว่าการทดสอบยังคงผ่าน
  • การสร้างและเรียกใช้เวิร์กโฟลว์ Docker: หากคุณเปิดใช้ Docker ใน พื้นที่ทำงาน คุณ สามารถสร้างคอนเทนเนอร์แอปพลิเคชันได้อย่างรวดเร็วโดยขอให้ Gemini สร้าง Dockerfile (เช่น "สร้าง Dockerfile สำหรับแอปของฉัน") หลังจากที่ Gemini สร้าง Dockerfile แล้ว ระบบจะสร้างและเรียกใช้ คอนเทนเนอร์ให้คุณ
  • เรียกใช้การทดสอบหน่วยและการทดสอบการผสานรวม: คุณสามารถเริ่มการดำเนินการทดสอบได้โดยขอให้ Geminiเรียกใช้ชุดการทดสอบที่เฉพาะเจาะจง (เช่น "เรียกใช้การทดสอบหน่วยของฉัน" หรือ "เรียกใช้การทดสอบการผสานรวม") Gemini จะเรียกใช้คำสั่งที่เหมาะสมสำหรับโปรเจ็กต์ของคุณ (เช่น npm test หรือคำสั่งตัวเรียกใช้การทดสอบที่เฉพาะเจาะจง) และจะแสดงผลการทดสอบภายในอินเทอร์เฟซแชท

ใช้คำสั่งเครื่องหมายทับในแชท

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

หากต้องการดูรายการคำสั่งเครื่องหมายทับทั้งหมด ให้พิมพ์ / ในแชท

ตัวอย่างเช่น /generate ตามด้วยคำอธิบายสั้นๆ เกี่ยวกับสิ่งที่ต้องการคือทางลัดพรอมต์เพื่อสร้างข้อมูลโค้ด

ตัวอย่างผลลัพธ์สำหรับการเรียกใช้ /generate css for a black background

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

อ้างอิงไฟล์และโฟลเดอร์ที่เฉพาะเจาะจงในแชท

หากต้องการให้บริบทเพิ่มเติมสำหรับคำขอและคำถามที่คุณถาม Gemini คุณสามารถอ้างอิงไฟล์และโฟลเดอร์ที่เฉพาะเจาะจงได้โดยใช้ สัญลักษณ์ @

เช่น Explain what's contained within the @src/ai directory.

จัดการประวัติการแชท

คุณสามารถแยกหัวข้อต่างๆ ในแชท Gemini ได้ โดยเริ่มชุดข้อความที่แตกต่างกัน จากนั้นคุณจะอ้างอิงชุดข้อความก่อนหน้าตามหัวข้อได้

วิธีเริ่มแชทใหม่

  1. คลิกแชทใหม่ ในแถบส่วนหัวของแชท

  2. ป้อนพรอมต์

วิธีเปลี่ยนไปใช้ชุดข้อความแชทอื่น

  1. คลิกแชทล่าสุด ในแถบส่วนหัวของแชท

  2. เลือกชุดข้อความแชทที่ต้องการเข้าถึง

  3. ดำเนินการต่อในชุดข้อความแชทนั้นหรืออ้างอิงถึงแชทก่อนหน้ากับ Gemini

วิธีลบชุดข้อความแชท

  1. เลือกชุดข้อความแชทที่ต้องการลบจากแชทล่าสุด ในแถบส่วนหัวของแชท

  2. คลิกลบแชท ในแถบส่วนหัวของแชท ยืนยันว่าต้องการลบชุดข้อความแชทออกจากประวัติการแชท

ดูการอ้างอิงโค้ดในแชท

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

ไอคอนบันทึกใบอนุญาตในแถบส่วนหัวของแชท

ดูข้อมูลเพิ่มเติมเกี่ยวกับการอ้างอิงโค้ดของ Google ได้ที่ ความช่วยเหลือในการเขียนโค้ด

รับความช่วยเหลือในบรรทัดจาก Gemini

Firebase Studio ช่วยเพิ่มประสิทธิภาพการทำงานของคุณด้วยคำแนะนำโค้ดที่ได้รับความช่วยเหลือจาก AI จาก Gemini

โปรดทราบว่า การเติมโค้ดอัตโนมัติจะเปิดอยู่โดยค่าเริ่มต้น ดูวิธีปรับการตั้งค่า

รับคำแนะนำโค้ดจาก Gemini

Gemini จะสร้างบล็อกโค้ดที่เป็นไปได้ทั้งหมด ในบรรทัด หากต้องการใช้ความช่วยเหลือในการเขียนโค้ดในบรรทัดของ Gemini ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดพื้นที่ทำงานใน Firebase Studio

  2. ไปที่ไฟล์หรือบรรทัดโค้ดที่ต้องการความช่วยเหลือ แล้วกด Ctrl+I (Cmd+I ใน MacOS)

  3. ป้อนคำอธิบายเกี่ยวกับสิ่งที่ต้องการ แล้ว Gemini จะสร้างคำแนะนำ นอกจากนี้ คุณยังใช้การดำเนินการเป็น ทางลัดเพื่อแนะนำคำแนะนำได้ด้วย เช่น ป้อน /fixError เพื่อรับความช่วยเหลือในการแก้ไขข้อผิดพลาดในโค้ดในบรรทัด

  4. เลือกดำเนินการตามตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

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

  5. (ไม่บังคับ) ปรับแต่งวิธีที่ Gemini ช่วยคุณโดยปรับ การตั้งค่าและเพิ่มไฟล์กฎ AI ดูข้อมูลเพิ่มเติม

ดูคำสั่ง Gemini ในบรรทัด

  1. หากต้องการดูคำสั่ง Gemini ในบรรทัดสำหรับโค้ดที่เฉพาะเจาะจง ให้เลือกและคลิกขวาที่โค้ดที่ต้องการความช่วยเหลือ

  2. เลือก sparkGemini จากเมนู แล้วเลือกการดำเนินการที่ต้องการ

ใช้การเติมโค้ดอัตโนมัติที่ Gemini แนะนำ

เพื่อช่วยคุณเขียนโค้ด Firebase Studio มีการเติมโค้ดอัตโนมัติด้วย AI ที่คาดการณ์และเติมโค้ดในไฟล์ที่เปิดอยู่โดยอัตโนมัติทันทีที่คุณ เริ่มพิมพ์

โปรดทราบว่า การเติมโค้ดอัตโนมัติจะเปิดอยู่โดยค่าเริ่มต้น

หากต้องการเปิดหรือปิดการเติมโค้ดอัตโนมัติ ให้ปรับการตั้งค่าการเติมโค้ดอัตโนมัติโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

  • หากใช้ไฟล์ settings.json ให้ตั้งค่า "IDX.aI.enableInlineCompletion" เป็น true หรือ false

  • วิธีอัปเดตการตั้งค่าในพื้นที่ทำงาน Firebase Studio

    1. คลิก ไอคอนรูปเฟือง จัดการ (อยู่ที่ด้านซ้ายล่างของพื้นที่ทำงาน) แล้วเลือก การตั้งค่า หรือกด Ctrl+, (Cmd+, ใน Mac)

      หากคุณใช้ App Prototyping agent ใน Prototyper มุมมอง ให้คลิก ไอคอนเปลี่ยนภาษา เปลี่ยนเป็นโค้ด เพื่อเปิด Code มุมมอง

    2. เลือกแท็บพื้นที่ทำงาน แล้วค้นหาการตั้งค่า Firebase Studio > AI > เปิดใช้การเติมโค้ดอัตโนมัติในบรรทัด

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