|آموزش xamarin|آموزش Web Service در زامارين|

آموزش گريد Web Service در Xamarin

قبل از شروع، باید با موفقیت بخش های زیر را به پایان رسانده باشید

• نوشتن اولین برنامه در زامارین
• آموزش ساخت ورودي متن در زامارين
• آموزش ساخت Buttom در زامارين
• آموزش ساخت گريد در زامارين
• آموزش ساخت Lable در زامارين

در این بخش شما می آموزید چگونه:

• استفاده از NuGet Package Manager برای اضافه کردن Newtonsoft.Json به پروژه های Xamarin.Forms.
• ایجاد کلاس هایی با قابلیت دسترسی به وب.
• استفاده از کلاس هایی که قابلیت دسترسی به وب دارند.

شما میتوانید از Visual Studio 2019 ویا Visual Studio for Mac برای تولید یک اپلیکیشن ساده که نشان میدهد چگونه ازدیتا بیس ذخیره شده در local SQLite.Net ، استفاده کنید. اپلیکیشن نهایی به شکل زیر خواهد بود:

گام اول

در Visual Studio

برای کامل کردن این بخش شما باید Visual Studio 2019 (آخرین ورژن ) و Mobile development with .NET را بر سیستم خود نصب کرده باشید. علاوه بر آن آما نیاز به یک سیستم مک متصل شدن به سیستم خود دارید تا بتوانید اپلیکیشن را برای iOS بسازید. برای اطلاعات بیشتر Installing Xamarin را ببینید و برای اطلاعات بیشتر درباره اتصال Visual Studio به Mac، Pair to Mac for Xamarin.iOS development را ببینید.

１. Visual Studio را باز کنید و یک new black Xamarin.Forms app بسازید و آن را WebServiceTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.

２. در Solution Explorer، پروژه WebServiceTutorial را انتخاب کنید و بر آن راست کلیک کنید و Manage NuGetPackeges… را انتخاب کنید:

３. در NuGet Packages Manager ، تب Brows را انتخاب کنید و Newtonsoft.Json جستجو کنید ، آن را انتخاب کرده و سپس Install را بزنید و آن را به پروژه اضافه کنید:

این پکیج برای ترکیب JSON deserialization در اپلیکیشن استفاده میشود.

４. Solution را Build کنید تا از نبود خطا مطمئن شوید.

در Visual Studio for Mac

برای کامل کردن این tutorial شما باید Visual Studio for Mac(آخرین ورژن) به همراه support platform برای Android و iOS را نصب کرده باشید. علاوه بر آن، شما نیاز باید Xcode(آخرین ورژن) را نیز نصب کنید. برای اطلاعات بیشتر درباره نصب پلتفرم Xamarin، Installing Xamarin را ببینید.

１. Visual Studio for Mac را باز کنید و یک new black Xamarin.Forms app بسازید و آن را WebServiceTutorial نام گذاری کنید. مطمئن شوید که اپ شما از مکانیزم .NET Standard برای shared code استفاده میکند.

２. در Solution Pad، پروژه WebServiceTutorial را انتخاب کنید و بر آن راست کلیک کنید و به Add>

３. درپنجره Add Packages، Newtonsoft.Json را جستجو کنید، آن را انتخاب کنید و سپس Add Package را بزنید تا به پروژه اضافه شود:

این پکیج برای ترکیب JSON deserialization در اپلیکیشن استفاده میشود.

４. Solution را Build کنید تا از نبود خطا مطمئن شوید.

گام دوم

درخواست های REST در زمانی استفاده میشوند که HTTP از همان HTTP verb هایی استفاده کند که browser ها برای بازیابی صفحات و ارسال داده به سرور، استفاده کند. در این بخش شما یک کلاس ایجاد میکنید که از GET verb، برای بازیابی داده از OpenWeatherMap web API، استفاده میکند. این web API میتواند برای بازیابی داده های پیش بینی آب و هوا در یک مکان خاص استفاده شود. برای استفاده از این web API شما ابتدا باید یک API key ثبت نام کنید.

ثبت نام برای API key

در Visual Studio

１. در Solution Explorer، در پروژه WebServiceTutorial، یک کلاس جدید به نام Constants به پروژه اضافه کنید. سپس در Constants.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین آن کنید:

    namespace WebServiceTutorial
    {
        public static class Constants
        {
            public const string OpenWeatherMapEndpoint = "https://api.openweathermap.org/data/2.5/weather";
            public const string OpenWeatherMapAPIKey = "INSERT_API_KEY_HERE";
        }
    }

این کد دو ثابت( constant) تعریف میکند. ثابت OpenWeatherMapEndpoint که endpoint مقابل درخواست کننده web request است و ثابت OpenWeatherMapAPIKey که API key شخصی شما را برای سرویس OpenWeatherMapنشان میدهد.

２. در Solution Explorer، در پروژه WebServiceTutorial، یک کلاس جدید به نام WeatherData به پروژه اضافه کنید. سپس در WeatherData.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using Newtonsoft.Json;

    namespace WebServiceTutorial
    {
        public class WeatherData
        {
            [JsonProperty("name")]
            public string Title { get; set; }
    
            [JsonProperty("weather")]
            public Weather[] Weather { get; set; }
    
            [JsonProperty("main")]
            public Main Main { get; set; }
    
            [JsonProperty("visibility")]
            public long Visibility { get; set; }
    
            [JsonProperty("wind")]
            public Wind Wind { get; set; }
        }
    
        public class Main
        {
            [JsonProperty("temp")]
            public double Temperature { get; set; }
    
            [JsonProperty("humidity")]
            public long Humidity { get; set; }
        }
    
        public class Weather
        {
            [JsonProperty("main")]
            public string Visibility { get; set; }
        }
    
        public class Wind
        {
            [JsonProperty("speed")]
            public double Speed { get; set; }
        }
    }

این کد چهار کلاس را تعریف میکند که برای مدل کردن بازیابیJSON data از سرویس وب استفاده میشوند. هر صفت با JsonProperty attribute ، decor شده است که شامل یک JSON filed name میباشد. Newtonsoft.Json از نگاشت JSON filed name به صفات CLR ، در زمان deserialize کردن داده های JSON به model objects، استفاده میکند.

３. در Solution Explorer، در پروژه WebServiceTutorial، یک کلاس جدید به نام RestService به پروژه اضافه کنید و سپس در RestService.cs کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    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 GetWeatherDataAsync(string uri)
            {
                WeatherData weatherData = null;
                try
                {
                    HttpResponseMessage response = await _client.GetAsync(uri);
                    if (response.IsSuccessStatusCode)
                    {
                        string content = await response.Content.ReadAsStringAsync();
                        weatherData = JsonConvert.DeserializeObject(content);
                    }
                }
                catch (Exception ex)
                {
                    Debug.WriteLine("\tERROR {0}", ex.Message);
                }
    
                return weatherData;
            }
        }
    }

این کد متد GetWeatherDataaAsync را تعروف میکند که دیتا اب و هوا را برای یل لوکیشن خاص از OpenWeatherMap web API دریافت میکند. این متد از متد HttpClient.GetAsync برای ارسال GET request به web API ، که با uri argument مشخص شده است، استفاده میکند. Web API یک پاسخ ارسال میکند که در شی HttpResponseMessage ذخیره میشود. پاسخ شامل یک HTTP status code است که مشخص میکند HTTP request با موفقیت ارسال شده یا نه. اگر درخواست موفقیت آمیز بوده باشد، web API با HTTP status code 200 (OK) و یک JSON response، که درون صفت HttpResponseMessage.Content است، پاسخ میدهد. این داده JSON با استفاده از متد HttpContent.ReadAsStringAsync به یک String تبدیل میشود و سپس با متد JsonConvert.DeserializeObject در شی WeatherData، deserialize میشود. این متد از نگاشت بین JSON filed name و CLR properties ، که در کلاس WeatherData تعریف شده است، برای deserialization استفاده میکند.

４. Solution را Build کنید تا از نبود خطا مطمئن شوید.

در Visual Studio for Mac

１. در Solution Pad، در پروژه WebServiceTutorial، یک کلاس جدید به نام Constants به پروژه اضافه کنید. سپس در Constants.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین آن کنید:

    
    namespace WebServiceTutorial
    {
        public static class Constants
        {
            public static string OpenWeatherMapEndpoint = "https://api.openweathermap.org/data/2.5/weather";
            public static string OpenWeatherMapAPIKey = "INSERT_API_KEY_HERE";
        }
    }

این کد دو ثابت( constant) تعریف میکند. ثابت OpenWeatherMapEndpoint که endpoint مقابل درخواست کننده web request است و ثابت OpenWeatherMapAPIKey که API key شخصی شما را برای سرویس OpenWeatherMapنشان میدهد.

２. در Solution Pad، در پروژه LocalDatabaseTutorial ، یک کلاس به نام Database به پروژه اضافه کنید و سپس کد های موجود در Database.cs را حذف کنید و کد زیر را جایگزین کنید:

２. در Solution Pad، در پروژه WebServiceTutorial، یک کلاس جدید به نام WeatherData به پروژه اضافه کنید. سپس در WeatherData.cs تمام کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using Newtonsoft.Json;

    namespace WebServiceTutorial
    {
        public class WeatherData
        {
            [JsonProperty("name")]
            public string Title { get; set; }
    
            [JsonProperty("weather")]
            public Weather[] Weather { get; set; }
    
            [JsonProperty("main")]
            public Main Main { get; set; }
    
            [JsonProperty("visibility")]
            public long Visibility { get; set; }
    
            [JsonProperty("wind")]
            public Wind Wind { get; set; }
        }
    
        public class Main
        {
            [JsonProperty("temp")]
            public double Temperature { get; set; }
    
            [JsonProperty("humidity")]
            public long Humidity { get; set; }
        }
    
        public class Weather
        {
            [JsonProperty("main")]
            public string Visibility { get; set; }
        }
    
        public class Wind
        {
            [JsonProperty("speed")]
            public double Speed { get; set; }
        }
    }

این کد چهار کلاس را تعریف میکند که برای مدل کردن بازیابیJSON data از سرویس وب استفاده میشوند. هر صفت با JsonProperty attribute ، decor شده است که شامل یک JSON filed name میباشد. Newtonsoft.Json از نگاشت JSON filed name به صفات CLR ، در زمان deserialize کردن داده های JSON به model objects، استفاده میکند.

３. در Solution Pad، در پروژه WebServiceTutorial، یک کلاس جدید به نام RestService به پروژه اضافه کنید و سپس در RestService.cs کد های موجود را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    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 GetWeatherDataAsync(string uri)
            {
                WeatherData weatherData = null;
                try
                {
                    HttpResponseMessage response = await _client.GetAsync(uri);
                    if (response.IsSuccessStatusCode)
                    {
                        string content = await response.Content.ReadAsStringAsync();
                        weatherData = JsonConvert.DeserializeObject(content);
                    }
                }
                catch (Exception ex)
                {
                    Debug.WriteLine("\tERROR {0}", ex.Message);
                }
    
                return weatherData;
            }
        }
    }

این کد متد GetWeatherDataaAsync را تعروف میکند که دیتا اب و هوا را برای یل لوکیشن خاص از OpenWeatherMap web API دریافت میکند. این متد از متد HttpClient.GetAsync برای ارسال GET request به web API ، که با uri argument مشخص شده است، استفاده میکند. Web API یک پاسخ ارسال میکند که در شی HttpResponseMessage ذخیره میشود. پاسخ شامل یک HTTP status code است که مشخص میکند HTTP request با موفقیت ارسال شده یا نه. اگر درخواست موفقیت آمیز بوده باشد، web API با HTTP status code 200 (OK) و یک JSON response، که درون صفت HttpResponseMessage.Content است، پاسخ میدهد. این داده JSON با استفاده از متد HttpContent.ReadAsStringAsync به یک String تبدیل میشود و سپس با متد JsonConvert.DeserializeObject در شی WeatherData، deserialize میشود. این متد از نگاشت بین JSON filed name و CLR properties ، که در کلاس WeatherData تعریف شده است، برای deserialization استفاده میکند.

４. Solution را Build کنید تا از نبود خطا مطمئن شوید.

گام سوم

در این تمرین شما یک UI برای استفاده از کلاس RestService میسازید که داده های OpenWeatherMap را بازیابی میکند.

در Visual Studio

１. در Solution Explorer، در پروژه WebServiceTutorial، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس تمامی کد های موجود در آن را حذف کنید و کد زیر را جایگزین آن کنید:

این کد UI صفحه را تعریف میکند که شامل یک Entry، یک Button و تعدادی Label در یک Grid میباشد. Entry با قرار دادن “Seattle” در صفت Text خود، از پیش پر شده است. event Clicked برای Button، OnButtonClicked event handler است که در گام بعدی ایجاد میشود. نیمی از Label ها متنی Static را نشان میدهند و بقیه آنها به صفات WeatherData ، bind شده اند. در زمان اجرا، label هایی که bind شده اند به صفت BindingContext خود در شی WeatherData میروند تا در Binding expression خود از آن استفاده کنند.

علاوه بر این Entry دارای یک نام مشخص شده با x:Name است که به Code-behind اجازه میدهد، با استفاده از این نام ، به این شی دسترسی پیدا کند.

２. در Solution Explorer، در پروژه WebServiceTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید را باز شود و تمامی کد های موجود در آن را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    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)
            {
                if (!string.IsNullOrWhiteSpace(cityEntry.Text))
                {
                    WeatherData weatherData = await _restService.GetWeatherDataAsync(GenerateRequestUri(Constants.OpenWeatherMapEndpoint));
                    BindingContext = weatherData;
                }
            }
    
            string GenerateRequestUri(string endpoint)
            {
                string requestUri = endpoint;
                requestUri += $"?q={cityEntry.Text}";
                requestUri += "&units=imperial"; // or units=metric
                requestUri += $"&APPID={Constants.OpenWeatherMapAPIKey}";
                return requestUri;
            }
        }
    }

متد OnButtonClicked ، که در زمان ضربه زدن به Button اجرا میشود، متد RestService.GetWeatherDataAsync را invoke میکند تا داده های اب و هوایی را برای شهری که نامش در Entry وارد شده، بازیابی کند. متد GetWeatherDataAsync نیاز به یک Srting argument ، که نشان دهنده URI of the web APi است که invoke شده است که این توسط متد GenerateRequestUri تولید میشود. این متد endpoint address ذخیره شده در ثابت OpenWeatherMapEndpoint را میگیرد و query parameter ها را به آن اضافه میکند که مشخص کننده موارد زیر است:

• شهری که داده آب و هایی برای آن درخواست داده شده.
• واحدی که باید داده های آب و هوایی که باید return شوند.
• Personal API key شما

پس از بازیابی داده های آب و هوا، BindingContext صفحه، شی WeatherData قرار میگیرد برای اطلاعات بیشتر درباره صفت BindingContext، Bindings with a Binding Context را در راهنما Xamarin.Forms Data Binding مطالعه کنید.

３. در Visual Studio toolbar دکمه start( که علامتی مثلثی شبیه به علامت Play دارد، بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود. بر Button ضربه بزنید تا اطلاعات حال حاضر Seattle را دریافت کنید:

در Visual Studio for Mac

１. در Solution Pad، در پروژه WebServiceTutorial، بر MainPage.xaml دابل کلیک کنید تا باز شود و سپس تمامی کد های موجود در آن را حذف کنید و کد زیر را جایگزین آن کنید:

این کد UI صفحه را تعریف میکند که شامل یک Entry، یک Button و تعدادی Label در یک Grid میباشد. Entry با قرار دادن “Seattle” در صفت Text خود، از پیش پر شده است. event Clicked برای Button، OnButtonClicked event handler است که در گام بعدی ایجاد میشود. نیمی از Label ها متنی Static را نشان میدهند و بقیه آنها به صفات WeatherData ، bind شده اند. در زمان اجرا، label هایی که bind شده اند به صفت BindingContext خود در شی WeatherData میروند تا در Binding expression خود از آن استفاده کنند. برای اطلاعات بیشتر درباره data binding به Xamarin.Forms Data Binding مراجعه کنید.

علاوه بر این Entry دارای یک نام مشخص شده با x:Name است که به Code-behind اجازه میدهد، با استفاده از این نام ، به این شی دسترسی پیدا کند.

２. در Solution Pad، در پروژه WebServiceTutorial، MainPage.xaml را باز کنید و بر MainPage.xaml.cs دابل کلیک کنید را باز شود و تمامی کد های موجود در آن را حذف کنید و کد زیر را جایگزین کنید:

    using System;
    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)
            {
                if (!string.IsNullOrWhiteSpace(cityEntry.Text))
                {
                    WeatherData weatherData = await _restService.GetWeatherDataAsync(GenerateRequestUri(Constants.OpenWeatherMapEndpoint));
                    BindingContext = weatherData;
                }
            }
    
            string GenerateRequestUri(string endpoint)
            {
                string requestUri = endpoint;
                requestUri += $"?q={cityEntry.Text}";
                requestUri += "&units=imperial"; // or units=metric
                requestUri += $"&APPID={Constants.OpenWeatherMapAPIKey}";
                return requestUri;
            }
        }
    }

متد OnButtonClicked ، که در زمان ضربه زدن به Button اجرا میشود، متد RestService.GetWeatherDataAsync را invoke میکند تا داده های اب و هوایی را برای شهری که نامش در Entry وارد شده، بازیابی کند. متد GetWeatherDataAsync نیاز به یک Srting argument ، که نشان دهندهURI of the web APi است که invoke شده است که این توسط متد GenerateRequestUri تولید میشود. این متد endpoint address ذخیره شده در ثابت OpenWeatherMapEndpoint را میگیرد و query parameter ها را به آن اضافه میکند که مشخص کننده موارد زیر است:

• شهری که داده آب و هایی برای آن درخواست داده شده.
• واحدی که باید داده های آب و هوایی که باید return شوند.
• Personal API key شما

پس از بازیابی داده های آب و هوا، BindingContext صفحه، شی WeatherData قرار میگیرد برای اطلاعات بیشتر درباره صفت BindingContext، Bindings with a Binding Context را در راهنما Xamarin.Forms Data Binding مطالعه کنید.

３. در Visual Studio for Mac toolbar دکمه start( که علامتی مثلثی شبیه به علامت Play دارد، بزنید تا اپلیکیشن در شبیه ساز انتخابی شما اجرا شود. بر Button ضربه بزنید تا اطلاعات حال حاضر Seattle را دریافت کنید:

چند داده وارد کنید، بر Button ضربه بزنید تا داده ها در دیتابیس ذخیره شودن و ListView را با دیتا جدید پر کنند:

گام چهارم

تبريك

شما با موفقیت این بخش را به اتمام رساندید و آموختید:

• استفاده از NuGet Package Manager برای اضافه کردن Newtonsoft.Json به پروژه های Xamarin.Forms.
• ایجاد کلاس هایی با قابلیت دسترسی به وب.
• استفاده از کلاس هایی که قابلیت دسترسی به وب دارند.