Google Antigravity'yi kullanmaya başlama

1. Giriş

Bu codelab'de, IDE'yi aracı öncelikli çağa taşıyan, aracı tabanlı bir geliştirme platformu olan Google Antigravity (belgenin geri kalanında Antigravity olarak anılacaktır) hakkında bilgi edineceksiniz.

Yalnızca satırları otomatik olarak tamamlayan standart kodlama asistanlarının aksine Antigravity, geliştirme sürecinde size yardımcı olmak için planlama, kodlama ve hatta web'de gezinme gibi işlemleri yapabilen otonom aracıları yönetmek için "Görev Kontrolü" sunar.

Antigravity, "aracı öncelikli" bir platform olarak tasarlanmıştır. Bu yaklaşım, yapay zekanın yalnızca kod yazma aracı olmadığını, aynı zamanda karmaşık mühendislik görevlerini planlama, yürütme, doğrulama ve yineleme yeteneğine sahip, minimum insan müdahalesiyle çalışan özerk bir aktör olduğunu varsayar.

Neler öğreneceksiniz?

1. Antigravity'yi yükleme ve yapılandırma
2. Antigravity'nin temel kavramlarını (ör. Agent Manager, Editor, Browser) keşfetme
3. Antigravity ile birkaç kullanım alanını keşfetme

Gerekenler

Antigravity şu anda kişisel Gmail hesapları için önizleme sürümünde kullanılabilir. Bu hizmette, birinci sınıf modelleri kullanabileceğiniz ücretsiz bir kota bulunur.

Antigravity'nin sisteminize yerel olarak yüklenmesi gerekir. Ürün Mac, Windows ve belirli Linux dağıtımlarında kullanılabilir. Kendi makinenize ek olarak aşağıdakilere ihtiyacınız olacaktır:

• Chrome web tarayıcısı
• Gmail hesabı (kişisel Gmail hesabı)

Bu codelab, yeni başlayanlar da dahil olmak üzere her seviyeden kullanıcı ve geliştirici için tasarlanmıştır.

2. Kurulum

Antigravity'yi yükleyerek başlayacağız. Ürün şu anda önizleme sürümündedir ve kullanmaya başlamak için kişisel Gmail hesabınızı kullanabilirsiniz.

İndirilenler sayfasına gidin ve durumunuza uygun olan İşletim Sistemi sürümünü tıklayın. Uygulama yükleyiciyi başlatın ve uygulamayı makinenize yükleyin. Yüklemeyi tamamladıktan sonra Antigravity uygulamasını başlatın. Aşağıdakine benzer bir ekran görmeniz gerekir:

Lütfen her seferinde İleri'yi tıklayarak devam edin. Önemli adımlar aşağıda ayrıntılı olarak açıklanmıştır:

• Choose setup flow: Bu işlem, mevcut VS Code veya Cursor ayarlarınızdan içe aktarma seçeneğini gösterir. Yeni bir başlangıç yapacağız.
• Choose an Editor theme type. Koyu temayı kullanacağız ancak tercihiniz doğrultusunda bu temayı değiştirebilirsiniz.
• How do you want to use Antigravity agent:

Bu durumu biraz daha ayrıntılı olarak inceleyelim. Bu ayarın kesin olmadığını ve Temsilci ile etkileşimde bulunduğunuz sırada bile istediğiniz zaman değiştirilebileceğini unutmayın.

Seçeneklere geçmeden önce, buradaki iki belirli özelliğe (iletişim kutusunun sağında gördüğünüz) göz atalım:

Terminal Execution politikası

Bu, aracıya terminalinizde komut (uygulama/araç) çalıştırma olanağı tanımakla ilgilidir. Burada üç seçenek vardır.

• Off: Terminal komutlarını hiçbir zaman otomatik olarak yürütme (yapılandırılabilir izin verilenler listesindekiler hariç)
• Auto: Aracı, herhangi bir terminal komutunun otomatik olarak yürütülüp yürütülmeyeceğine karar verir. İzin alması gerektiğinde karar verip sizden izin ister.
• Turbo: Terminal komutlarını (yapılandırılabilir bir Reddetme listesindekiler hariç) her zaman otomatik olarak yürütür.

Yorum politikası

Aracı görevini yerine getirirken çeşitli yapılar (görev planı, uygulama planı vb.) oluşturur. İnceleme politikası, kimin inceleme yapılması gerektiğine karar vereceğini belirleyebileceğiniz şekilde ayarlanır. Her zaman incelemek mi yoksa temsilcinin bu konuda karar vermesine izin vermek mi istediğinizi seçin. Bu nedenle, burada da üç seçenek vardır.

• Always Proceed: Temsilci hiçbir zaman yorum istemiyor
• Agent Decides: Temsilci, inceleme isteğinde bulunma zamanına karar verir.
• Request Review: Temsilci her zaman inceleme ister

Bunu anladığımıza göre, 4 seçenek, Terminal yürütme ve inceleme politikaları için belirli hazır ayarlardan başka bir şey değildir. Bunlardan 3'ü için hazır ayarlar, 4. seçenek ise tamamen özel olarak kontrol edebileceğimiz bir seçenektir. Bu 4 seçenek, terminalde komut yürütmek ve göreve devam etmeden önce yapay zeka tarafından oluşturulan öğeleri incelemek için ne kadar özerklik vermek istediğinizi seçebilmeniz amacıyla sunulur.

Bu 4 seçenek şunlardır:

• Temsilci odaklı geliştirme
• Aracı destekli geliştirme
• Yorum odaklı geliştirme
• Özel yapılandırma

Temsilci destekli geliştirme seçeneği, temsilcinin karar vermesine ve onay için kullanıcıya geri dönmesine olanak tanıdığı için iyi bir denge sağlar ve önerilen seçenektir.

Bu nedenle, seçiminizi yapın ve ideal olarak şimdilik önerilen yaklaşımla devam edelim.

• Configure your Editor: Tercihlerinizi belirleyin.
• Sign in to Google: Daha önce belirtildiği gibi, Antigravity önizleme modunda kullanılabilir ve kişisel Gmail hesabınız varsa ücretsizdir. Hesabınızla hemen oturum açın. Bu işlem için yeni bir Chrome profili oluşturulmasına izin verdiğinizden emin olun. Bu işlem, oturum açmanıza olanak tanıyan tarayıcıyı açar. Kimlik doğrulama başarılı olduğunda aşağıdaki mesaja benzer bir mesaj görürsünüz ve Antigravity uygulamasına yönlendirilirsiniz. Her şeyi akışına bırakın.
• Terms of Use: Katılmak isteyip istemediğinize karar verip Sonraki'yi tıklayabilirsiniz.

Bu sizi, Antigravity'nin sizinle işbirliği yapmak için beklediği gerçek anına götürecek. Başlamaya hazırız.

3. Temsilci Yöneticisi

Antigravity, açık kaynaklı Visual Studio Code (VS Code) temelini kullanır ancak kullanıcı deneyimini radikal bir şekilde değiştirerek metin düzenleme yerine aracı yönetimine öncelik verir. Arayüz, Düzenleyici ve Aracı Yöneticisi olmak üzere iki ayrı birincil pencereye ayrılır. Bu sorumluluk ayrımı, bireysel katkı ile mühendislik yönetimi arasındaki farkı yansıtır.

Temsilci Yöneticisi: Kontrol Merkezi

Antigravity başlatıldığında kullanıcı genellikle bir dosya ağacıyla değil, aşağıdaki resimde gösterildiği gibi Agent Manager ile karşılaşır:

Bu arayüz, Mission Control kontrol paneli görevi görür. Üst düzey düzenleme için tasarlanmıştır. Geliştiricilerin farklı çalışma alanlarında veya görevlerde eşzamansız olarak çalışan birden fazla aracı oluşturmasına, bunları izlemesine ve bunlarla etkileşime girmesine olanak tanır.

Bu görünümde geliştirici, mimar rolünü üstlenir. Üst düzey hedefler tanımlarlar. Örneğin:

• Kimlik doğrulama modülünü yeniden düzenleme
• Bağımlılık ağacını güncelleme
• Faturalandırma API'si için test paketi oluşturma

Yukarıdaki şemada gösterildiği gibi, bu isteklerin her biri özel bir aracı örneği oluşturur. Kullanıcı arayüzü, bu paralel iş akışlarının görselleştirilmesini sağlar. Her aracının durumunu, ürettiği Artifacts'leri (planlar, sonuçlar, farklılıklar) ve insan onayı bekleyen istekleri gösterir.

Bu mimari, önceki IDE'lerin temel bir sınırlamasını (doğrusal ve eşzamanlı olan, daha çok chatbot deneyimi sunan IDE'ler) ele alıyor. Geleneksel bir sohbet arayüzünde, geliştiricinin bir sonraki soruyu sormadan önce yapay zekanın kodu oluşturmayı bitirmesini beklemesi gerekir. Antigravity'nin Yönetici Görünümü'nde bir geliştirici, beş farklı hatayı aynı anda düzeltmek için beş farklı temsilci gönderebilir ve bu sayede verimliliğini etkili bir şekilde artırabilir.

Yukarıdaki Sonraki'yi tıklarsanız bir Workspace açma seçeneğiniz olur.

Workspace'i VS Code'dan bildiğiniz gibi düşünmeniz yeterli. Bu nedenle, düğmeyi tıklayıp başlayacağımız klasörü seçerek yerel bir klasör açabiliriz. Benim durumumda, ana klasörümde my-agy-projects adlı bir klasör vardı ve onu seçtim. Tamamen farklı bir klasör kullanabilirsiniz.

Dilerseniz bu adımı tamamen atlayabilir ve daha sonra istediğiniz zaman Workspace açabilirsiniz.

Bu adımı tamamladığınızda, aşağıda gösterilen Agent Manager penceresine yönlendirilirsiniz:

Uygulamanın, seçilen çalışma alanı klasöründe (my-agy-projects) yeni bir görüşme başlatmaya hemen hazır olduğunu fark edeceksiniz. Diğer yapay zeka uygulamalarıyla (Cursor, Gemini CLI) çalışma konusundaki mevcut bilginizi kullanabileceğinizi ve istem oluştururken ek bağlam eklemek için @ ile diğer yöntemleri kullanabileceğinizi hatırlatırız.

Hem Planning hem de Model Selection açılır listelerine göz atın. Model Seçimi açılır menüsünden, Agent'ınızın kullanması için şu anda kullanılabilen modellerden birini seçebilirsiniz. Liste aşağıda gösterilmektedir:

Benzer şekilde, aracının varsayılan Planning modunda olacağını görüyoruz. Ancak Fast modunu da kullanabiliriz.

Bu konuyla ilgili belgelerde neler söylendiğine bakalım:

• Planning: Temsilci, görevleri yürütmeden önce plan yapabilir. Derinlemesine araştırma, karmaşık görevler veya ortak çalışmalar için kullanın. Bu modda Temsilci, çalışmalarını görev grupları halinde düzenler, yapay içerikler üretir ve en iyi kalite için çalışmalarını kapsamlı bir şekilde araştırmak, düşünmek ve planlamak üzere diğer adımları atar. Burada çok daha fazla çıktı göreceksiniz.
• Fast: Agent, görevleri doğrudan yürütür. Değişkenleri yeniden adlandırma, birkaç bash komutunu başlatma veya diğer küçük ve yerel görevler gibi daha hızlı tamamlanabilecek basit görevler için kullanın. Bu yöntem, hızın önemli bir faktör olduğu ve görevin, kalitenin düşmesi konusunda endişelenmeyecek kadar basit olduğu durumlarda faydalıdır.

Agents'taki Düşünme bütçesi ve benzer terimlere aşina iseniz bunu, Agent'ın düşünme sürecini kontrol etme ve dolayısıyla düşünme bütçesini doğrudan etkileme özelliği olarak düşünebilirsiniz. Şimdilik varsayılan ayarlarla devam edeceğiz ancak lansman sırasında Gemini 3 Pro modelinin herkes için sınırlı kotalar dahilinde kullanılabileceğini unutmayın. Gemini 3 kullanımına yönelik ücretsiz kotalarınızı tükettiyseniz bunu belirten uygun mesajlar alırsınız.

Şimdi biraz zamanımızı buradaki Agent Manager (pencere) üzerinde geçirelim ve temel yapı taşları, Antigravity'de nasıl gezineceğiniz ve daha fazlası hakkında net bir fikir edinmek için birkaç şeyi anlayalım. Temsilci Yöneticisi penceresi aşağıda gösterilmiştir:

Lütfen yukarıdaki numaralı diyagrama bakın:

1. Inbox: Bu özelliği, tüm görüşmelerinizi tek bir yerden takip etmenin bir yolu olarak düşünebilirsiniz. Görevlere gönderdiğiniz Agent'lar Gelen Kutusu'nda görünür. Gelen Kutusu'nu tıklayarak mevcut tüm görüşmelerin listesini alabilirsiniz. İletişimlerin herhangi birine dokunduğunuzda, gönderilen tüm mesajlara, görevlerin durumuna, aracının ürettiklerine ve hatta görevlerle ilgili sizden onay bekleyip beklemediğine yönlendirilirsiniz. Bu, üzerinde çalıştığınız önceki bir göreve daha sonra geri dönmenin harika bir yoludur. Çok kullanışlı bir özellik.
2. Start Conversation: Yeni bir görüşme başlatmak için bunu tıklayın. Bu işlem sizi doğrudan Ask anything yazan girişe yönlendirir.
3. Workspaces: Çalışma alanlarından ve istediğiniz çalışma alanında çalışabileceğinizden bahsettik. İstediğiniz zaman daha fazla çalışma alanı ekleyebilir ve sohbete başlarken herhangi bir çalışma alanını seçebilirsiniz.
4. Playground: Bu, temsilciyle kolayca sohbet başlatabileceğiniz ve ardından dosyalar üzerinde daha sıkı kontrol sahibi olacağınız bir çalışma alanına dönüştürebileceğiniz harika bir yöntemdir. Bunu bir karalama alanı olarak düşünebilirsiniz.
5. Editor View: Şu ana kadar Temsilci Yöneticisi görünümündeyiz. İsterseniz istediğiniz zaman Düzenleyici görünümüne geçebilirsiniz. Bu işlem, çalışma alanı klasörünüzü ve oluşturulan tüm dosyaları gösterir. Dosyaları doğrudan düzenleyebilir veya düzenleyicide satır içi rehberlik sağlayabilir, komut verebilirsiniz. Böylece, Aracı, değiştirilen önerilerinize/talimatlarınıza göre bir işlem yapabilir veya değişiklik yapabilir. Düzenleyici Görünümü'nü ilerleyen bölümlerde ayrıntılı olarak ele alacağız.
6. Browser: Son olarak, Antigravity'yi çok güçlü kılan ve diğerlerinden net bir şekilde ayıran özelliklerden biri olan Chrome Tarayıcı ile yakın entegrasyonuna geliyoruz. Bir sonraki bölümde Tarayıcı'yı ayarlamaya başlayalım.

4. Antigravity Browser'ı kurma

Belgelere göre, temsilci tarayıcıyla etkileşim kurmak istediğinde, söz konusu görevi yerine getirmek için bir tarayıcı alt temsilcisi çağırır. Tarayıcı alt aracısı, Antigravity tarafından yönetilen tarayıcıda açık olan sayfalarda çalışmak üzere uzmanlaşmış bir model kullanır. Bu model, ana aracı için seçtiğiniz modelden farklıdır.

Bu alt aracı, tarayıcınızı kontrol etmek için gerekli olan çeşitli araçlara erişebilir. Bunlar arasında tıklama, kaydırma, yazma, konsol günlüklerini okuma ve daha fazlası yer alır. Ayrıca, DOM yakalama, ekran görüntüleri veya Markdown ayrıştırma yoluyla açık sayfalarınızı okuyabilir ve video çekebilir.

Bu nedenle, Antigravity tarayıcı uzantısını başlatıp yüklememiz gerekir. Bunu yapmak için Playground'da bir sohbet başlatalım ve adımları inceleyelim.

Playground simgesini seçin ve aşağıdaki örnekte gösterildiği gibi, takip etme görevini go to antigravity.google Aracı'ya verin:

Görevi gönderin. Aracının görevi analiz ettiğini görürsünüz ve düşünce sürecini inceleyebilirsiniz. Bir noktada doğru şekilde devam edecek ve tarayıcı aracısını aşağıda gösterildiği gibi ayarlaması gerektiğini belirtecek. Kurulum'u tıklayın.

Bu işlemle tarayıcı açılır ve aşağıdaki gibi bir mesaj gösterilerek uzantının yüklenmesi istenir:

Devam ettiğinizde, yükleyebileceğiniz Chrome uzantısına yönlendirilirsiniz.

Uzantıyı başarıyla yükledikten sonra Antigravity Agent çalışmaya başlar ve görevini yapabilmesi için izin vermenizi beklediğini belirtir. Açılan tarayıcı penceresinde bazı etkinlikler görmeniz gerekir:

Temsilci Yöneticisi görünümüne geri döndüğünüzde aşağıdakileri görmeniz gerekir:

Bu, antigravity.google web sitesini ziyaret etmesini istediğimiz için tam olarak beklediğimiz bir sonuçtur. İzni verdiğinizde, web sitesine güvenli bir şekilde gidildiğini görürsünüz (aşağıda gösterildiği gibi):

Yapıları İnceleme

Şimdi de işin ilginç kısmına geçelim. Temsilci işini tamamladıktan sonra tüm çalışmasını görebilirsiniz. Bu da, yapmayı planladığınız iş, şu ana kadar yaptığınız iş ve bunları nasıl doğruladığınız gibi konularda güveninizi oluşturduğunuz temel olan yapıtları ortaya çıkarır.

Yapay ürünler, "güven boşluğunu" giderir. Bir temsilci "Hatayı düzelttim" dediğinde geliştiricinin doğrulamak için kodu okuması gerekiyordu. Antigravity'de (Yerçekimsiz) temsilci, bunu kanıtlamak için bir Yapay Ürün oluşturur.

Antigravity, göreve bağlı olarak önemli çıktıları üretmeye odaklanır. Bu, görev planından uygulama planına ve son olarak da doğrulama içeren adım adım açıklama planına kadar değişebilir. Bu planlarda aşağıdakiler gibi öğeler yer almalıdır:

• Task Lists & Plans: Temsilci, kod yazmadan önce yapılandırılmış bir plan oluşturur. Kullanıcı bu planı inceleyebilir, düzenleyebilir ve onaylayabilir.
• Code Diffs: Hangi satırların değişeceğini tam olarak gösteren standartlaştırılmış fark görünümleri.
• Screenshots: Temsilci, kullanıcı arayüzünün değişikliğin öncesi ve sonrası durumunu yakalar.
• Browser Recordings: Dinamik etkileşimler (ör. "Giriş düğmesini tıklayın, yükleme çarkının görünmesini bekleyin, kontrol panelinin yüklendiğini doğrulayın") gibi bir görev verildiğinde oturumunun videosunu kaydeder. Geliştirici, uygulamayı kendisi çalıştırmadan işlevsel şartın karşılandığını doğrulamak için bu videoyu izleyebilir.
• Test Results: Aracı tarafından oluşturulan ve yürütülen, başarılı/başarısız testlerin yapılandırılmış günlükleri.

Sağ üstte, Agent Manager görünümünde değişiklikleri incele'nin yanında, yapay nesneleri açıp kapatabileceğiniz bir düğme görürsünüz. Düğme açıkken oluşturulan yapay nesnelerin listesini görebilirsiniz:

Aşağıda gösterildiği gibi Artifacts (Yapılar) görünümünü görmeniz gerekir. Buradaki örneğimizde, Ajan'a antigravity.google sayfasını ziyaret etmesi talimatı verildi. Bu nedenle, ekran görüntüsü alındı, aynı ekran görüntüsünün videosu oluşturuldu vb.

Geliştiriciler, "Google Dokümanlar tarzı yorumlar" kullanarak bu yapay ürünlerle etkileşimde bulunabilir. Belirli bir işlemi veya görevi seçebilir, komutu istediğiniz şekilde verebilir ve ardından bunu Temsilci'ye gönderebilirsiniz. Ardından, bu geri bildirimi alıp buna göre yineleme yapar. Yazara geri bildirimde bulunduğunuz ve yazarın bu geri bildirimi dikkate aldığı etkileşimli Google Dokümanlar kullanmayı düşünebilirsiniz.

5. Gelen kutusunu tekrar ziyaret etme

Temsilcilerle birkaç görüşme başlattıysanız şimdi Temsilci Yöneticisi penceresindeki gelen kutunuza göz atmanız gerekir. Bu işlem, tüm görüşmeleri gösterir. Görüşme geçmişini, üretilen öğeleri ve daha fazlasını görmek için görüşmelerden birini tıklayın. Bizim durumumuzda, ilk ileti dizisini çalıştırdıktan sonra gelen kutumuzda aşağıdaki gibi listelenen ileti dizisi gösteriliyor:

Bu görüşmeyi tıkladığınızda ayrıntılar gösterilir:

Sohbete buradan da devam edebilirsiniz.

6. The Editor

Düzenleyici, VS Code'un alışkanlıklarını koruyarak deneyimli geliştiricilerin kas hafızasına saygı gösterir. Standart dosya gezgini, söz dizimi vurgulama ve uzantı ekosistemi içerir.

Düzenleyici'ye gitmek için Agent Manager'da sağ üstteki Open Editor (Düzenleyiciyi aç) düğmesini tıklayabilirsiniz.

Düzenleyici, "Temsilci Farkındalığı" ile geliştirildi.

• Inline Command: Düzenleyici, sezgisel kodlamayı ve satır içi talimatı destekler. Kullanıcılar kodu vurgulayabilir ve aracıya "Make this more efficient" veya "Add comments explaining this logic" talimatını verebilir.
• Agent Side Panel : Düzenleyicinin sağ tarafındaki paneli kullanarak doğrudan temsilciyle çalışın. Buradan yeni sohbetler başlatabilir veya kodunuzu değiştirmek için talimatlar verebilirsiniz.

Web geliştirme ile ilgili bazı kullanım alanlarını inceleyelim. Bu alanlarda Agent, birden fazla kod dosyası oluşturur. Ardından, dosyaları görmek, değişiklik yapmak ve doğrudan Agent ile etkileşim kurmak için Düzenleyici'ye göz atabiliriz.

7. Düzenleyici ve Temsilci Yöneticisi arasında geçiş yapma

Antigravity'nin, hem Düzenleyici hem de Aracı Yöneticisi'nin ayrı pencereler olduğu ve her ikisine de açıkça ihtiyaç duyulduğu konusunda kendi görüşleri olduğunu unutmayın. Düzenleyici'de sağ üstteki Open Agent Manager (Aracı Yöneticisi'ni Aç) düğmesini kullanarak veya Aracı Yöneticisi'nde sağ üstteki Open Editor (Düzenleyici'yi Aç) düğmesini tıklayarak birinden diğerine geçebilirsiniz.

İki mod arasında geçiş yapmak için Cmd + E klavye kısayolunu da kullanabilirsiniz.

8. Kullanım Alanları

Ürünün temel özelliklerini öğrendiğimize göre, nasıl kullanıldığını görmek için birkaç kullanım alanına göz atalım. Antigravity'nin öncelikle bir aracı platformu olduğunu unutmayın. Bu nedenle, çoğu durumda yalnızca Aracı'ya talimat verilir. Aracı da kendi başına görevi yerine getirir, gerekirse izin ister, yapay içerikler üretir ve görev tamamlandığında bizi bilgilendirir. Bu nedenle, aşağıdaki kullanım alanlarının her birinde Temsilci sohbetinin her bir çıktısını üretemiyoruz. Talimatları ve beklenen sonuçların birkaç gerekli ekran görüntüsünü paylaşacağız ancak sonuçlarınız biraz farklı olabilir.

Ele alacağımız kullanım alanları, harici sitelerle birkaç görevi otomatikleştirme, bir proje için birim testi kullanım alanları oluşturma ve doğrulama ile tam bir web sitesi geliştirme arasında değişmektedir. Hadi gidelim.

Öne Çıkan Haberler

Bu basit bir kullanım alanıdır ancak web tarayıcısını kullanarak web sitelerini ziyaret etme, bilgi çıkarma, bazı işlemleri yapma ve ardından verileri kullanıcıya döndürme gibi işlemler için temel olarak kullanılabilir.

Bu durumda, Google Haberler sitesini ziyaret edip buradan bazı bilgileri çıkaracağız. Ancak istediğiniz bir siteyle kolayca deneme yapabilir ve nasıl sonuçlar elde ettiğinizi görebilirsiniz.

Aşağıda gösterildiği gibi Agent Manager bölümünde olduğunuzdan ve Playground seçeneğini belirlediğinizden emin olun:

Ardından şu talimatı verin:

Bu işlem, Agent sürecini başlatır ve tarayıcının başlatılması gerektiğini belirler. Düşünme sürecine dikkat ederek Agent'ın işini nasıl yaptığını görmelisiniz. Her şey yolunda giderse Antigravity tarayıcısı başlatılır ve site, aşağıda gösterildiği gibi ziyaret edilir. Sitenin etrafındaki mavi kenarlık, aracının artık tarayıcıyı kontrol ettiğini ve bilgileri almak için sitede gezindiğini gösterir.

Çalışmasını tamamladığında, aşağıda gösterildiği gibi Artifacts'in oluşturulduğunu da görmeniz gerekir:

Aşağıda, Agent tarafından gerçekleştirilen örnek bir yürütme gösterilmektedir:

Sol tarafta Düşünce Süreci'nin yer aldığını, ayrıca noktalar arasında kaydırarak oynatmayı ve diğer verileri görüntüleyebileceğinizi unutmayın.

Deneyebileceğiniz şeyler

• Bunu anladıktan sonra, kullanılabilir olan ve Agent'ın gidip bazı verileri almasını/özetlemesini istediğiniz bir web sitesi seçin. Kontrol panelleri ve grafikleri olduğunu bildiğiniz bir web sitesini düşünün ve birkaç değer seçmesini isteyin.
• Aşağıdaki istemi deneyin: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

Python + Flask ile Dinamik Web Sitesi Oluşturma

Şimdi de eksiksiz bir web uygulaması oluşturmaya geçelim. Oluşturacağımız web uygulaması, gün boyunca birden fazla konuşmacının sunum yaptığı 1 günlük teknik bir etkinlik hakkında bilgi veren bir site olacak.

Agent Manager içinde olduğunuzdan ve Playground seçtiğinizden emin olun.

Aşağıdaki istemi girin:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

Yukarıdaki istemi girerek sohbete başlayabilirsiniz:

Aracı, görevini yerine getirirken şu öğeleri oluşturur:

• Görev Yapısı
• Uygulama Yapısı
• Adım adım açıklamalı kılavuz yapısı

Aşağıda verilen Görev Yapısı, Agent'ın kendisine verilen göreve göre yapması gerektiğini çözdüğü ilk görev sırasıdır. Aşağıda, yürütme işleminden alınan örnek bir ekran görüntüsü gösterilmektedir:

Ardından Uygulama Planı yapay nesnesini tıklayabilirsiniz. Örnek ekran görüntüsü aşağıda gösterilmektedir:

Son olarak, Walkthrough (Adım Adım Açıklama) yapısı bulunur. Aşağıda gösterildiği gibi, temsilcinin yaptığı her şeyi içerir:

Sunucuyu başlattığını ve URL'yi sağladığını fark edin. URL'yi tıkladığımda uygulamayı görüyorum. Aşağıda örnek bir ekran görüntüsü gösterilmektedir:

Düzenleyici'ye geçtiğimde ekranda Python Flask uygulamasının oluşturulduğu klasörün yer aldığını görüyorum. Ayrıca Agent mode simgesinin sağa etiketlendiğini ve konuşmaya orada da devam edebileceğinizi fark edeceksiniz.

Şimdi etkinliğe birkaç konuşma daha eklemek istediğimizi varsayalım. Düzenleyici ve Aracı panelinde kalıp Add two more talks to the schedule gibi bir talimat verebiliriz.

Bu durumda, temsilci gereksinimi analiz eder, görevi ve uygulama planını günceller, ardından güncellenen işlevselliği de doğrular. Aşağıda örnek bir görüşme gösterilmektedir:

İsterseniz Temsilci Yöneticisi'ne geri dönebilirsiniz. Bu süreç, Agent Manager'dan Düzenleyici'ye geçiş, buna göre değişiklik yapma vb. süreçleri anlamanıza yardımcı olur.

Not: Bu görev yürütülürken aracı, Flask sunucusunu mevcut makinede kullanılan 5000 numaralı bağlantı noktasında başlatmaya çalıştı. 8080'i kullanmaya karar verene ve sunucuyu başlatana kadar bir sonraki ücretsiz bağlantı noktasını denemeye devam etti.

Deneyebileceğiniz şeyler

• Uygulamaya istediğiniz ek işlevleri ekleyin. Ayrıntıları Ajan'a verin ve önce görev listesini, ardından uygulama planını vb. değiştirerek görevi nasıl yerine getirdiğini gözlemleyin.
• Agent'tan uygulama için bir BENİOKU dosyası veya daha fazla doküman oluşturmasını isteyin.

Basit bir üretkenlik uygulaması oluşturma

Şimdi basit bir Pomodoro zamanlayıcı web uygulaması oluşturacağız.

Agent Manager bölümünde olduğunuzdan ve Playground seçeneğini belirlediğinizden emin olun. Aşağıdaki istemi girin:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

Görev listesini ve uygulama planını nasıl oluşturduğunu ve ardından nasıl devam ettiğini inceleyin. Akışa dikkat etmeye devam edin. İncelemenizi gerektiren durumlar olabilir. Örnek bir çalıştırma aşağıda gösterilmiştir.

Bu durumda, Antigravity tarayıcısını da başlatmalı, kendi testini yapmalı ve ardından testlerin başarılı olduğunu onaylamalıdır. Oluşturduğu öğelerden biri, doğrulama videosunu içeren bir Medya Yapay Öğesi oldu. Bu, test edilenleri görmenin harika bir yoludur. Ayrıca, değişiklik uygulanmadığı için bazı stil değişiklikleri önerdim ve bu değişiklikler uygulandı.

Son uygulama aşağıdaki gibi görünüyor ve oldukça iyi görünüyor.

Uygulamaya güzel bir zamanlayıcı resmi ekleyebiliriz. Aşağıda verilen talimatı uygulamanız yeterlidir:

Add an image to the application that displays a timer.

Bu durum, temsilcinin Görev yapayına yeni bir görev eklemesine neden oldu:

Ardından, görevini yerine getirirken bir resim oluşturdu:

Son olarak, uygulama istediğimiz gibi bir görsel oluşturdu:

Deneyebileceğiniz şeyler

• Uygulamadaki kum saati simgesinin arka planının şeffaf olmadığını fark edin. Temsilciye bunu şeffaf hale getirmesini söylemeyi deneyin.
• Oluşturmak istediğiniz uygulamaların birkaç varyasyonunu deneyin. Stillerle ve resimlerle oynayın, değişiklik isteyin vb.

Birim testleri, sahte saplar oluşturma ve testleri doğrulama

Burada deneyeceğimiz son kullanım alanı, sahip olduğumuz belirli bir kod dosyası için birim testleri oluşturmak ve testleri yürütüp doğrulamak üzere Agent'ı kullanmaktır.

Bunun için aşağıda gösterildiği gibi tek bir Python dosyası içeren bir çalışma alanı oluşturacağız:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

Yukarıdaki Python dosyasının yerel olarak bir klasörde bulunduğundan ve Antigravity'de Workspace olarak yüklendiğinden emin olun.

Bu, checkout işlevinde aşağıdaki temel işlevlere sahip basit bir Sipariş hizmetidir:

1. Sepetin boş olmadığını doğrular.
2. Tüm öğelerin stok durumunu kontrol edin.
3. Nihai fiyatı hesaplar.
4. Ödeme alınır.
5. Envanteri günceller.

Aracıya, birim test durumları oluşturma, sahte uygulamalar sağlama ve testlerin başarılı olduğundan emin olmak için testleri yürütme görevini atayacağız.

Belirli çalışma alanı klasörümüzü açtığımızda, dosyaya referans vermek için artık @ sembolünü de kullanabildiğimizi göreceksiniz. Örneğin, şunları yapabiliriz:

Bu işlem, dosyanın ne olduğuyla ilgili bir açıklama gösterir:

Aşağıdaki istemi kullanarak daha iyi bir görselleştirme oluşturmasını isteyebiliriz:

Can you visually show this class for better understanding

Bir sonraki adımım birim testlerini oluşturmak ve Temsilci'den bunları test etmesini istemek. Aşağıdaki istemi giriyorum:

generate unit tests for this module and test it out with mock implementations.

Aşağıdaki Görev yapısını oluşturdu ve görevine devam etti.

Ayrıca, çalıştırdığı testlerin ayrıntılarını da görebilirsiniz:

Oluşturduğu dosyalardan biri de test dosyasıydı. Ekran görüntüsü aşağıda gösterilmiştir:

Deneyebileceğiniz şeyler

Kendi kodunuzu kullanarak Temsilci'den neler yapmasını isteyebileceğinizi görün. Örneğin, kodunuza daha fazla işlev ekleyebilir veya kodunuzun belirli bölümlerini yeniden düzenleyebilirsiniz.

9. Tebrikler

Tebrikler, Antigravity'yi başarıyla yüklediniz ve nasıl kullanacağınızı öğrendiniz. Antigravity, temsilci öncelikli bir geliştirme platformudur. Denediğimiz farklı kullanım alanları, kendi gereksinimlerinizi belirlemenize ve Antigravity'nin bu gereksinimleri karşılamak için sizinle nasıl işbirliği yapabileceğini keşfetmenize yardımcı olacaktır.

Referans belgeleri

• Resmi site : https://antigravity.google/
• Belgeler: https://antigravity.google/docs
• Kullanım alanları : https://antigravity.google/use-cases
• İndirme : https://antigravity.google/download
• Google Antigravity'nin YouTube kanalı : https://www.youtube.com/@googleantigravity