Pipet Kod Aracısı ile AI kod asistanı derleme

Kod yazmak hem tatmin edici hem de tatmin edici olabilir ancak kodunuzu çalışırken iş arkadaşlarınız için sunulabilir hale getirmek genellikle angaryadır. Yapay zeka ile üretken modeller kod yorumları eklemenize, gerçek kişi olan incelemecilerden önce hataları bulmanıza ve kodlama iş akışınızı kolaylaştırmak için daha birçok görevi yerine getirmenize yardımcı olabilir.

Bu eğiticide, Google'daki AI Geliştirici İlişkileri ekibi tarafından derlenen yapay zeka destekli kod yardım aracı Pipet Code Agent'ın nasıl genişletileceği gösterilmektedir. Bu açık kaynak projesi, Microsoft Visual Studio Code (VS Code) için geliştirilmiş bir uzantıdır. Kodunuzda yorum yapma, hataları bulma ve iyileştirme önerme gibi önemli ama daha az eğlenceli bazı kodlama görevleriyle ilgilenmenize yardımcı olur. Uzantı, Gemini API'ye kodlama yardımı istekleri gönderir ve yanıtları, kod düzenleme pencerenize dahil eder.

Pipet'i değiştirerek bu mevcut işlevlerin sizin için daha iyi çalışmasını sağlayabilir veya geliştirme iş akışınızı daha iyi desteklemek için yeni komutlar oluşturabilirsiniz.

Projeye ve projenin kapsamını nasıl genişleteceğinize dair genel bakış videosu için AI Code Assistant - Build with Google AI'a göz atın. Aksi takdirde, aşağıdaki talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz.

Proje ayarlama

Bu talimatlar Pipet Kod Aracısı projesini geliştirme ve test için ayarlamanızda size yol gösterir. Genel adımlar, bazı ön koşul yazılımları yüklemek, birkaç ortam değişkeni ayarlamak, projeyi kod deposundan klonlamak ve yapılandırma yüklemesini çalıştırmaktır.

Ön koşulları yükleme

Pipet Kod Aracısı projesi, Microsoft Visual Studio Code'un bir uzantısı olarak çalışır ve paketleri yönetip uygulamayı çalıştırmak için Node.js ile npm aracını kullanır. Aşağıdaki yükleme talimatları bir Linux ana makine makinesine yöneliktir.

Gerekli yazılımı yüklemek için:

  1. Platformunuz için Visual Studio Code'u yükleyin.
  2. Platformunuzun yükleme talimatlarını uygulayarak node ve npm uygulamasını yükleyin.

Projeyi klonlama ve yapılandırma

Proje kodunu indirin ve npm yükleme komutunu kullanarak gerekli bağımlılıkları indirip projeyi yapılandırın. Proje kaynak kodunu almak için git kaynak kontrolü yazılımına ihtiyacınız vardır.

Proje kodunu indirmek ve yapılandırmak için:

  1. Aşağıdaki komutu kullanarak git deposunu klonlayın.
    git clone https://github.com/google/generative-ai-docs
  2. İsteğe bağlı olarak, yerel git deponuzu az ödeme adımını kullanacak şekilde yapılandırın. Böylece, yalnızca Dokümanlar Aracısı projesinin dosyalarına sahip olursunuz. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Pipet Kod Aracısı projesinin kök dizinine gidin. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Bağımlılıkları indirmek ve projeyi yapılandırmak için yükleme komutunu çalıştırın: 
    npm install

Uzantıyı yapılandırma ve test etme

Artık Pipet Code Agent'ı cihazınızdaki VS Code'da geliştirme uzantısı olarak çalıştırarak yüklemenizi test edebilirsiniz. Test, yeni uzantının kullanılabildiği ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar. Bu yeni pencerede, uzantının Google Gemini API'ye erişmek için kullandığı API Anahtarını yapılandırırsınız.

Uzantı Geliştirme Ana Makinesi penceresinde çalışan Pipet Kod Aracısı Şekil 1. Pipet uzantı komutlarını içeren VS Code Extension Development Ana Makinesi penceresinde.

Kurulumunuzu yapılandırmak ve test etmek için:

  1. VS Code uygulamasını başlatın.
  2. VS Code'da File > New Window (Dosya > Yeni Pencere) seçeneklerini belirleyerek yeni bir pencere oluşturun.
  3. File > Open Klasörü ve ardından pipet-code-agent/ klasörünü seçerek Pipet Code Agent projesini açın.
  4. pipet-code-agent/package.json dosyasını açın.
  5. Çalıştır > Hata Ayıklamayı Başlat'ı seçerek uzantıyı hata ayıklama modunda çalıştırın. Bu adım ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar.
  6. Code > Settings > Settings'i (Kod > Ayarlar > Ayarlar) seçerek VS Code ayarlarını açın.
  7. Üretken Yapay Zeka Geliştirici sitesinden bir Google Gemini API Anahtarı alın ve anahtar dizesini kopyalayın.
  8. API anahtarını bir yapılandırma ayarı olarak ayarlayın. Search Settings (Arama Ayarları) alanına pipet yazın, User (Kullanıcı) sekmesini seçin ve Google > Gemini: API Key (Google > Gemini: API Anahtarı) ayarında Edit in settings.json bağlantısını tıklayın. Gemini API anahtarınızı ekleyin: 
    "google.gemini.apiKey": "your-api-key-here"
  9. settings.json dosyasında yaptığınız değişiklikleri kaydedin ve ayarlar sekmelerini kapatın.

Uzantı komutlarını test etmek için:

  1. VS Code Extension Development Host (Uzantı Geliştirme Ana Makinesi) penceresinde, düzenleyici penceresindeki herhangi bir kodu seçin.
  2. Görünüm > Komut Paleti'ni seçerek komut paletini açın.
  3. Komut Paleti'ne Pipet yazın ve bu ön ekle başlayan komutlardan birini seçin.

Mevcut komutu değiştir

Pipet Kod Aracısı'nda sağlanan komutların değiştirilmesi, uzantının davranışını ve özelliklerini değiştirmenin en basit yoludur. Hem yorum hem de yorum komutları, bu kod için kod ve yorum örneklerinin yanı sıra yapay zeka üretici modeli için bazı genel talimatları içeren birkaç çekimli istem yaklaşımı kullanır. Bu istemdeki bağlam bilgileri, Gemini üretken modeline bir yanıt oluştururken yol gösterir. Açıklama veya yorum komutlarındaki istem talimatlarını, örnekleri veya her ikisini birden değiştirerek mevcut komutların her birinin davranış şeklini değiştirebilirsiniz.

Bu talimat grubunda, komutun istem metnini değiştirerek review.ts komutunun nasıl değiştirileceği açıklanmaktadır.

review.ts komutunu düzenlemeye hazırlanmak için:

  1. VS Code uygulamasını başlatın.
  2. VS Code'da File > New Window (Dosya > Yeni Pencere) seçeneklerini belirleyerek yeni bir pencere oluşturun.
  3. File > Open Klasörü ve ardından pipet-code-agent/ klasörünü seçerek Pipet Code Agent projesini açın.
  4. pipet-code-agent/src/review.ts dosyasını aç.

review.ts komutunun davranışını değiştirmek için:

  1. review.ts dosyasında PROMPT sabitinin başlangıcını farklı talimatlarla değiştirin. 
    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. Dilerseniz review.ts dosyasına, kod ve kod incelemesi örnekleri listesine başka bir örnek ekleyebilirsiniz. 
    ...
${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 dosyasında yaptığınız değişiklikleri kaydedin.

Değiştirilen komutu test etmek için:

  1. VS Code Pipet uzantısı proje pencerenizde, Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın.
  2. VS Code Extension Development Host (Uzantı Geliştirme Ana Makinesi) penceresinde, düzenleyici penceresindeki herhangi bir kodu seçin.
  3. Görünüm > Komut Paleti'ni seçerek komut paletini açın.
  4. Komut Paleti'ne Pipet yazın ve Pipet: Seçili kodu incele komutunu seçin.

Yeni komut oluştur

Gemini API ile tamamen yeni görevler gerçekleştiren yeni komutlar oluşturarak Pipet'i genişletebilirsiniz. Her komut dosyası (comment.ts ve review.ts) çoğunlukla bağımsızdır ve etkin düzenleyiciden metin toplamak, istem oluşturmak, Gemini API'ye bağlanmak, istem göndermek ve yanıtı işlemek için gereken kod içerir.

Seçim işlevinin adını gösteren Pipet Kod Aracısı Şekil 2. VS Code Extension Geliştirme Ana Makinesi penceresinde yeni işlev adı önerisi komutu.

Bu talimat grubunda, mevcut comment.ts komutunun kodunu şablon olarak kullanarak nasıl yeni bir komut oluşturulacağını açıklanmaktadır.

İşlevlerin adlarını öneren bir komut oluşturmak için:

  1. name.ts adlı pipet-code-agent/src/comment.ts dosyasının src/ dizininde bir kopyasını oluşturun.
  2. VS Code'da src/name.ts dosyasını açın.
  3. PROMPT değerini düzenleyerek name.ts dosyasındaki istem talimatlarını değiştirin. 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. Komut işlevinin adını ve bilgi mesajını değiştirin. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. İstem derleme kodunu yalnızca PROMPT değerini ve düzenleyicide seçilen metni içerecek şekilde güncelleyin. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Yanıt çıktısını, ne ürettiğini açıklamak için değiştirin. 
        // 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 dosyasında yaptığınız değişiklikleri kaydedin.

Yeni komutu entegre etme

Yeni komutun kodunu tamamladıktan sonra, kodu uzantının geri kalanıyla entegre etmeniz gerekir. Yeni komutu uzantının parçası yapmak için extension.ts ve package.json dosyalarını güncelleyin ve VS Code'un yeni komutu çağırması için etkinleştirin.

name komutunu uzantı koduyla entegre etmek için:

  1. VS Code'da pipet-code-agent/src/extension.ts dosyasını açın.
  2. Yeni bir import ifadesi ekleyerek uzantıya yeni kod dosyasını ekleyin. 
    import { generateName } from './name';
  3. Aşağıdaki kodu activate() işlevine ekleyerek yeni komutu kaydedin. 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. extension.ts dosyasında yaptığınız değişiklikleri kaydedin.

name komutunu uzantı paketiyle entegre etmek için:

  1. VS Code'da pipet-code-agent/package.json dosyasını açın.
  2. Yeni komutu paket dosyasının commands bölümüne ekleyin. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. package.json dosyasında yaptığınız değişiklikleri kaydedin.

Yeni komutu test edin

Komutu kodlamayı ve komutun uzantıyla entegrasyonunu tamamladıktan sonra test edebilirsiniz. Yeni komutunuz yalnızca VS Code Extension Development Host penceresinde bulunur, uzantının kodunu düzenlediğiniz VS Code penceresinde değil.

Değiştirilen komutu test etmek için:

  1. VS Code Pipet uzantısı proje pencerenizde, Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın. Bu işlem ayrı bir Uzantı Geliştirme Ana Makinesi penceresini yeniden başlatır.
  2. VS Code Extension Development Host (Uzantı Geliştirme Ana Makinesi) penceresinde, düzenleyici penceresindeki bazı kodları seçin.
  3. Görünüm > Komut Paleti'ni seçerek komut paletini açın.
  4. Komut Paleti'ne Pipet yazın ve Pipet: Seçili işlevi adlandırın komutunu seçin.

Ek kaynaklar

Pipet Kod Aracısı projesi hakkında daha fazla bilgi için kod deposuna bakın. Uygulamayı oluşturma konusunda yardıma ihtiyacınız varsa veya geliştirici olarak ortak çalışma yapacak kişiler arıyorsanız Google Developers Community Discord sunucusuna göz atın.

Üretim uygulamaları

Dokümanlar Aracısı'nı geniş bir kitle için dağıtmayı planlıyorsanız Google Gemini API kullanımınızın hız sınırlamasına ve diğer kullanım kısıtlamalarına tabi olabileceğini unutmayın. Dokümanlar Agent gibi Gemini API ile bir üretim uygulaması derlemeyi düşünüyorsanız uygulamanızın ölçeklenebilirliğini ve güvenilirliğini artırmak için Google Cloud Vertex AI hizmetlerine göz atın.