{"id":518,"date":"2020-08-08T09:09:02","date_gmt":"2020-08-08T09:09:02","guid":{"rendered":"https:\/\/serkanseker.com\/?p=518"},"modified":"2021-01-13T09:06:47","modified_gmt":"2021-01-13T09:06:47","slug":"xamarin-forms-covid-19-app","status":"publish","type":"post","link":"https:\/\/serkanseker.com\/tr\/xamarin-forms-covid-19-app\/","title":{"rendered":"Xamarin.Forms Covid-19 App"},"content":{"rendered":"\n

Hello, in this post I will show you the construction of Covid-19 application in Xamarin.Forms. First I will get the data from the service and then show this data in ListView.<\/p>\n\n\n\n

I will be using this service<\/a> to pull in Covid-19 data. Here, the number of patients, recovered, deaths, etc. for each country are shown.<\/p>\n\n\n\n

Covid-19 Model Class<\/h2>\n\n\n\n

To properly pull data, a model class is required first. The variable names of this class must be the same as the property names of the JSON file that we will draw. To do this easily, click on the link written above and copy the data. Then go to jsonutils.com<\/a> and submit it as a C# class.<\/p>\n\n\n\n

Right click on the project and add a class named Example.cs<\/strong><\/p>\n\n\n\n

    public class Example\n    {\n        public string objectIdFieldName { get; set; }\n        public UniqueIdField uniqueIdField { get; set; }\n        public string globalIdFieldName { get; set; }\n        public string geometryType { get; set; }\n        public SpatialReference spatialReference { get; set; }\n        public List<Field> fields { get; set; }\n        public bool exceededTransferLimit { get; set; }\n        public List<Feature> features { get; set; }\n    }\n    public class UniqueIdField\n    {\n        public string name { get; set; }\n        public bool isSystemMaintained { get; set; }\n    }\n\n    public class SpatialReference\n    {\n        public int wkid { get; set; }\n        public int latestWkid { get; set; }\n    }\n\n    public class Field\n    {\n        public string name { get; set; }\n        public string type { get; set; }\n        public string alias { get; set; }\n        public string sqlType { get; set; }\n        public object domain { get; set; }\n        public object defaultValue { get; set; }\n        public int? length { get; set; }\n    }\n\n    public class Attributes\n    {\n        public int OBJECTID { get; set; }\n        public string Province_State { get; set; }\n        public string Country_Region { get; set; }\n        public object Last_Update { get; set; }\n        public double? Lat { get; set; }\n        public double? Long_ { get; set; }\n        public int Confirmed { get; set; }\n        public int Recovered { get; set; }\n        public int Deaths { get; set; }\n        public int Active { get; set; }\n        public object Admin2 { get; set; }\n        public object FIPS { get; set; }\n        public string Combined_Key { get; set; }\n    }\n\n    public class Feature\n    {\n        public Attributes attributes { get; set; }\n    }<\/code><\/pre>\n\n\n\n
Covid-19 ViewModel Class<\/h2>\n\n\n\n
BaseViewModel.cs<\/h3>\n\n\n\n
A BaseViewModel class is required to control the variability of the data. Right click on the project and add a class named BaseViewModel.cs<\/strong>. It inherits INotifyPropertyChanged interface.<\/p>\n\n\n\n
    public class BaseViewModel : INotifyPropertyChanged\n    {\n        private bool _isLoading { get; set; }\n        public bool IsLoading\n        {\n            get\n            {\n                return _isLoading;\n            }\n            set\n            {\n                if (value != _isLoading)\n                {\n                    _isLoading = value;\n                    NotifyPropertyChanged();\n                }\n            }\n        }\n\n        public event PropertyChangedEventHandler PropertyChanged;\n        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")\n        {\n            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n    }<\/code><\/pre>\n\n\n\n
APIViewModel.cs<\/h3>\n\n\n\n
Now create the APIViewModel.cs<\/strong> class. In this class, Covid-19 data is taken and placed in the List.<\/p>\n\n\n\n
Then go to Manage NuGet Packages<\/strong> and download the Newtonsoft.Json<\/strong> plugin. With this plugin, you can easily deserialize the JSON file. In Top 5 Useful Plugins in Xamarin<\/a> article, I have listed useful plugins.<\/p>\n\n\n\n
    public class APIViewModel : BaseViewModel\n    {\n        private List<Attributes> attributeList { get; set; }\n        public List<Attributes> attributes\n        {\n            get\n            {\n                return attributeList;\n            }\n\n            set\n            {\n                if (value != attributeList)\n                {\n                    attributeList = value;\n                    NotifyPropertyChanged();\n                }\n            }\n        }\n        public APIViewModel()\n        {\n            GetDataAsync();\n        }\n        string url = "https:\/\/services1.arcgis.com\/0MSEUqKaxRlEPj5g\/arcgis\/rest\/services\/ncov_cases\/FeatureServer\/1\/query?f=json&where=(Confirmed%3E%200)%20OR%20(Deaths%3E0)%20OR%20(Recovered%3E0)&returnGeometry=false&outFields=*&orderByFields=Country_Region%20asc,Province_State%20asc&resultOffset=0&resultRecordCount=250";\n        private async void GetDataAsync()\n        {\n            IsLoading = true;\n            HttpClient httpClient = new HttpClient();\n            var response = await httpClient.GetAsync(url);\n            if (response.IsSuccessStatusCode)\n            {\n                var content = await response.Content.ReadAsStringAsync();\n                var posts = JsonConvert.DeserializeObject<Example>(content);\n              List<Attributes>  data = new List<Attributes>();\n                for (int i = 0; i < posts.features.Count; i++)\n                {\n                    data.Add(new Attributes\n                    {\n                        Country_Region = posts.features[i].attributes.Country_Region,\n                        Confirmed = posts.features[i].attributes.Confirmed,\n                        Recovered = posts.features[i].attributes.Recovered,\n                        Deaths = posts.features[i].attributes.Deaths,\n                    });\n                }\n                attributes = data;\n            }\n            else\n            {\n                Debug.WriteLine("Error when get data!");\n            }\n            IsLoading = false;\n        }\n    }<\/code><\/pre>\n\n\n\n
Notice that this class inherits the BaseViewModel <\/strong>class.<\/mark><\/p>\n\n\n\n
We will also use the IsLoading <\/strong>bool variable for the ActivityIndicator on the XAML side.<\/mark><\/p>\n\n\n\n
Show Covid-19 Datas in MainPage.xaml<\/h2>\n\n\n\n
After taking the data and putting them in the List, let’s show them in the ListView that we will create in ContentPage. And with an ActivityIndicator, let’s check if the data is coming in.<\/p>\n\n\n\n
There is no need to create a new ContentPage, as the MainPage.xaml<\/strong> page was added while creating the application.<\/p>\n\n\n\n
ListView<\/h3>\n\n\n\n
Create a ListView <\/strong>in MainPage. Instead of typing manually, you can drag and drop from Toolbox. Add a Grid with 2 rows and 3 columns into the <ViewCell><\/strong> in the <DataTemplate<\/strong>>.<\/p>\n\n\n\n
            <ListView ItemsSource="{Binding attributes}" RowHeight="75">\n                <ListView.ItemTemplate>\n                    <DataTemplate>\n                        <ViewCell>\n                            <StackLayout>\n                                <Grid>\n                                    <Label Text="{Binding Country_Region}" TextColor="#ff1e56"  Grid.Row="0" Grid.ColumnSpan="3"  Grid.RowSpan="2" HorizontalTextAlignment="Center" FontSize="20"\/>\n                                    <Label Text="Confirmed" TextColor="#000000" Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Confirmed}" TextColor="#706c61" Grid.Row="2" Grid.Column="0" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="Recovered" TextColor="Black" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Recovered}" TextColor="#706c61" Grid.Row="2" Grid.Column="1" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="Deaths" TextColor="Black" Grid.Row="1" Grid.Column="2" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Deaths}" TextColor="#706c61" Grid.Row="2" Grid.Column="2" HorizontalTextAlignment="Center"\/>\n                                <\/Grid>\n                            <\/StackLayout>\n                        <\/ViewCell>\n                    <\/DataTemplate>\n                <\/ListView.ItemTemplate>\n            <\/ListView><\/code><\/pre>\n\n\n\n
ActivityIndicator<\/h3>\n\n\n\n
Now create an ActivityIndicator <\/strong>for control purposes. Bind the IsLoading <\/strong>variable in the ViewModel class to IsRunning <\/strong>and IsVisible <\/strong>here.<\/p>\n\n\n\n
            <Label Text="Loading..." \n                   IsVisible="{Binding IsLoading}"\n                   TextColor="Blue"\n                   VerticalOptions="CenterAndExpand"\n                   HorizontalOptions="CenterAndExpand"\/>\n            <ActivityIndicator \n                IsRunning="{Binding IsLoading}"\n                IsVisible="{Binding IsLoading}"\n                Color="Blue"\n                HorizontalOptions="CenterAndExpand"\n                VerticalOptions="CenterAndExpand"\/><\/code><\/pre>\n\n\n\n
MainPage.xaml will look like this.<\/p>\n\n\n\n
    <ContentPage.Content>\n        <StackLayout>\n            <Label Text="Loading..." \n                   IsVisible="{Binding IsLoading}"\n                   TextColor="Blue"\n                   VerticalOptions="CenterAndExpand"\n                   HorizontalOptions="CenterAndExpand"\/>\n\n            <ActivityIndicator \n                IsRunning="{Binding IsLoading}"\n                IsVisible="{Binding IsLoading}"\n                Color="Blue"\n                HorizontalOptions="CenterAndExpand"\n                VerticalOptions="CenterAndExpand"\/>\n  \n          <ListView ItemsSource="{Binding attributes}" RowHeight="75">\n                <ListView.ItemTemplate>\n                    <DataTemplate>\n                        <ViewCell>\n                            <StackLayout>\n                                <Grid>\n                                    <Label Text="{Binding Country_Region}" TextColor="#ff1e56"  Grid.Row="0" Grid.ColumnSpan="3"  Grid.RowSpan="2" HorizontalTextAlignment="Center" FontSize="20"\/>\n                                    <Label Text="Confirmed" TextColor="#000000" Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Confirmed}" TextColor="#706c61" Grid.Row="2" Grid.Column="0" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="Recovered" TextColor="Black" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Recovered}" TextColor="#706c61" Grid.Row="2" Grid.Column="1" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="Deaths" TextColor="Black" Grid.Row="1" Grid.Column="2" HorizontalTextAlignment="Center"\/>\n                                    <Label Text="{Binding Deaths}" TextColor="#706c61" Grid.Row="2" Grid.Column="2" HorizontalTextAlignment="Center"\/>\n                                <\/Grid>\n                                \n                            <\/StackLayout>\n                        <\/ViewCell>\n                    <\/DataTemplate>\n                <\/ListView.ItemTemplate>\n            <\/ListView>       \n        <\/StackLayout>\n    <\/ContentPage.Content><\/code><\/pre>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
When you run the project, a screen like this will appear. You can change the statusBarColor<\/strong>, navigationBarColor <\/strong>etc by playing with the design a little. In Material Theme in Xamarin<\/a> article I showed you how to do this.<\/p>\n\n\n\n
\"Xamarin.Forms
Xamarin.Forms Covid-19 App ListView ActivityIndicator<\/figcaption><\/figure>\n\n\n\n
Related Posts<\/h2>\n\n\n\n