Hızlı Başlangıç: Aracı destekli yapay zeka ile Azure uygulamaları geliştirme

Bu hızlı başlangıçta, GitHub Copilot’u kullanarak bir React yapılacaklar uygulaması oluşturun ve yapay zeka destekli geliştirme ile bunu Azure App Service’e dağıtın. Yerel olarak geliştirme yaparken ayrıntılı bir uygulama planı oluşturmak için Copilot Plan modu ile başlayın, ardından derlemek ve dağıtmak için aracı moduna geçin. Web için VS Code kullanırken, tüm bu süre boyunca aracı modunu kullanın. Sonunda, aşağıdakilerle uygulamalı bir deneyim elde etmiş olursunuz:

  • Projenizi araştırmak ve uygulama planları oluşturmak için GitHub Copilot Plan modu (yerel geliştirme)
  • Tam teşekküllü bir uygulamanın iskeletini oluşturmak, yapılandırmak ve dağıtmak için GitHub Copilot aracı modu
  • Azure özgü bilgi ve araçlarla Copilot geliştirmek için Azure Skills
  • Azure App Service üzerinde çalışan bir yapılacaklar uygulaması
  • Yapılacaklar uygulamanız için bir API uç noktası
  • Bir altyapı şablonundan Azure kaynakları sağlamak ve dağıtmak için Azure Geliştirici CLI’si (azd)

Plan modu, Copilot kod tabanınızı araştırmanıza ve kod yazmadan önce yapılandırılmış bir uygulama planı oluşturmanıza olanak tanır ve gereksinimlerinizin net olduğundan ve yaklaşımınızın uygun olduğundan emin olur. Aracı modu Copilot komutları otonom olarak çalıştırmanıza, dosyaları düzenlemenize ve hatalarda yineleme yapmanıza olanak tanır. Hedefi siz sağlarsınız ve Copilot adımları belirler.

Prerequisites

Yerel yükleme gerekmez. VS Code for the Web (vscode.dev/azure) Azure Developer CLI, Node.jsve çeşitli Azure uzantıları önceden yüklenmiş olarak tarayıcı tabanlı bir VS Code ortamı sağlar.

Yeni çalışma alanı oluştur

  1. tarayıcınızda vscode.dev/azure açın.

  2. İstendiğinde Azure hesabınızı kullanarak oturum açın.

  3. Terminal penceresinde projeniz için yeni bir dizin oluşturun ve bu dizine geçin.

    mkdir todo-app && cd todo-app

Azure Becerilerini Etkinleştirme

Azure Becerileri, Copilot’a Azure hizmetleri, altyapısı ve dağıtımları hakkında bilinçli kararlar alabilmesi için özenle seçilmiş Azure uzmanlığı, iş akışları ve koruma mekanizmaları sağlar. Azure MCP uzantısı, Azure becerilerini VS Code'a getiren yardımcı bir uzantı yükler. Birlikte Azure MCP Sunucusu, Foundry MCP ve tam beceri katmanını otomatik olarak yapılandırırlar. Daha fazla bilgi için bkz. Azure Skills Plugin deposu.

  1. Komut Paleti'ni açın.
  2. MCP: Sunucuları listele'yi seçin.
  3. Azure MCP sunucusu çalışmıyorsa, Azure MCP>Start server öğesini seçerek başlatın.

Uygulamanızı planlama

Plan modu herhangi bir kod yazmadan önce projenizi araştırmanızı ve ayrıntılı bir uygulama planı oluşturmanızı Copilot sağlar. Planı gözden geçirip iyileştirir, ardından yürütülmesi için ajan moduna devredersiniz.

  1. Etkinlik Çubuğu'ndaki sohbet simgesini seçerek Copilot Chat görünümünü açın.

  2. Henüz yapmadıysanız GitHub Copilot oturum açın. Visual Studio Code durum çubuğundaki GitHub Copilot logo Sign-in düğmesini seçin ve GitHub hesabınızla kimlik doğrulaması yapmak için istemleri izleyin.

  3. Sohbet panelindeki aracılar açılan listesinden Plan'ı seçin veya ardından görev açıklamanızı yazın /plan .

    Aşağıdaki istemi kopyalayıp Copilot sohbet paneline yapıştırın:

    /plan 
Create a Vite + React single-page application (SPA) to-do app
with the following features:
- Add, remove, and mark complete/incomplete to-do items.
- Use localStorage to persist to-do items between sessions.
- Choose low-cost Azure resources.
- Create a deployment template for Azure Developer CLI (azd).
- Create a README file with instructions on how to test, run, and deploy the app.

    Note

    GitHub Copilot henüz ayarlamadıysanız, istemi göndermeden önce GitHub hesabınızda oturum açmanız ve Copilot ayarlamanız istenir. Copilot aboneliğiniz yoksa aylık tamamlama ve sohbet etkileşimleri sınırı sağlayan ücretsiz bir hesapla ilişkilendirildiniz.

  4. Görevinizi araştırdıktan sonra Plan temsilcisinin sorduğu açıklayıcı soruları yanıtlayın. Örneğin: React uygulaması için TypeScript mi yoksa JavaScript mi? Hangi stil yaklaşımı kullanılmalıdır? azd şablonu bir GitHub Actions CI/CD iş akışı içermeli mi?

  5. Oluşturulan planı gözden geçirin. Planınız şuna benzer:

    Plan: Vite + React To-Do SPA with Azure Deployment
A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
and deployed to Azure Static Web Apps (Free tier) via azd. 
No backend required — all state is client-side.
...

    Plan aracısı üst düzey bir özet, uygulama adımları ve doğrulama adımları oluşturur. Gereksinimlerinizi karşılayana kadar planı yinelemek için izleme istemleri gönderebilirsiniz.

Aracı modu

Aracı modu GitHub Copilot terminal komutlarını çalıştırma, dosya oluşturup düzenleme ve bir sorun oluştuğunda kendi kendine düzeltme olanağı sağlar. Üst düzey bir hedef sağlarsınız ve hangi adımların atılması gerektiğine aracı karar verir.

  1. Sohbet panelinde Claude Sonnet 4.6 modeli, Aracı modu ve Autopilot (Önizleme) seçeneğini belirleyin.

    • Varsayılan Auto modeli, Copilot’un her adım için en iyi modeli dinamik olarak seçmesini sağlar. Bu hızlı başlangıç için, daha deterministik davranış elde etmek ve Copilot’un planınızı uygularken attığı adımları daha öngörülebilir kılmak amacıyla Claude Sonnet 4.6 gibi belirli bir model kullanın.
    • Aracı modu ve otomatik pilot, Copilot terminal komutlarını çalıştırmasına ve dosya değişikliklerini otonom olarak yapmasına olanak sağlar. Autopilot modu, Copilot daha fazla giriş yapmanıza gerek kalmadan kendi kendini düzeltme ve yineleme olanağı sağlar. Daha fazla denetim tercih ediyorsanız, yürütülmeden önce her adımı onaylamak için varsayılan onaylar modunu seçin.

  2. Planı yürütme için aracı moduna teslim etmek için sohbet panelinde Uygulamayı Başlat'ı veya Autopilot ile Başlat'ı seçin. Autopilot modu, Copilot’un sizden ek bir girdi gerektirmeden yineleme yapabilmesini sağlar. Daha fazla denetim tercih ediyorsanız, yürütülmeden önce her adımı onaylamak için varsayılan onaylar modunu seçin.

Copilot uygulamayı tamamladığında, sohbet panelinde şuna benzer bir çıkış görürsünüz:

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

Uygulama artık belirtilen özelliklerle iskelesi oluşturulmuş ve Azure altyapı şablonu dağıtıma hazırdır. README dosyası, uygulamayı test etme ve dağıtma yönergelerini içerir. Azure dağıtmadan önce, beklendiği gibi çalıştığını onaylamak için uygulamayı yerel olarak test edin.

Uygulamayı test edin

Planlama modunda soruları nasıl yanıtladığınıza bağlı olarak, uygulamanızı yerel olarak test etme, uygulamaya bağlı olabilir. Yerel olarak test için README dosyasını gözden geçirin.

Uygulamanın planlama adımlarında oluşturulan bir Vite + React SPA olduğunu varsayarsak, geliştirme sunucusunu aşağıdaki komutla başlatın:

npm install && npm run dev

Komutu Vite geliştirme sunucusunu başlatır. Terminal çıkışı, uygulamanın çalıştığı localhost URL'sini içerir.

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

to-do uygulamasını tarayıcıda görmek için Bağlantı Noktaları sekmesinde, tarayıcınızda İletilen Adres bağlantı noktası URL'sini açın.

5173 numaralı bağlantı noktası için İletilen Adres URL'sinin vurgulandığı VS Code Bağlantı Noktaları sekmesinin ekran görüntüsü.

Her şeyin beklendiği gibi çalıştığını onaylamak için görevleri ekleyerek, geçiş yaparak ve kaldırarak işlevselliği test edin.

Tamamlanmış bir görev ve yeni görevler eklemek için bir giriş alanı ile kalan 3 görevden 2'sini gösteren To-Do uygulamasının ekran görüntüsü.

Testi tamamladığınızda terminale basarak Ctrl + C geliştirme sunucusunu durdurun.

Azure hizmetleri hakkında soru sorun

Artık çalışan bir uygulamanız olduğuna göre, aracıya hangi Azure hizmetlerinin uygulamayı barındırmak ve kalıcı veriler için depolama için uygun olacağını sorun.

Aşağıdaki istemi kopyalayıp yapıştırın:

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

Aracı, uygulamanızın mimarisini, veri depolama gereksinimlerini ve API desenlerini analiz etmek için Azure Becerileri'ni kullanarak to-do verilerinizi barındırmak için uygun bir Azure hizmeti önerir. Aracı maliyet, ölçeklenebilirlik, tümleştirme kolaylığı ve uygulamanın iş yüküne uygunluğu gibi faktörleri dikkate alır. Ajan ardından önerisini aşağıdaki örnekteki gibi açıklar:

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

Azure'a dağıtım yap

Uygulamayı yerel olarak test ettikten ve beklendiği gibi çalıştığını onayladıktan sonra bulutta çalıştığını görebilmeniz için Azure dağıtın.

  1. Dağıtım için azd kullandığınızdan, henüz yapmadıysanız terminalde Azure'da oturum açın. Çalıştır:

    azd auth login

  2. Uygulamayı Azure dağıtın.

    azd up

    İstendiğinde dağıtım için benzersiz bir ortam adı seçin. Bu ad, Azure bir kaynak grubu oluşturmak için kullanılır ve genel olarak benzersiz olmalıdır.

    İstendiğinde dağıtmak istediğiniz Azure aboneliği seçin.

azd up komutu infra/ klasöründe tanımlanan Azure kaynaklarını sağlar, uygulamayı derler ve Azure dağıtır. Terminal çıkışı, dağıtılan uygulamanızın URL'sini içerir.

Sorun giderme

Dağıtım başarısız olursa veya canlı site yerleşik üretim dosyalarına hizmet vermiyorsa, aracının dağıtımı otomatik olarak tanılamasını ve düzeltmesini sağlamak için aşağıdaki istemi kullanın.

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

Geliştirme sırasında sorunları ayıklamanıza yardımcı olması için GitHub Copilot kullanabilirsiniz. Hatayla karşılaşırsanız, hata çıkışını kopyalayıp sohbet penceresine yapıştırın ve aracıdan sorunu anlamanıza ve düzeltmenize yardımcı olmasını isteyin.

Dağıtılan kaynaklarınızı keşfedin

Uygulamaya tarayıcıda erişmek için terminal çıktısında veya GitHub Copilot sohbetinde yer alan dağıtılan uygulamanın URL'sini kullanın. Uygulamanıza gidin ve bulutta beklendiği gibi çalıştığını test edin. Her şeyin çalıştığını onaylamak için görevleri ekleyin, değiştirin ve kaldırın.

Azure Static Web Apps üzerinde dağıtılan To-Do web uygulamasının, iki tamamlanmış görev ve bir kalan görev içeren ekran görüntüsü.

Azure kaynaklarınızı doğrudan VS Code'da keşfedebilirsiniz.

  1. Etkinlik Çubuğu'ndaki Azure simgesini seçerek Azure görünümünü açın.
  2. Kaynaklar düğümünde, kaynakları kaynak gruplarına göre düzenlemek için Gruplandır simgesini seçin ve Kaynak Grubuna göre grupla seçeneğini belirleyin.
  3. Kaynaklar'ı genişletin ve tarafından azd upoluşturulan dağıtımın kaynak grubunu bulun.
  4. Web uygulamanızı barındıran App Service gibi dağıtılan hizmetleri ve tarafından azd upoluşturulan diğer kaynakları görmek için kaynak grubunu genişletin.
  5. Web uygulamasına sağ tıklayın ve dağıttığınız yapılacaklar uygulamasını açmak için Web Sitesine Göz At seçeneğini belirleyin veya kaynağı Azure portal'da ve dağıtım URL'sinde görmek için Portalda Görüntüle seçeneğini belirleyin.

Kaynakları temizle

Araştırmayı bitirdiğinizde ücret yansıtılmasını önlemek için Azure kaynaklarını silin:

azd down

Bu komut, kaynak grubu da dahil olmak üzere dağıtım sırasında oluşturulan tüm Azure kaynaklarını siler.

Sonraki Adımlar

El ile kod yazmadan, bir React to-do uygulamasını planlamak, temelini oluşturmak ve Azure’a dağıtmak için GitHub Copilot Plan modunu ve ajan modunu kullandınız. Öğrendiklerinin üzerine inşa etmeye devam et:

  • Son güncelleştirme: