Tutorial: Bekerja dengan kerangka kerja web Flask di Visual Studio

Artikel ini adalah Langkah pertama dalam seri tutorial tiga bagian yang menunjukkan cara bekerja dengan Flask di Visual Studio. Flask adalah kerangka kerja Python ringan untuk aplikasi web yang menyediakan dasar-dasar untuk perutean URL dan penyajian halaman. Flask disebut kerangka kerja "mikro" karena tidak secara langsung menyediakan fitur seperti validasi formulir, abstraksi database, autentikasi, dan sebagainya. Fitur-fitur ini sebagai gantinya disediakan oleh paket Python khusus yang disebut Flask ekstensi. Ekstensi berintegrasi secara mulus dengan Flask dan muncul seolah-olah mereka adalah bagian dari Flask itu sendiri. Misalnya, Flask itu sendiri tidak menyediakan mesin templat halaman. Templat disediakan oleh ekstensi seperti Jinja dan Jade, seperti yang ditunjukkan dalam tutorial ini.

Di Langkah 1 tutorial, Anda mempelajari cara:

• Membuat solusi Visual Studio dan proyek Flask
• Periksa kode boilerplate proyek dan jalankan proyek
• Membuat repositori Git untuk mempertahankan perubahan pada proyek Flask
• Bekerja dengan kontrol kode sumber Git
• Membuat lingkungan virtual untuk proyek Flask

Tutorial ini berbeda dari Flask Quickstart. Anda mempelajari lebih lanjut tentang Flask dan cara menggunakan templat proyek Flask untuk menyediakan titik awal yang lebih luas untuk proyek Anda. Templat secara otomatis menginstal paket Flask saat Anda membuat proyek, sedangkan Mulai Cepat menunjukkan cara menginstal paket secara manual.

Prasyarat

• Visual Studio 2022 di Windows dengan opsi berikut dipilih di Penginstal Visual Studio:

  • Pada tab Beban Kerja , pilih opsi pengembangan Python . Untuk informasi selengkapnya, lihat Menginstal dukungan Python di Visual Studio.

  • Pada tab Komponen individual di bawah Alat Kode, pilih opsi Git untuk Windows.

Templat proyek Flask disertakan dengan semua versi Python Tools for Visual Studio yang lebih lama. Detail templat mungkin berbeda dari deskripsi dalam tutorial ini.

Visual Studio untuk Mac tidak didukung. Untuk informasi selengkapnya, lihat Apa yang terjadi pada Visual Studio untuk Mac? Visual Studio Code di Windows, Mac, dan Linux bekerja dengan baik dengan Python melalui ekstensi yang tersedia.

Membuat solusi Visual Studio dan proyek Flask

Di Langkah 1 tutorial ini, Anda membuat satu solusi Visual Studio untuk berisi dua proyek Flask terpisah. Anda membuat proyek dengan menggunakan templat proyek Flask yang berbeda yang disertakan dengan Visual Studio. Dengan menjaga proyek dalam solusi yang sama, Anda dapat dengan mudah beralih bolak-balik di antara file yang berbeda untuk perbandingan.

Ikuti prosedur ini untuk membuat solusi dan proyek web Flask:

1. Di Visual Studio, pilih File>Baru>Proyek dan cari "Flask." Kemudian, pilih templat Proyek Web Flask Kosong dan pilih Berikutnya.

   

2. Konfigurasikan proyek dan solusi baru Anda:

   1. Atur Nama proyek Visual Studio ke BasicProject. Nama ini juga digunakan untuk proyek Flask.

   2. Tentukan Lokasi untuk Visual Studio guna menyimpan solusi dan proyek.

   3. Hapus solusi dan proyek Place dalam opsi direktori yang sama.

   4. Atur nama solusi ke LearningFlask. Solusi ini berfungsi sebagai kontainer untuk beberapa proyek dalam seri tutorial ini.

3. Pilih Buat.

4. Setelah beberapa saat, Visual Studio menampilkan perintah file spesifikasi paket Python "requirements.txt" terdeteksi dalam proyek "BasicProject".:

   

   Dialog menunjukkan bahwa templat yang dipilih menyertakan file requirements.txt yang dapat Anda gunakan untuk membuat lingkungan virtual untuk proyek.

5. Pilih X di sebelah kanan untuk menutup perintah. Kemudian dalam tutorial ini, Anda membuat lingkungan virtual dan memastikan kontrol sumber mengecualikan lingkungan. (Lingkungan selalu dapat dibuat nanti dari file requirements.txt.)

Memeriksa perintah Git

Dalam prosedur berikutnya, Anda membiasakan diri dengan dukungan Visual Studio untuk kontrol sumber Git.

Penting

Dengan rilis Visual Studio 2019 versi 16.8, pengalaman kontrol versi Git aktif secara default. Jika Anda ingin mempelajari selengkapnya tentang perbandingannya dengan Team Explorer, lihat halaman perbandingan berdampingan dari Git dan Team Explorer.

Namun, jika Anda lebih suka terus menggunakan Team Explorer di Visual Studio 2019, buka Alat>Opsi>Lingkungan>Fitur Pratinjau lalu alihkan kotak centang pengalaman pengguna New Git. (Opsi ini tidak tersedia di Visual Studio 2022 dan yang lebih baru.) Untuk informasi selengkapnya, lihat Menyambungkan ke proyek di Team Explorer.

1. Untuk menerapkan proyek ke kontrol sumber lokal Anda, pilih Tambahkan ke Kontrol Sumber di kanan bawah di jendela utama Visual Studio lalu pilih Git:

   

   Jendela Buat Git akan terbuka, tempat Anda dapat membuat dan mengunggah repositori baru.

2. Setelah Anda membuat repositori, bilah kontrol Git muncul di kanan bawah di jendela utama Visual Studio:

   

   Dari kiri ke kanan, bilah kontrol Git memperlihatkan jumlah penerapan keluar/masuk (panah #/#), jumlah perubahan yang tidak dilakukan (pensil #), nama cabang saat ini, dan nama repositori saat ini. Kontrol Git juga tersedia di menu Git pada toolbar utama.

3. Pada bilah kontrol Git, pilih perubahan (pensil #) untuk membuka jendela Perubahan Git. Anda juga dapat memilih Lihat perubahan Git> (Ctrl+O, Ctrl+G):

   

   Jendela ini menunjukkan detail tentang perubahan yang tidak dilakukan, termasuk perubahan yang disimpan. Karena proyek yang baru dibuat sudah berkomitmen untuk kontrol sumber secara otomatis, Anda tidak melihat perubahan yang tertunda.

4. Pada bilah kontrol Git, pilih penerapan (panah #/#) lalu pilih Tampilkan Semua Penerapan:

   

   Jendela repositori Git terbuka. Anda juga dapat memilih Lihat repositori Git> (Ctrl+O, Ctrl+R):

   

   Jendela ini memperlihatkan detail untuk repositori saat ini di panel kiri dan cabang saat ini dengan komit keluar/masuk di panel kanan.

   Untuk melihat perbedaan pada file, pilih commit di jendela tengah. Versi sebelumnya ditampilkan di sisi kiri dan versi yang direvisi ditampilkan di sisi kanan. Detailnya juga berisi pembuat perubahan, komitter perubahan, dan pesan penerapan.

Saat Anda bekerja melalui tutorial ini, masuk ke kebiasaan secara berkala menggunakan kontrol Git di Visual Studio untuk menerapkan dan mendorong perubahan. Tutorial ini mengingatkan Anda pada titik yang sesuai.

Menggunakan kontrol sumber dari awal

Ada beberapa keuntungan menggunakan kontrol sumber dari awal proyek. Saat Anda menggunakan kontrol sumber dari awal proyek, terutama jika Anda juga menggunakan repositori jarak jauh, Anda mendapatkan cadangan reguler di luar lokasi proyek Anda. Tidak seperti mempertahankan proyek hanya pada sistem file lokal, kontrol sumber juga menyediakan riwayat perubahan lengkap dan kemampuan mudah untuk mengembalikan satu file atau seluruh proyek ke status sebelumnya. Riwayat perubahan membantu menentukan penyebab regresi (kegagalan pengujian).

Kontrol sumber sangat penting jika beberapa orang mengerjakan proyek, karena mengelola penimpaan dan memberikan resolusi konflik. Kontrol sumber pada dasarnya adalah bentuk otomatisasi, mengatur Anda dengan baik untuk mengotomatiskan build, pengujian, dan manajemen rilis. Ini adalah langkah pertama dalam menggunakan Azure DevOps untuk proyek, dan karena hambatan untuk masuk sangat rendah, benar-benar tidak ada alasan untuk tidak menggunakan kontrol sumber dari awal.

Untuk informasi selengkapnya tentang kontrol sumber sebagai otomatisasi, lihat Sumber Kebenaran: Peran Repositori di DevOps, artikel di Majalah MSDN yang ditulis untuk aplikasi seluler yang juga berlaku untuk aplikasi web.

Mencegah Visual Studio menerapkan proyek secara otomatis

Ikuti langkah-langkah ini untuk mencegah Visual Studio menerapkan proyek baru secara otomatis:

1. Pilih Alat >Opsi>Kontrol Sumber>Pengaturan Global Git.

2. Kosongkan opsi Terapkan perubahan setelah penggabungan secara default dan pilih OK.

Membuat lingkungan virtual dan mengecualikan kontrol sumber

Setelah mengonfigurasi kontrol sumber untuk proyek, Anda dapat membuat lingkungan virtual dengan paket Flask yang diperlukan proyek. Anda kemudian dapat menggunakan jendela Perubahan Git untuk mengecualikan folder lingkungan dari kontrol sumber.

1. Di Penjelajah Solusi, klik kanan node Lingkungan Python dan pilih Tambahkan Lingkungan.

   

2. Dalam dialog Tambahkan lingkungan, pilih Buat untuk menerima nilai-nilai default. (Anda dapat mengubah nama lingkungan virtual jika mau, yang mengubah nama subfoldernya, tetapi env adalah konvensi standar.)

   

3. Jika Visual Studio meminta hak istimewa administrator, berikan persetujuan Anda. Tunggu beberapa menit saat Visual Studio mengunduh dan menginstal paket. Untuk Flask dan dependensinya, prosesnya dapat memerlukan perluasan mendekati 1.000 file di lebih dari 100 subfolder. Anda dapat melihat kemajuan di jendela Output Visual Studio.

4. Pada bilah kontrol Git, pilih perubahan yang tidak dilakukan (yang sekarang memperlihatkan 99+) untuk membuka jendela Perubahan Git:

   

   Pembuatan lingkungan virtual membawa ribuan perubahan, tetapi Anda tidak perlu menyertakannya dalam kontrol sumber. Anda atau orang lain yang mengkloning proyek selalu dapat membuat ulang lingkungan dengan menggunakan file requirements.txt.

5. Untuk mengecualikan lingkungan virtual dari kontrol sumber, di jendela Perubahan Git, klik kanan folder env dan pilih Abaikan item lokal ini:

   

   Setelah Anda mengecualikan lingkungan virtual, satu-satunya perubahan yang tersisa adalah pada file proyek (.py) dan file .gitignore, yang berisi entri tambahan untuk folder lingkungan virtual.

   Untuk melihat tampilan perbedaan untuk file .gitignore, di jendela Perubahan Git, klik dua kali file.

6. Di jendela Perubahan Git, masukkan pesan commit, seperti "Perubahan proyek awal":

   

7. Di menu dropdown Commit, pilih Commit Staged dan Push.

Anda dapat membuka jendela Repositori Git dan mengonfirmasi penerapan bertahap yang ditampilkan di Riwayat Lokal untuk cabang saat ini.

Memahami tujuan lingkungan virtual

Lingkungan virtual adalah cara yang bagus untuk mengisolasi dependensi yang tepat dari aplikasi Anda. Metode isolasi ini menghindari konflik dalam lingkungan Python global, dan membantu pengujian dan kolaborasi. Seiring waktu, saat Anda mengembangkan aplikasi, Anda selalu membawa banyak paket Python yang bermanfaat. Dengan menyimpan paket dalam lingkungan virtual khusus proyek, Anda dapat dengan mudah memperbarui file requirements.txt proyek yang menjelaskan lingkungan tersebut, yang disertakan dalam kontrol sumber. Saat Anda menyalin proyek ke komputer lain, termasuk server pembangunan, server penyebaran, dan komputer pengembangan lainnya, mudah untuk mereproduksi lingkungan. Anda dapat membuat ulang lingkungan hanya dengan menggunakan file requirements.txt, itulah sebabnya lingkungan tidak perlu berada dalam kontrol sumber. Untuk informasi selengkapnya, lihat Menggunakan lingkungan virtual.

Menghapus lingkungan virtual di bawah kontrol sumber

Anda dapat menghapus lingkungan virtual setelah berada di bawah kontrol sumber. Ikuti langkah-langkah berikut:

1. Edit file .gitignore Anda untuk mengecualikan folder:

   1. Buka file dengan memilih File >Buka File>.

      Anda juga dapat membuka file dari Team Explorer. Pada halaman Pengaturan, pilih Pengaturan Repositori. Buka bagian Abaikan File Atribut & dan pilih tautan Edit di samping .gitignore.

   2. Temukan bagian di akhir yang memiliki komentar # Python Tools for Visual Studio (PTVS).

   3. Setelah bagian itu, tambahkan baris baru untuk folder lingkungan virtual, seperti /BasicProject/env.

2. Buka jendela perintah dan buka folder (seperti BasicProject) yang memiliki folder lingkungan virtual, seperti env.

3. Jalankan perintah git rm -r env untuk menghapus lingkungan virtual yang saat ini berada di bawah kontrol sumber.

4. Komit perubahan Anda dengan perintah git commit -m 'Remove venv', atau komit dari halaman Perubahan di Team Explorer.

Memeriksa kode boilerplate

Di bagian ini, Anda memeriksa kode boilerplate dalam file Proyek (.py) yang dibuat Visual Studio berdasarkan pilihan templat Anda.

1. Buka Penjelajah Solusi untuk melihat solusi dan file proyek Anda. Proyek awal hanya berisi dua file, app.py dan requirements.txt:

   

   File requirements.txt menentukan dependensi paket Flask. Kehadiran file inilah yang mengundang Anda untuk membuat lingkungan virtual saat pertama kali membuat proyek.

   File app.py tunggal berisi kode boilerplate untuk proyek web Flask kosong.

2. Buka file app.py di editor dan periksa bagian pertama, pernyataan import untuk Flask.

   Pernyataan ini membuat instans kelas Flask, yang ditetapkan ke variabel app. Bagian ini juga menetapkan variabel wsgi_app (yang berguna saat Anda menyebarkan ke host web, tetapi tidak digunakan untuk saat ini):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

3. Bagian kedua untuk ditinjau terjadi di akhir file. Bagian ini berisi kode opsional yang dapat Anda gunakan untuk memulai server pengembangan Flask.

   Anda dapat menentukan kode untuk menggunakan nilai host dan port tertentu yang diambil dari variabel lingkungan, atau menggunakan nilai host dan port default localhost:55551.

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

4. Bagian ketiga dari kode yang diperiksa menetapkan sebuah fungsi ke rute URL, yang berarti fungsi tersebut menyediakan sumber daya yang diidentifikasi oleh URL.

   Anda menentukan rute dengan menggunakan dekorator @app.route Flask dengan argumen yang merupakan URL relatif dari akar situs. Seperti yang Anda lihat dalam kode, fungsi tersebut hanya mengembalikan string teks, yang sudah cukup untuk dirender oleh browser. Dalam langkah-langkah berikutnya dalam seri tutorial ini, Anda memperbarui kode untuk merender halaman yang lebih kaya dengan HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Memahami argumen nama di kelas Flask

Argumen name di kelas Flask adalah nama modul atau paket aplikasi. Flask menggunakan nama untuk menentukan tempat mencari templat, file statis, dan sumber daya lain yang termasuk dalam aplikasi. Untuk aplikasi yang terkandung dalam satu modul, __name__ selalu merupakan nilai yang tepat. Nama ini juga penting untuk ekstensi yang memerlukan informasi pemecahan masalah. Untuk informasi selengkapnya, dan argumen lainnya, lihat dokumentasi kelas Flask (flask.pocoo.org).

Menggunakan beberapa dekorator rute

Fungsi dapat memiliki lebih dari satu dekorator rute. Anda dapat menggunakan dekorator sebanyak yang Anda inginkan, jika fungsi yang sama melayani beberapa rute. Misalnya, untuk menggunakan fungsi hello untuk rute / dan rute /hello, gunakan kode berikut:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Menggunakan rute URL variabel dan parameter permintaan

Flask dapat bekerja dengan rute URL variabel dan parameter kueri. Dalam rute, Anda menandai variabel apa pun dengan atribut <variable_name>. Flask meneruskan variabel ke fungsi dengan menggunakan argumen bernama di jalur URL. Misalnya, rute dalam bentuk /hello/<name> menghasilkan argumen string yang disebut name ke fungsi . Parameter kueri tersedia melalui properti request.args, khususnya melalui metode request.args.get. Kode berikut memberikan contoh:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Untuk mengubah jenisnya, awali variabel dengan int, float, path (yang menerima garis miring untuk menguraikan nama folder), dan uuid. Untuk informasi selengkapnya, lihat Aturan variabel dalam dokumentasi Flask.

Membuat persyaratan setelah penginstalan paket

Visual Studio dapat menghasilkan file requirements.txt dari lingkungan virtual setelah Anda menginstal paket lain.

• Di Penjelajah Solusi, perluas simpul Lingkungan Python, klik kanan lingkungan virtual Anda, dan pilih Hasilkan requirements.txt.

Ini adalah praktik yang baik untuk menggunakan perintah ini secara berkala saat Anda memodifikasi lingkungan. Terapkan perubahan pada file requirements.txt Anda ke kontrol sumber bersama dengan perubahan kode lain yang bergantung pada lingkungan tersebut. Jika Anda menyiapkan integrasi berkelanjutan di server build, Anda harus menghasilkan file dan menerapkan perubahan setiap kali Anda memodifikasi lingkungan.

Jalankan proyek

Sekarang Anda siap untuk menjalankan proyek Anda di Visual Studio dengan mengikuti prosedur ini:

1. Di Visual Studio, pilih Debug>Mulai Penelusuran Kesalahan (F5) atau pilih Server Web pada toolbar utama (browser yang Anda lihat mungkin berbeda):

   

2. Salah satu perintah menetapkan nomor port acak ke variabel lingkungan PORT, dan menjalankan file app.py Python.

   Kode memulai aplikasi dengan menggunakan port tersebut dalam server pengembangan Flask.

   Jika Visual Studio memposting pesan Gagal memulai debugger dan menunjukkan tidak ada file startup yang ditemukan, klik kanan file app.py di Penjelajah Solusi dan pilih Atur sebagai File Startup.

3. Saat server dimulai, jendela konsol terbuka untuk menampilkan log server. Visual Studio secara otomatis membuka browser ke http://localhost:<port>, di mana Anda akan melihat pesan yang dirender oleh fungsi hello.

   

4. Setelah selesai, tutup jendela konsol, yang menghentikan server pengembangan Flask. Anda juga dapat memilih Debug>Hentikan Pengudakan.

Membandingkan perintah Debug dengan perintah Python proyek

Ada perbedaan antara menggunakan perintah menu Debug dan perintah server yang tercantum dalam submenu Python proyek.

Selain perintah menu Debug dan tombol toolbar, Anda juga dapat meluncurkan server dengan menggunakan perintah Python>Start server atau Python>Mulai server debug pada menu konteks proyek.

Kedua perintah membuka jendela konsol tempat Anda melihat URL lokal (localhost:port) untuk server yang sedang berjalan. Namun, Anda harus membuka browser secara manual dengan URL tersebut, dan menjalankan server debug tidak secara otomatis memulai debugger Visual Studio. Anda dapat melampirkan debugger ke proses yang sedang berjalan nanti, jika Anda ingin dengan menggunakan perintah Debug>Lampirkan ke Proses.

Langkah berikutnya

Langkah 2: Membuat aplikasi Flask dengan tampilan dan templat halaman