ลองใช้ Gemini ใน Firebase Studio

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

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

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

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

แชทกับ Gemini

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

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

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

  2. คลิกประกายไฟGemini ที่ด้านล่างของพื้นที่ทำงาน

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

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

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

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

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

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

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

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

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

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

  • เรียกใช้คำสั่งเทอร์มินัล: Gemini สามารถเรียกใช้คำสั่งต่างๆ เช่น การติดตั้งทรัพยากร Dependency หรือการเริ่มต้นเซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์ โดยอาจเสนอคำสั่งเหล่านี้ด้วยตัวเอง หรือคุณจะขอให้ 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 ได้ที่ความช่วยเหลือเกี่ยวกับโค้ด Generative

รับความช่วยเหลือในบรรทัดจาก 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 Workspace

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

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

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

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