Membuat aplikasi Xamarin.Forms dengan Azure

  • Artikel

Gambaran Umum

Tutorial ini menunjukkan kepada Anda cara menambahkan layanan back-end berbasis cloud ke aplikasi seluler Xamarin.Forms dengan menggunakan fitur Mobile Apps Azure App Service sebagai back-end. Anda membuat back end Mobile Apps baru dan aplikasi Xamarin.Forms daftar tugas sederhana yang menyimpan data aplikasi di Azure.

Menyelesaikan tutorial ini adalah prasyarat untuk semua tutorial Mobile Apps lainnya untuk Xamarin.Forms.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan hal berikut:

  • Akun Azure aktif. Jika Anda tidak memiliki akun, Anda dapat mendaftar untuk uji coba Azure dan mendapatkan hingga 10 aplikasi seluler gratis yang dapat terus Anda gunakan bahkan setelah uji coba berakhir. Untuk informasi selengkapnya, lihat Uji Coba Gratis Azure.

  • Alat Visual Studio untuk Xamarin, di Visual Studio 2017 atau yang lebih baru, atau Visual Studio untuk Mac. Lihat halaman penginstalan Xamarin untuk mengetahui petunjuknya.

  • (opsional) Untuk membuat aplikasi iOS, Diperlukan Mac dengan Xcode 9.0 atau yang lebih baru. Visual Studio untuk Mac dapat digunakan untuk mengembangkan app iOS, atau Visual Studio 2017 atau yang lebih baru dapat digunakan (selama Mac tersedia di jaringan).

Membuat back end Mobile Apps baru

  1. Masuk ke portal Azure.

  2. Klik Buat sumber daya.

  3. Dalam kotak pencarian, ketik Aplikasi Web.

  4. Dalam daftar hasil, pilih Aplikasi Web dari Marketplace.

  5. Pilih Langganan dan Grup Sumber Daya Anda (pilih grup sumber daya yang sudah ada atau buat yang baru (menggunakan nama yang sama dengan aplikasi Anda)).

  6. Pilih Nama unik aplikasi web Anda.

  7. Pilih opsi Terbitkan default sebagai Kode.

  8. Di tumpukan Runtime, Anda perlu memilih versi di bawah ASP.NET atau Node. Jika Anda membangun backend .NET, pilih versi di bawah ASP.NET. Jika tidak, jika Anda menargetkan aplikasi berbasis Node, pilih salah satu versi dari Node.

  9. Pilih Sistem Operasi yang tepat, baik Linux atau Windows.

  10. Pilih Wilayah tempat Anda ingin aplikasi ini disebarkan.

  11. Pilih paket App Service yang sesuai dan tekan Tinjau dan buat.

  12. Di bawah Grup Sumber Daya, pilih grup sumber daya yang sudah ada atau buat yang baru (menggunakan nama yang sama dengan aplikasi Anda).

  13. Klik Buat. Tunggu beberapa menit agar layanan berhasil disebarkan sebelum melanjutkan. Tonton ikon Pemberitahuan (bel) di header portal untuk pembaruan status.

  14. Setelah penyebaran selesai, klik bagian Detail penyebaran lalu klik Sumber Daya Jenis Microsoft.Web/sites. Ini akan menavigasi Anda ke App Service Web App yang baru saja Anda buat.

  15. Klik bilah Konfigurasi di bawah Pengaturan dan di pengaturan Aplikasi, klik tombol Pengaturan aplikasi baru .

  16. Di halaman Tambahkan/Edit pengaturan aplikasi , masukkan Nama sebagai MobileAppsManagement_EXTENSION_VERSION dan Nilai sebagai terbaru dan tekan OK.

Anda semua diatur untuk menggunakan aplikasi web App Service yang baru dibuat ini sebagai aplikasi Seluler.

Membuat koneksi database dan mengonfigurasi proyek klien dan server

  1. Unduh mulai cepat SDK klien untuk platform berikut:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    Catatan

    Jika Anda menggunakan proyek iOS, Anda perlu mengunduh "azuresdk-iOS-*.zip" dari rilis GitHub terbaru. Unzip dan tambahkan MicrosoftAzureMobile.framework file ke akar proyek.

  2. Anda harus menambahkan koneksi database atau menyambungkan ke koneksi yang sudah ada. Pertama, tentukan apakah Anda akan membuat penyimpanan data atau menggunakan penyimpanan data yang sudah ada.

    • Membuat penyimpanan data baru: Jika Anda akan membuat penyimpanan data, gunakan mulai cepat berikut:

      Mulai cepat: Mulai menggunakan database tunggal di Azure SQL Database

    • Sumber data yang sudah ada: Ikuti instruksi di bawah ini jika Anda ingin menggunakan koneksi database yang sudah ada

      1. format String Koneksi SQL Database -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Nama server, ini dapat ditemukan di halaman gambaran umum untuk database Anda dan biasanya dalam bentuk "server_name.database.windows.net". {port} biasanya 1433. {your_catalogue} Nama database. {your_username} Nama pengguna untuk mengakses database Anda. {your_password} Kata sandi untuk mengakses database Anda.

        Pelajari selengkapnya tentang format String Koneksi SQL

      2. Tambahkan string koneksi ke aplikasi seluler Anda Di App Service, Anda dapat mengelola string koneksi untuk aplikasi Anda dengan menggunakan opsi Konfigurasi di menu.

        Untuk menambahkan string koneksi:

        1. Klik pada tab Pengaturan aplikasi .

        2. Klik [+] String koneksi baru.

        3. Anda harus memberikan Nama, Nilai , dan Jenis untuk string koneksi Anda.

        4. Ketik Nama sebagai MS_TableConnectionString

        5. Nilai harus berupa string penghubung yang Anda bentuk di langkah sebelumnya.

        6. Jika Anda menambahkan string koneksi ke database SQL Azure, pilih SQLAzure di bawah jenis.

  3. Azure Mobile Apps memiliki SDK untuk backend .NET dan Node.js.

    • backendNode.js

      Jika Anda akan menggunakan aplikasi mulai cepat Node.js, ikuti petunjuk di bawah ini.

      1. Di portal Azure, buka Tabel Mudah, Anda akan melihat layar ini.

        Tabel Mudah Simpul

      2. Pastikan string koneksi SQL sudah ditambahkan di tab Konfigurasi . Kemudian centang kotak Saya mengakui bahwa ini akan menimpa semua konten situs dan klik tombol Buat tabel TodoItem .

        Konfigurasi Tabel Mudah Simpul

      3. Di Easy Tables, klik tombol + Tambahkan .

        Tombol Tambahkan Tabel Mudah Simpul

      4. Buat TodoItem tabel dengan akses anonim.

        Tabel Mudah Simpul Tambahkan Tabel

    • Backend .NET

      Jika Anda akan menggunakan aplikasi mulai cepat .NET, ikuti petunjuk di bawah ini.

      1. Unduh proyek server .NET Azure Mobile Apps dari repositori azure-mobile-apps-quickstarts.

      2. Buat proyek server .NET secara lokal di Visual Studio.

      3. Di Visual Studio, buka Penjelajah Solusi, klik kanan proyekZUMOAPPNAMEService, klik Terbitkan, Anda akan melihat Publish to App Service jendela. Jika Anda bekerja di Mac, lihat cara lain untuk menyebarkan aplikasi di sini.

        Penerbitan studio visual

      4. Pilih App Service sebagai target penerbitan, lalu klik Pilih Yang Sudah Ada, lalu klik tombol Terbitkan di bagian bawah jendela.

      5. Anda harus masuk ke Visual Studio dengan langganan Azure Anda terlebih dahulu. SubscriptionPilih , Resource Group, lalu pilih nama aplikasi Anda. Ketika Anda siap, klik OK, ini akan menyebarkan proyek server .NET yang Anda miliki secara lokal ke backend App Service. Setelah penyebaran selesai, Anda akan diarahkan ke http://{zumoappname}.azurewebsites.net/ di browser.

Jalankan solusi Xamarin.Forms

Alat Visual Studio untuk Xamarin diperlukan untuk membuka solusi, lihat instruksi penginstalan Xamarin. Jika alat sudah diinstal, ikuti langkah-langkah berikut untuk mengunduh dan membuka solusi:

Visual Studio (Windows dan Mac)

  1. Buka portal Azure dan buka aplikasi seluler yang Anda buat. Pada bilah Overview , cari URL yang merupakan titik akhir publik untuk aplikasi seluler Anda. Contoh - nama situs untuk nama aplikasi saya "test123" akan menjadi https://test123.azurewebsites.net.

  2. Buka file Constants.cs di folder ini - xamarin.forms/ZUMOAPPNAME. Nama aplikasinya adalah ZUMOAPPNAME.

  3. Di Constants.cs kelas , ganti ZUMOAPPURL variabel dengan titik akhir publik di atas.

    public static string ApplicationURL = @"ZUMOAPPURL";

    menjadi

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Ikuti petunjuk di bawah ini untuk menjalankan proyek Android atau Windows; dan jika ada komputer Mac berjaringan yang tersedia, proyek iOS.

(Opsional) Menjalankan proyek Android

Di bagian ini, Anda menjalankan proyek Xamarin.Android. Anda dapat melewati bagian ini jika Anda tidak bekerja dengan perangkat Android.

Visual Studio

  1. Klik kanan proyek Android (Droid), lalu pilih Atur sebagai Proyek StartUp.

  2. Pada menu Build, pilih Configuration Manager.

  3. Dalam kotak dialog Configuration Manager, pilih kotak centang Bangun dan Sebarkan di samping proyek Android, dan pastikan proyek kode bersama mencentang kotak Build.

  4. Untuk membuat proyek dan memulai aplikasi di emulator Android, tekan tombol F5 atau klik tombol Mulai .

Visual Studio untuk Mac

  1. Klik kanan proyek Android, lalu pilih Atur Sebagai Proyek Startup.

  2. Untuk membuat proyek dan memulai aplikasi di emulator Android, pilih menu Jalankan , lalu Mulai Debugging.

Di aplikasi, ketik teks yang bermakna, seperti Learn Xamarin, lalu pilih tanda plus (+).

Aplikasi yang harus dilakukan Android

Tindakan ini mengirimkan permintaan postingan ke back end Mobile Apps baru yang dihosting di Azure. Data dari permintaan disisipkan ke dalam tabel TodoItem. Item yang disimpan dalam tabel dikembalikan oleh back end Mobile Apps, dan data ditampilkan dalam daftar.

Catatan

Kode yang mengakses back end Mobile Apps Anda ada di file TodoItemManager.cs C# dari proyek kode bersama dalam solusi.

(Opsional) Menjalankan proyek iOS

Di bagian ini, Anda menjalankan proyek Xamarin.iOS untuk perangkat iOS. Anda dapat melewati bagian ini jika Anda tidak bekerja dengan perangkat iOS.

Visual Studio

  1. Klik kanan proyek iOS, lalu pilih Atur sebagai Proyek StartUp.

  2. Pada menu Build, pilih Configuration Manager.

  3. Dalam kotak dialog Configuration Manager, pilih kotak centang Bangun dan Sebarkan di samping proyek iOS, dan pastikan proyek kode bersama memiliki kotak Build yang dicentang.

  4. Untuk membangun proyek dan memulai aplikasi di emulator iPhone, pilih kunci F5 .

Visual Studio untuk Mac

  1. Klik kanan proyek iOS, lalu pilih Atur Sebagai Proyek Startup.

  2. Pada menu Jalankan , pilih Mulai Debugging untuk membangun proyek dan memulai aplikasi di emulator iPhone.

Di aplikasi, ketik teks yang bermakna, seperti Learn Xamarin, lalu pilih tanda plus (+).

Aplikasi yang harus dilakukan iOS

Tindakan ini mengirimkan permintaan postingan ke back end Mobile Apps baru yang dihosting di Azure. Data dari permintaan disisipkan ke dalam tabel TodoItem. Item yang disimpan dalam tabel dikembalikan oleh back end Mobile Apps, dan data ditampilkan dalam daftar.

Catatan

Anda akan menemukan kode yang mengakses back end Mobile Apps Anda di file TodoItemManager.cs C# dari proyek kode bersama dalam solusi.

(Opsional) Menjalankan proyek Windows

Di bagian ini, Anda menjalankan proyek Xamarin.Forms Universal Windows Platform (UWP) untuk perangkat Windows. Anda dapat melewati bagian ini jika Anda tidak bekerja dengan perangkat Windows.

Visual Studio

  1. Klik kanan proyek UWP apa pun, lalu pilih Atur sebagai Proyek StartUp.

  2. Pada menu Build, pilih Configuration Manager.

  3. Dalam kotak dialog Configuration Manager, pilih kotak centang Bangun dan Sebarkan di samping proyek Windows yang Anda pilih, dan pastikan proyek kode bersama memiliki kotak Build yang dicentang.

  4. Untuk membuat proyek dan memulai aplikasi di emulator Windows, tekan tombol F5 atau klik tombol Mulai (yang harus membaca Komputer Lokal).

Catatan

Proyek Windows tidak dapat dijalankan di macOS.

Di aplikasi, ketik teks yang bermakna, seperti Learn Xamarin, lalu pilih tanda plus (+).

Tindakan ini mengirimkan permintaan postingan ke back end Mobile Apps baru yang dihosting di Azure. Data dari permintaan disisipkan ke dalam tabel TodoItem. Item yang disimpan dalam tabel dikembalikan oleh back end Mobile Apps, dan data ditampilkan dalam daftar.

Aplikasi yang harus dilakukan UWP

Catatan

Anda akan menemukan kode yang mengakses back end Mobile Apps Anda di file TodoItemManager.cs C# dari proyek pustaka kelas portabel solusi Anda.

Pemecahan Masalah

Jika Anda mengalami masalah dalam membangun solusi, jalankan manajer paket NuGet dan perbarui ke versi Xamarin.Formsterbaru , dan dalam proyek Android, perbarui Xamarin.Android paket dukungan. Proyek mulai cepat mungkin tidak selalu menyertakan versi terbaru.

Harap dicatat bahwa semua paket dukungan yang dirujuk dalam proyek Android Anda harus memiliki versi yang sama. Paket NuGet Azure Mobile Apps memiliki Xamarin.Android.Support.CustomTabs dependensi untuk platform Android, jadi jika proyek Anda menggunakan paket dukungan yang lebih baru, Anda perlu menginstal paket ini dengan versi yang diperlukan secara langsung untuk menghindari konflik.