Mulai cepat: Membuat aplikasi web Python dengan Visual Studio

Dalam mulai cepat ini, Anda membuat aplikasi web Python berdasarkan kerangka kerja Flask di Visual Studio. Anda membuat proyek melalui langkah-langkah diskrit yang membantu Anda mempelajari fitur dasar Visual Studio. Jelajahi cara membuat item proyek, menambahkan kode, dan menjalankan aplikasi.

Jika Anda perlu menginstal Visual Studio, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis. Di alat penginstal, pilih beban kerja pengembangan Python.

Jika Anda perlu menginstal Visual Studio, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis. Di Penginstal Visual Studio, pilih beban kerja pengembangan Python, dan di detail penginstalan, pilih dukungan web Python.

Cuplikan layar Alat Penginstal Visual Studio dengan beban kerja pengembangan Python dan dukungan web Python dipilih.

Membuat proyek

Langkah-langkah berikut membuat proyek kosong yang berfungsi sebagai kontainer untuk aplikasi.

  1. Buka Visual Studio. Pada layar mulai, pilih Buat proyek baru.

  2. Dalam dialog Buat proyek baru, masukkan web Python di kotak pencarian. Dalam daftar hasil, pilih Proyek Web, lalu pilih Berikutnya.

    Cuplikan layar yang memperlihatkan cara membuat Proyek Web Python baru di Visual Studio 2019.

    Cuplikan layar yang memperlihatkan cara membuat Proyek Web Python baru di Visual Studio.

    Jika Anda tidak melihat templat proyek Python, jalankan Penginstal Visual Studio. Di Alat Penginstal, pilih Modifikasi Lainnya>, pilih beban kerja pengembangan Python, lalu pilih Ubah.

    Cuplikan layar yang memperlihatkan cara memilih beban kerja pengembangan Python di Penginstal Visual Studio.

    Jika Anda tidak melihat templat proyek web Python, pilih Alat>Dapatkan Alat dan Fitur untuk menjalankan Penginstal Visual Studio. Di alat penginstal, pilih beban kerja pengembangan Python. Di bawah Detail penginstalan, pilih dukungan web Python, lalu pilih Ubah.

  3. Dalam dialog Konfigurasikan proyek baru Anda, masukkan HelloPython untuk nama Proyek, tentukan Lokasi proyek, dan pilih Buat.

    Cuplikan layar yang memperlihatkan cara mengonfigurasi pengaturan untuk Proyek Web Python baru di Visual Studio 2019.

    Cuplikan layar yang memperlihatkan cara mengonfigurasi pengaturan untuk Proyek Web Python baru di Visual Studio 2022.

    Proyek baru terbuka di Penjelajah Solusi. Nama Solusi secara otomatis diatur agar sesuai dengan nama Proyek. Proyek baru kosong karena tidak berisi file apa pun.

    Cuplikan layar yang memperlihatkan Proyek Web Python kosong yang baru dibuat di Penjelajah Solusi.

    Cuplikan layar yang memperlihatkan Proyek Web Python kosong yang baru dibuat di Penjelajah Solusi.

Proyek dan solusi di Visual Studio

Ada keuntungan untuk membuat proyek di Visual Studio untuk aplikasi Python. Aplikasi Python biasanya didefinisikan dengan hanya menggunakan folder dan file, tetapi struktur sederhana ini dapat menjadi beban saat aplikasi tumbuh lebih besar. Aplikasi dapat melibatkan file yang dibuat secara otomatis, JavaScript untuk aplikasi web, dan komponen lainnya. Proyek Visual Studio membantu mengelola kerumitan ini.

Proyek ini diidentifikasi dengan .pyproj file, yang mengidentifikasi semua file sumber dan konten yang terkait dengan proyek Anda. File .pyproj berisi informasi build untuk setiap file, mempertahankan informasi untuk diintegrasikan dengan sistem kontrol sumber, dan membantu mengatur aplikasi Anda ke dalam komponen logis.

Solusi Visual Studio adalah kontainer yang membantu Anda mengelola satu atau beberapa proyek terkait sebagai grup. Visual Studio menampilkan solusi Anda di Penjelajah Solusi. Solusi ini menyimpan pengaturan konfigurasi yang tidak spesifik untuk proyek. Proyek dalam solusi juga dapat mereferensikan satu dengan yang lain. Misalnya, menjalankan proyek aplikasi Python dapat secara otomatis membangun proyek kedua, seperti ekstensi C++ yang digunakan aplikasi Python.

Menginstal pustaka Flask

Aplikasi web di Python hampir selalu menggunakan salah satu dari banyak pustaka Python yang tersedia untuk menangani detail tingkat rendah seperti permintaan web perutean dan respons pembentukan. Visual Studio menyediakan banyak templat untuk aplikasi web. Anda membuat proyek dari salah satu templat ini nanti di Mulai Cepat ini.

Gunakan langkah-langkah berikut untuk menginstal pustaka Flask ke lingkungan global default yang digunakan Visual Studio untuk proyek ini.

  1. Perluas simpul Lingkungan Python dalam proyek untuk melihat lingkungan default untuk proyek.

    Cuplikan layar Penjelajah Solusi memperlihatkan lingkungan default di Visual Studio 2019.

    Cuplikan layar yang memperlihatkan lingkungan default di Penjelajah Solusi di Visual Studio 2022.

  2. Klik kanan lingkungan dan pilih Kelola Paket Python. Perintah ini membuka jendela Lingkungan Python pada tab Paket (PyPI).

  3. Masukkan flask di bidang pencarian.

    • Jika perintah Flask muncul di bawah kotak pencarian, maka Flask sudah ada di sistem. Lanjutkan ke langkah berikutnya.

    • Jika perintah Flask tidak muncul di bawah kotak pencarian, pilih Jalankan perintah: pip install flask.

      Cuplikan layar yang memperlihatkan cara menginstal pustaka Flask dengan menggunakan penginstalan pip di Visual Studio 2019.

      Cuplikan layar yang memperlihatkan cara menginstal pustaka Flask dengan menggunakan penginstalan pip di Visual Studio 2022.

      Perintah elevasi muncul jika folder paket lingkungan global berada di area yang dilindungi seperti C:\Program Files. Terima permintaan apa pun untuk hak istimewa administrator. Anda dapat mengamati jendela Output Visual Studio untuk kemajuan.

  4. Setelah Anda menginstal Flask, pustaka muncul di lingkungan di Penjelajah Solusi. Anda sekarang dapat menggunakan perintah Flask dalam kode Python Anda.

    Cuplikan layar yang memperlihatkan pustaka Flask terinstal dan ada di Penjelajah Solusi di Visual Studio 2019.

    Cuplikan layar yang memperlihatkan pustaka Flask terinstal dan ada di Penjelajah Solusi di Visual Studio 2022.

Catatan

Alih-alih menginstal pustaka di lingkungan global, pengembang biasanya membuat lingkungan virtual untuk menginstal pustaka untuk proyek tertentu. Templat Visual Studio biasanya menawarkan opsi ini, seperti yang dijelaskan dalam Mulai Cepat - Membuat proyek Python menggunakan templat.

Untuk informasi selengkapnya tentang paket Python lain yang tersedia, lihat Indeks Paket Python.

Menambahkan file kode

Anda sekarang siap untuk menambahkan beberapa kode Python untuk mengimplementasikan aplikasi web minimal.

  1. Klik kanan proyek di Penjelajah Solusi dan pilih Tambahkan>Item Baru.

  2. Dalam dialog Tambahkan Item Baru, pilih opsi File Python Kosong.

  3. Masukkan nama file app.py, dan pilih Tambahkan. Visual Studio secara otomatis membuka file di jendela editor.

  4. Salin kode berikut dan tempelkan ke app.py dalam file:

    from flask import Flask
    
    # Create an instance of the Flask class that is the WSGI application.
    # The first argument is the name of the application module or package,
    # typically __name__ when using a single module.
    app = Flask(__name__)
    
    # Flask route decorators map / and /hello to the hello function.
    # To add other resources, create functions that generate the page contents
    # and add decorators to define the appropriate resource locators for them.
    
    @app.route('/')
    @app.route('/hello')
    def hello():
       # Render the page
       return "Hello Python!"
    
    if __name__ == '__main__':
       # Run the app server on localhost:4449
       app.run('localhost', 4449)
    
    

Dialog Tambahkan Item Baru menampilkan banyak jenis file lain yang dapat Anda tambahkan ke proyek Python, seperti kelas Python, paket Python, pengujian unit Python, atau web.config file. Secara umum, templat item ini adalah cara yang bagus untuk membuat file dengan cepat dengan kode boilerplate yang berguna.

Untuk informasi selengkapnya tentang Flask, lihat Mulai Cepat Flask.

Jalankan aplikasi

Ikuti langkah-langkah berikut untuk menjalankan aplikasi web Anda:

  1. Di Penjelajah Solusi, klik app.py kanan file dan pilih Atur sebagai File Startup. Perintah ini mengidentifikasi file kode yang akan diluncurkan di Python saat menjalankan aplikasi.

    Cuplikan layar yang memperlihatkan cara mengatur file startup untuk proyek di Penjelajah Solusi di Visual Studio 2019.

    Cuplikan layar yang memperlihatkan cara mengatur file startup untuk proyek di Penjelajah Solusi di Visual Studio 2022.

  2. Klik kanan proyek di Penjelajah Solusi lalu klik Properti.

  3. Dalam dialog Properti, pada tab Debug, atur properti Nomor Port ke 4449. Pengaturan ini memastikan bahwa Visual Studio meluncurkan browser dengan localhost:4449 untuk mencocokkan app.run argumen dalam kode.

  4. Di Visual Studio, pilih Debug>Mulai Tanpa Penelusuran Kesalahan atau pilih Ctrl+F5, yang menyimpan perubahan ke file Anda dan menjalankan aplikasi.

    Jendela perintah terbuka dan menampilkan pesan **Berjalan di https://localhost:4449**. Jendela browser terbuka untuk localhost:4449 dan menampilkan pesan Halo, Python!. Permintaan GET juga muncul di jendela perintah dengan status 200.

    Jika browser tidak terbuka secara otomatis, buka browser pilihan Anda dan buka localhost:4449.

    Jika Anda hanya melihat shell interaktif Python di jendela perintah, atau jika jendela tersebut berkedip di layar secara singkat, pastikan app.py file diatur sebagai file startup.

  5. Di jendela browser, buka untuk localhost:4449/hello menguji bahwa dekorator untuk /hello sumber daya juga berfungsi.

    Sekali lagi, GET permintaan muncul di jendela perintah dengan status 200.

    Coba juga beberapa URL lain untuk melihat bahwa URL tersebut menampilkan 404 kode status di jendela perintah.

  6. Tutup jendela perintah untuk menghentikan aplikasi, lalu tutup jendela browser.

Mulai dengan atau tanpa penelusuran kesalahan

Anda dapat menjalankan aplikasi dengan atau tanpa mengaktifkan penelusuran kesalahan. Berikut adalah perbedaan antara opsi ini:

  • Perintah Mulai Penelusuran Kesalahan menjalankan aplikasi dalam konteks debugger Visual Studio. Dengan debugger, Anda dapat mengatur titik henti, memeriksa variabel, dan menelusuri baris kode Anda menurut baris. Aplikasi mungkin berjalan lebih lambat di debugger karena kait yang memungkinkan penelusuran kesalahan.

  • Gunakan perintah Mulai Tanpa Penelusuran Kesalahan untuk menjalankan aplikasi secara langsung tanpa konteks penelusuran kesalahan, mirip dengan menjalankan aplikasi dari baris perintah. Perintah ini juga secara otomatis meluncurkan browser dan membuka URL yang ditentukan di tab Debug Properti>proyek.