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

Kod yazmak hem tatmin edici hem de tatmin edici olabilir. Ancak kodunuzu İş arkadaşlarına sunulabilir çalışmak genellikle angaryadır. Yapay yapay zekaya dayalı üretken modeller, kod yorumları ekleyip yardımcı olan başka pek çok görevi gözden kaçırırsınız. kodlama iş akışınızı kolaylaştırır.

Bu eğitimde, kampanyalarınızı Pipet Code Agent (Pipet Kodu Aracısı) AI Developer Relations ekibi tarafından geliştirilen AI destekli kod yardım aracı Google'a dokunun. Bu açık kaynak projesi, Microsoft Visual Studio için bir uzantıdır. Google Code (VS Code) gibi ve yorum yazma gibi daha az eğlenceli kodlama görevleriyle ilgilenmek ve iyileştirme önerisinde bulunabilirsiniz. Uzantı, kodlama yardımı isteklerini Gemini API'ye gönderir ve yanıtları yeni bir sürüm oluşturabilirsiniz.

Pipet'i değiştirebilirsiniz veya mevcut işlevlerin sizin için daha iyi çalışmasını sağlayacak yeni komutlar daha iyi desteklemesini sağlayabilirsiniz.

Analizler de dahil olmak üzere projeye ve projenin nasıl genişletileceğine dair genel bir bakış videosu için inşa edenlere bakın, AI Code Assistant - Google AI ile oluşturun. Aksi takdirde talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz. bölümüne göz atın.

Proje ayarlama

Buradaki talimatlar Pipet Code Agent projesini ayarlama konusunda size yol gösterecektir kullanmaya karar verebilir. Genel adımlar, yükleme başına bazı önkoşulları birkaç ortam değişkeni belirleyerek, projeyi koddan klonlayarak ve yapılandırma kurulumunu çalıştırmanız gerekir.

Ön koşulları yükleme

Pipet Code Agent projesi, Microsoft Visual Studio’nun bir uzantısı olarak çalışır. kodu kullanır ve Node.js ve yönetmek için npm aracı paketlerini oluşturup uygulamayı çalıştırın. Aşağıdaki yükleme talimatları anlamına gelir.

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

  1. Visual Studio Code'u yükleyin. tercih edebilirsiniz.
  2. Kurulumu uygulayarak node ve npm uygulamalarını yükleyin talimatları uygulayın.

Projeyi klonlama ve yapılandırma

Proje kodunu indirin ve npm yükleme komutunu kullanarak bağımlılıkları tespit edip projeyi yapılandırmalısınız. İhtiyacınız olanlar alınacak git kaynak kontrolü yazılımı proje kaynak kodundan yararlanabilirsiniz.

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 seyrek ödeme yöntemini kullanacak şekilde yapılandırın, Böylece, yalnızca Dokümanlar Aracısı projesine ait dosyalara sahip olursunuz. 
    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ı indirmek ve projeyi yapılandırmak için yükleme komutunu çalıştırın: 
    npm install

Uzantıyı yapılandır ve test et

Artık Pipet Code Agent'ı aşağıdaki gibi çalıştırarak yüklemenizi test edebilmeniz gerekir: cihazınızda VS Code'da bir geliştirme uzantısı yükleyin. Test, dönüşüm hunisinin üst kısmındaki Yeni uzantının bulunduğu yerde Uzantı Geliştirme Ana Makinesi penceresini kodlayın. Bu yeni pencerede, uzantının Google Gemini API'si.

Uzantı Geliştirme Ana Makinesi penceresinde çalışan Pipet Kod Aracısı Şekil 1. Pipet ile VS Code Extension Geliştirme Ana Makine penceresi uzantı komutlarını kullanabilirsiniz.

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

  1. VS Code uygulamasını başlatın.
  2. VS Code'da File > (Dosya >) öğesini seçerek yeni bir pencere oluşturun. Yeni Pencere'yi tıklayın.
  3. File > (Dosya >) öğesini seçerek Pipet Code Agent projesini açın. Klasörü açın. pipet-code-agent/ klasörünü seçin.
  4. pipet-code-agent/package.json dosyasını açın.
  5. Çalıştır > Hata ayıklama işlemini başlatın. Bu adım ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar.
  6. Kod > Ayarlar > Ayarlar.
  7. Şuradan Google Gemini API Anahtarı alın: Üretken yapay zeka geliştirici sitesini ziyaret edip anahtar dizesini kopyalayın.
  8. API anahtarını bir yapılandırma ayarı olarak ayarlayın. Arama Ayarları'nda alanına pipet yazın, Kullanıcı sekmesini seçin ve Google > İkizler: Api Anahtarı ayarı için Settings.json'da düzenle bağlantısını tıklayın ve Gemini API anahtarı: 
    "google.gemini.apiKey": "your-api-key-here"
  9. settings.json dosyasındaki değişiklikleri kaydedin ve ayarlar sekmelerini kapatın.

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

  1. VS Code Uzantı Geliştirme Ana Makinesi penceresinde herhangi bir kod seçin düğmesini tıklayın.
  2. Görünüm > Komut Paleti'ni tıklayın.
  3. Komut Paleti'ne Pipet yazın ve ön plana çıkarırız.

Mevcut komutu değiştir

Pipet Code Agent'ta sağlanan komutları değiştirmek, Pipet Code Agent'ta uzantının davranışını ve özelliklerini değiştirin. Hem yorum hem de inceleme komutları, bir birkaç kare isteme açıklamanın yanı sıra koda ilişkin bazı örnekler ve bu kod için konulu genel talimatları inceleyin. Bu istem bağlamı Gemini'ın üretken yapay zeka modeline yön verdiğinden emin olun. Ölçüt veya her ikisinden de istem talimatlarının, örneklerin veya her ikisinin birden komutlarını incelemek isterseniz mevcut komutların her birinin davranış şeklini değiştirebilirsiniz.

Bu talimatlar dizisi, review.ts komutunun nasıl değiştirileceğini komutun istem metnini değiştirebilirsiniz.

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

  1. VS Code uygulamasını başlatın.
  2. VS Code'da File > (Dosya >) öğesini seçerek yeni bir pencere oluşturun. Yeni Pencere'yi tıklayın.
  3. File > (Dosya >) öğesini seçerek Pipet Code Agent projesini açın. Klasörü açın. pipet-code-agent/ klasörünü seçin.
  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 bölümünün başını değiştirin. değişiklik gösterebilir. 
    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 örneklerine göz atacağız. 
    ...
${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ındaki değişiklikleri kaydedin.

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

  1. VS Code Pipet uzantı proje pencerenizde hata ayıklayıcıyı şu şekilde yeniden başlatın: Çalıştır > Hata ayıklamayı yeniden başlatın.
  2. VS Code Uzantı Geliştirme Ana Makinesi penceresinde herhangi bir kod seçin düğmesini tıklayın.
  3. Görünüm > Komut Paleti.
  4. Komut Paleti'ne Pipet yazın ve Pipet: Review the seçili kod komutunun bir kopyasını oluşturun.

Yeni komut oluştur

Tamamen yeni görevleri gerçekleştiren yeni komutlar oluşturarak Pipet'i genişletebilirsiniz bazı ipuçları vereceğim. Her bir komut dosyası (comment.ts ve review.ts) genelde ve etkin düzenleyiciden metin toplamaya yönelik kod içerir. istem oluşturma, Gemini API'ye bağlanma, istem gönderme ve yanıt verelim.

Ad seçim işlevinin gösterildiği Pipet Kod Aracısı Şekil 2. VS Kod Uzantısı'ndaki yeni işlev adı öneri komutu Geliştirme Ana Makine penceresi.

Bu talimatlar dizisi, mevcut comment.ts komutunu şablon olarak kullanın.

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

  1. pipet-code-agent/src/comment.ts dosyasının kopyasını oluştur src/ dizininde name.ts olarak adlandırılmıştır.
  2. VS Code'da src/name.ts dosyasını açın.
  3. name.ts dosyasındaki istem talimatlarını şu şekilde değiştirin: PROMPT değeri düzenleniyor. 
    // 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 öğesini içerecek şekilde güncelleyin değerini ve düzenleyicide seçilen metni gösterir. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Yanıt çıktısını değiştirerek ne oluşturduğunu açıklayın. 
        // 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ındaki değişiklikleri kaydedin.

Yeni komutu entegre edin

Yeni komutun kodunu tamamladıktan sonra, yeni komut dosyası onu da görebilirsiniz. extension.ts ve package.json dosyalarını şu şekilde güncelle: yeni komut bölümünü uzantının bir parçası haline getirin ve yeni komut yazın.

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 işlemi yaparak yeni kod dosyasını uzantıya ekleyin ifade eder. 
    import { generateName } from './name';
  3. Aşağıdaki kodu activate() işlevi. 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. extension.ts dosyasındaki 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 paketin commands bölümüne ekleyin dosyası olarak kaydedebilirsiniz. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. package.json dosyasındaki değişiklikleri kaydedin.

Yeni komutu test etme

Komutu kodlamayı ve komut dosyasıyla entegre etmeyi tamamladıktan sonra, test edebilirsiniz. Yeni komutunuz yalnızca VS Kodu'nda kullanılabilir Uzantı Geliştirme Barındırıcısı penceresinden değil, uzantının kodunu düzenledi.

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

  1. VS Code Pipet uzantı proje pencerenizde hata ayıklayıcıyı şu şekilde yeniden başlatın: Çalıştır > Hata Ayıklamayı Yeniden Başlat (Bu işlem, ayrı bir Uzantı Geliştirme Ana Makinesi penceresi.
  2. VS Code Uzantı Geliştirme Ana Makinesi penceresinde bir kod seçin düğmesini tıklayın.
  3. Görünüm > Komut Paleti'ni tıklayın.
  4. Komut Paleti'ne Pipet yazın ve Pipet: Name of the seçili işlev komutunu çağırın.

Ek kaynaklar

Pipet Code Agent projesi hakkında daha fazla bilgi için kod deposu'na gidin. Uygulamayı geliştirme konusunda yardıma ihtiyacınız varsa veya geliştirici arıyorsanız hakkında daha fazla bilgi edinmek için Google Developers Topluluğu Discord sunucu.

Üretim uygulamaları

Dokümanlar Aracısı'nı geniş bir kitleye dağıtmayı planlıyorsanız Google Gemini API, hız sınırlamasına ve diğer kullanım kısıtlamaları hakkında daha fazla bilgi edinin. Gemini API ile bir üretim uygulaması oluşturmayı düşünüyorsanız Dokümanlar Aracısı, check-out Google Cloud Vertex AI hizmetleri sunmanızı sağlar.