Tutorial: Mulai menggunakan kerangka kerja web 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 tersebut malah disediakan oleh paket Python khusus yang disebut ekstensi Flask. Ekstensi terintegrasi dengan mulus dengan Flask sehingga mereka muncul seolah-olah mereka adalah bagian dari Flask itu sendiri. Misalnya, Flask sendiri tidak menyediakan mesin templat halaman. Templat disediakan oleh ekstensi seperti Jinja dan Jade, seperti yang ditunjukkan dalam tutorial ini.

Dalam tutorial ini, Anda akan mempelajari cara:

• Buat proyek Flask dasar di repositori Git menggunakan templat "Blank Flask Web Project" (langkah 1).
• Buat aplikasi Flask dengan satu halaman dan render halaman tersebut menggunakan templat (langkah 2).
• Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat (langkah 3).
• Gunakan templat Proyek Web Flask untuk membuat aplikasi dengan beberapa halaman dan desain responsif (langkah 4).

Selama langkah-langkah ini, Anda membuat satu solusi Visual Studio yang berisi dua proyek terpisah. Anda membuat proyek menggunakan templat proyek Flask 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.

Catatan

Tutorial ini berbeda dari Mulai Cepat Flask karena Anda mempelajari lebih lanjut tentang Flask serta cara menggunakan berbagai templat proyek Flask yang menyediakan titik awal yang lebih luas untuk proyek Anda sendiri. Misalnya, templat proyek secara otomatis menginstal paket Flask saat membuat proyek, daripada memerlukan Anda untuk menginstal paket secara manual seperti yang ditunjukkan dalam Mulai Cepat.

Prasyarat

• Visual Studio 2022 di Windows dengan opsi berikut:
  • Beban kerja pengembangan Python (tab Beban Kerja di alat penginstal). Untuk mengetahui petunjuknya, lihat Menginstal dukungan Python di Visual Studio.
  • Git untuk Windows pada tab Komponen individual di bawah Alat kode.

Templat proyek Flask disertakan dengan semua versi Python Tools yang lebih lama untuk Visual Studio, meskipun detailnya mungkin berbeda dari apa yang dibahas dalam tutorial ini.

Pengembangan Python saat ini tidak didukung di Visual Studio untuk Mac. Di Mac dan Linux, gunakan ekstensi Python dalam tutorial Visual Studio Code.

Langkah 1-1: Membuat proyek dan solusi Visual Studio

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

   

2. Konfigurasikan proyek baru Anda dengan memasukkan informasi berikut lalu pilih Buat:

   • Nama: atur nama proyek Visual Studio ke BasicProject. Nama ini juga digunakan untuk proyek Flask.
   • Lokasi: tentukan lokasi untuk membuat solusi dan proyek Visual Studio.
   • Nama solusi: atur ke LearningFlask, yang sesuai untuk solusi sebagai kontainer untuk beberapa proyek dalam tutorial ini.

Langkah 1-2: Periksa kontrol Git dan terbitkan ke repositori jarak jauh

Dalam langkah ini, Anda membiasakan diri dengan kontrol Git Visual Studio dan jendela Team Explorer tempat Anda bekerja dengan kontrol sumber.

1. Untuk menerapkan proyek ke kontrol sumber lokal Anda, pilih perintah Tambahkan ke Kontrol Sumber di sudut bawah jendela utama Visual Studio dan pilih opsi Git. Tindakan ini membawa Anda ke jendela Buat repositori Git, tempat Anda dapat membuat dan mendorong repositori baru.

   

2. Setelah membuat repositori, satu set kontrol Git baru muncul di bagian bawah. Dari kiri ke kanan, kontrol ini menunjukkan penerapan yang tidak dipublikasikan, perubahan yang tidak diterapkan, cabang saat ini, dan nama repositori:

   

3. Pilih tombol Perubahan Git, dan Visual Studio membuka jendela Team Explorer-nya di halaman Perubahan Git. Karena proyek yang baru dibuat sudah diterapkan untuk kontrol sumber secara otomatis, Anda tidak melihat perubahan yang tertunda.

   

4. Pada bilah status Visual Studio, pilih tombol penerapan yang tidak dipublikasikan (panah atas dengan 2) untuk membuka halaman Sinkronisasi di Team Explorer. Karena Anda hanya memiliki repositori lokal, halaman ini menyediakan opsi mudah untuk menerbitkan repositori ke repositori jarak jauh yang berbeda.

   

   Anda dapat memilih layanan apa pun yang Anda inginkan untuk proyek Anda sendiri. Tutorial ini menunjukkan penggunaan GitHub, di mana kode sampel yang selesai untuk tutorial dipertahankan dalam repositori Microsoft/python-sample-vs-learning-django.

5. Saat memilih salah satu kontrol Terbitkan, Team Explorer meminta informasi selengkapnya. Misalnya, saat menerbitkan sampel untuk tutorial ini, repositori itu sendiri harus dibuat terlebih dahulu. Dalam hal ini, opsi Dorong ke Repositori Jarak Jauh digunakan dengan URL repositori.

   

   Jika Anda tidak memiliki repositori yang sudah ada, opsi Terbitkan ke GitHub dan Dorong ke Azure DevOps memungkinkan Anda membuatnya langsung dari dalam Visual Studio.

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

Tip

Untuk menavigasi dengan cepat dalam Team Explorer, pilih header (yang membaca Perubahan atau Pendorongan pada gambar di atas) untuk melihat menu pop-up halaman yang tersedia.

Pertanyaan: Apa saja keuntungan menggunakan kontrol sumber dari awal proyek?

Jawaban: Menggunakan kontrol sumber sejak awal, terutama jika Anda juga menggunakan repositori jarak jauh, menyediakan 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 keadaan sebelumnya. Riwayat perubahan tersebut membantu menentukan penyebab regresi (kegagalan pengujian). Kontrol sumber sangat penting jika beberapa orang mengerjakan proyek, karena mengelola penimpaan dan memberikan penyelesaian 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 DevOps untuk proyek, dan karena hambatan untuk masuk sangat rendah, benar-benar tidak ada alasan untuk tidak menggunakan kontrol sumber dari awal.

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

Pertanyaan: Bisakah saya mencegah Visual Studio melakukan proyek baru secara otomatis?

Jawaban: Bisa. Untuk menonaktifkan penerapan otomatis, buka halaman Pengaturan di Team Explorer, pilih Pengaturan Git>Global, kosongkan opsi berlabel Terapkan perubahan setelah penggabungan secara default, lalu pilih Perbarui.

Langkah 1-3: Buat lingkungan virtual dan kecualikan dari kontrol sumber

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

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

   

2. Pilih Buat untuk menerima default, dalam dialog Tambahkan Lingkungan Virtual. (Anda dapat mengubah nama lingkungan virtual jika mau, yang hanya mengubah nama subfoldernya, tetapi env merupakan konvensi standar.)

   

3. Persetujuan untuk hak istimewa administrator jika diminta, maka tunggu beberapa menit saat Visual Studio mengunduh dan menginstal paket. Selama waktu ini, beberapa ribu file ditransfer ke subfolder sebanyak mungkin! Anda dapat melihat kemajuan di jendela Output Visual Studio. Saat Anda menunggu, renungkan bagian Pertanyaan berikut.

4. Pada Visual Studio kontrol Git (pada bilah status), pilih indikator perubahan (yang memperlihatkan 99*) yang membuka halaman Perubahan di Team Explorer.

   Membuat lingkungan virtual membawa ribuan perubahan, tetapi Anda tidak perlu menyertakan salah satu dari mereka dalam kontrol sumber karena Anda (atau orang lain yang mengkloning proyek) selalu dapat membuat ulang lingkungan dari requirements.txt.

   Untuk mengecualikan lingkungan virtual, klik kanan folder env dan pilih Abaikan item lokal ini.

   

5. Setelah mengecualikan lingkungan virtual, satu-satunya perubahan yang tersisa adalah pada file proyek dan .gitignore. File .gitignore berisi entri tambahan untuk folder lingkungan virtual. Anda dapat mengeklik dua kali file untuk melihat diff.

6. Masukkan pesan penerapan dan pilih tombol Terapkan Semua, lalu dorong penerapan ke repositori jarak jauh Anda.

Pertanyaan: Mengapa saya ingin membuat lingkungan virtual?

Jawaban: Lingkungan virtual adalah cara yang bagus untuk mengisolasi dependensi aplikasi Anda yang tepat. Isolasi tersebut 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 di lingkungan virtual khusus proyek, Anda dapat dengan mudah memperbarui file requirements.txt proyek yang menjelaskan lingkungan tersebut, yang disertakan dalam kontrol sumber. Ketika proyek disalin ke komputer lain, termasuk server build, server penyebaran, dan komputer pengembangan lainnya, mudah untuk membuat ulang lingkungan hanya menggunakan requirements.txt (itulah sebabnya lingkungan tidak perlu berada dalam kontrol sumber). Untuk informasi selengkapnya, lihat Menggunakan lingkungan virtual.

Pertanyaan: Bagaimana cara menghapus lingkungan virtual yang sudah diterapkan pada kontrol sumber?

Jawaban: Pertama, edit file .gitignore Anda untuk mengecualikan folder: temukan bagian di akhir dengan komentar # Python Tools for Visual Studio (PTVS) dan tambahkan baris baru untuk folder lingkungan virtual, seperti /BasicProject/env. (Karena Visual Studio tidak menampilkan file di Penjelajah Solusi, buka langsung menggunakan perintah menu File Buka>File.> Anda juga dapat membuka file dari Team Explorer: di halaman Pengaturan, pilih Repositori Pengaturan, buka bagian Abaikan & Atribut File, lalu pilih tautan Edit di samping .gitignore.)

Kedua, buka jendela perintah, navigasikan ke folder seperti BasicProject yang berisi folder lingkungan virtual seperti env, dan jalankan git rm -r env. Kemudian terapkan perubahan tersebut dari baris perintah (git commit -m 'Remove venv') atau terapkan dari halaman PerubahanTeam Explorer.

Langkah 1-4: Periksa kode boilerplate

1. Setelah pembuatan proyek selesai, Anda akan melihat solusi dan proyek di Penjelajah Solusi, di mana proyek hanya berisi dua file, app.py dan requirements.txt:

   

2. Seperti disebutkan sebelumnya, file requirements.txt menentukan dependensi paket Flask. Kehadiran file inilah yang mengundang Anda untuk membuat lingkungan virtual saat pertama kali membuat proyek.

3. File app.py tunggal berisi tiga bagian. Pertama adalah pernyataan import untuk Flask, membuat instans kelasFlask, yang ditetapkan ke variabel app, dan kemudian menetapkan variabel wsgi_app (yang berguna saat 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
   

4. Bagian kedua, di akhir file, adalah sedikit kode opsional yang memulai server pengembangan Flask dengan nilai host dan port tertentu yang diambil dari variabel lingkungan (default ke localhost:5555):

   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)
   

5. Ketiga adalah sedikit kode yang menetapkan fungsi ke rute URL, yang berarti bahwa fungsi menyediakan sumber daya yang diidentifikasi oleh URL. Anda menentukan rute menggunakan dekorator Flask @app.route, yang argumennya adalah URL relatif dari akar situs. Seperti yang Anda lihat dalam kode, fungsi di sini hanya mengembalikan string teks, yang cukup bagi browser untuk dirender. Dalam langkah-langkah yang mengikuti Anda merender halaman yang lebih kaya dengan HTML.

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

Pertanyaan: Apa tujuan argumen nama ke kelas Flask?

Jawaban: Argumen adalah nama modul atau paket aplikasi, dan memberi tahu Flask tempat mencari templat, file statis, dan sumber daya lain milik aplikasi. Untuk aplikasi yang terkandung dalam satu modul, __name__ selalu merupakan nilai yang tepat. Penting juga untuk ekstensi yang memerlukan informasi penelusuran kesalahan. Untuk informasi selengkapnya, dan argumen tambahan, lihat dokumentasi kelas Flask (flask.pocoo.org).

Pertanyaan: Bisakah fungsi memiliki lebih dari satu dekorator rute?

Jawaban: Ya, Anda dapat menggunakan dekorator sebanyak yang Anda inginkan jika fungsi yang sama melayani beberapa rute. Misalnya, untuk menggunakan fungsi hello untuk "/" dan "/hello", gunakan kode berikut:

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

Pertanyaan: Bagaimana Cara kerja Flask dengan rute URL variabel dan parameter kueri?

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

# 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 jenis, awali variabel dengan int, float, path (yang menerima garis miring untuk menguraikan nama folder), dan uuid. Untuk detailnya, lihat Aturan variabel dalam dokumentasi Flask.

Pertanyaan: Dapatkah Visual Studio menghasilkan file requirements.txt dari lingkungan virtual setelah saya menginstal paket lain?

Jawaban: Bisa. Perluas node Lingkungan Python, klik kanan lingkungan virtual Anda, dan pilih perintah Buat requirements.txt. Ada baiknya untuk menggunakan perintah ini secara berkala saat Anda memodifikasi lingkungan, dan menerapkan perubahan pada requirements.txt 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.

Langkah 1-5: Jalankan proyek

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

   

2. Salah satu perintah menetapkan nomor port acak ke variabel lingkungan PORT, lalu menjalankan python app.py. Kode memulai aplikasi menggunakan port tersebut dalam server pengembangan Flask. Jika Visual Studio mengatakan Gagal memulai debugger dengan pesan tentang tidak memiliki file startup, klik kanan app.py di Penjelajah Solusi dan pilih Atur sebagai File Startup.

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

   

4. Setelah selesai, hentikan server dengan menutup jendela konsol, atau dengan menggunakan perintah Debug>Hentikan Penelusuran Kesalahan di Visual Studio.

Pertanyaan: Apa perbedaan antara menggunakan perintah menu Debug dan perintah server pada submenu Python proyek?

Jawaban: Selain perintah menu Debug dan tombol bilah alat, Anda juga dapat meluncurkan server menggunakan Python>Jalankan server atau Python >Jalankan perintah 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 mau, menggunakan perintahLampirkan ke Proses>Debug.

Langkah berikutnya

Pada titik ini, proyek Flask dasar berisi kode startup dan kode halaman dalam file yang sama. Yang terbaik adalah memisahkan kedua kekhawatiran ini, dan juga memisahkan HTML dan data dengan menggunakan templat.

Membuat aplikasi Flask dengan tampilan dan templat halaman