Membuat aplikasi .NET MAUI dengan Azure Mobile Apps
Tutorial ini menunjukkan kepada Anda cara menambahkan layanan backend berbasis cloud ke aplikasi seluler lintas platform dengan menggunakan .NET MAUI dan backend aplikasi seluler Azure. Anda akan membuat backend aplikasi ponsel baru dan aplikasi Daftar Tugas sederhana yang menyimpan data aplikasi di Azure.
Anda harus menyelesaikan tutorial ini sebelum tutorial .NET MAUI lainnya menggunakan fitur Aplikasi Seluler di Azure App Service.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda perlu:
- Visual Studio 2022 dengan beban kerja berikut:
- ASP.NET dan pengembangan web
- Pengembangan Azure
- Pengembangan seluler dengan .NET
- Akun Azure.
- Azure CLI.
- Masuk dengan
az login
dan pilih langganan yang sesuai sebelum memulai.
- Masuk dengan
- (Opsional) Azure Developer CLI.
- Perangkat Virtual Android, dengan pengaturan berikut:
- Telepon: Gambar telepon apa pun - kami menggunakan Pixel 5 untuk pengujian.
- Gambar Sistem: Android 11 (API 30 dengan Google API)
- Mac yang tersedia (untuk mengkompilasi dan menjalankan versi iOS):
- Menginstal XCode
- Buka Xcode setelah menginstal sehingga dapat menambahkan komponen tambahan yang diperlukan.
- Setelah terbuka, pilih XCode Preferences...>Komponen, dan instal simulator iOS.
- Ikuti panduan untuk Memasangkan ke Mac.
Mac diperlukan untuk mengompilasi versi iOS.
Anda dapat menyelesaikan tutorial ini di Mac atau Windows.
Mengunduh aplikasi sampel
Buka repositori azure-mobile-apps di browser Anda.
Buka menu drop-down Kode, lalu pilih Unduh ZIP.
Setelah pengunduhan selesai, buka folder Unduhan Anda dan temukan
azure-mobile-apps-main.zip
file.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 folder sampel dalam file yang diekstrak. Sampel untuk mulai cepat diberi nama TodoApp
. Anda dapat membuka sampel di Visual Studio dengan mengklik TodoApp.sln
dua kali file.
Menyebarkan backend ke Azure
Catatan
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):
- Instal Azure Developer CLI.
- Buka terminal dan ubah direktori ke folder yang
TodoApp.sln
berisi file. Direktori ini juga berisiazure.yaml
. - 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 yang sesuai Constants.cs
untuk Anda.
Anda dapat menjalankan azd env get-values
perintah 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.
Buka terminal dan ubah direktori ke folder yang
TodoApp.sln
berisi file. Direktori ini juga berisiazuredeploy.json
.Pastikan Anda telah masuk dan memilih langganan menggunakan Azure CLI.
Membuat grup sumber daya baru:
az group create -l westus -g quickstart
Perintah ini membuat
quickstart
grup sumber daya 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.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.
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:
Catat setiap nilai dalam output untuk digunakan nanti.
Menerbitkan kode layanan
Buka TodoApp.sln
di Visual Studio.
Di panel sebelah kanan, pilih Penjelajah Solusi.
TodoAppService.NET6
Klik kanan proyek, lalu pilih Atur sebagai Proyek Startup.Pada menu atas, pilih Bangun>Terbitkan TodoAppService.NET6.
Di jendela Terbitkan , pilih Target: Azure, lalu tekan Berikutnya.
Pilih Target tertentu: Azure App Service (Windows), lalu tekan Berikutnya.
Jika perlu, masuk dan pilih Nama langganan yang sesuai.
Pastikan Tampilan diatur ke Grup sumber daya.
quickstart
Perluas grup sumber daya, lalu pilih App Service yang dibuat sebelumnya.Pilih Selesai.
Setelah proses pembuatan profil penerbitan selesai, pilih Tutup.
Temukan Dependensi Layanan dan pilih tiga titik di samping Database SQL Server, lalu pilih Koneksi.
Pilih Azure SQL Database, lalu pilih Berikutnya.
Pilih database mulai cepat, lalu pilih Berikutnya.
Isi formulir menggunakan nama pengguna dan kata sandi SQL yang ada di output penyebaran, lalu pilih Berikutnya.
Pilih Selesai.
Pilih Tutup saat selesai.
Pilih Terbitkan untuk menerbitkan aplikasi Anda ke Azure App Service yang Anda buat sebelumnya.
Setelah layanan backend diterbitkan, browser dibuka. Tambahkan
/tables/todoitem?ZUMO-API-VERSION=3.0.0
ke URL:
Mengonfigurasi aplikasi sampel
Aplikasi klien Anda perlu mengetahui URL dasar backend Anda sehingga dapat berkomunikasi dengannya.
Jika Anda terbiasa
azd up
menyediakan dan menyebarkan layanan,Constants.cs
file dibuat untuk Anda dan Anda dapat melewati langkah ini.
TodoApp.Data
Perluas proyek.Klik kanan pada
TodoApp.Data
proyek, lalu pilih Tambahkan>Kelas....Masukkan
Constants.cs
sebagai nama, lalu pilih Tambahkan.Constants.cs.example
Buka file dan salin konten (Ctrl-A, diikuti oleh Ctrl-C).Beralih ke
Constants.cs
, sorot semua teks (Ctrl-A), lalu tempelkan konten dari file contoh (Ctrl-V).https://APPSERVICENAME.azurewebsites.net
Ganti 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 bisa mendapatkan URL backend layanan Anda dari tab Terbitkan . Pastikan Anda menggunakan URL https .
Simpan file. (Ctrl-S).
Membuat dan menjalankan aplikasi Android
Di penjelajah solusi, perluas
maui
folder .Klik kanan pada proyek
TodoApp.MAUI
dan pilih Atur sebagai Proyek Startup.Di bilah atas, pilih emulator Android yang sesuai:
Jika tidak ada emulator Android yang tersedia, Anda perlu membuatnya. Untuk informasi selengkapnya, lihat Penyiapan emulator Android. Untuk membuat emulator Android baru:
- Pilih Alat>Android>Android Device Manager.
- Pilih + Baru.
- Pilih opsi berikut di sisi kiri:
- Nama:
quickstart
- Perangkat Dasar: Piksel 5
- Prosesor: x86_64
- OS: Android 11.0 - API 30
- Google API: Diperiksa
- Nama:
- Pilih Buat.
- Jika perlu, terima perjanjian lisensi. Gambar kemudian akan diunduh.
- Setelah tombol Mulai muncul, tekan Mulai.
- Jika Anda diminta tentang akselerasi perangkat keras Hyper-V, baca dokumentasi untuk mengaktifkan akselerasi perangkat keras sebelum melanjutkan. Emulator akan lambat tanpa mengaktifkan akselerasi perangkat keras.
Tip
Mulai emulator Android Anda sebelum melanjutkan. Anda dapat melakukan ini dengan membuka Android Device Manager dan menekan Mulai di samping emulator yang Anda pilih.
Tekan F5 untuk membangun dan menjalankan proyek.
Setelah aplikasi dimulai, Anda akan melihat daftar kosong dan kotak teks untuk menambahkan item di emulator. Anda dapat:
- Masukkan beberapa teks dalam kotak, lalu tekan Enter untuk menyisipkan item baru.
- Pilih item untuk mengatur atau menghapus bendera yang telah selesai.
- Tekan ikon refresh untuk memuat ulang data dari layanan.
Membuat dan menjalankan aplikasi Windows
Di penjelajah solusi, perluas
maui
folder .Klik kanan pada proyek
TodoApp.MAUI
dan pilih Atur sebagai Proyek Startup.Di bilah atas, pilih Windows Machine.
Tekan F5 untuk membangun dan menjalankan proyek.
Setelah aplikasi dimulai, Anda akan melihat daftar kosong dan kotak teks untuk menambahkan item. Anda dapat:
- Masukkan beberapa teks dalam kotak, lalu tekan Enter untuk menyisipkan item baru.
- Pilih item untuk mengatur atau menghapus bendera yang telah selesai.
- Tekan ikon refresh untuk memuat ulang data dari layanan.
Langkah berikutnya
Lanjutkan tutorial dengan menambahkan autentikasi ke aplikasi.
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk