Bagikan melalui


Membuat aplikasi Django dan PostgreSQL dan menyebarkan ke Azure

Artikel ini memandu Anda dalam cara berinteraksi dengan GitHub Copilot untuk menghasilkan aplikasi web Django lokal yang melakukan operasi CRUD pada database PostgreSQL. Selanjutnya, ini memandu Anda dalam cara berinteraksi dengan GitHub Copilot for Azure untuk menyebarkan aplikasi web dan database ke Azure App Service dan Azure PostgreSQL Flexible Server (bersama dengan beberapa layanan Azure pendukung).

Aplikasi spesifik yang Anda buat adalah aplikasi manajemen kontak sepele yang menampilkan operasi CRUD dengan arsitektur gaya daftar detail.

Nota

Menggunakan Model Bahasa Besar (LLM) untuk menghasilkan aplikasi dapat menghasilkan hasil yang tidak konsisten. Hasil Anda bergantung pada model LLM, instruksi Anda, dan banyak lagi. Fokus dari panduan ini adalah untuk membantu Anda memahami cara mendapatkan hasil yang lebih baik. Namun setiap kali Anda melalui contoh ini, Anda mendapatkan (berpotensi) hasil yang berbeda secara dramatis.

Prasyarat

Penting

GitHub Copilot adalah langganan terpisah yang dikelola oleh GitHub. Untuk pertanyaan mengenai langganan dan Dukungan GitHub Copilot, lihat Mulai menggunakan paket GitHub Copilot.

Menyiapkan sesi obrolan

  1. Di Visual Studio Code, gunakan tombol Alihkan Obrolan di bilah judul atau pilih Ctrl+Alt+i untuk membuka Jendela Obrolan. Gunakan ikon Obrolan Baru untuk membuat sesi obrolan baru.

  2. Di area obrolan, pilih Agent mode. Pada saat penulisan ini, Claude Sonnet 4 menghasilkan hasil terbaik. Gunakan model terbaik yang tersedia untuk pembuatan kode.

Memvalidasi konfigurasi Anda

Pastikan alat CLI dan Visual Studio Code Anda diperbarui, dikonfigurasi dengan benar, dan beroperasi dengan benar untuk meningkatkan hasil Anda.

  1. Di obrolan baru, masukkan perintah berikut:

    
    I want to create a new Django website that stores data in PostgreSQL. Then, I'll want
    to deploy that new website to Azure. Do I have everything installed on my local 
    computer that you will need to perform these tasks?
    
    

    GitHub Copilot akan meminta izin untuk menjalankan serangkaian pemeriksaan baris perintah untuk memastikan Anda memiliki alat, serta versi terbaru alat tersebut, yang terinstal.

  2. Di terminal Anda, perbarui Azure CLI dengan perintah az --upgrade.

  3. Di terminal Anda, instal ekstensi tanpa kata sandi konektor layanan untuk Azure CLI dengan perintah az extension add --name serviceconnector-passwordless --upgrade

  4. Di Visual Studio Code, atur terminal default ke Git Bash. Buka Pengaturan Preferensi > File>, lalu di "Pengaturan pencarian", ketik "Profil Default: Windows" dan pilih "Git Bash". Anda mungkin perlu memulai ulang Visual Studio Code agar pengaturan ini berlaku.

    Nota

    Menggunakan Git Bash tidak benar-benar diperlukan, tetapi pada saat penulisan ini, git Bash memberikan hasil terbaik.

  5. Di Visual Studio Code, gunakan ekstensi PostgreSQL untuk Visual Studio Code (Pratinjau) dan navigasikan ke contacts database.

  6. Di Visual Studio Code, gunakan ekstensi Azure dan pastikan Anda masuk ke akun dan langganan Azure Anda. Saat Anda membuka ekstensi Azure di bilah sisi utama, Anda akan dapat melihat langganan dan sumber daya yang ada.

  7. Buat folder baru untuk file aplikasi baru Anda dan buka di Visual Studio Code sebagai ruang kerja Anda.

Menyiapkan database lokal

Meskipun GitHub Copilot mampu melakukan hampir semua tugas pengembangan aplikasi yang biasanya dilakukan pengembang, Anda akan mendapatkan hasil terbaik jika Anda mengambil beberapa tugas dalam langkah-langkah yang lebih kecil. Untuk meningkatkan hasil, buat database dan siapkan autentikasi dan otorisasi sebelum bekerja dengan GitHub Copilot.

  1. Buat obrolan baru, dan gunakan perintah berikut:

    
    On my PostgreSQL server localhost, please create a new database named 'contacts'.
    
    Then create a new user <db-username> with password `<password>` and give that 
    user full rights (create tables and other db objects, CRUD data) to the new 
    contacts database.
    
    Please do the work, and only prompt me when you are unable to do it yourself.
    
    

    Ganti <db-username> dan <password> dengan nama pengguna dan kata sandi database yang Anda inginkan.

  2. Pada komputer Windows, praktik terbaik keamanan yang direkomendasikan adalah menyimpan nama pengguna dan kata sandi database dalam file lokal:

    %APPDATA%\postgresql\pgpass.conf

    Ini biasanya akan menyelesaikan lokasi berikut di hard drive Anda:

    c:\Users\<username>\AppSettings\Roaming\postgresql\pgpass.conf

    Ganti <username> dengan nama pengguna Windows Anda.

    File harus menggunakan format berikut:

    localhost:5432:<database-name>:<database-user>:<password>
    

    Ini mengasumsikan Anda bekerja dengan instans PostgreSQL di komputer lokal Anda, dan dihosting di port default (5432).

    Ganti <database-name> dengan contacts dan ganti <db-username> dan <password> dengan kredensial yang Anda gunakan di langkah sebelumnya.

    Untuk informasi selengkapnya tentang file, pgpass.conf lihat dokumentasi PostgreSQL.

  3. Tambahkan jalur ke file ke pgpass.conf dalam variabel lingkungan PATH Anda.

  4. Uji koneksi untuk memastikan bahwa koneksi berfungsi. Gunakan PSQL CLI untuk mengujinya dengan perintah berikut:

    psql -h localhost -U <db-username> -d contacts
    

    Ganti <db-username> dengan segmen nama pengguna database dalam pgpass.conf file.

    pgpass.conf Jika tidak disiapkan dengan benar, Anda akan melihat permintaan untuk mengetik kata sandi Anda.

Membuat aplikasi menggunakan GitHub Copilot

Pertama, Anda memberikan instruksi dan panduan tentang membangun dan menguji aplikasi di komputer lokal Anda.

  1. Di Visual Studio Code, gunakan tombol Alihkan Obrolan di bilah judul untuk membuka Jendela Obrolan. Gunakan ikon Obrolan Baru untuk membuat sesi obrolan baru.

  2. Di area obrolan, pilih Agent mode. Pada saat penulisan ini, Claude Sonnet 4 menghasilkan hasil terbaik. Gunakan model terbaik yang tersedia untuk pembuatan kode.

  3. Gunakan perintah berikut untuk memulai pembuatan aplikasi:

    
    I want you to create a simple Contact Manager application using Django and PostgreSQL. 
    
    This should be a CRUD application, so create web pages that display a list of 
    contacts, view details, add a new contact, edit or delete a contact. Each Contact 
    is comprised of a contact's Name, Address, and Phone number. Since this is a 
    Python / Django project please make sure to work inside of a virtual environment (venv). 
    I've already created a PostgreSQL database at `localhost` named `contacts`. There are 
    no tables yet. For local development in PostgreSQL, I'm using a `pgpass.conf` file 
    and I have tested that it works. Prefer Git Bash in the terminal. Beyond that, if there's 
    anything I need to do, please include instructions. But I want you to do as much as 
    you can on your own.
    
    

    Perintah memiliki fitur berikut:

    • Jenis aplikasi yang ingin Anda buat. Dalam hal ini, aplikasi manajemen kontak.
    • Teknologi yang digunakan. Dalam hal ini, Django dan PostgreSQL.
    • Arsitektur situs yang ingin Anda hasilkan. Dalam hal ini, aplikasi gaya CRUD yang menampilkan halaman yang mencantumkan semua kontak dan memungkinkan Anda menelusuri paling detail kontak tertentu.
    • Detail selengkapnya tentang domain masalah. Dalam hal ini, Anda menyediakan bidang data yang anda inginkan untuk dikelola aplikasi, termasuk nama kontak, alamat, dan nomor telepon.
    • Instruksi khusus mengenai database. Dalam hal ini, Anda menginstruksikan GitHub Copilot untuk menggunakan database tertentu yang sudah Anda buat, Anda menyediakan status database, dan cara berinteraksi
    • Instruksi khusus tentang lingkungan. Dalam hal ini, Anda menginstruksikannya untuk menggunakan Git Bash. Anda juga mengatakan bahwa Anda ingin pekerjaan dilakukan di lingkungan Python (venv), yang merupakan praktik terbaik. GitHub Copilot mungkin memilih opsi ini sendiri, tetapi menyatakannya secara eksplisit membuat proses berjalan lancar.
    • Ekspektasi eksplisit bahwa Anda ingin itu melakukan pekerjaannya sendiri sekemampuannya. Jika tidak, GitHub Copilot mungkin memberikan instruksi yang harus Anda ambil.
    • Ekspektasi eksplisit untuk instruksi/konteks. Jika perlu Anda melakukan tindakan lain, Anda menetapkan harapan bahwa Anda membutuhkannya untuk membantu Anda dengan memberikan instruksi dan panduan.

    Penting

    Saat GitHub Copilot menggunakan terminal untuk membuat lingkungan virtual baru, Visual Studio Code mendeteksi venv dan menampilkan dialog yang menanyakan apakah Anda ingin menggunakannya. Abaikan dialog tersebut. Itu akan hilang. Izinkan GitHub Copilot untuk menggunakan terminal secara eksklusif untuk operasi ini.

    GitHub Copilot menggunakan terminal bawaan dan lingkungan Visual Studio Code untuk:

    • Membuat lingkungan virtual Python
    • Menginstal pustaka dan dependensi lainnya
    • Membuat file kode
    • Membuat tabel database
    • Buat file readme untuk instruksi lebih lanjut
    • Membuat data pengujian
    • Meluncurkan server web lokal
    • Menguji situs web (menggunakan Browser Sederhana atau curl)

    Karena bagaimana LLM menghasilkan kode, perintah yang digunakannya dan apa yang dihasilkannya berbeda setiap kali.

Menyebarkan ke Azure dengan GitHub Copilot untuk Azure

Setelah GitHub Copilot menghasilkan situs secara lokal, Anda akan menulis permintaan yang meminta GitHub Copilot untuk membuat perubahan pada situs sebagai persiapan untuk penyebaran, lalu untuk melakukan penyebaran. Ekstensi GitHub Copilot for Azure menangani permintaan ini dengan membuat file Bicep lalu menjalankan file tersebut azd menggunakan CLI.

Gunakan perintah berikut ... Anda dapat menyalinnya ke Notepad dan mengubah nilai apa pun dalam tanda kurung seperti <resource-group-name> dan <region-name>, kemudian menyalin dan menempelkannya ke chat GitHub Copilot.


Please help me deploy this Django app to Azure. 

First, create and use a Resource Group named "<resource-group-name>" in the "<region-name>" region.

Second, create an Azure App Service for the Django app in the new "<resource-group-name>" in the "<region-name>" region.

Third, create a new Azure Database for PostgreSQL flexible server named "<server-name>" in a resource group named "<resource-group-name>" in my subscription "<subscription-id>". Use my current account ("<account-id>") as the Microsoft Entra administrator. For the PostgreSQL "Administrator login", use "<azure-database-username>" and password "<azure-database-password>". Use a "development" class database configuration in the "<region-name>" region. Create a new database named "contact_manager_db" and migrate all tables and data from the local version of "contact_manager_db". The local database uses the username "<local-database-username>" and password "<local-database-password>". Add my IP address as a firewall rule, allow public access to this resource through the internet using a public IP address, and allow public access from any Azure service within Azure to this server.

Fourth, use Service Connector (and any other services you need to make this configuration work successfully) to connect the web app to the database. You may need to modify the application code to accommodate Service Connector. Also, please ensure a secure connection between the Azure App Service web site and the Azure PostgreSQL Flexible Server.

Please choose the least expensive options.  

If you are prompted for an environment, use the name "contacts-env". Configure my firewall to allow my IP address. Beyond that, if there's anything 
I need to do, please include instructions. But I want you to do as much as you can on your own.

Before you start: 

- Do you have any questions that need to be clarified? 
- Please create a plan for deployment in the form of a TODO list, and then update the TODO list as you progress. Do not start until I have a chance to review your plan and tell you to proceed.

Perintah memiliki fitur berikut:

  • Layanan tertentu yang ingin Anda gunakan. Dalam hal ini, Anda memberi tahu bahwa Anda ingin menggunakan Azure App Service, Azure PostgreSQL Flexible Server, Service Connector. Anda juga memberikan instruksi untuk "melakukan apa pun yang perlu Anda lakukan" untuk memastikannya berfungsi.
  • Opsi layanan tertentu. Dalam hal ini, Anda menunjukkan bahwa Anda ingin menggunakan opsi paling murah yang mungkin untuk setiap layanan.
  • Petunjuk kemungkinan langkah berikutnya. Dalam hal ini, Anda menyarankan bahwa beberapa modifikasi kode diperlukan untuk menggunakan Konektor Layanan.
  • Mengantisipasi keputusan sebelumnya. Dalam hal ini, Anda memberikan jawaban atas pengaturan yang dibutuhkannya, seperti nama lingkungan untuk azd,
  • Ekspektasi eksplisit bahwa Anda ingin itu melakukan pekerjaan sendiri. Jika tidak, ini mungkin memberikan instruksi yang harus Anda ambil.
  • Ekspektasi eksplisit untuk instruksi/konteks. Atur harapan bahwa Anda memerlukan bantuan dan panduan saat meminta Anda untuk mengambil tindakan.
  • Menanyakan apakah ada klarifikasi yang diperlukan. Ini sering muncul potensi masalah seperti kasus tepi atau instruksi yang tidak jelas.
  • Meminta paket dengan daftar TODO. Memberi Anda keyakinan bahwa GitHub Copilot untuk Azure memahami penugasan dan rencana untuk melaksanakannya seperti yang Anda inginkan.

GitHub Copilot menggunakan terminal bawaan dan lingkungan Visual Studio Code untuk:

  • Memperbarui file kode untuk mengakomodasi Konektor Layanan
  • Menghasilkan file Bicep
  • azd Menjalankan CLI
  • Menguji penyebaran
  • Jika perlu, debug penyebaran menggunakan log atau output lainnya

Berinteraksi dengan GitHub Copilot

GitHub Copilot memerlukan input Anda sebelum melakukan banyak tugas. Jeda input adalah kesempatan Anda untuk mengarahkan GitHub Copilot ke kursus yang benar untuk mencegah kesalahan atau menyesuaikan output yang dihasilkan dengan preferensi Anda.

Saat berfungsi, Anda dapat menonton dan menyetujui sebagian besar pertanyaan yang diajukannya kepada Anda menggunakan tombol Continue .

Penting

Jika Anda mendapatkan hasil yang tidak terduga, mulai ulang menggunakan sesi obrolan baru.

Terkadang, Anda diharuskan untuk memberikan input. Ada beberapa momen berbeda saat Anda dimintai input:

  • Kredensial pengguna - Jika operasi saat ini di terminal memerlukan nama pengguna atau kata sandi, Anda akan dimintai informasi ini.
  • Momen keputusan - Terkadang, GitHub Copilot memberi Anda beberapa opsi dalam daftar dan bertanya mana yang Anda sukai.
  • Palet Perintah - Terkadang, GitHub Copilot menggunakan fitur ekstensi dan opsi ditampilkan di Palet Perintah. Setelah Anda membuat pilihan yang tepat, GitHub Copilot melanjutkan.
  • Login interaktif - Azure CLI dan azd CLI mengharuskan Anda untuk mengautentikasi, dan memulai salah satu dari beberapa mekanisme autentikasi.

Menguji dan meminta perubahan

Ketika GitHub Copilot selesai, ada kemungkinan bahwa itu menganggap situs selesai dan fungsional. Namun, pengujian Anda mungkin menemukan masalah, atau fitur aplikasi yang tidak terduga/tidak diinginkan.

Gunakan perintah yang menjelaskan masalah dengan detail sebanyak mungkin. Misalnya, jika aplikasi tidak berfungsi, berikan informasi sebanyak mungkin, termasuk pesan kesalahan yang tepat dan hasil yang diharapkan.

Mengganggu alur

Terkadang, Anda mungkin melihat bahwa GitHub Copilot terjebak dalam perulangan yang mencoba melakukan tugas yang sama berulang kali atau terjebak dalam proses yang tidak pernah kembali. Misalnya, saat mendiagnosis masalah dengan situs web, GitHub Copilot mungkin ingin menjalankan perintah seperti:

az webapp log tail

Ketika GitHub Copilot macet, Anda dapat mengganggu GitHub Copilot dengan salah satu dari beberapa cara:

  • Ctrl+C
  • Gunakan tombol jeda di obrolan
  • Mengakhiri sesi obrolan dan memulai obrolan baru

Penting

Mengakhiri sesi obrolan menghancurkan semua konteks yang dibangun selama sesi, yang mungkin atau mungkin tidak diinginkan.

Untuk memberikan konteksnya pada apa yang baru saja terjadi, dan mendorongnya menuju solusi yang mungkin, Anda dapat menambahkan perintah segera setelah mengganggu GitHub Copilot seperti:

You were just getting the logs from Azure App Service but it did not return 
so you got stuck. Try to interrupt after a minute once you get what you need 
from the logs.

Langkah selanjutnya