Mari Belajar Universal Windows Apps (Windows 8.1) [Part-2 Get Data Dari Web Service]

Sebelumnya, udah dijelasin apa itu Universal Windows Apps dan cara creating-nya di Visual Studio (Intro - Universal Windows Apps) dan sekarang mari kita buat UWA dengan web service yang ada di artikel Membuat Web Service Sederhana, dan jangan lupa juga baca MVVM Pattern.

Mari buka Visual Studionya, let's coding!

Step 1

Buat struktur folder seperti berikut, di Shared Projects

Step 2
Untuk isi dari folder Commons silahkan download di http://1drv.ms/1LQJbhz


Step 3
Download Newtonsoft Json disini http://1drv.ms/1HWYkQ4
dan tambahkan reference ke Project Pelindung-Satwa.Windows & Pelindung-Satwa.WindowsPhone

Step 4 
Buat class baru di folder Helpers dan beri nama URL.cs

        //URL Web Service yang sebelumnya sudah kita buat
        public const String BASE = "http://localhost/pelindung_satwa/";

Step 5
Buat class baru di folder Models dan beri nama MAnimals.cs
Supaya tidak bingung nama variabel samakan saja dengan yang ada di Web Service

        
        public String animal_id { get; set; }
        public String animal_name { get; set; }
        public String animal_latin { get; set; }
        public String animal_icon { get; set; }
        public String animal_desc { get; set; }

Step 6
Buat class baru di folder ViewModels dan beri nama VMAnimals.cs

 
        private ObservableCollection<manimal> collectionAnimal = new ObservableCollection<manimal>();
        public ObservableCollection<manimal> CollectionAnimal
        {
            get { return collectionAnimal; }
            set
            {
                if (this.collectionAnimal != value)
                {
                    collectionAnimal = value;
                    RaisePropertyChanged("");
                }
            }
        }

        public VMAnimal()
        {
            this.LoadUrl();
        }

        private async void LoadUrl()
        {
            HttpClient clientlistanimal = new HttpClient();
            try
            {
                String ResponceResult = await clientlistanimal.GetStringAsync(new Uri(URL.BASE) + "getanimal.php");
                DownloadListAnimal(ResponceResult);
                clientlistanimal.Dispose();
            }
            catch (Exception e)
            {
                e.Message.ToString();
            }
        }

        private void DownloadListAnimal(String Result)
        {
            try
            {
                JObject jresult = JObject.Parse(Result);
                JArray jdata = JArray.Parse(jresult.SelectToken("item").ToString());
                foreach (JObject item in jdata)
                {
                    MAnimal manimal = new MAnimal();
                    manimal.animal_id = item.SelectToken("animal_id").ToString();
                    manimal.animal_name = item.SelectToken("animal_name").ToString();
                    manimal.animal_latin = item.SelectToken("animal_latin").ToString();
                    manimal.animal_icon = URL.BASE + "Assets/" + item.SelectToken("animal_icon").ToString();
                    manimal.animal_desc = item.SelectToken("animal_desc").ToString();
                                        
                    collectionAnimal.Add(manimal);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }       

jgn lupa di folder htdocs buat folder Assets dan simpan gambar ini
http://1drv.ms/1Qj3tRE


Step 7
Di Project Pelindung-Satwa.WindowsPhone dan Pelindung-Satwa.Windows buka MainPage.xaml

<ListView x:Name="lvAnimal" Margin="28,25,0,-1" ItemsSource="{Binding CollectionAnimal}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="93" Width="400">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Ellipse Width="70" Height="70" HorizontalAlignment="Left" Margin="0,10" Grid.Column="1">
                            <Ellipse.Fill>
                                <ImageBrush Stretch="UniformToFill" ImageSource="{Binding animal_icon}"/>
                            </Ellipse.Fill>
                        </Ellipse>
                        <StackPanel Grid.Column="2" Margin="0,10,15,0" VerticalAlignment="Top">
                            <TextBlock TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxLines="1" Text="{Binding animal_name}" FontWeight="Bold" FontSize="25" Foreground="#fff"/>
                            <TextBlock TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxLines="1" Text="{Binding animal_latin}" Opacity="0.6" Foreground="#fff"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

dan pada MainPage.cs di masing2 project di dalam constructor (Public MainPage())

this.DataContext = new VMAnimal();

dan Jreng2 hasilnya akan seperti ini