สร้างผู้ช่วยโค้ด AI ด้วย Pipet Code Agent

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

บทแนะนํานี้จะแสดงวิธีขยายระยะเวลา Pipet Code Agent เครื่องมือช่วยเหลือโค้ดที่ทำงานด้วยระบบ AI ซึ่งสร้างขึ้นโดยทีมนักพัฒนาสัมพันธ์ของ AI ที่ Google โครงการโอเพนซอร์สนี้เป็นส่วนขยายสำหรับ Microsoft Visual Studio Code (VS Code) ที่ช่วยให้คุณดำเนินการ ดูแลงานสำคัญที่ไม่ค่อยสนุก เช่น การเขียนโค้ด เช่น การแสดงความคิดเห็น โค้ดของคุณ การค้นหาข้อผิดพลาด และการแนะนำการปรับปรุง ส่วนขยายส่ง คำขอความช่วยเหลือในการเขียนโค้ดไปยัง Gemini API และรวมคำตอบไว้ใน หน้าต่างแก้ไขโค้ดของคุณ

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

หากต้องการดูวิดีโอภาพรวมของโปรเจ็กต์และวิธีต่อยอดโปรเจ็กต์ รวมถึงข้อมูลเชิงลึก จากผู้สร้าง ผู้ช่วยโค้ด AI - สร้างด้วย AI ของ Google หรือคุณจะเริ่มขยายเวลาโปรเจ็กต์ได้โดยทำตามวิธีการ ที่ด้านล่าง

การตั้งค่าโปรเจ็กต์

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

ติดตั้งสิ่งที่ต้องมีก่อน

โปรเจ็กต์ Agent โค้ด Pipet ทำงานเป็นส่วนขยายของ Microsoft Visual Studio โค้ดและการใช้งาน Node.js และเครื่องมือ npm ในการจัดการ แพ็กเกจของคุณและเรียกใช้แอปพลิเคชัน คำแนะนำในการติดตั้งมีดังต่อไปนี้ สำหรับเครื่องโฮสต์ Linux

วิธีติดตั้งซอฟต์แวร์ที่จำเป็น

  1. ติดตั้งโค้ด Visual Studio สำหรับแพลตฟอร์มของคุณ
  2. ติดตั้ง node และ npm โดยทําตามการติดตั้ง วิธีการสำหรับแพลตฟอร์มของคุณ

โคลนและกำหนดค่าโปรเจ็กต์

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

วิธีดาวน์โหลดและกำหนดค่ารหัสโปรเจ็กต์

  1. โคลนที่เก็บ Git โดยใช้คำสั่งต่อไปนี้
    git clone https://github.com/google/generative-ai-docs
  2. (ไม่บังคับ) กำหนดค่าที่เก็บ Git ในเครื่องเพื่อใช้การชำระเงินแบบกระจัดกระจาย เพื่อให้คุณมีเพียงไฟล์สำหรับโปรเจ็กต์ Agent เอกสาร 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. ไปที่ไดเรกทอรีรูทของโปรเจ็กต์ Pipet Code 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. เรียกใช้คำสั่งติดตั้งเพื่อดาวน์โหลดทรัพยากร Dependency และกำหนดค่าโปรเจ็กต์ดังนี้ 
    npm install

กำหนดค่าและทดสอบส่วนขยาย

ขณะนี้ คุณควรสามารถทดสอบการติดตั้งของคุณด้วยการเรียกใช้ Agent รหัส Pipet เป็น ส่วนขยายสำหรับการพัฒนาใน VS Code บนอุปกรณ์ของคุณ การทดสอบจะเปิดหน้าเทียบกับ หน้าต่างโค้ดโฮสต์การพัฒนาส่วนขยายที่มีส่วนขยายใหม่พร้อมใช้งาน ในหน้าต่างใหม่ คุณจะได้กำหนดค่าคีย์ API ที่ส่วนขยายใช้ในการเข้าถึง Google Gemini API

Agent รหัส Pipet ทำงานอยู่ในหน้าต่างโฮสต์การพัฒนาส่วนขยาย รูปที่ 1 หน้าต่างโฮสต์การพัฒนาส่วนขยายโค้ด VS ที่มี Pipet คำสั่งของส่วนขยาย

วิธีกำหนดค่าและทดสอบการตั้งค่า

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือก File > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Agent รหัส Pipet โดยเลือกไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ pipet-code-agent/
  4. เปิดไฟล์ pipet-code-agent/package.json
  5. เรียกใช้ส่วนขยายในโหมดแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > เริ่มแก้ไขข้อบกพร่อง ขั้นตอนนี้จะเปิดหน้าต่าง Extension Development Host ของ VS แยกต่างหาก
  6. เปิดการตั้งค่า VS Code โดยเลือก Code > การตั้งค่า > การตั้งค่า
  7. รับคีย์ Google Gemini API จาก ในเว็บไซต์ Generative AI Developer และคัดลอกสตริงคีย์
  8. ตั้งคีย์ API เป็นการกำหนดค่า ในการตั้งค่าการค้นหา ให้พิมพ์ pipet เลือกแท็บผู้ใช้ และในช่อง Google > Gemini Api Key ให้คลิกลิงก์ Edit in settings.json แล้วเพิ่ม คีย์ Gemini API: 
    "google.gemini.apiKey": "your-api-key-here"
  9. บันทึกการเปลี่ยนแปลงลงในไฟล์ settings.json แล้วปิดแท็บการตั้งค่า

วิธีทดสอบคำสั่งของส่วนขยาย

  1. ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ดใดก็ได้ ในหน้าต่างตัวแก้ไข
  2. เปิดพาเล็ตคำสั่งโดยเลือก มุมมอง > แผงคำสั่ง
  3. ในแผงคำสั่ง ให้พิมพ์ Pipet และเลือกคำสั่งที่มี คำนำหน้านั้น

แก้ไขคำสั่งที่มีอยู่

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

วิธีการชุดนี้อธิบายวิธีแก้ไขคำสั่ง review.ts โดย เปลี่ยนข้อความแจ้งของคำสั่ง

วิธีเตรียมแก้ไขคําสั่ง review.ts

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือก File > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Agent รหัส Pipet โดยเลือกไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ pipet-code-agent/
  4. เปิดไฟล์ pipet-code-agent/src/review.ts

วิธีแก้ไขลักษณะการทำงานของคำสั่ง review.ts

  1. ในไฟล์ review.ts ให้เปลี่ยนจุดเริ่มต้นของ PROMPT เป็นค่าคงที่ที่แตกต่างกันไป 
    const PROMPT = '
Write review comments for following code, identifying bugs and ways to improve code quality. Examples of bugs are syntax errors or typos, out of memory errors, and boundary value errors. Examples of improving code quality are reducing complexity of code, eliminating duplicate code, and ensuring other developers
are able to understand the code.
${CODE_LABEL}
...
  2. หรือในไฟล์ review.ts ให้เพิ่มตัวอย่างอื่นลงใน รายการตัวอย่างการตรวจสอบโค้ดและโค้ด 
    ...
${REVIEW_LABEL}
There are duplicate lines of code in this control structure.
${CODE_LABEL}
const fixed_value = 128;
${REVIEW_LABEL}
Make sure constant names are in all capitals (FIXED_VALUE) for clarity.
';
  3. บันทึกการเปลี่ยนแปลงลงในไฟล์ review.ts

วิธีทดสอบคำสั่งที่แก้ไขแล้ว

  1. ในหน้าต่างโปรเจ็กต์ส่วนขยาย VS Code Pipet ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดย เลือก Run > รีสตาร์ทการแก้ไขข้อบกพร่อง
  2. ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ดใดก็ได้ ในหน้าต่างตัวแก้ไข
  3. เปิดพาเล็ตคำสั่งโดยเลือก มุมมอง > แผงคำสั่ง
  4. ในช่องคำสั่ง ให้พิมพ์ Pipet แล้วเลือก Pipet: ตรวจสอบ โค้ดที่เลือก

สร้างคำสั่งใหม่

คุณสามารถขยาย Pipet ได้โดยการสร้างคำสั่งใหม่เพื่อทำงานใหม่ทั้งหมด ด้วย Gemini API ไฟล์คำสั่งแต่ละไฟล์ (comment.ts และ review.ts) ส่วนใหญ่ แบบจบในตัว และยังมีโค้ดสำหรับการรวบรวมข้อความจากเครื่องมือแก้ไขที่ใช้งานอยู่ การเขียนพรอมต์, การเชื่อมต่อกับ Gemini API, การส่งพรอมต์ และการจัดการ คำตอบ

Agent รหัส Pipet ที่มี "ชื่อฟังก์ชันการเลือก" แสดงอยู่ รูปที่ 2 คำสั่งการแนะนำชื่อฟังก์ชันใหม่ในส่วนขยายโค้ด VS หน้าต่างโฮสต์การพัฒนา

ชุดวิธีการนี้อธิบายวิธีการสร้างคำสั่งใหม่โดยใช้โค้ดของ คำสั่ง comment.ts ที่มีอยู่เป็นเทมเพลต

วิธีสร้างคำสั่งที่แนะนำชื่อฟังก์ชัน

  1. ทำสำเนาไฟล์ pipet-code-agent/src/comment.ts ที่ชื่อ name.ts ในไดเรกทอรี src/
  2. เปิดไฟล์ src/name.ts ใน VS Code
  3. เปลี่ยนวิธีการของข้อความแจ้งในไฟล์ name.ts โดย การแก้ไขค่า PROMPT 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. เปลี่ยนชื่อฟังก์ชันคำสั่งและข้อความข้อมูลของฟังก์ชัน 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. อัปเดตโค้ดประกอบของข้อความแจ้งเพื่อรวมเฉพาะ PROMPT และข้อความที่เลือกไว้ในตัวแก้ไข 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. เปลี่ยนเอาต์พุตการตอบกลับเพื่ออธิบายสิ่งที่สร้างขึ้นมา 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. บันทึกการเปลี่ยนแปลงลงในไฟล์ review.ts

ผสานรวมคำสั่งใหม่

หลังจากใส่โค้ดสำหรับคำสั่งใหม่เสร็จแล้ว คุณจะต้องผสานรวมโค้ดกับคำสั่งใหม่ ที่เหลือของส่วนขยาย อัปเดตไฟล์ extension.ts และ package.json เป็น สร้างคำสั่งใหม่ของส่วนขยายและเปิดใช้ VS Code เพื่อเรียก คำสั่งใหม่

วิธีผสานรวมคำสั่ง name กับโค้ดส่วนขยาย

  1. เปิดไฟล์ pipet-code-agent/src/extension.ts ใน VS Code
  2. เพิ่มไฟล์โค้ดใหม่ลงในส่วนขยายโดยเพิ่มการนำเข้าใหม่ ข้อความ 
    import { generateName } from './name';
  3. ลงทะเบียนคำสั่งใหม่โดยเพิ่มโค้ดต่อไปนี้ลงในส่วน activate() 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. บันทึกการเปลี่ยนแปลงลงในไฟล์ extension.ts

วิธีผสานรวมคำสั่ง name กับแพ็กเกจส่วนขยาย

  1. เปิดไฟล์ pipet-code-agent/package.json ใน VS Code
  2. เพิ่มคำสั่งใหม่ในส่วน commands ของแพ็กเกจ 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. บันทึกการเปลี่ยนแปลงลงในไฟล์ package.json

ทดสอบคำสั่งใหม่

เมื่อเขียนโค้ดคำสั่งและผสานรวมกับ คุณสามารถทดสอบได้ คำสั่งใหม่จะพร้อมใช้งานใน VS Code เท่านั้น หน้าต่าง ส่วนขยายโฮสต์การพัฒนา และไม่อยู่ในหน้าต่าง VS Code ที่คุณ แก้ไขโค้ดสำหรับส่วนขยายแล้ว

วิธีทดสอบคำสั่งที่แก้ไขแล้ว

  1. ในหน้าต่างโปรเจ็กต์ส่วนขยาย VS Code Pipet ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดย เลือก Run > รีสตาร์ทการแก้ไขข้อบกพร่อง ซึ่งจะรีสตาร์ทแยกอีกรายการหนึ่ง หน้าต่าง Extension Development Host
  2. ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ด ในหน้าต่างตัวแก้ไข
  3. เปิดพาเล็ตคำสั่งโดยเลือก มุมมอง > แผงคำสั่ง
  4. ในช่องคำสั่ง ให้พิมพ์ Pipet แล้วเลือก Pipet: ตั้งชื่อ ฟังก์ชันที่เลือก

แหล่งข้อมูลเพิ่มเติม

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Agent รหัส Pipet โปรดดูที่ ที่เก็บโค้ด หากคุณต้องการความช่วยเหลือในการสร้างแอปพลิเคชันหรือกำลังมองหานักพัฒนาซอฟต์แวร์ โปรดดู Discord ในชุมชน Google Developers เซิร์ฟเวอร์

แอปพลิเคชันเวอร์ชันที่ใช้งานจริง

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