Bagikan melalui

Membangun aplikasi Windows (WPF) dengan Azure Mobile Apps

  • Artikel

Nota

Produk ini dihentikan. Untuk pengganti proyek yang menggunakan .NET 8 atau yang lebih baru, lihat pustaka Community Toolkit Datasync.

Tutorial ini menunjukkan kepada Anda cara menambahkan layanan backend berbasis cloud ke aplikasi desktop Windows Presentation Framework (WPF) dengan menggunakan Azure Mobile Apps dan backend aplikasi seluler Azure. Anda akan membuat backend aplikasi seluler baru dan aplikasi daftar Todo sederhana yang menyimpan data aplikasi di Azure.

Anda harus menyelesaikan tutorial ini sebelum semua tutorial Windows (WPF) lainnya tentang menggunakan fitur Mobile Apps di Azure App Service.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan:

  • Visual Studio 2022 dengan beban kerja berikut.
    • ASP.NET dan pengembangan web
    • Pengembangan Azure
    • Pengembangan desktop .NET
  • Akun Azure .
  • Azure CLI.
    • Masuk dengan az login dan pilih langganan yang sesuai sebelum memulai.
  • (Opsional)CLI Pengembang Azure .

Tutorial ini hanya dapat diselesaikan pada sistem Windows.

Mengunduh aplikasi sampel

  1. Buka repositori azure-mobile-apps di browser Anda.

  2. Buka menu drop-down Code, lalu pilih Unduh ZIP.

    Cuplikan layar menu Kode di GitHub.

  3. Setelah unduhan selesai, buka folder Unduhan Anda dan temukan file .

  4. Klik kanan file yang diunduh, dan pilih Ekstrak Semua....

    Jika mau, Anda dapat menggunakan PowerShell untuk memperluas arsip:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip

Sampel terletak di sampel folder dalam file yang diekstrak. Sampel untuk mulai cepat diberi nama TodoApp. Anda dapat membuka sampel di Visual Studio dengan mengklik dua kali file TodoApp.sln.

Cuplikan layar penjelajah file untuk solusi.

Menyebarkan backend ke Azure

Nota

Jika Anda telah menyebarkan backend dari mulai cepat lainnya, Anda dapat menggunakan backend yang sama dan melewati langkah ini.

Untuk menyebarkan layanan backend, kami akan:

  • Memprovisikan Azure App Service dan Azure SQL Database ke Azure.
  • Gunakan Visual Studio untuk menyebarkan kode layanan ke Azure App Service yang baru dibuat.

Menggunakan Azure Developer CLI untuk menyelesaikan semua langkah

Sampel TodoApp dikonfigurasi untuk mendukung Azure Developer CLI. Untuk menyelesaikan semua langkah (provisi dan penyebaran):

  1. Instal azure Developer CLI.
  2. Buka terminal dan ubah direktori ke folder yang berisi file TodoApp.sln. Direktori ini juga berisi azure.yaml.
  3. Jalankan azd up.

Jika Anda belum masuk ke Azure, browser akan diluncurkan untuk meminta Anda masuk. Anda kemudian diminta untuk menggunakan langganan dan wilayah Azure. Azure Developer CLI kemudian menyediakan sumber daya yang diperlukan dan menyebarkan kode layanan ke wilayah Azure dan langganan pilihan Anda. Terakhir, Azure Developer CLI menulis file Constants.cs yang sesuai untuk Anda.

Anda dapat menjalankan perintah azd env get-values untuk melihat informasi autentikasi SQL jika Anda ingin mengakses database secara langsung.

Jika Anda telah menyelesaikan langkah-langkah dengan Azure Developer CLI, lanjutkan ke langkah berikutnya. Jika Anda tidak ingin menggunakan Azure Developer CLI, lanjutkan dengan langkah manual.

Buat sumber daya di Azure.

  1. Buka terminal dan ubah direktori ke folder yang berisi file TodoApp.sln. Direktori ini juga berisi azuredeploy.json.

  2. Pastikan Anda telah masuk dan memilih langganan menggunakan Azure CLI.

  3. Buat grup sumber daya baru:

    az group create -l westus -g quickstart

    Perintah ini membuat grup sumber daya quickstart di wilayah US Barat. Anda dapat memilih wilayah apa pun yang Anda inginkan, asalkan Anda dapat membuat sumber daya di sana. Pastikan Anda menggunakan nama dan wilayah yang sama di mana pun mereka disebutkan dalam tutorial ini.

  4. Buat sumber daya menggunakan penyebaran grup:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234

    Pilih kata sandi yang kuat untuk kata sandi Administrator SQL Anda. Anda membutuhkannya nanti saat mengakses database.

  5. Setelah penyebaran selesai, dapatkan variabel output karena ini menyimpan informasi penting yang Anda butuhkan nanti:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs

    Contoh output adalah:

    Cuplikan layar hasil baris perintah.

  6. Catat setiap nilai dalam output untuk digunakan nanti.

Menerbitkan kode layanan

Buka TodoApp.sln di Visual Studio.

  1. Di panel kanan, pilih Solutions Explorer.

  2. Klik kanan proyek TodoAppService.NET6, lalu pilih Atur sebagai Proyek Startup.

  3. Pada menu atas, pilih Build>Terbitkan TodoAppService.NET6.

  4. Di jendela Terbitkan , pilih Target: Azure, lalu tekan Berikutnya.

    Cuplikan layar jendela pemilihan target.

  5. Pilih Target tertentu: Azure App Service (Windows), lalu tekan Berikutnya.

    Cuplikan layar jendela pemilihan target tertentu.

  6. Jika perlu, masuk dan pilih nama Langganan yang sesuai.

  7. Pastikan Tampilan diatur ke grup sumber daya .

  8. Perluas grup sumber daya quickstart, lalu pilih App Service yang dibuat sebelumnya.

    Cuplikan layar jendela pemilihan layanan aplikasi.

  9. Pilih Selesai.

  10. Setelah proses pembuatan profil publikasi selesai, pilih Tutup.

  11. Temukan Dependensi Layanan dan pilih tiga titik di samping Database SQL Server, lalu pilih Sambungkan.

    Cuplikan layar memperlihatkan pilihan konfigurasi server S Q L.

  12. Pilih Azure SQL Database, lalu pilih Berikutnya.

  13. Pilih database mulai cepat , lalu pilih Berikutnya.

    Cuplikan layar jendela pemilihan database.

  14. Isi formulir menggunakan nama pengguna dan kata sandi SQL yang ada dalam output penyebaran, lalu pilih Berikutnya.

    Cuplikan layar jendela pengaturan database.

  15. Pilih Selesai.

  16. Pilih Tutup setelah selesai.

  17. Pilih Terbitkan untuk menerbitkan aplikasi Anda ke Azure App Service yang Anda buat sebelumnya.

    Cuplikan layar memperlihatkan tombol terbitkan.

  18. Setelah layanan backend diterbitkan, browser dibuka. Tambahkan /tables/todoitem?ZUMO-API-VERSION=3.0.0 ke URL:

    Cuplikan layar memperlihatkan output browser setelah layanan diterbitkan.

Mengonfigurasi aplikasi sampel

Aplikasi klien Anda perlu mengetahui URL dasar backend Anda sehingga dapat berkomunikasi dengannya.

Jika Anda menggunakan azd up untuk menyediakan dan menyebarkan layanan, file Constants.cs dibuat untuk Anda dan Anda dapat melewati langkah ini.

  1. Perluas proyek TodoApp.Data.

  2. Klik kanan pada proyek TodoApp.Data, lalu pilih Tambahkan Kelas>....

  3. Masukkan Constants.cs sebagai nama, lalu pilih Tambahkan.

    Cuplikan layar menambahkan file Constants.cs ke proyek.

  4. Buka file Constants.cs.example dan salin konten (Ctrl-A, diikuti dengan Ctrl-C).

  5. Beralih ke Constants.cs, sorot semua teks (Ctrl-A), lalu tempelkan konten dari file contoh (Ctrl-V).

  6. Ganti https://APPSERVICENAME.azurewebsites.net dengan URL backend layanan Anda.

    namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

    Anda dapat memperoleh URL backend layanan Anda dari tab Terbitkan . Pastikan Anda menggunakan URL https .

  7. Simpan file. (Ctrl-S).

Membuat dan menjalankan aplikasi sampel

  1. Di penjelajah solusi, perluas folder windows.

  2. Klik kanan proyek TodoApp.WPF dan pilih Atur sebagai Proyek Startup.

  3. Di bilah atas, pilih konfigurasi CPU apa pun dan target TodoApp.WPF:

    Cuplikan layar bilah konfigurasi Visual Studio.

  4. Tekan F5 untuk membangun dan menjalankan proyek.

Setelah aplikasi dimulai, Anda akan melihat daftar kosong dengan kotak teks. Kamu bisa:

  • Masukkan beberapa teks, lalu tekan Enter atau ikon + untuk menambahkan item.

  • Atur atau kosongkan kotak centang untuk menandai item apa pun sebagai selesai.

  • Tekan ikon refresh untuk memuat ulang data dari layanan.

    Cuplikan layar aplikasi WPF yang berjalan di Windows.

Langkah berikutnya

Lanjutkan tutorial dengan menambahkan autentikasi ke aplikasi.