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

Kod yazmak hem ödüllendirici hem de tatmin edici olabilir ancak kodunuzu çalışan durumdan iş arkadaşlarınıza sunulabilir duruma getirmek genellikle zor bir iştir. Yapay zeka üretken modelleri, kod yorumları eklemenize, inceleme uzmanlarınızdan önce hataları bulmanıza ve kodlama iş akışınızı kolaylaştırmak için birçok başka görevi gerçekleştirmenize yardımcı olabilir.

Bu eğitimde, Google'ın Yapay Zeka Geliştirici İlişkileri Ekibi tarafından geliştirilen yapay zeka destekli bir kod yardım aracı olan Pipet Code Agent'ı nasıl genişleteceğiniz gösterilmektedir. Bu açık kaynak proje, Microsoft Visual Studio Code (VS Code) için bir uzantıdır. Kodunuza yorum ekleme, hataları bulma ve iyileştirme önerisinde bulunma gibi kodlamayla ilgili önemli ancak eğlenceli olmayan bazı görevleri tamamlamanıza yardımcı olur. Uzantı, Gemini API'ye kodlama yardımı istekleri gönderir ve yanıtları kod düzenleme pencerenize ekler.

Mevcut işlevlerin sizin için daha iyi çalışmasını sağlamak amacıyla Pipet'i değiştirebilir veya geliştirme iş akışınızı daha iyi desteklemek için yeni komutlar oluşturabilirsiniz.

Projenin geliştiricilerinden alınan bilgiler de dahil olmak üzere projeye ve nasıl genişletileceğine dair videolu bir genel bakış için AI Code Assistant - Build with Google AI (Yapay Zeka Kod Asistanı - Google Yapay Zeka ile Geliştirme) başlıklı makaleyi inceleyin. Aksi takdirde, aşağıdaki talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz.

Proje ayarlama

Bu talimatlar, Pipet Code Agent projesini geliştirme ve test için ayarlama konusunda size yol gösterir. Genel adımlar arasında bazı ön koşul yazılımlarını yükleme, birkaç ortam değişkeni ayarlama, projeyi kod deposundan klonlama ve yapılandırma yüklemesini çalıştırma yer alır.

Gerekli ön koşulları yükleme

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

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

  1. Platformunuz için Visual Studio Code'u yükleyin.
  2. Platformunuza yönelik yükleme talimatlarını uygulayarak node ve npm'yi yükleyin.

Projeyi klonlama ve yapılandırma

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

Proje kodunu indirip 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 yalnızca Dokümanlar temsilcisi projesinin dosyalarını içerecek şekilde ayarlayarak seyrek kontrol kullanın. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Pipet Code Agent proje kök dizinine gidin. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Bağımlılıkları indirip 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 cihazınızdaki VS Code'ta Pipet Code Agent'ı geliştirme uzantısı olarak çalıştırarak yüklemenizi test edebilirsiniz. Test, yeni uzantının bulunduğu ayrı bir VS Code Extension Development Host 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 Code Agent Şekil 1. Pipet uzantı komutlarını içeren VS Code Extension Development Host penceresi.

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

  1. VS Code uygulamasını başlatın.
  2. VS Code'da Dosya > Yeni Pencere'yi seçerek yeni bir pencere oluşturun.
  3. Dosya > Klasör Aç'ı ve 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ımda ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açılır.
  6. 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ı yapılandırma ayarı olarak ayarlayın. Arama Ayarları alanına pipet yazın, Kullanıcı sekmesini seçin ve Google > Gemini: Api Anahtarı ayarındaki settings.json'da düzenle bağlantısını tıklayın ve Gemini API anahtarınızı ekleyin: 
    "google.gemini.apiKey": "your-api-key-here"
  9. Değişiklikleri settings.json dosyasına kaydedin ve ayar sekmelerini kapatın.

Uzatma 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'nde Pipet yazıp bu ön ekteki komutlardan birini seçin.

Mevcut komutu değiştirme

Pipet Code Agent'ta sağlanan komutları değiştirmek, uzantının davranışını ve özelliklerini değiştirmenin en basit yoludur. Hem yorum hem de inceleme komutları, kod örnekleri ve bu kodlarla ilgili yorumların yanı sıra yapay zeka üretken modeli için bazı genel talimatlar içeren birkaç atışlık istem yaklaşımı kullanır. Bu istem bağlamı bilgileri, Gemini üretken modelinin yanıt oluşturmasına rehberlik eder. Yorum veya inceleme komutlarındaki istem talimatlarını, örnekleri ya da her ikisini birden değiştirerek mevcut komutların her birinin davranışını 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 Dosya > Yeni Pencere'yi seçerek yeni bir pencere oluşturun.
  3. Dosya > Klasör Aç'ı ve pipet-code-agent/ klasörünü seçerek Pipet Code Agent projesini açın.
  4. pipet-code-agent/src/review.ts dosyasını açın.

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. İsteğe bağlı olarak, review.ts dosyasında kod ve kod incelemesi örnekleri listesine başka bir örnek ekleyin. 
    ...
${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. Değişiklikleri review.ts dosyasına 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'nde Pipet yazıp Pipet: Seçilen kodu incele komutunu seçin.

Yeni komut oluşturma

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 kendi kendine yeterlidir ve etkin düzenleyiciden metin toplama, istem oluşturma, Gemini API'ye bağlanma, istem gönderme ve yanıtı işleme kodlarını içerir.

Seçim işlevinin adı gösterilen Pipet Code Agent Şekil 2. VS Code uzantısı geliştirme ana makinesi penceresindeki yeni işlev adı önerisi komutu.

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

İşlevler için ad önerisinde bulunan bir komut oluşturmak üzere:

  1. src/ dizininde name.ts adlı pipet-code-agent/src/comment.ts dosyasının 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 çıkışını, ne tür bir yanıt oluşturduğunu açıklayacak şekilde 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. Değişiklikleri review.ts dosyasına 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 bir parçası haline getirmek için extension.ts ve package.json dosyalarını güncelleyin ve VS Code'un yeni komutu çağırmasını 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 içe aktarma ifadesi ekleyerek yeni kod dosyasını uzantıya ekleyin. 
    import { generateName } from './name';
  3. activate() işlevine aşağıdaki kodu ekleyerek yeni komutu kaydedin. 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Değişiklikleri extension.ts dosyasına 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. Değişiklikleri package.json dosyasına kaydedin.

Yeni komutu test etme

Komutu kodlayıp uzantı ile entegre ettikten sonra test edebilirsiniz. Yeni komutunuz yalnızca VS Code Uzantı Geliştirme Ana Makinası penceresinde kullanılabilir. Uzantının kodunu düzenlediğiniz VS Code penceresinde kullanamazsınız.

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 Uzantı Geliştirme Ana Makinesi penceresinde, düzenleyici penceresinden bazı kodları seçin.
  3. Görünüm > Komut Paleti'ni seçerek komut paletini açın.
  4. Komut Paleti'nde Pipet yazın ve Pipet: Seçilen işleve ad ver komutunu seçin.

Ek kaynaklar

Pipet Code Agent projesi hakkında daha fazla bilgi için kod deposuna bakın. Uygulamayı oluşturma konusunda yardıma ihtiyacınız varsa veya birlikte çalışabileceğiniz geliştiriciler arıyorsanız Google Developers Community Discord sunucusuna göz atın.

Üretim uygulamaları

Dokümanlar Asistanı'nı geniş bir kitle için dağıtmayı planlıyorsanız Google Gemini API'yi kullanımınız sıklık sınırlamasına ve diğer kullanım kısıtlamalarına tabi olabilir. Gemini API ile Docs Agent gibi bir üretim uygulaması oluşturmayı 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.