Pembuatan Aplikasi Menggunakan API

Sore...

Sekarang kita akan membahas bagaimana cara membuat aplikasi yang datanya menggunakan API. Udah ada yang tau apa itu API? API adalah sekumpulan perintah, fungsi dan protokol yang dapat digunakan oleh programer saat membangun perangkat lunak untuk sistem operasi tertentu (Wikipedia). Saya menggunakan metode MVVM yang sudah saya jelaskan disini. 

Oke langsung saja kalu begitu. Disini saya menggunakan API yang disediakan oleh http://lintas.me. Saya hanya menggunakan yang news saja tetapi untuk pengembangannya anda dapatmenggunakan yang lainnya juga. Untuk mendapatkan bagian news kita menggunakan url dibawah ini

http://www.lintas.me/rest/gettopicpopular/&channel=lifestyle&offset=0&limit=15&rt=json

Selanjutnya kita buat project baru dengan mengklik File -> New Project -> Windows phone panorama app di visual studio kita. Selanjutnya kita buat folder Model di dalam project itu dan kita tambahkan class di dalam folder Model dengan nama News. Selanjutnya di dalam folder ViewModels kita tambahkan juga class dengan nama NewsViewModel sehingga tampilannya seperti ini.

Jangan lupa kita menambahkan references newtonsof.jason.dll yang bisa di download disini dan jangan lupa menambahkan juga Microsoft.Phone.Controls.dll.

Setalah itu buka link yang di atas tadi maka anda akan mendapatkan data seperti ini.

Setelah itu anda buka http://json2csharp.com/ untuk mengubah data tersebut menjadi bahasa c#.

Sekarang mari kita mengcoding... hehehhe

1) Pertama, copy hasil convert tadi ke News.cs bagian public class rootobject kita ganti dengan nama News

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace news.Model
{
    public class Result
    {
        public string id { get; set; }
        public string title { get; set; }
        public string link_title_url { get; set; }
        public string link_url { get; set; }
        public string message { get; set; }
        public string creator_id { get; set; }
        public string creator_name { get; set; }
        public int creation_date { get; set; }
        public string creation_date_txt { get; set; }
        public int last_update { get; set; }
        public string last_update_txt { get; set; }
        public string channel_id { get; set; }
        public string channel_name { get; set; }
        public string domain { get; set; }
        public string small_images { get; set; }
        public string medium_images { get; set; }
        public string large_images { get; set; }
        public string type { get; set; }
        public List<string> tag { get; set; }
        public List<object> tag2 { get; set; }
        public int views { get; set; }
    }

    public class News
    {
        public List<Result> result { get; set; }
    }
}

2) Selanjutnya anda tambahkan code dibawah ini di NewsViewModel.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using news.Model;

using Newtonsoft.Json;

using System.Collections.ObjectModel;

using System.Net;

using System.Windows;

namespace news.ViewModels

{

    public class NewsViewModel

    {

        public NewsViewModel()

        {

            this.NewsItems = new ObservableCollection<Result>();

        }

        public ObservableCollection<Result> NewsItems { get; private set; }

        public bool isDataNewsLoaded

        {

            get;

            private set;

        }

        public void NewsSeach()

        {

            Uri url = new Uri("http://www.lintas.me/rest/getstreampopular/&channel=lifestyle&offset=0&limit=8&rt=json");

            WebClient client = new WebClient();

            client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

            client.DownloadStringAsync(url);

        }

        void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                if (e.Result != null)

                    try

                    {

                        string NewsResult = e.Result;

                        Model.News item = JsonConvert.DeserializeObject<Model.News>(NewsResult);

                        foreach (Result data in item.result)

                        {

                            NewsItems.Add(data);

                        }

                        this.isDataNewsLoaded = true;

                    }

                    catch (Exception)

                    {

                        MessageBox.Show("Getting Data Error");

                    }

            }

            else

            {

                Deployment.Current.Dispatcher.BeginInvoke(() => { MessageBox.Show("Internet connection error"); });

            }

        }

    }

}

3) Sekarang anda buka mainpage.xaml dan tambahkan code ini. Di mainpage.xaml kita tambahkan
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" agar dapat memanggil library microsoft.phone.control.

<controls:PanoramaItem Header="News" Height="613">

                <StackPanel HorizontalAlignment="Left" Height="491" VerticalAlignment="Top" Width="411">

                    <ScrollViewer>

                        <ListBox x:Name="lbnews" Height="496" Margin="12,0,0,0">

                            <ListBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel Orientation="Horizontal">

                                        <Image Height="130" Width="130" Source="{Binding small_images}" Margin="0,10,0,0"/>

                                        <TextBlock TextWrapping="Wrap" FontWeight="Bold" Foreground="Black" Text="{Binding title}" Margin="10,0,0,0"/>

                                    </StackPanel>

                                </DataTemplate>

                            </ListBox.ItemTemplate>

                        </ListBox>

                    </ScrollViewer>

                </StackPanel>

                <!--Double line list with image placeholder and text wrapping-->

            </controls:PanoramaItem>

4) Lalu kita tambahkan code di MainPage.xaml.cs

using System;

using System.Net;

using System.Collections.Generic;

using System.Linq;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace news

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            

            InitializeComponent();

            // Set the data context of the listbox control to the sample data

          //  DataContext = App.ViewModel;

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        

        //private void InitializeComponent()

        //{

        //    throw new NotImplementedException();

        //}

        // Load data for the ViewModel Items

        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            if (!App.NewsViewModel.isDataNewsLoaded)

            {

                App.NewsViewModel.NewsSeach();

            }

            lbnews.ItemsSource = App.NewsViewModel.NewsItems;

        }

        // Load data for the ViewModel Items

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            if (!App.ViewModel.IsDataLoaded)

            {

                App.ViewModel.LoadData();

            }

        }

    }

}

5) Langkah terakhir kita tambah code di App.xaml.cs

private static NewsViewModel NewsViewModell = null;

        /// <summary>

        /// A static ViewModel used by the views to bind against.

        /// </summary>

        /// <returns>The MainViewModel object.</returns>

        public static NewsViewModel NewsViewModel

        {

            get

            {

                // Delay creation of the view model until necessary

                if (NewsViewModell == null)

                    NewsViewModell = new NewsViewModel();

                return NewsViewModell;

            }

        }

Sekian dari saya...

Kalau ada yang tidak jelas bisa di coment dibawah artikel ini..

Selamat mencoba..

Kalau ada yang butuh source codenya bisa di download di http://sdrv.ms/10Mnx8V

Terimakasih sudah berkunjung ke blog saya...