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

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

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

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

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

ตั้งค่าโครงการ

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

ติดตั้งข้อกำหนดเบื้องต้น

โปรเจ็กต์ Pipet Code Agent ทำงานเป็นส่วนขยายของ Visual Studio Code ของ Microsoft และใช้ 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 Agent 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. เรียกใช้คำสั่งติดตั้งเพื่อดาวน์โหลดทรัพยากร Dependency และกำหนดค่าโปรเจ็กต์:
    npm install

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

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

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

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

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

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

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

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

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

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

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

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Pipet Code Agent โดยเลือก File > Open Folder และเลือกโฟลเดอร์ 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 ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง
  2. ในหน้าต่าง Extension Development Host ของโค้ด VS ให้เลือกโค้ดในหน้าต่างตัวแก้ไข
  3. เปิดพาเล็ตคำสั่งโดยเลือก View > Command Palette
  4. ในแผงคำสั่ง ให้พิมพ์ Pipet แล้วเลือกคำสั่ง Pipet: ตรวจสอบโค้ดที่เลือก

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

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

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

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

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

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

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

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

หากต้องการทดสอบคำสั่งที่แก้ไขแล้ว ให้ทำดังนี้

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

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

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

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

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