Mulai cepat: Mengembangkan aplikasi Azure dengan AI yang dibantu agen

Dalam panduan mulai cepat ini, gunakan GitHub Copilot untuk membangun aplikasi daftar tugas React dan menerapkannya ke Azure App Service dengan pengembangan berbantuan AI. Saat mengembangkan secara lokal, mulailah dengan mode rencana Copilot untuk membuat rencana implementasi terperinci, lalu beralih ke mode agen untuk membangun dan menyebarkan. Saat menggunakan VS Code di web, gunakan mode agen sepanjang proses. Pada akhirnya, Anda memiliki pengalaman langsung dengan:

  • mode GitHub Copilot Plan untuk meneliti proyek Anda dan membuat rencana implementasi (pengembangan lokal)
  • Mode agen GitHub Copilot untuk membangun kerangka, mengonfigurasi, dan menerapkan aplikasi lengkap
  • Azure Skills untuk meningkatkan Copilot dengan pengetahuan dan alat khusus Azure
  • Aplikasi daftar tugas yang berjalan di Azure App Service
  • Titik akhir API untuk aplikasi to-do Anda
  • Azure Developer CLI (azd) untuk menyediakan dan menyebarkan sumber daya Azure dari templat infrastruktur

Mode rencana memungkinkan Copilot meneliti basis kode Anda dan membuat rencana implementasi terstruktur sebelum Anda menulis kode apa pun, memastikan persyaratan Anda jelas dan pendekatan Anda sehat. Mode agen memungkinkan Copilot menjalankan perintah secara otonom, mengedit file, dan melakukan iterasi pada kesalahan. Anda memberikan tujuan dan Copilot menentukan langkah-langkahnya.

Prasyarat

Tidak diperlukan penginstalan lokal. VS Code untuk Web (vscode.dev/azure) memberi Anda lingkungan VS Code berbasis browser dengan Azure Developer CLI, Node.js, dan beberapa ekstensi Azure yang telah diinstal sebelumnya.

Buat ruang kerja baru

  1. Buka vscode.dev/azure di browser Anda.

  2. Masuk dengan menggunakan akun Azure Anda saat diminta.

  3. Di jendela Terminal , buat direktori baru untuk proyek Anda, dan ubah ke dalamnya.

    mkdir todo-app && cd todo-app

Mengaktifkan keterampilan Azure

Azure Skills menyediakan keahlian Azure, alur kerja, dan panduan yang telah dikurasi untuk Copilot agar agen dapat membuat keputusan yang tepat tentang layanan, infrastruktur, dan penerapan Azure. Ekstensi AZURE MCP menginstal ekstensi pendamping yang membawa keterampilan Azure ke dalam Visual Studio Code. Bersama-sama mereka mengonfigurasi Azure MCP Server, Foundry MCP, dan lapisan keterampilan lengkap secara otomatis. Untuk informasi selengkapnya, lihat repositori Plugin Keterampilan Azure.

  1. Buka Palet Perintah.
  2. Pilih MCP: Daftar server.
  3. Jika server MCP Azure tidak berjalan, mulailah dengan memilih Azure MCP>Mulai server.

Merencanakan aplikasi Anda

mode Plan memungkinkan Copilot meneliti proyek Anda dan menghasilkan rencana implementasi terperinci sebelum menulis kode apa pun. Anda meninjau dan memperbaiki rencana, lalu menyerahkannya ke mode agen untuk eksekusi.

  1. Buka tampilan Copilot Chat dengan memilih ikon obrolan di Bilah Aktivitas.

  2. Masuk ke GitHub Copilot jika Anda belum melakukannya. Pilih tombol logo GitHub Copilot Sign-in di bilah status Visual Studio Code dan ikuti perintah untuk mengautentikasi dengan akun GitHub Anda.

  3. Pilih Plan dari menu tarik-turun agen di panel obrolan, atau ketik /plan lalu deskripsi tugas Anda.

    Salin dan tempel perintah berikut ke panel obrolan Copilot:

    /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

    Jika belum menyiapkan GitHub Copilot, Anda akan diminta untuk masuk ke akun GitHub anda dan menyiapkan Copilot sebelum dapat mengirim perintah. Jika Anda tidak memiliki langganan Copilot, Anda dikaitkan dengan akun gratis yang memberi Anda batas bulanan penyelesaian dan interaksi obrolan.

  4. Jawab pertanyaan klarifikasi yang diajukan agen Rencana setelah meneliti tugas Anda. Misalnya: TypeScript atau JavaScript untuk aplikasi React? Pendekatan gaya apa yang harus digunakan? Haruskah templat azd menyertakan alur kerja CI/CD GitHub Actions?

  5. Tinjau rencana yang dihasilkan. Rencana Anda terlihat seperti ini:

    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.
...

    Agen Rencana menghasilkan ringkasan tingkat tinggi, langkah-langkah implementasi, dan langkah-langkah verifikasi. Anda dapat mengajukan prompt lanjutan untuk melakukan iterasi pada rencana hingga sesuai dengan kebutuhan Anda.

Mode agen

Mode agen memberi GitHub Copilot kemampuan untuk menjalankan perintah terminal, membuat dan mengedit file, dan mengoreksi diri ketika terjadi kesalahan. Anda memberikan tujuan tingkat tinggi, dan agen memutuskan langkah-langkah apa yang harus diambil.

  1. Pilih model Claude Sonnet 4.6, mode Agent, dan Autopilot (Pratinjau) di panel chat.

    • Model Auto default memungkinkan Copilot memilih model terbaik untuk setiap langkah secara dinamis. Untuk mulai cepat ini, gunakan model tertentu seperti Claude Sonnet 4.6 untuk perilaku yang lebih deterministik sehingga langkah-langkah yang Copilot ambil untuk mengimplementasikan rencana Anda lebih dapat diprediksi.
    • Mode agen dan autopilot memungkinkan Copilot menjalankan perintah terminal dan membuat perubahan file secara otonom. Mode autopilot memberi Copilot kemampuan untuk mengoreksi diri sendiri dan melakukan iterasi tanpa memerlukan input lebih lanjut dari Anda. Jika Anda lebih suka kontrol, pilih mode persetujuan default untuk menyetujui setiap langkah sebelum dijalankan.

  2. Di panel obrolan, pilih Mulai Implementasi atau Mulai dengan Autopilot untuk menyerahkan rencana ke mode agen agar dijalankan. Mode autopilot memberi Copilot kemampuan untuk melakukan iterasi tanpa memerlukan input lebih lanjut dari Anda. Jika Anda lebih suka kontrol, pilih mode persetujuan default untuk menyetujui setiap langkah sebelum dijalankan.

Ketika Copilot menyelesaikan implementasi, Anda akan melihat output di panel obrolan yang mirip dengan ini:

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.

Aplikasi ini sekarang telah dibuatkan kerangka awal dengan fitur yang ditentukan, dan templat infrastruktur Azure siap untuk diterapkan. File README menyertakan instruksi tentang cara menguji dan menyebarkan aplikasi. Sebelum menyebarkan ke Azure, uji aplikasi secara lokal untuk mengonfirmasi bahwa aplikasi berfungsi seperti yang diharapkan.

Uji aplikasi

Bergantung pada cara Anda menjawab pertanyaan selama mode perencanaan, menguji aplikasi Anda secara lokal mungkin bergantung pada implementasinya. Tinjau file README untuk pengujian secara lokal.

Dengan asumsi aplikasi adalah Vite + React SPA seperti yang dihasilkan dalam langkah-langkah perencanaan, mulai server pengembangan dengan perintah berikut:

npm install && npm run dev

Perintah memulai server pengembangan Vite. Output terminal mencakup URL localhost tempat aplikasi berjalan.

  VITE v5.4.21  ready in 271 ms

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

Di tab Ports, buka URL port Alamat yang Diteruskan di peramban Anda untuk melihat aplikasi to-do tersebut.

Cuplikan layar tab Ports VS Code dengan URL alamat penerusan untuk port 5173 yang disorot.

Uji fungsionalitas dengan menambahkan, beralih, dan menghapus tugas untuk mengonfirmasi semuanya berfungsi seperti yang diharapkan.

Cuplikan layar aplikasi To-Do memperlihatkan 2 dari 3 tugas yang tersisa dengan satu tugas yang selesai dan bidang input untuk menambahkan tugas baru.

Setelah selesai menguji, hentikan server pengembangan dengan menekan Ctrl + C di terminal.

Tanyakan tentang layanan Azure

Sekarang setelah Anda memiliki aplikasi yang berfungsi, tanyakan kepada agen tentang layanan Azure mana yang cocok untuk menghosting aplikasi dan penyimpanan untuk data persisten.

Salin dan tempel perintah berikut:

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

Agen ini menggunakan Azure Skills untuk menganalisis arsitektur, kebutuhan penyimpanan data, dan pola API aplikasi Anda untuk merekomendasikan layanan Azure yang sesuai untuk menghosting data to-do Anda. Agen mempertimbangkan faktor-faktor seperti biaya, skalabilitas, kemudahan integrasi, dan kesesuaian untuk beban kerja aplikasi. Agen kemudian menjelaskan rekomendasinya seperti contoh berikut:

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.
...

Sebarkan ke Azure

Setelah menguji aplikasi secara lokal dan mengonfirmasinya berfungsi seperti yang diharapkan, sebarkan ke Azure sehingga Anda dapat melihatnya berjalan di cloud.

  1. Karena Anda menggunakan azd untuk menyebarkan, masuk ke Azure di terminal jika Anda belum melakukannya. Menjalankan:

    azd auth login

  2. Sebarkan aplikasi ke Azure.

    azd up

    Pilih Nama lingkungan unik untuk penyebaran saat diminta. Nama ini digunakan untuk membuat grup sumber daya di Azure dan harus unik secara global.

    Pilih langganan Azure yang ingin Anda sebarkan saat diminta.

Perintah azd up menyediakan sumber daya Azure yang ditentukan dalam folder infra/, membangun aplikasi, dan menyebarkannya ke Azure. Output terminal mencakup URL aplikasi yang Anda sebarkan.

Troubleshooting

Jika penyebaran gagal atau situs langsung tidak melayani file produksi bawaan, gunakan perintah berikut untuk meminta agen mendiagnosis dan memperbaiki penyebaran secara otomatis.

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.

Selama pengembangan, Anda dapat menggunakan GitHub Copilot untuk membantu Anda men-debug masalah. Jika Anda mengalami kesalahan, salin dan tempel output kesalahan di jendela obrolan dan minta agen untuk membantu Anda memahami dan memperbaiki masalah.

Jelajahi sumber daya yang telah Anda deploy

Gunakan URL aplikasi yang telah di-deploy dari output terminal atau obrolan GitHub Copilot untuk mengaksesnya melalui browser. Buka aplikasi Anda dan uji bahwa aplikasi berfungsi seperti yang diharapkan di cloud. Tambahkan, alihkan, dan hapus tugas untuk mengonfirmasi semuanya berfungsi.

Screenshot aplikasi web To-Do yang disebarkan pada Azure Static Web Apps dengan dua tugas yang selesai dan satu tugas yang tersisa.

Anda dapat menjelajahi sumber daya Azure langsung di Visual Studio Code.

  1. Buka tampilan Azure dengan memilih ikon Azure di Bilah Aktivitas.
  2. Pada simpul Sumber Daya, pilih ikon Kelompokkan menurut dan pilih Kelompokkan menurut Grup Sumber Daya untuk menata sumber daya menurut grup sumber daya mereka.
  3. Perluas Sumber Daya dan temukan grup sumber daya untuk penyebaran yang dibuat oleh azd up.
  4. Perluas grup sumber daya untuk melihat layanan yang disebarkan, seperti App Service yang menghosting aplikasi web Anda dan sumber daya lain yang dibuat oleh azd up.
  5. Klik kanan aplikasi web dan pilih Browse Website untuk membuka aplikasi to-do yang disebarkan atau pilih Tampilkan di Portal untuk melihat sumber daya di portal Azure dan URL penyebaran.

Membersihkan sumber daya

Setelah selesai menjelajahi, hapus sumber daya Azure untuk menghindari dikenakan biaya:

azd down

Perintah ini menghapus semua sumber daya Azure yang dibuat selama penyebaran, termasuk grup sumber daya.

Langkah berikutnya

Anda menggunakan mode Plan dan mode Agent GitHub Copilot untuk merencanakan, menyiapkan kerangka awal, dan menyebarkan aplikasi to-do React ke Azure tanpa menulis kode secara manual. Lanjutkan membangun apa yang Anda pelajari:

  • Terakhir diperbarui pada