ลองใช้ Gemini ใน Firebase ภายใน Firebase Studio

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

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

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

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

แชทกับ Gemini ใน Firebase

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gemini ใน Firebase ช่วยคุณทำงานพัฒนาที่ซับซ้อนได้ เช่น

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

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

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

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

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

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

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

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

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

  3. แชทต่อในชุดข้อความนั้นหรือกลับไปดูแชทก่อนหน้าด้วย Gemini

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

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

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

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

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

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

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

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

Firebase Studio ช่วยเพิ่มประสิทธิภาพการทำงานด้วยคำแนะนำโค้ดที่ AI ช่วย จาก Gemini

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

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

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

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

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

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

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

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

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

ดูคำสั่ง Gemini ใน Firebase แบบอินไลน์

  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 view, click Code switch icon Switch to Code to open Code view.

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

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

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

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

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

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

  1. เปลี่ยนเป็นมุมมองโค้ด: หากคุณกำลังทำงานใน Prototyper mode, Code switch icon Switch to Code to open Code view.

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

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

    gemini

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

  5. ตรวจสอบสิทธิ์: หากได้รับข้อความแจ้ง ให้เลือกวิธีการตรวจสอบสิทธิ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ได้ที่เอกสารประกอบ

ในอนาคต สิ่งที่คุณต้องทำก็คือป้อน 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เอกสารประกอบ