Yapay zekayla portföy web sitenizi başlatın

1. Giriş

Genel Bakış

Yapay zeka ile geliştirme yolculuğuna bugün nereden başlayabilirsiniz? Çoğumuz için süreç bir sorgu veya prototiple başlar. Google AI Studio, Gemini modelleri tarafından desteklenen kod oluşturma özelliğini kullanarak web uygulamaları tasarlamanıza, test etmenize ve oluşturmanıza olanak tanıyan güçlü bir Derleme Modu (genellikle "sezgisel kodlama" olarak adlandırılır) sunar.

Bu codelab'de kişisel portfolyo web sitesi oluşturacaksınız. AI Studio temsilcisi, ön uç kodunu yazar. Uygulama hazır olduğunda tek bir tıklamayla doğrudan Cloud Run'a dağıtabilirsiniz.

Yapacaklarınız

  • Google AI Studio'dan kişisel portföy web sitesi prototipi oluşturmasını isteyin.
  • Uygulamayı etkileşimli önizleme korumalı alanında test edin.
  • Uygulamayı doğrudan Google AI Studio kullanıcı arayüzünden Cloud Run'a dağıtın.

Neler öğreneceksiniz?

  • Google AI Studio'nun Oluşturma modunu kullanarak doğal dilde bir ön uç hizmetinin hızlı prototipini oluşturma
  • AI Studio uygulamanızı Cloud Run'da sunucusuz bir container olarak dağıtma

2. Proje Ayarları

AI Studio'yu kullanmaya başlamadan önce hesap durumunuzu ve ön koşulları doğrulayın.

Google Hesabı ve Kademe Bilgileri

  1. Google Hesabınız yoksa Google Hesabı oluşturun.
    • İpucu: Mümkünse bu laboratuvar için kişisel bir Google Hesabı kullanın. Grup, kurumsal veya okul hesapları, deneysel özellikleri ya da bulut entegrasyonlarını devre dışı bırakan Workspace politikalarını zorunlu kılabilir.
  2. Dağıtımlarla ilgili fatura ayrıntılarını inceleyin:
    • Google Cloud Başlangıç Katmanı: Tam bir Google Cloud faturalandırma hesabı oluşturmadan, belirli bir bölgede iki adede kadar tam yığın uygulama yayınlamanıza olanak tanır.
    • Standart dağıtım: Mevcut ücretli bir Google Cloud projesine bağlanır ve depolama sınırlarını, CPU kaynaklarını ve API'leri genişletir.

3. AI Studio'nun geliştirme modunda portföy web sitesi oluşturma

Uygulama kabuğunu oluşturun ve yapay zeka kod asistanından ön uç düzenini oluşturmasını isteyin.

  1. Google AI Studio Uygulamaları paneline gidin ve Yeni Uygulama'yı tıklayın.
  2. Sohbet istemi kutusuna portföy uygulamanızın açıklamasını girin: 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
  3. Uygulama oluşturma sürecini başlatmak için Oluştur'u tıklayın.

4. Test etme ve tekrarlama

Hizmeti canlı olarak başlatmadan önce etkileşimli önizlemede doğrulama kontrolleri yapın.

  1. Google AI Studio'da önizleme bölmesini açın.
  2. Görsel deneyimi doğrulamak için önizleme sanal ortamındaki gezinme düğmeleri, bağlantılar veya düzenlerle etkileşim kurun.
    • Hataları düzeltmeyle ilgili not: Oluşturma veya test sırasında zaman zaman çalışma zamanı sorunları ya da derleme hatalarıyla karşılaşabilirsiniz. Bu durumda AI Studio, sohbette Düzelt düğmesini gösterir. Böylece, aracıdan sorunu otomatik olarak teşhis etmesini ve onarmasını isteyebilirsiniz.
    Google AI Studio Düzeltme Düğmesinin Konumu
  3. Stili veya davranışı değiştirmek istiyorsanız sohbet penceresinden aracıyı yönlendirin. Örneğin:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. Aracının kod tabanını güncellemesini bekleyin ve güncellemeleri görmek için önizleme tarayıcısını kontrol edin.

5. Cloud Run'a dağıt

Prototipiniz tam olarak işlevsel hale geldiğinde Cloud Run'da herkese açık bir hizmet olarak dağıtın.

  1. Dağıtım sihirbazını başlatmak için Google AI Studio'nun sağ üst köşesindeki Yayınla düğmesini tıklayın.Google AI Studio'da yayınla düğmesinin konumu
  2. Google Cloud projenizi yapılandırmak için Başlayın'ı tıklayın.
    • Hedef Google Cloud projesi açılır listesinin, çalışma alanınızla ilişkilendirdiğiniz projeyle eşleştiğini doğrulayın.
    • AI Studio, Cloud Run örneği için otomatik olarak benzersiz bir hizmet tanımlayıcısı oluşturur.
  3. İlk kez dağıtım yapıyorsanız ve standart Google Cloud parametrelerini kullanıyorsanız kuruluş türü belirtmeniz ve faturalandırma ayrıntılarını girmeniz istenebilir.
  4. Uygulamayı Yayınla'yı tıklayın.
  5. Kapsayıcı derleme, kapsayıcı kaydı ve hizmet dağıtımı adımları arka planda gerçekleşir. Bu işlem genellikle 2-4 dakika içinde tamamlanır.
  6. Dağıtım tamamlandığında oluşturulan Uygulama URL'sini kopyalayın ve bir tarayıcı sekmesinde canlı uygulama bağlantısını ziyaret edin.
  7. Canlı web uygulamasını tarayıcınızda test edin.

6. (İSTEĞE BAĞLI) Özel alan adı ekleme

Cloud Run, hizmetinizi varsayılan olarak Google tarafından yönetilen bir run.app alt alanında barındırır. Kişisel bir alan (ör. yourname.com veya portfolio.yourname.com) kullanmak istiyorsanız hizmetinizle özel bir alan eşleyebilirsiniz.

1. adım: Cloud Run'da alan eşlemesi ekleyin

  1. Google Cloud Console'da Cloud Run Alan Adı Eşlemeleri sayfasına gidin.
  2. Eşleme Ekle'yi tıklayın.
  3. Açılır listeden eşlemek istediğiniz Cloud Run hizmetini seçin.
  4. Özel alan adınızı girin (ör. yourname.com veya portfolio.yourname.com).
  5. İleri veya Devam'ı tıklayın. Cloud Run, alan kayıt operatörünüzle oluşturmanız gereken DNS kayıtlarını (ör. A/AAAA veya CNAME kayıtları) gösterir.

2. adım: DNS kayıt operatörünüzü yapılandırın

  1. Alan adı kayıt operatörünüzün yönetim paneline (örneğin, Squarespace, GoDaddy veya Namecheap) giriş yapın.
  2. Alanınızın DNS yönetimi veya DNS ayarları yapılandırma sayfasını açın.
  3. Cloud Run eşleme sihirbazında gösterilen değerlerle eşleşen DNS kayıtları oluşturun:
    • Apex alan eşlemeleri (ör. yourname.com) için listelenen A ve AAAA kayıtlarını ekleyin.
    • Alt alan adı eşlemeleri (ör. portfolio.yourname.com) için listelenen CNAME kaydını ekleyin.
  4. DNS yapılandırma değişikliklerini kaydedin.

3. adım: SSL sertifikası temel hazırlığının yapılmasını bekleyin

DNS değişiklikleri geçerlilik kazandıktan sonra:

  1. Google Cloud, güvenli bağlantınız için otomatik olarak yönetilen bir SSL/TLS sertifikası sağlar.
  2. Bu işlem genellikle yaklaşık 15 dakika içinde tamamlanır ancak DNS yayılımına bağlı olarak 24 saati bulabilir.
  3. İşlem tamamlandıktan sonra özel alanınız portföy web sitenize güvenli bir şekilde yönlendirilir.

7. Temizleme

Öngörülemeyen faturalandırma ücretlerinden kaçınmak veya Workspace kaynaklarınızı temizlemek için:

  1. Google AI Studio'da Uygulamalar sayfasına gidin.
  2. Uygulamanızı ızgarada veya listede bulun.
  3. Uygulama durumunu silmek ve hizmetin Cloud Run'daki yayınını kaldırmak için çöp kutusu simgesini tıklayın.
  4. Standart bir proje kullanarak dağıtım yaptıysanız ve tüm kaynakları tamamen kapatmak istiyorsanız Google Cloud Console Proje Ayarları'na gidip temel alınan projeyi silin.

8. Sonuç

Tebrikler! Doğrudan Google AI Studio'dan bir portfolyo web sitesi tasarladınız, geliştirdiniz ve dağıttınız.

Daha Fazla Bilgi

Tamamlanan Oluşturucu Yolculuğu rozetini almak için bu bağlantıyı ziyaret edin.

Yolculuğunuza devam etmek için bir sonraki laboratuvarınız olan goo.gle/builders adresine gidin.