Tag Archives: windows 8

Update Status Facebook dengan Aplikasi Metro Style

Oke, pada hari ini saya akan menjelaskan kepada kalian bagaimana membuat aplikasi di windows 8 dengan fungsionalitas update status Facebook. Pada saat ini sudah banyak, bahkan saya rasa semua diantara pembaca sudah memiliki akun Facebook ya kan? Oleh karena itulah saya rasa artikel ini penting untuk dibuat karena ketika mendevelop aplikasi sangat mungkin suatu saat kalian akan membutuhkan integrasi dengan Facebook, salah satunya yaitu menulis informasi ke dalam status Facebook.

Bagaimana cara mengintegrasikan aplikasi dengan Facebook? Kita akan menggunakan API facebook sebagai jembatan untuk dapat melakukan aksi ke dalam Facebook.

 

Sebelum membuat aplikasi, kalian perlu mengetahui bahwa untuk dapat menggunakan API facebook kalian harus memiliki Application ID yang dapat kalian dapatkan dengan membuat aplikasi di dalam facebook. Berikut adalah caranya :

Pertama-tama kalian bukalah halaman https://developers.facebook.com/

Integrasi dengan Facebook 1

Jika kalian belum melakukan log-in pada Facebook, anda lakukanlah log-in dengan cara klik tombol log-in di atas kanan.

Setelah kalian melakukan log-in bukalah halaman ini di browser https://developers.facebook.com/apps/?action=create

Dan isikanlah “App Name”  sesuai dengan nama aplikasi facebook yang akan kalian buat (nama aplikasi bebas dan ketersediaannya akan diperiksa oleh sistem).

Integrasi dengan Facebook 2

Lalu tekan Continue. Setelah itu kalian akan diminta untuk memasukkan Code Captcha.

Integrasi dengan Facebook 3

Setelah menginputkan code dengan benar tekan Continue dan kalian telah berhasil membuat aplikasi di Facebook.

Setelah itu bukalah halaman ini di browser https://developers.facebook.com/apps

Integrasi dengan Facebook 4

Yang saya lingkari merah adalah Application ID yang perlu kalian catat karena akan dipergunakan untuk mengintegrasikan aplikasi metro style kalian dengan aplikasi Facebook yang baru saja kalian buat ini. 🙂

 

 

Pembuatan Aplikasi

Sebelum membuat aplikasi kalian juga perlu mendownload Facebook.dll yang saya bagikan untuk kalian dengan klik disini.

Setelah mendownload file Facebook.dll tersebut. Sekarang buatlah Blank App baru di Visual Studio 2012 kalian.

Beri nama aplikasi kalian : TulisWallFacebook dan kemudian tekan OK.

Tambahkan Facebook.dll pada project kalian dengan cara klik kanan pada bagian References dan pilihlah “add references..”. Kemudian tekan browse dan carilah file Facebook.dll yang telah kalian download tadi.

Integrasi dengan Facebook 5

Setelah Facebook.dll tertambahkan di dalam Folder References, kalian tambahkanlah Blank Page baru dengan cara klik kanan pada bagian “TulisWallFacebook” (Nama aplikasi Blank App yang kalian buat) pada bagian Solution Explorer. Kemudian pilihlah Add-New Item.

Integrasi dengan Facebook 7

Setelah itu pilihlah Blank Page dan beri nama TulisWall.xaml kemudian tekan Add.

Integrasi dengan Facebook 6

 

MainPage.Xaml

Oke setelah itu pada MainPage.xaml, tambahkan code berikut pada bagian grid :

<Grid Background=”#FF146F99″>
<Button Content=”Masuk” HorizontalAlignment=”Left” Margin=”538,328,0,0″ VerticalAlignment=”Top” Height=”102″ Width=”290″ FontSize=”36″ Click=”Masuk”/>
</Grid>

Sehingga tampilan MainPage.xaml kalian menjadi seperti berikut.

Integrasi dengan Facebook 8

Setelah itu tekan “F7”, sehingga kalian akan masuk ke dalam MainPage.xaml.cs. Dan tulislah pada bagian header :

using Facebook;
using Windows.Security.Authentication.Web;
using System.Dynamic;

 

dan kemudian deklarasikanlah di atas constructor kalian:

string applicationID = “436497xxxxxxxx”; (Aplikasi ID yang sebelumnya telah kalian buat)

string permission = “user_about_me,read_stream,publish_stream”;

FacebookClient _fb = new FacebookClient();

 

Kemudian buatlah buatlah prosedur berikut sebagai eventHandler click dari Button :

private async void Masuk(object sender, RoutedEventArgs e)
{
var redirectUrl = “https://www.facebook.com/connect/login_success.html&#8221;;
try
{
var loginUrl = _fb.GetLoginUrl(new
{
client_id = applicationID,
redirect_uri = redirectUrl,
scope = permission,
display = “popup”,
response_type = “token”
});

var endUri = new Uri(redirectUrl);

WebAuthenticationResult WebAuthenticationResult = await WebAuthenticationBroker.AuthenticateAsync(
WebAuthenticationOptions.None,
loginUrl,
endUri);
if (WebAuthenticationResult.ResponseStatus == WebAuthenticationStatus.Success)
{
var callbackUri = new Uri(WebAuthenticationResult.ResponseData.ToString());
var facebookOAuthResult = _fb.ParseOAuthCallbackUrl(callbackUri);

var accessToken = facebookOAuthResult.AccessToken;
if (String.IsNullOrEmpty(accessToken))
{
}
else
{
LoginSucceded(accessToken);
}

}
else if (WebAuthenticationResult.ResponseStatus == WebAuthenticationStatus.ErrorHttp)
{
throw new InvalidOperationException(“HTTP Error returned by AuthenticateAsync() : ” + WebAuthenticationResult.ResponseErrorDetail.ToString());
}
else
{
}
}
catch (Exception ex)
{
throw ex;
}
}

 

Dan tambahkan prosedur :

private async void LoginSucceded(string accessToken)
{
dynamic parameters = new ExpandoObject();
parameters.access_token = accessToken;
parameters.fields = “id”;

dynamic result = await _fb.GetTaskAsync(“me”, parameters);
parameters = new ExpandoObject();
parameters.id = result.id;
parameters.access_token = accessToken;

Frame.Navigate(typeof(TulisWall), (object)parameters);
}

 

TulisWall.Xaml

Pada Blank Page TulisWall.Xaml tulislah code berikut di bagian grid :

<Grid Background=”#FF146F99″>
<Image x:Name=”picProfile” HorizontalAlignment=”Left” Height=”200″ Margin=”22,24,0,0″ VerticalAlignment=”Top” Width=”200″/>
<TextBox x:Name=”txtMessage” HorizontalAlignment=”Left” Margin=”262,121,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”89″ Width=”847″ FontSize=”48″/>
<TextBlock x:Name=”TotalFriends” HorizontalAlignment=”Left” Margin=”639,383,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”47″ Width=”679″ FontSize=”48″/>
<TextBlock x:Name=”ProfileName” HorizontalAlignment=”Left” Margin=”639,291,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”47″ Width=”679″ FontSize=”48″/>
<Button Content=”Post” HorizontalAlignment=”Left” Margin=”1138,121,0,0″ VerticalAlignment=”Top” Click=”PostkeWall” Height=”89″ Width=”180″ FontSize=”36″/>
<Button Content=”Foto” HorizontalAlignment=”Left” Margin=”10,657,0,0″ VerticalAlignment=”Top” Click=”PostFoto” Height=”88″ Width=”1346″ FontSize=”36″/>
<TextBlock HorizontalAlignment=”Left” Margin=”330,39,0,0″ TextWrapping=”Wrap” Text=”Apa yang Sedang Kamu Pikirkan?” VerticalAlignment=”Top” Width=”708″ Height=”58″ FontSize=”48″/>
<TextBlock HorizontalAlignment=”Left” Margin=”262,291,0,0″ TextWrapping=”Wrap” Text=”Profile Name” VerticalAlignment=”Top” Height=”47″ Width=”353″ FontSize=”48″/>
<TextBlock HorizontalAlignment=”Left” Margin=”262,383,0,0″ TextWrapping=”Wrap” Text=”Teman” VerticalAlignment=”Top” Height=”47″ Width=”353″ FontSize=”48″/>
</Grid>

Dan tampilan TulisWall.Xaml kalian akan seperti ini.

Integrasi dengan Facebook 9

 

Setelah itu tekan “F7” dan kalian akan masuk ke halaman TulisWall.xaml.cs.

Lalu tambahkan pada bagian header :

using Facebook;
using Windows.Security.Authentication.Web;
using System.Dynamic;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Storage;
using Windows.Storage.Pickers.Provider;
using Windows.Media.Capture;

 

Dan tulislah code berikut pada bagian deklarasi :

private readonly FacebookClient _fb = new FacebookClient();
private string _userId;

 

Lalu modifikasi bagian prosedur OnNavigatedTo untuk menerima value dari MainPage.xaml :

protected override void OnNavigatedTo(NavigationEventArgs e)
{
dynamic parameter = e.Parameter;
_fb.AccessToken = parameter.access_token;
_userId = parameter.id;

LoadFacebookData();
}

 

Dan tambahkan beberapa prosedur dibawahnya :

private async void PostkeWall(object sender, RoutedEventArgs e)
{
try
{
dynamic parameters = new ExpandoObject();
parameters.message = txtMessage.Text;

dynamic result = await _fb.PostTaskAsync(“me/feed”, parameters);
_lastMessageId = result.id;

txtMessage.Text = string.Empty;
}
catch (FacebookApiException ex)
{
}
}

private void PostFoto(object sender, RoutedEventArgs e)
{
upload();
}

private void LoadFacebookData()
{
dapatkanProfilePicture();
dapatkanNamaProfile();
dapatkanTotalTeman();
}

private async void dapatkanProfilePicture()
{
try
{
dynamic result = await _fb.GetTaskAsync(“me?fields=picture”);
string id = result.id;

string profilePictureUrl = string.Format(“https://graph.facebook.com/{0}/picture?type={1}&access_token={2}”, _userId, “large”, _fb.AccessToken);

picProfile.Source = new BitmapImage(new Uri(profilePictureUrl));
}
catch (FacebookApiException ex)
{
}
}

private async void dapatkanNamaProfile()
{
try
{
dynamic result = await _fb.GetTaskAsync(“me”);

dynamic id = result.id;
dynamic name = result.name;

ProfileName.Text = name;

dynamic firstName = result[“first_name”];
dynamic lastName = result[“last_name”];

var localeExists = result.ContainsKey(“locale”);

var dictionary = (IDictionary<string, object>)result;
localeExists = dictionary.ContainsKey(“locale”);
}
catch (FacebookApiException ex)
{
}
}

private async void dapatkanTotalTeman()
{
try
{
var query = string.Format(“SELECT uid,pic_square FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1={0})”, “me()”);

dynamic parameters = new ExpandoObject();
parameters.q = query;
dynamic result = await _fb.GetTaskAsync(“fql”, parameters);

TotalFriends.Text = string.Format(“Kamu memiliki {0} teman.”, result.data.Count);

}
catch (FacebookApiException ex)
{
}

}

private string _lastMessageId;

public async void upload()
{
var fb = new FacebookClient(_fb.AccessToken);
var dialog = new CameraCaptureUI();
dialog.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
var file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);

var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

fb.PostCompleted += (o, e) =>
{
fileStream.Dispose();

if (e.Cancelled || e.Error != null)
{
return;
}

var result = e.GetResultData();
};

var parameters = new Dictionary<string, object>();
parameters[“message”] = “Fotoku dari aplikasi Metro Style”;
parameters[“file”] = new FacebookMediaStream
{
ContentType = “image/jpeg”,
FileName = “image.jpg”
}.SetValue(fileStream.AsStream());

fb.PostAsync(“me/photos”, parameters);
}

 

Bagian koding selesai. 🙂

Sekarang masuk ke Package.appxmanifest – Cappabilities dan pastikan webcam ter-checklist agar aplikasi kalian memperbolehkan pengguna menggunakan webcam untuk mengambil foto.

Integrasi dengan Facebook 10

 

 

Jalankan Aplikasi

Waktunya menjalankan aplikasi! Sebelumnya pastikan kalian terkoneksi dengan internet ya.

Sekarang run project kalian. Maka halaman yg pertama tampil adalah halaman MainPage.xaml. Tekan “Masuk”.

Integrasi dengan Facebook 11

Kemudian tampilan aplikasi Facebook yang kalian buat akan ditampilkan.

Integrasi dengan Facebook 12

Dan setelah ditampilkan seluruhnya, masukkan e-mail dan password Facebook kalian di dalamnya.

Integrasi dengan Facebook 13

Kemudia tekan masuk, sehingga respon dari Facebook Server akan dialihkan oleh MainPage.xaml ke halaman TulisWall.xaml. Dan data akun facebook kalian akan ditampilkan pada TulisWall.xaml.

Integrasi dengan Facebook 14

 

Isilah textbox dan tekan tombol POST untuk mengupdate status Facebook kalian!

Integrasi dengan Facebook 15

Periksa akun facebook kalian.

Integrasi dengan Facebook 16

 

Tekan tombol Foto untuk meng-attach foto dan langsung menjadikan status di Facebook!

Integrasi dengan Facebook 17

Periksa akun lagi setelah aplikasi beberapa saat mengupload foto kalian.

Integrasi dengan Facebook 18

 

Artikel kali ini cukup panjang ya, tapi jangan patah semangat untuk mencoba ya!
Semoga bermanfaat!

 

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&#8221;);
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. 🙂

Cara Mudah Memparsing JSON Ke Dalam Array

Apa kabar developer Indonesia? Pada artikel kali ini saya tidak akan mengimplementasikan terlalu banyak parsing JSON ke dalam array, akan tetapi saya akan menjelaskan dahulu apa itu JSON dan kegunaannya, serta menjelaskan bagaimana membaca format JSON yang terlihat “sulit” menjadi sangat mudah.

Pertama-tama kalian perlu tahu apa itu JSON (Java Script Object Notation)? JSON adalah salah satu format yang sering dipakai oleh para developer web untuk menyajikan data yang mereka miliki untuk diolah oleh para developer lainnya. Sebenarnya banyak format yang akan sering kalian temukan ketika ingin mendapatkan feed dari web, contohnya : YAML dan XML.

Berikut adalah contoh API dari web yang menyajikan datanya dengan format JSON. Klik disini.

Cara Mudah Memparsing JSON Ke Dalam Array 1

 

 

Parsing JSON

Untuk dapat melihat dengan jelas format JSON, saya akan memberikan satu contoh bentuk format JSON yang mudah :

Cara Mudah Memparsing JSON Ke Dalam Array 2

Sekarang kalian dapat melihat ada tanda kurung yang bentuknya “{” dan “}”, dan juga “[” dan “]”. Sebenarnya apa artinya dan bedanya dari kedua tanda kurung tersebut?

Tanda kurung “{” dan “}” dapat diparsing ke dalam array dalam bentuk array string. Sedangkan tanda kurung “[” dan “]” akan di parsing ke dalam array dalam bentuk array integer.

Berikut adalah point-point yang menjelaskan pemarsingan setiap elemen dari contoh yang saya berikan di atas :

  • Mendapatkan id. Untuk mendapatkan id kalian dapat memparsingnya dengan : string id = objekJSON[“id”]
  • Mendapatkan judul. Untuk mendapatkan judul kalian dapat memparsingnya dengan : string judul = objekJSON[“judul”]
  • Mendapatkan bioskop. Untuk mendapatkan bioskop yang merupakan objek juga dari main : string bioskop = objekJSON[“main”][“bioskop”]
  • Mendapatkan kota. Untuk mendapatkan kota yang merupakan objek dari main : string kota = objekJSON[“main”][“kota”]
  • Mendapatkan provinsi. Untuk mendapatkan provinsi yang merupakan objek dari main : string provinsi = objekJSON[“main”][“provinsi”]
  • Mendapatkan objek ke 1 dari jam_tayang. Untuk mendapatkan objek-objek dari jam_tayang kalian dapat memparsingnya ke dalam array integer : string jamtayang[0] = objekJSON[“jam_tayang”][0]
  • Mendapatkan objek ke 2 dari jam_tayang. string jamtayang[1] =objekJSON[“jam_tayang”][1]
  • Mendapatkan objek ke 3 dari jam_tayang. string jamtayang[2] =objekJSON[“jam_tayang”][2]

 

Mudah bukan? Jika kalian masih belum terlalu paham mengenai parsing JSON. Dalam artikel berikutnya saya akan membangun aplikasi metro style dengan mengimplementasikan parsing JSON ke dalam array.

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

Membuat aplikasi mp3 player sederhana metro windows 8

Salam para developer Indonesia! Hari ini saya akan membuat aplikasi metro style sederhana yaitu aplikasi pemutar musik atau lebih dikenal sebagai mp3 player.
Disini saya tidak akan menjelaskan terlalu mendetail mengenai bagaimana membuat blank app dari awal. Jika kalian belum terlalu paham bagaimana cara membuat blank app sebaiknya kalian membaca terlebih dahulu postingan saya sebelumnya @https://marcelekaputra.wordpress.com/2013/06/05/membangun-aplikasi-hello-world-dengan-photo-di-windows-8-metro/

 

 

Pembangunan Aplikasi

Skenarionya adalah aplikasi ini menggunakan File Picker untuk memilih lagu dan memutarnya ke dalam media element.

Pertama kalian perlu membuat blank app dengan nama : PemutarMusikSederhana.

Setelah blank app terbuat, buatlah tampilan aplikasi sehingga tampak seperti berikut.

Tampilan mp3 player

Untuk membuat tampilan tersebut kalian dapat tuliskan code berikut ke dalam bagian grid.
<Grid Background=”#FF465791″>
<MediaElement x:Name=”mediaElement” HorizontalAlignment=”Left” Height=”100″ Margin=”634,288,0,0″ VerticalAlignment=”Top” Width=”100″/>
<TextBlock HorizontalAlignment=”Left” TextWrapping=”Wrap” Text=”Click layar untuk pilih musik” VerticalAlignment=”Top” Margin=”388,194,0,0″ FontSize=”48″/>
<HyperlinkButton Content=”” HorizontalAlignment=”Left” VerticalAlignment=”Top” Click=”ubahMusik” Height=”768″ Width=”1366″/>
<Rectangle Fill=”#FF43435F” HorizontalAlignment=”Left” Height=”82″ Margin=”213,597,0,0″ Stroke=”Black” VerticalAlignment=”Top” Width=”936″/>
<Button x:Name=”PlayButton” Content=”Play” HorizontalAlignment=”Left” Margin=”262,601,0,0″ VerticalAlignment=”Top” Height=”74″ Width=”77″ Click=”playClicked”/>
<Button x:Name=”PauseButton” Content=”Pause” HorizontalAlignment=”Left” Margin=”344,601,0,0″ VerticalAlignment=”Top” Height=”74″ Width=”77″ Click=”pauseClicked”/>
<Button x:Name=”StopButton” Content=”Stop” HorizontalAlignment=”Left” Margin=”426,601,0,0″ VerticalAlignment=”Top” Height=”74″ Width=”77″ Click=”stopClicked”/>
<Slider x:Name=”slideVol” HorizontalAlignment=”Left” Margin=”943,612,0,0″ VerticalAlignment=”Top” Width=”181″ Height=”44″ Foreground=”#FF63B850″ ValueChanged=”valChanged” Value=”100″ Maximum=”100″/>
<TextBlock HorizontalAlignment=”Left” Margin=”873,626,0,0″ TextWrapping=”Wrap” Text=”Volume” VerticalAlignment=”Top” Width=”62″ Height=”18″ FontSize=”14″/>
<Button x:Name=”PilihMusikButton” Content=”Pilih Musik” HorizontalAlignment=”Left” Margin=”544,601,0,0″ VerticalAlignment=”Top” Height=”74″ Width=”281″ Click=”pilihClicked”/>

</Grid>

Setelah kalian menuliskan code tadi, tekan “F7” untuk masuk ke halaman .xaml.cs. Di dalamnya tambahkan code berikut di bawah constructor:
private void valChanged(object sender, RangeBaseValueChangedEventArgs e)
{
try
{
mediaElement.Volume = slideVol.Value / 100;
}
catch { }
}

private void playClicked(object sender, RoutedEventArgs e)
{
mediaElement.Play();
}

private void pauseClicked(object sender, RoutedEventArgs e)
{
mediaElement.Pause();
}

private void stopClicked(object sender, RoutedEventArgs e)
{
mediaElement.Stop();
}

private void pilihClicked(object sender, RoutedEventArgs e)
{
pilihMusik();
}

private void ubahMusik(object sender, RoutedEventArgs e)
{
pilihMusik();
}

private async void pilihMusik()
{
Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(“.mp3”);

Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();

if (file != null)
{
var streammusic = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
mediaElement.SetSource(streammusic, file.ContentType);
}
}

 

 

Jalankan Aplikasi

Saatnya menjalankan aplikasi! Run aplikasi sehingga tampil tampilan seperti berikut :
Tampilan mp3 player 2

Dan ketika kalian meng-klik layar, kalian akan ternavigasi ke halaman directory.

Tampilan mp3 player 3

Mudah bukan? Selamat mencoba dan semoga bermanfaat ya 🙂

Membangun aplikasi Hello World dengan Photo di Windows 8 metro

Halo para developer Indonesia, pada post kali ini saya akan menjelaskan bagaimana membangun sebuah aplikasi windows metro sederhana tahap demi tahap. Sebelumnya perlu diketahui perbedaan aplikasi windows form dan aplikasi metro style di windows 8.

  1. Aplikasi metro style tidak dapat di export menjadi format .exe seperti aplikasi windows form, ini mengakibatkan aplikasi metro style hanya dapat dijalankan pada windows 8 saja.
  2. Aplikasi metro style memiliki kebiasaan yang berbeda dengan aplikasi windows form, seperti cara exit aplikasi, penyajian navigasi, dan masih banyak lagi perbedaan lainnya.

Untuk dapat merasakan perbedaannya, kalian perlu mencobanya langsung dengan mengikuti tahap-tahap pembangunan aplikasi metro style di windows 8.

Pertama-tama hal yang diperlukan kalian untuk membangun aplikasi metro style adalah :

  • OS windows 8 yang sudah terinstalkan di PC kalian.
  • Microsoft Visual Studio 2012 yang sudah terinstalkan.
  • dan juga semangat dan motivasi yang tinggi untuk terus mencoba. 🙂

 

 

Pembangunan aplikasi

Kali ini kita akan membangun sebuah aplikasi hello world dengan ditambahkan fungsionalitas foto dengan kamera webcam.

Langsung saja jalankan aplikasi Microsoft Visual Studio 2012 yang sudah terinstalkan di PC kalian. Sehingga tampil tampilan seperti berikut.

halaman start vs2012

Setelah itu pilihlah New Project dan pilihlah Templates-Visual C#-Blank App (XAML) (kali ini kita akan membangun aplikasi dengan bahasa C#)

new project vs2012

Masukkan Name dengan CobaBlankApp dan lalu tekan OK. Setelah aplikasi dibuat lihat bagian Solution Explorer dan lalu pilih MainPage.xaml. Maka akan tampil tampilan awal aplikasi yang kalian buat seperti berikut.
build app blank 1

Pilihlah sebuah textbox pada Toolbox. Jika Toolbox tidak muncul pada layar kalian  jangan khawatir, kalian dapat menampilkannya dengan memilih View lalu pilihlah Toolbox.
Aturlah posisi textbox pada halaman xaml kalian.

textbox 1

Lihatlah pada bagian grid, textbox memiliki atribut-atribut. Kalian perlu menambahkan atribut x:Name = “textBox1” pada bagian awal atribut. Sehingga textbox tersebut akan memiliki nama textBox1. Kalian juga dapat menambahkan atribut lainnya pada textbox tersebut dengan menambahkannya di dalam bagian “<TextBox” hingga “/>”.
textbox 2

Setelah itu tambahkan code pada bagian grid (pada bagian bawah TextBox tadi) :
<Image x:Name=”image1″ HorizontalAlignment=”Left” Height=”398″ Margin=”440,330,0,0″ VerticalAlignment=”Top” Width=”488″/>

Setelah itu kalian tekan tombol “F7” pada keyboard kalian untuk menampilkan halaman xaml.cs. Disinilah code akan ditambahkan untuk mengatur alur program. Sehingga tampil tampilan seperti berikut.

code blank app 1

Tambahkan :
using Windows.Media.Capture;
using Windows.UI.Xaml.Media.Imaging;

Pada bagian header program.

using app blank

Lalu tambahkan sebuah prosedur (dalam bahasa C# disebut void) asynchronous pada bagian bawah constructor. Mengapa harus asynchronous? Dengan asynchronous selama permintaan kita direspon oleh form, kita dapat melakukan hal lainnya pada form (tidak harus menunggu permintaan direspon oleh form terlebih dahulu). Berikut prosedur ambilPhoto :

public async void ambilPhoto()
{
var dialog = new CameraCaptureUI();
dialog.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
var file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);

if (file != null)
{
var files = file.Path.ToString();
image1.Source = new BitmapImage(new Uri(files));
}
}

async ambilphoto

Setelah itu kalian perlu menambahkan perintah pada bagian constructor untuk mengisi text pada textbox dan menjalankan prosedur ambilPhoto ketika aplikasi pertama kali dijalankan.

public MainPage()
{
this.InitializeComponent();
textBox1.Text = “Hello World!”;
ambilPhoto();
}

constructor blank app

Sebelum aplikasi dijalankan kalian perlu membuka Package.appxmanifest pada bagian solution explorer dan pada bagian Capabilities pastikan Webcam dichecklist oleh kalian agar aplikasi kalian memperbolehkan pengguna untuk mengakses webcam. Lalu jangan lupa untuk menekan tombol save.

Cappabilities blank app

 

 

Jalankan aplikasi

Waktunya menjalankan aplikasi! Tekan tombol Local Machine, dan aplikasi kalian akan jalan.

Run blank app

Run blank app 2

Mudah sekali kan untuk membuat aplikasi di windows 8 metro? Selamat Mencoba! 🙂