Latihan - Menjalankan aplikasi

Selesai

Di unit ini, Anda menjalankan aplikasi dan melihatnya di halaman web yang Anda buat. Kemudian, lihat cara memecahkan masalah pengalaman umum.

Jalankan dan debug Aplikasi

Anda dapat menyiapkan Visual Studio Code untuk menjalankan dan men-debug aplikasi Flask. Kemudian, gunakan browser Anda untuk melihat tampilan aplikasi.

Dalam Visual Studio Code, pastikan file app.py terbuka di editor. (Opsi debug bervariasi berdasarkan file yang telah Anda buka.) Di Bilah Aktivitas, pilih ikon Jalankan. Di bawah tombol Jalankan dan Debug, pilih tautan file create dan launch.json. Di menu drop-down pilihan, pilih tautan Flask.

Screenshot that shows the steps to take to debug a Flask app.

Catatan

Jika Anda tidak melihat file baru bernama launch.json di folder .vscode di folder kode aplikasi, Anda dapat membuat file konfigurasi secara manual.

Untuk membuat file konfigurasi, di sebelah kanan tampilan Jalankan, pilih ikon gerigi.

File launch.json baru terbuka di folder .vscode, dan teks dalam tampilan Jalankan berubah menjadi Python:Flask.

Untuk men-debug aplikasi Flask:

  1. Saat Python:Flask terlihat dalam tampilan Jalankan, pilih panah hijau untuk menjalankan aplikasi.

    Screenshot that shows the green arrow selected to run Flask.

    Aplikasi dimulai. Output kode menunjukkan URL lokal yang dijalankan aplikasi:

     * Serving Flask app "app.py"
     * Environment: development
     * Debug mode: off
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    
  2. Di output terminal, posisikan kursor Anda pada tautan alamat IP. Pilih Ctrl+Click untuk membuka aplikasi di browser web Anda. Jika Anda memberikan izin browser untuk mendapatkan lokasi Anda, browser berpusat pada lokasi Anda saat ini. Jika tidak, aplikasi berpusat di kantor pusat Microsoft di Redmond, Washington, AS.

    Screenshot of the map running in the Microsoft Edge web browser.

    Coba bergerak di sekitar peta dengan menyeret, dengan roda mouse, atau cubit untuk memperbesar dan memperkecil, tergantung pada opsi input perangkat Anda.

    Setelah selesai menjelajahi, hentikan aplikasi dengan memilih tombol hentikan pada toolbar debug di Visual Studio Code.

    Screenshot that shows the debug stop button in Visual Studio Code.

Pemecahan Masalah

Mari kita lihat beberapa masalah yang mungkin Anda temui saat menjalankan aplikasi dan cara mengatasinya.

Pengecualian telah terjadi: KeyError

Jika aplikasi Anda berhenti cepat setelah berjalan dan menampilkan pengecualian dan pesan Exception has occurred: KeyError, kunci Azure Maps Anda belum ditambahkan ke file .env.

Screenshot that shows an example of the key error exception message.

Pastikan persyaratan ini terpenuhi:

  • File bernama .env berada di folder akar aplikasi Anda.
  • File .env berisi pasangan kunci/nilai dalam format key=value. Kuncinya harus MAP_KEY, dan nilainya harus berupa kunci utama Anda yang disalin dari akun Azure Maps.

Tidak ada data di peta

Jika Anda tidak melihat data apa pun di peta, tetapi Anda melihat logo Microsoft, Anda tidak menggunakan kunci yang valid untuk kontrol peta. Periksa nilai dalam file .env untuk memastikan bahwa itu benar. Nilai tidak boleh menyertakan tanda kutip.

500 Kesalahan Server Internal

Jika 500 Internal Server Error dikembalikan, periksa log di terminal Visual Studio Code. Contoh output berikut menunjukkan bahwa file home.html tidak berada di lokasi yang benar:

jinja2.exceptions.TemplateNotFound: home.html

File home.html harus berada di folder templat. Pindahkan file dan buka kembali aplikasi.

Di unit ini, Anda melihat aplikasi di halaman web Anda dan berkesempatan mencoba fungsionalitasnya. Selanjutnya, mari kita pelajari tentang format GeoJSON untuk data spasial.