ลองใช้ Gemini ใน Firebase Studio

Gemini ใน Firebase Studio มีความช่วยเหลือจาก AI เพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์การเขียนโค้ด โดยจะแสดงความช่วยเหลือแบบอินไลน์ภายในตัวแก้ไขโค้ด ผ่านอินเทอร์เฟซบรรทัดคำสั่ง (CLI) และใช้การแชท 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 > เปิดใช้การเติมแบบอินไลน์ Completion

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

แชทกับ Gemini โดยใช้ Gemini CLI

Gemini CLI เป็น AI Agent แบบโอเพนซอร์สที่นำความสามารถของโมเดล Gemini ของ Google มาไว้ในเทอร์มินัลของคุณโดยตรง Gemini CLI ทำงานคล้ายกับ Gemini แต่คุณอาจต้องการ ใช้ Gemini CLI หากเป็นนักพัฒนาซอฟต์แวร์ที่ใช้เวลาส่วนใหญ่ ในเทอร์มินัลเพื่อทำงานต่างๆ เช่น การสร้างโค้ด การแก้ไขข้อบกพร่อง การเรียกใช้คำสั่ง หรือการจัดการไฟล์โปรเจ็กต์

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

วิธีเข้าถึง Gemini CLI ใน Firebase Studio

  1. เปลี่ยนเป็นมุมมองโค้ด: หากคุณทำงานในโหมด Prototyper ให้คลิก ไอคอนเปลี่ยนภาษา เปลี่ยนเป็นโค้ด เพื่อเปิดมุมมอง Code

  2. เข้าถึงเทอร์มินัล: เปิดเมนู ไอคอนเมนู > เทอร์มินัล > เทอร์มินัลใหม่

  3. เปิด Gemini CLI: ป้อนคำสั่งต่อไปนี้ในเทอร์มินัล

    gemini

  4. ปรับแต่ง: เลือกธีมสีโดยใช้ปุ่มลูกศรบนแป้นพิมพ์ แล้วกด Enter

  5. ตรวจสอบสิทธิ์: เลือกวิธีการตรวจสอบสิทธิ์ หากต้องการรับใบอนุญาตฟรี Gemini Code Assistพร้อมสิทธิ์ส่งคำขอโมเดล 60 รายการ ต่อนาทีและ 1,000 รายการต่อวันโดยไม่มีค่าใช้จ่าย ให้เลือก เข้าสู่ระบบด้วย Google ดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ได้ใน เอกสารประกอบ

ในอนาคต สิ่งที่คุณต้องทำก็คือป้อน gemini ในเทอร์มินัลเพื่อเข้าถึง Gemini CLI

หรือคุณจะเรียกใช้ Gemini CLI ในโหมดไม่โต้ตอบ ก็ได้ ซึ่งมีประโยชน์สำหรับการเขียนสคริปต์และการทำงานอัตโนมัติ ในโหมดนี้ Gemini CLI จะออกจากระบบโดยอัตโนมัติหลังจากเรียกใช้คำสั่งที่คุณป้อน หากต้องการใช้โหมดนี้ ให้ใช้ แฟล็ก --prompt หรือ -p เช่น 

gemini -p "Create a markdown file that explains my app's architecture"

ใช้คำสั่งกับ Gemini CLI

คุณสามารถแชทกับ Gemini CLI เพื่อถามคำถามหรือส่งคำขอได้ เช่น ถามคำถามต่อไปนี้

  • explain [file_name.js]: หากพบโค้ดที่ไม่คุ้นเคย ให้ใช้คำสั่งนี้เพื่อขอคำอธิบาย เพียงแทนที่ [file_name.js] ด้วยเส้นทางที่เกี่ยวข้องหรือวางโค้ดลงในพรอมต์โดยตรง
  • refactor [code_snippet]: ปรับปรุงโครงสร้างหรือประสิทธิภาพของโค้ดโดย ขอให้ Gemini แนะนำการปรับโครงสร้าง
  • debug "Error: Module not found: 'firebase-admin'": เมื่อพบ ข้อผิดพลาด ให้ส่งข้อความแสดงข้อผิดพลาดไปยัง Gemini เพื่อรับข้อมูลเชิงลึกและ โซลูชันที่เป็นไปได้
  • summarize "Key features of Firebase Realtime Database": Gemini สามารถให้ข้อมูลการวิจัยอย่างรวดเร็วและสรุปเนื้อหาได้อย่างกระชับ

นอกจากนี้ ยังรองรับคำสั่งในตัวหลายคำสั่งเพื่อช่วยคุณจัดการเซสชัน ปรับแต่งอินเทอร์เฟซ และควบคุมลักษณะการทำงาน เช่น

  • /help: ป้อนคำสั่งนี้เพื่อดูรายการคำสั่งและตัวเลือกที่พร้อมใช้งานทั้งหมด ซึ่งเป็นจุดเริ่มต้นที่ดีเยี่ยมสำหรับการสำรวจ
  • /chat: บันทึกและกลับไปดูประวัติการสนทนาเพื่อสร้างการสนทนาแบบแยกย่อยหรือกลับไปที่สถานะก่อนหน้าจากเซสชันภายหลัง
  • /tools: แสดงรายการเครื่องมือที่พร้อมใช้งานภายใน Gemini CLI
  • /restore: กู้คืนไฟล์โปรเจ็กต์ให้อยู่ในสถานะก่อนที่จะเรียกใช้เครื่องมือ ซึ่งมีประโยชน์อย่างยิ่งสำหรับการเลิกทำการแก้ไขไฟล์ที่ทำโดยเครื่องมือ

ดูรายการคำสั่งทั้งหมดได้ในเอกสารประกอบของ Gemini CLI