Tag Archives: api

Membuat Aplikasi Berita K-Pop dengan API Viki.com (JSON)

Apa kabar para developer Indonesia? Sehat dan masih bersemangat kan tentunya. 🙂

Pada artikel kali ini saya akan menepati janji saya untuk membuat satu contoh aplikasi menggunakan API dalam format JSON. Aplikasi ini akan menerima feed dari web Viki.com yang ter-update dan ditampilkan dalam bentuk grid.

Grid app merupakan sebuah template yang disediakan oleh team microsoft untuk dipakai oleh developer menyajikan data dengan lebih elegan.

 

 

Pembuatan Aplikasi

Sekarang waktunya pembuatan aplikasi. Pertama-tama kalian perlu membuat aplikasi grid terlebih dahulu dan beri nama : AplikasiMusikKorea

Aplikasi Musik Korea 1

Setelah itu tekan OK.

Kemudian karena kali ini kita akan membuat aplikasi yang membaca format JSON, maka kalian perlu menambahkan library JSON dengan cara klik kanan pada folder References dan pilih Manage NuGet Packages. Oh ya sebelumnya kalian harus terkoneksi internet untuk dapat mendownload library JSON.
Aplikasi Musik Korea 2

Setelah itu akan muncul tampilan seperti berikut :

Aplikasi Musik Korea 3

Pada bagian Search Online yang berada pada bagian atas kanan ketikkan “json” dan tekan enter maka akan tampil daftar library terkait yang dapat di download oleh kalian. Pilihlah “Json.NET” dan tekan tombol Install.

Aplikasi Musik Korea 4

Setelah terinstall maka Newtonsoft.Json.dll akan tertambah di bagian “References”. Ini berarti kalian dapat membuat objek dan memakai fungsi dari library tersebut.

Sekarang bukalah class SampleDataSource.cs yang berada di dalam folder DataModel. Kemudian tambahkan pada bagian header kedua syntax ini :

  • using Newtonsoft.Json.Linq;
  • using Newtonsoft.Json;

Dengan menambahkan syntax tersebut pada bagian header berarti kalian sekarang dapat membuat objek dan memakai fungsi dari Newtonsoft.Json.dll di dalam class SampleDataSource.cs.

Aplikasi Musik Korea 5

Kemudian kalian carilah “public SampleDataSource()” yang merupakan constructor dari class SampleDataSource.cs.

Aplikasi Musik Korea 6

Diatas dari constructor SampleDataSource buatlah sebuah prosedur asynchronous dengan nama “bindKoreaMusik()” sehingga tampilannya menjadi seperti ini :

Aplikasi Musik Korea 7

Di dalam prosedur tersebut tambahkan syntax di bawah ini :

System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();

try
{
var stringkorea = await client.GetStringAsync(“http://www.viki.com/api/v3/music_videos.json?access_token=ca236abe488687b79b365c6488c5621c49ad77c8024a1f3ad8327a95c7c5369e&genre=33”);
if (stringkorea != null)
{
JObject o = JObject.Parse(stringkorea);

for (int inc = 0; inc <= 9; inc++)
{
judul[inc] = o[“response”][inc][“title”].ToString();
tggl[inc] = o[“response”][inc][“created_at”].ToString();
gambar[inc] = o[“response”][inc][“image”].ToString();
artis[inc] = o[“response”][inc][“artist”][“name”].ToString();
}
}

String ITEM_CONTENT = String.Format(“Item Content: {0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}”,
“Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat”);

var group1 = new SampleDataGroup(“Group-1”,
“K-pop”,
“Group Subtitle: 1”,
“Assets/DarkGray.png”,
“Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante”);
group1.Items.Add(new SampleDataItem(“Group-1-Item-1”,
“Judul: ” + judul[0],
“Artis: ” + artis[0],
gambar[0],
“Tanggal: ” + tggl[0],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-2”,
“Judul: ” + judul[1],
“Artis: ” + artis[1],
gambar[1],
“Tanggal: ” + tggl[1],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-3”,
“Judul: ” + judul[2],
“Artis: ” + artis[2],
gambar[2],
“Tanggal: ” + tggl[2],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-4”,
“Judul: ” + judul[3],
“Artis: ” + artis[3],
gambar[3],
“Tanggal: ” + tggl[3],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-5”,
“Judul: ” + judul[4],
“Artis: ” + artis[4],
gambar[4],
“Tanggal: ” + tggl[4],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-6”,
“Judul: ” + judul[5],
“Artis: ” + artis[5],
gambar[5],
“Tanggal: ” + tggl[5],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-7”,
“Judul: ” + judul[6],
“Artis: ” + artis[6],
gambar[6],
“Tanggal: ” + tggl[6],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-8”,
“Judul: ” + judul[7],
“Artis: ” + artis[7],
gambar[7],
“Tanggal: ” + tggl[7],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-9”,
“Judul: ” + judul[8],
“Artis: ” + artis[8],
gambar[8],
“Tanggal: ” + tggl[8],
ITEM_CONTENT,
group1));
group1.Items.Add(new SampleDataItem(“Group-1-Item-10”,
“Judul: ” + judul[9],
“Artis: ” + artis[9],
gambar[9],
“Tanggal: ” + tggl[9],
ITEM_CONTENT,
group1));
this.AllGroups.Add(group1);

}
catch
{
}

 

Disini kalian dapat lihat “o” adalah objek dari JSON. Dan judul, tggl, gambar, dan artis yang memiliki array antara 0-9 saya beri inputan dari api dengan format JSON yang dipanggil oleh HttpClient.

Jika kalian bingung darimana bentuk pemarsingan tersebut sebaiknya kalian lihat artikel yang saya buat sebelumnya dengan klik disini.

 

Setelah itu kalian hapus semua isi syntax di dalam constructor SampleDataSource(), dan isikan syntax di dalamnya : bindKoreaMusik();

sehingga tampilan constructor kalian akan seperti ini :

Aplikasi Musik Korea 8

 

 

Jalankan Aplikasi

Saatnya mencoba aplikasi! Sekarang run project kalian. Dan setelah menunggu beberapa saat tampillah berita k-pop anda.

Aplikasi Musik Korea 9

Dicoba di rumah ya teman-teman. 🙂

Peta Dunia Di Metro Style Windows 8 Menggunakan Google Maps API

Pada siang hari kali ini saya akan membangun sebuah aplikasi yang dapat menampilkan peta kota ataupun negara. Bagaimana caranya? Mungkin itu yang ada di benak kalian ketika membaca artikel ini pertama kali.
Sebenarnya tidak sulit untuk menampilkan peta yang dinamis sesuai dengan pencarian yang pengguna inputkan.
Disini saya akan menggunakan Google Maps API untuk mencari peta dari tempat/kota yang pengguna inputkan di aplikasi. Google Maps menyediakan API yang dapat kalian sebagai developer gunakan.

 

 
Pembuatan Aplikasi

Langsung saja ke dalam pembuatan aplikasi.

Pertama-tama kalian perlu membuat blank app (XAML) dengan nama : AplikasiCariPeta

Setelah blank app dibuat, design lah tampilan aplikasi sehingga tampak seperti berikut.

Tampilan Aplikasi Cari Peta 1

Kalian dapat menambahkan kode berikut ke dalam bagian grid untuk mendapatkan tampilan tersebut :

<Grid Background=”#FF207627″>
<TextBlock HorizontalAlignment=”Left” Margin=”434,50,0,0″ TextWrapping=”Wrap” Text=”Cari” VerticalAlignment=”Top” Height=”55″ Width=”97″ FontSize=”48″/>
<TextBox x:Name=”petaTxtBox” HorizontalAlignment=”Left” Margin=”552,46,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”65″ Width=”402″ FontSize=”36″/>
<Image x:Name=”petaImage” HorizontalAlignment=”Left” Height=”600″ Margin=”400,143,0,0″ VerticalAlignment=”Top” Width=”600″/>

</Grid>

Setelah itu tambahkan event keydown pada textbox dengan menambahkan kode : KeyDown=”ReadKey”  diantara “<TextBox” hingga “/>”. Kemudian klik kanan pada KeyDown=”ReadKey” dan pilih “Navigate to Event Handler”.

Setelah kalian melakukannya tampilan pada layar kalian akan seperti ini :

Tampilan Aplikasi Cari Peta 2

Lalu tambahkan kode seperti berikut di dalam void ReadKey :

if (e.Key == Windows.System.VirtualKey.Enter)
{
try
{
petaImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri(“http://maps.googleapis.com/maps/api/staticmap?center=&#8221; + petaTxtBox.Text + “&zoom=13&size=600×600&maptype=hybrid&sensor=false”));
}
catch
{
petaTxtBox.Text = “Periksalah koneksi internet anda!”;
}
}

Disini kalian dapat melihat bagian “if (e.Key == Windows.System.VirtualKey.Enter)” adalah kondisi untuk membaca inputan key Enter.

Bagian “petaImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage” adalah statement untuk mengisi Image yg bernama petaImage dengan BitmapImage yang berasal dari alamat Url maps.googleapis.com.

Tampilan kalian seharusnya sekarang menjadi seperti ini :

Tampilan Aplikasi Cari Peta 3

 

 

Jalankan Aplikasi

Sekarang waktunya menjalankan aplikasi! Run project AplikasiCariPeta kalian. Lalu ketikkan nama kota/negara dalam textbox dan tekan Enter.

Maka Taraa~~ peta dari tempat yang anda ketikkan muncul setelah beberapa saat aplikasi anda mengunggu respon dari server.

Tampilan Aplikasi Cari Peta 4