Bu sayfa, Cloud Translation API ile çevrilmiştir.

Yazılım Geliştirme Yaşam Döngüsü Boyunca Duet AI'ı Kullanma

1. Genel Bakış

Bir Google Cloud geliştiricisinin yaşamında genellikle birden fazla Google Cloud ürünü ve hizmeti kullanılır. Bu ürünler, geliştiricinin bulutta uygulama geliştirmesini, test etmesini, dağıtmasını ve yönetmesini sağlar. Geliştiriciler Duet AI'ın yardımıyla Duet AI'ın etkileşimli sohbet, kod yardımı ve yerleşik entegrasyonlarından yararlanarak Google Cloud ürünlerini kullanırken daha üretken olabilir.

Bu laboratuvar, "Cymbal Superstore"u dağıtmak için Duet AI yardımını kullanır web uygulamasıdır. Ardından yeni bir özellik geliştirip dağıtacak ve uygulamanın ön ve arka ucunu oluşturacaksınız. Ayrıca Duet'in, uygulamanızla ilgili testleri yazma konusunda yardım alacak ve Duet'in diğer Google Cloud araçlarıyla nasıl entegre edilebileceğini göreceksiniz.

Hedefler

Öğrenecekleriniz:

Duet AI'ın yardımıyla mevcut bir web uygulamasını iyileştirin.
Uygulamayı Cloud Run'a dağıtın.
Duet AI'dan uygulamadaki bir hatayı açıklamasını ve düzeltmesini isteyin.
Duet AI'ın yardımıyla uygulama için testler geliştirin.
Duet AI'ın yardımıyla uygulama günlüklerini görüntüleyin.

Ön koşullar

Google Cloud Platform hesabı ve faturalandırmanın etkin olduğu bir proje
Temel Linux Deneyimi

2. Kurulum

Bu bölümde, bu laboratuvara başlamak için yapmanız gereken tüm işlemler ele alınmaktadır.

Proje oluştur

Temizleme işlemini kolaylaştırmak için yeni bir Google Cloud projesi oluşturalım.

https://console.cloud.google.com adresine gidin.
Proje seçici açılır listesini tıklayın
Proje Oluştur'u seçin
Container'a giriş gibi akılda kalıcı bir ad verin

Google Cloud projesinde Duet AI'ı etkinleştirme

Artık Google Cloud projemizde Duet AI API'yi etkinleştireceğiz. Aşağıda verilen adımları uygulayın:

https://console.cloud.google.com sayfanızın kontrol paneline gidip bu laboratuvarda çalışmayı planladığınız Google Cloud projesini seçtiğinizden emin olun. Sağ üstte gördüğünüz Duet AI simgesini tıklayın.

Konsolun sağ tarafında Duet AI sohbet penceresi açılır. Aşağıda gösterildiği gibi Etkinleştir düğmesini tıklayın. Etkinleştir düğmesini görmüyorsanız bunun yerine Chat arayüzü gösteriliyorsa proje için Duet AI'ı zaten etkinleştirmişsinizdir. Doğrudan sonraki adıma geçebilirsiniz.

Duet AI etkinleştirildikten sonra birkaç sorgu sorarak bu özelliği test edebilirsiniz. Birkaç örnek sorgu gösterilir ancak "Cloud Run nedir?" gibi bir sorgu deneyebilirsiniz.

Duet AI, sorunuzun cevabını verir. Sağ üst köşedeki _ simgesini tıklayarak Duet AI sohbet penceresini kapatabilirsiniz.

Cloud Shell IDE'de Duet AI'ı etkinleştir

Codelab'in geri kalanında Cloud Shell IDE'yi kullanacağız. Cloud Shell IDE'de Duet AI'ı etkinleştirip yapılandırmamız gerekir. Gerekli adımlar aşağıda verilmiştir:

Aşağıda gösterilen simgeyi kullanarak Cloud Shell'i başlatın. Cloud Shell örneğinin başlatılması bir veya iki dakika sürebilir.

Duruma göre Düzenleyici veya Düzenleyiciyi Aç düğmesini tıklayın ve Cloud Shell IDE görünene kadar bekleyin. "Yeni"yi kullanacaksınız düzenleyiciyi kullanabilirsiniz.

Gösterilen alt durum çubuğunda Cloud Code - Oturum aç düğmesini tıklayın. Talimatlara göre eklentiyi yetkilendirin. "Cloud Code - proje yok" mesajını görüyorsanız tıklayın, bu seçeneği belirleyin ve ardından üzerinde çalışmayı planladığınız proje listesinden ilgili Google Cloud projesini seçin.

Gösterilen şekilde sağ alt köşedeki Duet AI düğmesini tıklayın ve Cloud AI Companion API'yi etkinleştirdiğimiz doğru Google Cloud projesini seçin.

Google Cloud projenizi seçip yetkilendirdikten sonra durum çubuğundaki Cloud Code durum mesajında bunu gördüğünüzden ve sağdaki durum çubuğunda Duet AI'ın etkin olduğundan emin olun:

Duet AI kullanıma hazır.

3. Duet AI'ı kullanma

Bu laboratuvar kapsamında bir web uygulaması oluşturacaksınız. Laboratuvarda, Duet'in denenebileceği pek çok yer hakkında bilgi verilmektedir. Ancak merak ediyorsanız laboratuvarın herhangi bir yerinde Duet'e soru sorabilirsiniz.

Örneğin, temel uygulamayı oluşturup dağıtmak için Terraform'u kullanacaksınız. Terraform'un ne olduğunu bilmiyorsanız Duet'e sorabilirsiniz. Her bir adımın ne işe yaradığını anlamak isterseniz Duet, ilgili adımları açıklayabilir. Kodu açıp belirli satırlarla ilgili soru sormak mı istiyorsunuz? Duet'i deneyin.

4. Web uygulamasını oluşturma

Bu laboratuvarda "Cymbal Superstore" kullanılmaktadır web uygulamasıdır. Bu laboratuvarın sonraki görevlerinde, bu uygulamada yeni bir özellik geliştirip dağıtmak için Duet AI'ı kullanacaksınız. Duet AI'ın mevcut kodu anlamanıza nasıl yardımcı olduğunu görmeden önce üzerinde çalışacağınız bazı mevcut kodlara ihtiyacınız vardır. Şimdi bu uygulamanın ön ve arka uç bileşenlerini derleyeceksiniz.

Bu projede çalışırken Cloud Shell ve Cloud Shell Düzenleyici arasında geçiş yapacaksınız. Bunu yapmanın kolay bir yolu, ekranın üst kısmındaki düğmeleri kullanmaktır:

Ortamı yapılandırma

Cloud Shell'de komutları yürütün.

Proje kimliğini ayarlayın:

gcloud config set project <Google Cloud Project ID>

Docker kimlik bilgisi yardımcısını çalıştırmak için aşağıdaki komutu çalıştırın:

gcloud auth configure-docker

Devam etmek isteyip istemediğiniz sorulursa Y yazın.
"Cymbal Superstore"u indirmek için aşağıdaki komutu Cloud Shell'deki kök dizininizden çalıştırın. GitHub'dan Cymbal Superstore kodunu alır.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

Bu kodun düzgün çalışması için çeşitli API'leri etkinleştirmeniz gerekir. Cloud Shell'de aşağıdaki komutu girin:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com

İndirdiğiniz kodda Terraform dizinine geçin:

cd cymbal-superstore/terraform

Bu laboratuvarda Spanner kullanılmadığı için Terraform talimatlarının Spanner'ın yüklenmediği bir sürümünü kullanacağız. Cloud Shell'de aşağıdaki komutu girin:

mv main.tf.nospanner main.tf

Terraform komutunu her çalıştırdığınızda projenizin adını ve numarasını girmek zorunda kalmadan bu terraform dizininde terraform.tfvars adlı bir dosya oluşturun. Bu dosyaya aşağıdaki bilgileri içeren iki satır ekleyin ve dosyayı kaydedin. Bu bilgileri proje kontrol panelinde bulabilirsiniz.

project_id="Your project id"
project_number=Your project number

Terraform'u şu satırla başlatın:

terraform init

Son olarak, aşağıdaki komutu kullanarak Terraform kaynaklarını projenize dağıtın. "Evet" yazmanız istenebilir . Bu işlem 10 dakika kadar sürebilir. Bu nedenle, https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png adresindeki mimari şemasını incelemek isteyebilirsiniz. Dilerseniz mevcut kodu inceleyip Duet'i kullanarak bu kodu daha iyi anlayabiliriz.

terraform apply

Bu komut başarıyla tamamlandıktan sonra şuna benzer bir çıkış görürsünüz:

Çıkışınızda arka uç inventory_cr_endpoint ile iletişim kurmak için ön ucunuzu güncelleyin. Bunu yapmak için inventory_cr_endpoint değerini kopyalayın, cymbal-superstore/frontend/.env.production öğesini açın ve REACT_APP_INVENTORY_URL değerini değiştirin.
terraform apply uygulamasını yeniden çalıştırın. Bu işlem yalnızca bir dakika sürer. Ön uç React uygulamanızı, güncellenen arka uç URL'sini kullanarak Cloud Storage'a yeniden dağıtacağından bu işlem yalnızca bir dakika sürer.
frontend_ip öğenizi bir tarayıcıda açın. Cymbal Superstore ön ucunu görüyor olmanız gerekir. Değişikliklerin uygulanması birkaç dakika sürebileceğinden, birden çok kez kontrol etmeniz gerekebilir.

Cymbal ana sayfasının sol tarafındaki Yeni Gelenler'i tıklayın. Yer tutucu ürünlerin bulunduğu örnek bir ön uç sayfası görmeniz gerekir. Bu laboratuvarın bir sonraki görevinde yeni ürünler sayfasını sunmak için arka uç Inventory API kodunu uygulayacağınızdan bu beklenen bir durumdur.

5. Web uygulaması arka ucunu değiştirme

Şimdi web uygulaması arka ucumuza işlev eklemek için Duet AI'dan yararlanalım.

Bu görevde, /newproducts uç noktasını uygulamaya uygulamak için Duet AI'dan kod tamamlamayı istersiniz. Yeni ürünleri Firestore'dan almak için arka uçta bir uç nokta oluşturacak ve değişikliği dağıtmadan önce bu uç noktayı test edeceksiniz.

/newproducts uç noktasını geliştirin

Cloud Shell düzenleyicisinde cymbal-superstore/backend/index.ts dosyasını açın.
index.ts dosyasında, DEMO TASK START. satırın 95. satırındaki yoruma gidin. Burada bir grup satır, bu görevle ilgili yorum yaptı. Yorum yapılan tüm satırları kaldırıp aşağıdaki Duet AI istemiyle değiştirin:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

Duet AI'dan işlev kodunu oluşturmasını istemek için yorumun tamamını seçin ve ampulü ( ) tıklayın.
Diğer İşlemler menüsünde, Kod oluştur'u seçin.
Oluşturulan kodun üzerine gelip Duet AI araç çubuğunda Kabul et'i tıklayın. Duet AI, /newproducts uç noktasının işlev kodunu doldurur.

Not: Duet AI, isteminiz için kodun birden fazla sürümünü oluşturabilir. Araç çubuğundaki listede gezinerek belirli bir sürümü seçebilirsiniz.

Oluşturulan kod aşağıdakine benzer olmalıdır:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Olası lisanslama sorunları konusunda sizi uyarmak için satırların çoğunun altı çizili olabilir. Bu laboratuvar için bir Hızlı Düzeltme uygulayabilirsiniz ancak gelecekte bu uyarıları kontrol edin.

Oluşturulan kodunuz önceki adımda kullanılan örnekle aynı değilse kodu şimdi değiştirebilir veya Duet'in daha sonra hata ayıklamaya nasıl yardımcı olabileceğini öğrenebilirsiniz. Ayrıca scripts/solutioncode-with-bug.ts . dosyasında, beklenen hatayı içeren bir kod sürümü bulunuyor.
index.ts dosyasını kaydedin.

/``newproducts uç noktasını test etme ve hata ayıklama

Cloud Shell'de cymbal-superstore/backend dizinine gidin. Şu komutu girin:

npm run start

Bu işlem, uç noktayı başlatır.

Uç noktanın sonuçlarını görmek için Cloud Shell'in menü çubuğundaki + simgesini kullanarak başka bir terminal açın ve şu komutu yürütün:

curl localhost:8000/newproducts

Yeni terminalde curl: (52) Empty reply from server hatasını ve uç noktayı çalıştıran terminalde ayrıntıları 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' içeren uzun bir hata mesajı görebilirsiniz.

Bu hatayı düzeltelim. Ancak öncelikle hata mesajının ne anlama geldiğini anlamamız gerekiyor. Bunun için Duet'ten yardım isteyeceğiz. Cloud Shell Düzenleyici'nin sol tarafındaki menüden Duet AI Chat'i açın ve şu soruları sorun:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet, eşitsizlik filtrelerinden birini kaldırmak da dahil olmak üzere sorunu düzeltmeniz için size bazı seçenekler sunacaktır. Sorunu çözmek için index.ts öğesinden .where("quantity", ">", 0) satırını silin. Böylece sorgunuzda yalnızca bir filtre olur.

Sunucuyu yeniden başlatmak ve ürün listesini almak için yukarıdaki ilk iki adımı tekrarlayın. Şu anda başarılı olmalısınız. Ancak sorunu çözemediyseniz sorunu bulmak için Duet'i kullanın (veya devam etmek için scripts/solutioncode-bug-fixed.ts ürünündeki düzeltilmiş çözümü kullanın).

Değişikliği Dağıtma

Değiştirilen uygulamayı dağıtmak için Cloud Shell'deki terraform dizininden terraform apply uygulamasını yeniden çalıştırmanız yeterlidir. Ardından uygulamayı Terraform'un sağladığı IP adresinden görüntüleyebilirsiniz.

6. Test Yazma

Genellikle öncelik verilmeyen önemli bir görev, bir projedeki kod için testler oluşturmaktır. Tahmin edebileceğiniz gibi, bu testleri oluşturmak için Duet'ten yardım alabilirsiniz.

Şimdi, az önce oluşturduğumuz newproducts kodu için testler oluşturalım.

backend/index.test.ts adlı kişiyi aç. Duet AI sohbetini kullanarak newproducts() işlevi için şu istemle bir test oluşturun:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Zaten dosyada bulunan import satır olduğunu fark edeceksiniz. Yalnızca describe() testini, belirtilen satırlardaki dosyaya kopyalayın. Dosyayı kaydedin.

Alternatif olarak, istemi geliştirebilir ve Duet'e içe aktarma ifadesi eklememesini söyleyebilirsiniz. Böylece yalnızca ihtiyacınız olan kodu alırsınız.

Testin sonuçlarını görmek için Cloud Shell'e gidip dizini backend klasörü olarak değiştirin ve şu komutu çalıştırın:

npm run test

7. Günlük Kaydı

Duet AI, dağıtıldıktan sonra bile projenize yardımcı olabilir. Bu bölümde, Duet AI'ın yardımıyla günlükleri inceleyeceğiz.

Cloud Console'a dönün ve Duet'in çalıştığından emin olun. Duet'e günlükleri nerede bulacağınızı sorun. Kendi isteminizi deneyebilirsiniz, ancak uygun bir yanıt vermezse, aşağıdaki istem işe yarayacaktır.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI, Cloud Run sayfasına gidip envanter hizmetini seçmenizi ve ardından bu hizmetin günlüklerini incelemenizi önermelidir. Aşağıdaki gibi bir sonuç görürsünüz:

Öğelerden birini seçin ve Duet AI'dan açıklamasını isteyin. Girişin doğal dildeki açıklamasını görürsünüz.

Günlük Girişlerini, Ana menüdeki Günlük Kaydı seçeneğinden açabileceğiniz Günlük Gezgini'nde de görüntüleyebilirsiniz. Günlük girişlerini Günlük Gezgini'nden görüntülemenin bir avantajı, girişleri açıklama seçeneğinin aşağıda gösterildiği gibi yerleşik olarak bulunmasıdır:

8. Tebrikler!

Tebrikler. Duet AI'ı daha önce hiç görmediğiniz kodları anlamanıza yardımcı olması için başarıyla kullandınız. Bu kodu geliştirdiniz, testler oluşturdunuz ve günlük girişlerini anlamanıza yardımcı olması için Duet'i kullandınız.

Temizleme

Projeyi Sil

Temizlemek için projemizi silmemiz yeterlidir.

Gezinme menüsünden IAM & Yönetici Konsolu
Ardından alt menüde Ayarlar'ı tıklayın.
Üzerinde "Projeyi Sil" yazan çöp kutusu simgesini tıklayın
Talimatların talimatlarını uygulayın

Bu laboratuvarda şunları nasıl yapacağınızı gördük:

Duet AI'ın yardımıyla mevcut bir web uygulamasını iyileştirin.
Uygulamayı Cloud Run'a dağıtın.
Duet AI'dan uygulamadaki bir hatayı açıklamasını ve düzeltmesini isteyin.
Duet AI'ın yardımıyla uygulama için testler geliştirin.
Duet AI'ın yardımıyla uygulama günlüklerini görüntüleyin.