Membangun aplikasi Xamarin.iOS dengan Azure Mobile Apps

  • Artikel

Tutorial ini menunjukkan cara menambahkan layanan backend berbasis cloud ke aplikasi ponsel iOS dengan menggunakan Xamarin.iOS dan backend Azure mobile apps. 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 Xamarin.iOS lainnya menggunakan fitur Mobile Apps 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.
  • (Opsional) Azure Developer CLI.
  • Mac yang tersedia:
    • 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.

Mengunduh aplikasi sampel

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

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

    Screenshot of the Code menu on GitHub.

  3. Setelah pengunduhan selesai, buka folder Unduhan Anda dan temukan azure-mobile-apps-main.zip 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 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.

Screenshot of the file explorer for the solution.

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):

  1. Instal Azure Developer CLI.
  2. Buka terminal dan ubah direktori ke folder yang TodoApp.sln berisi file. 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 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.

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

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

  3. 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.

  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:

    Screenshot of command line results.

  6. Catat setiap nilai dalam output untuk digunakan nanti.

Menerbitkan kode layanan

Buka TodoApp.sln di Visual Studio.

  1. Di panel sebelah kanan, pilih Penjelajah Solusi.

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

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

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

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

  6. Jika perlu, masuk dan pilih Nama langganan yang sesuai.

  7. Pastikan Tampilan diatur ke Grup sumber daya.

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

    Screenshot of the app service selection window.

  9. Pilih Selesai.

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

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

    Screenshot showing the S Q L server configuration selection.

  12. Pilih Azure SQL Database, lalu pilih Berikutnya.

  13. Pilih database mulai cepat, lalu pilih Berikutnya.

    Screenshot of the database selection window.

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

    Screenshot of the database settings window.

  15. Pilih Selesai.

  16. Pilih Tutup saat selesai.

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

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

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.

  1. TodoApp.Data Perluas proyek.

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

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

    Screenshot of adding the Constants.cs file to the project.

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

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

  6. 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 .

  7. Simpan file. (Ctrl-S).

Buat dan jalankan aplikasi

  1. Di penjelajah solusi, perluas xamarin-native folder .

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

  3. Di bilah atas, pilih konfigurasi i Telepon Simulator dan target TodoApp.iOS:

    Screenshot showing how to set the run configuration for a Xamarin for i O S app.

  4. Pilih simulator i Telepon yang sesuai (Saya telah memilih i Telepon SE yang menjalankan iOS 15.5).

  5. 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:

  • Tekan tombol + untuk menambahkan item.
  • Pilih item untuk mengatur atau menghapus bendera yang telah selesai.
  • Tekan ikon refresh untuk memuat ulang data dari layanan.

Screenshot of the running i O S app showing the to do list.

Pemecahan Masalah

Simulator jarak jauh yang dikirim dengan Visual Studio 2022 tidak kompatibel dengan XCode 13.3. Anda akan menerima pesan kesalahan berikut:

Screenshot of the error message when launching the i O S simulator.

Untuk mengatasi masalah ini:

  • Nonaktifkan simulator jarak jauh (Alat / Opsi / iOS Pengaturan / hapus centang Simulator Jarak Jauh ke Windows). Ketika tidak dicentang, simulator akan berjalan di Mac alih-alih di Windows. Anda kemudian dapat berinteraksi dengan simulator langsung di Mac Anda saat menggunakan debugger, dll. di Windows.
  • Nonaktifkan simulator jarak jauh seperti di atas, sehingga simulator berjalan di Mac. Kemudian gunakan aplikasi desktop jarak jauh untuk menyambungkan ke desktop Mac dari Windows. Opsi desktop jarak jauh termasuk Devolutions Remote Desktop Manager (cepat dan ada versi gratis yang tersedia), dan klien VNC (lebih lambat dan gratis).
  • Gunakan perangkat fisik untuk menguji alih-alih simulator. Anda dapat memperoleh profil provisi gratis untuk menyelesaikan tutorial autentikasi.

Langkah berikutnya

Lanjutkan tutorial dengan menambahkan autentikasi ke aplikasi.