Xamarin.Forms Tutorial Layanan Web

Sebelum mencoba tutorial ini, Anda seharusnya berhasil menyelesaikan:

Buat mulai cepat aplikasi pertama Xamarin.Forms Anda.
Tutorial StackLayout .
Tutorial label .
Tutorial tombol .
Tutorial CollectionView .

Dalam tutorial ini, Anda akan mempelajari cara:

Gunakan Manajer Paket NuGet untuk menambahkan Newtonsoft.Json ke Xamarin.Forms proyek.
Buat kelas layanan web.
Gunakan kelas layanan web.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara mengambil data repositori .NET dari API web GitHub. Data yang diambil akan ditampilkan dalam CollectionView. Cuplikan layar berikut menunjukkan aplikasi akhir:

Tambahkan Newtonsoft.Json

Tersisa 13 menit

Visual Studio
Visual Studio untuk Mac

Untuk menyelesaikan tutorial ini, Anda harus memiliki Visual Studio 2019 (rilis terbaru), dengan pengembangan Seluler dengan beban kerja .NET terinstal. Selain itu, Anda akan memerlukan Mac berpasangan untuk membangun aplikasi tutorial di iOS. Untuk informasi tentang menginstal platform Xamarin, lihat Menginstal Xamarin. Untuk informasi tentang menyambungkan Visual Studio 2019 ke host build Mac, lihat Memasangkan ke Mac untuk pengembangan Xamarin.iOS.

Luncurkan Visual Studio, dan buat aplikasi kosong Xamarin.Forms baru bernama WebServiceTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusi diberi nama WebServiceTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Penjelajah Solusi, pilih proyek WebServiceTutorial, klik kanan dan pilih Kelola Paket NuGet...:
Di Manajer Paket NuGet, pilih tab Telusuri, cari paket NuGet Newtonsoft.Json, pilih, dan klik tombol Instal untuk menambahkannya ke proyek:

Paket ini akan digunakan untuk menggabungkan deserialisasi JSON ke dalam aplikasi.
Bangun solusi untuk memastikan tidak ada kesalahan.

Membuat kelas layanan web

Tersisa 11 menit

Permintaan REST dibuat melalui HTTP menggunakan kata kerja HTTP yang sama dengan yang digunakan browser web untuk mengambil halaman dan mengirim data ke server. Dalam latihan ini, Anda akan membuat kelas yang menggunakan kata kerja GET untuk mengambil data repositori .NET dari API web GitHub.

Visual Studio
Visual Studio untuk Mac

Di Penjelajah Solusi, dalam proyek WebServiceTutorial, tambahkan kelas baru bernama Constantske proyek. Kemudian, di Constants.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Kode ini mendefinisikan satu konstanta - titik akhir di mana permintaan web akan dibuat.
Di Penjelajah Solusi, dalam proyek WebServicesTutorial, tambahkan kelas baru bernama Repositoryke proyek. Kemudian, di Repository.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Kode ini mendefinisikan Repository kelas yang digunakan untuk memodelkan data JSON yang diambil dari layanan web. Setiap properti dihiasi dengan JsonProperty atribut, yang berisi nama bidang JSON. Newtonsoft.Json akan menggunakan pemetaan nama bidang JSON ini ke properti CLR saat mendeserialisasi data JSON ke dalam objek model.

Catatan

Definisi kelas di atas telah disederhanakan, dan tidak sepenuhnya memodelkan data JSON yang diambil dari layanan web.

Di Penjelajah Solusi, dalam proyek WebServiceTutorial, tambahkan kelas baru bernama RestServiceke proyek. Kemudian, di RestService.cs, hapus semua kode templat dan ganti dengan kode berikut:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();

            if (Device.RuntimePlatform == Device.UWP)
            {
                _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter");
                _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json"));
            }
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}

Kode ini mendefinisikan satu metode, GetRepositoriesAsync, yang mengambil data repositori .NET dari API web GitHub. Metode ini menggunakan HttpClient.GetAsync metode untuk mengirim permintaan GET ke API web yang ditentukan oleh uri argumen . API web mengirimkan respons yang disimpan dalam HttpResponseMessage objek. Respons mencakup kode status HTTP, yang menunjukkan apakah permintaan HTTP berhasil atau gagal. Asalkan permintaan berhasil, API web merespons dengan kode status HTTP 200 (OK), dan respons JSON, yang ada di HttpResponseMessage.Content properti . Data JSON ini dibaca untuk string menggunakan HttpContent.ReadAsStringAsync metode , sebelum dideserialisasi ke dalam List<Repository> objek menggunakan JsonConvert.DeserializeObject metode . Metode ini menggunakan pemetaan antara nama bidang JSON dan properti CLR, yang didefinisikan di Repository kelas , untuk melakukan deserialisasi.

Catatan

Di UWP, perlu untuk mengonfigurasi HttpClient objek di konstruktor untuk menambahkan header Agen Pengguna ke semua permintaan, dan untuk menerima respons JSON GitHub.

Bangun solusi untuk memastikan tidak ada kesalahan.

Di Solution Pad, dalam proyek WebServiceTutorial , tambahkan kelas baru bernama Constants ke proyek. Kemudian, di Constants.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
Kode ini mendefinisikan satu konstanta - titik akhir di mana permintaan web akan dibuat.
Di Solution Pad, dalam proyek WebServicesTutorial , tambahkan kelas baru bernama Repository ke proyek. Kemudian, di Repository.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
Kode ini mendefinisikan Repository kelas yang digunakan untuk memodelkan data JSON yang diambil dari layanan web. Setiap properti dihiasi dengan JsonProperty atribut, yang berisi nama bidang JSON. Newtonsoft.Json akan menggunakan pemetaan nama bidang JSON ini ke properti CLR saat mendeserialisasi data JSON ke dalam objek model.

Catatan

Definisi kelas di atas telah disederhanakan, dan tidak sepenuhnya memodelkan data JSON yang diambil dari layanan web.
Di Solution Pad, dalam proyek WebServiceTutorial , tambahkan kelas baru bernama RestService ke proyek. Kemudian, di RestService.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}
```
Kode ini mendefinisikan satu metode, GetRepositoriesAsync, yang mengambil data repositori .NET dari API web GitHub. Metode ini menggunakan HttpClient.GetAsync metode untuk mengirim permintaan GET ke API web yang ditentukan oleh uri argumen . API web mengirimkan respons yang disimpan dalam HttpResponseMessage objek. Respons mencakup kode status HTTP, yang menunjukkan apakah permintaan HTTP berhasil atau gagal. Asalkan permintaan berhasil, API web merespons dengan kode status HTTP 200 (OK), dan respons JSON, yang ada di HttpResponseMessage.Content properti . Data JSON ini dibaca untuk string menggunakan HttpContent.ReadAsStringAsync metode , sebelum dideserialisasi ke dalam List<Repository> objek menggunakan JsonConvert.DeserializeObject metode . Metode ini menggunakan pemetaan antara nama bidang JSON dan properti CLR, yang didefinisikan di Repository kelas , untuk melakukan deserialisasi.
Bangun solusi untuk memastikan tidak ada kesalahan.

Menggunakan kelas layanan web

Tersisa 5 menit

Dalam latihan ini Anda akan membuat antarmuka pengguna untuk menggunakan RestService kelas , yang mengambil data repositori .NET dari API web GitHub. Data yang diambil akan ditampilkan oleh CollectionView.

Visual Studio
Visual Studio untuk Mac

Di Penjelajah Solusi, dalam proyek WebServiceTutorial, klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Button, dan CollectionView. Mengatur Button peristiwanya Clicked ke penanganan aktivitas bernama OnButtonClicked yang akan dibuat di langkah berikutnya. CollectionView mengatur CollectionView.ItemTemplate properti ke DataTemplate, yang menentukan tampilan setiap item di CollectionView. Anak dari DataTemplate adalah StackLayout, yang berisi tiga Label objek. Objek Label mengikat propertinya Text ke Nameproperti , , Descriptiondan GitHubHomeUrl dari setiap Repository objek. Untuk informasi selengkapnya tentang pengikatan data, lihat Xamarin.Forms Pengikatan Data.

Selain itu, CollectionView memiliki nama yang ditentukan dengan x:Name atribut . Ini memungkinkan file code-behind untuk mengakses objek menggunakan nama yang ditetapkan.

Di Penjelajah Solusi, dalam proyek WebServiceTutorial, perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
Metode OnButtonClicked ini, yang dijalankan ketika Button diketuk, memanggil RestService.GetRepositoriesAsync metode untuk mengambil data repositori .NET dari API web GitHub. Metode GetRepositoriesAsync ini memerlukan argumen yang string mewakili URI API web yang dipanggil, dan ini dikembalikan oleh Constants.GitHubReposEndpoint bidang .

Setelah mengambil data yang diminta, CollectionView.ItemsSource properti diatur ke data yang diambil.
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android. Button Ketuk untuk mengambil data repositori .NET dari GitHub:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang menggunakan layanan web berbasis REST di Xamarin.Forms, lihat Menggunakan Layanan Web RESTful (panduan).

Di Solution Pad, dalam proyek WebServiceTutorial , klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Button, dan CollectionView. Mengatur Button peristiwanya Clicked ke penanganan aktivitas bernama OnButtonClicked yang akan dibuat di langkah berikutnya. CollectionView mengatur CollectionView.ItemTemplate properti ke DataTemplate, yang menentukan tampilan setiap item di CollectionView. Anak dari DataTemplate adalah StackLayout, yang berisi tiga Label objek. Objek Label mengikat propertinya Text ke Nameproperti , , Descriptiondan GitHubHomeUrl dari setiap Repository objek. Untuk informasi selengkapnya tentang pengikatan data, lihat Xamarin.Forms Pengikatan Data.

Selain itu, CollectionView memiliki nama yang ditentukan dengan x:Name atribut . Ini memungkinkan file code-behind untuk mengakses objek menggunakan nama yang ditetapkan.

Di Solution Pad, dalam proyek WebServiceTutorial , perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
Metode OnButtonClicked ini, yang dijalankan ketika Button diketuk, memanggil RestService.GetRepositoriesAsync metode untuk mengambil data repositori .NET dari API web GitHub. Metode GetRepositoriesAsync ini memerlukan argumen yang string mewakili URI API web yang dipanggil, dan ini dikembalikan oleh Constants.GitHubReposEndpoint bidang .

Setelah mengambil data yang diminta, CollectionView.ItemsSource properti diatur ke data yang diambil.
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android. Button Ketuk untuk mengambil data repositori .NET dari GitHub:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang menggunakan layanan web berbasis REST di Xamarin.Forms, lihat Menggunakan Layanan Web RESTful (panduan).

Selamat!

Selesai 100%!

Selamat atas penyelesaian tutorial ini, di mana Anda belajar cara:

Gunakan Manajer Paket NuGet untuk menambahkan Newtonsoft.Json ke Xamarin.Forms proyek.
Buat kelas layanan web.
Gunakan kelas layanan web.

Langkah berikutnya

Seri tutorial ini telah mencakup dasar-dasar pembuatan aplikasi seluler dengan Xamarin.Forms. Untuk mempelajari selengkapnya tentang Xamarin.Forms pengembangan, baca tentang fungsionalitas berikut:

Ada empat grup kontrol utama yang digunakan untuk membuat antarmuka pengguna aplikasi Xamarin.Forms . Untuk informasi selengkapnya, lihat Referensi Kontrol.
Pengikatan data adalah teknik untuk menautkan properti dari dua objek sehingga perubahan dalam satu properti secara otomatis tercermin di properti lain. Untuk informasi selengkapnya, lihat Pengikatan Data.
Xamarin.Forms memberikan beberapa pengalaman navigasi halaman, tergantung pada jenis halaman yang digunakan. Untuk informasi selengkapnya, lihat Navigasi.
Gaya membantu mengurangi markup berulang, dan memungkinkan tampilan aplikasi lebih mudah diubah. Untuk informasi selengkapnya, lihat Styling Xamarin.Forms Apps.
Ekstensi markup XAML memperluas daya dan fleksibilitas XAML dengan memungkinkan atribut elemen diatur dari sumber selain string teks harfiah. Untuk informasi selengkapnya, lihat Ekstensi Markup XAML.
Templat data menyediakan kemampuan untuk menentukan presentasi data pada tampilan yang didukung. Untuk informasi selengkapnya, lihat Templat Data.
Setiap halaman, tata letak, dan tampilan dirender secara berbeda di setiap platform menggunakan Renderer kelas yang pada gilirannya membuat kontrol asli, mengaturnya di layar, dan menambahkan perilaku yang ditentukan dalam kode bersama. Pengembang dapat menerapkan kelas kustom Renderer mereka sendiri untuk menyesuaikan tampilan dan/atau perilaku kontrol. Untuk informasi selengkapnya, lihat Perender Kustom.
Efek juga memungkinkan kontrol asli pada setiap platform untuk disesuaikan. Efek dibuat dalam proyek khusus platform dengan subkelas kelas, dan dikonsumsi PlatformEffect dengan melampirkannya ke kontrol yang sesuai Xamarin.Forms . Untuk informasi selengkapnya, lihat Efek.
Kode bersama dapat mengakses fungsionalitas asli melalui DependencyService kelas . Untuk informasi selengkapnya, lihat Mengakses Fitur Asli dengan DependencyService.

Atau, Membuat Mobile Apps denganXamarin.Forms , buku karya Charles Petzold, adalah tempat yang baik untuk mempelajari lebih lanjut tentang Xamarin.Forms. Buku ini tersedia sebagai PDF atau dalam berbagai format ebook.

Bagikan melalui

Tambahkan Newtonsoft.Json

Membuat kelas layanan web

Menggunakan kelas layanan web

Selamat!

Langkah berikutnya

Tautan terkait