Monthly Archives: Juni 2013

Menambahkan Snapping ke Dalam Aplikasi Metro Style

Halo apa kabar? Hari ini saya akan mempraktekkan bagaimana menambahkan snapping pada aplikasi metro style di windows 8. Snapping sendiri adalah bagian yang sangat penting untuk ditambahkan pada aplikasi metro style karena merupakan salah satu syarat utama sebuah aplikasi metro style memiliki snapping jika aplikasi tersebut ingin terpublish di Windows Store.

Jika kalian membuat aplikasi Grid App (XAML), kalian tidak perlu menambahkan snapping secara manual karena sudah disediakan secara default. Akan tetapi jika kalian membuat aplikasi menggunakan Blank App (XAML), kalian harus menambahkannya secara manual.

Berikut adalah pembuatan snapping pada aplikasi metro style.

 

Pembuatan Aplikasi

Sekarang kalian bukalah Visual Studio 2012 dan buatlah Blank App (XAML) dan beri nama : AplikasiSnapping

Aplikasi Snapping 1

Lalu setelah aplikasi terbuat, bukalah MainPage.xaml dan tulislah code berikut pada bagian grid :

<Grid Background=”#FF208D9E”>
<TextBlock HorizontalAlignment=”Left” Margin=”501,204,0,0″ TextWrapping=”Wrap” Text=”Aplikasi” VerticalAlignment=”Top” Height=”61″ Width=”166″ FontSize=”48″/>
<TextBlock HorizontalAlignment=”Left” Margin=”676,204,0,0″ TextWrapping=”Wrap” Text=”Snapping” VerticalAlignment=”Top” Height=”61″ Width=”203″ FontSize=”48″/>

</Grid>

Sehingga tampilan aplikasi kalian menjadi seperti berikut :

Aplikasi Snapping 2

 

Sekarang kalian perlu menambahkan LayoutAwarePage.cs ke folder Common kalian pada Solution Explorer. Cara mudahnya adalah kalian tambahkan Basic Page ke dalam project kalian dengan cara klik kanan AplikasiSnapping pada Solution Explorer kemudian pilih add-New Item-Basic Page. Lalu tanpa memberi nama pada Basic Page tekan Add.

Setelah kalian menekan Add, di layar kalian tampil sebuah dialog box yang menyatakan akan menambahkan beberapa file ke dalam folder Common. Tekan Yes.

Aplikasi Snapping 4

Setelah itu beberapa file .cs pun tertambahkan di dalam folder Common kalian.

Sebenarnya Basic Page yang telah kalian tambahkan tersebut tidak digunakan dalam aplikasi, hanya saja kita membutuhkan file” yang berada dalam folder Common tersebut, sehingga kalian boleh menghapus BasicPage yang tadi kalian buat.

Oke sekarang kembali pada MainPage.xaml, lakukan modifikasi pada bagian “<Page” (bagian paling atas code) menjadi “<common:LayoutAwarePage”. Dan modifikasi penutup “</Page>” (bagian paling bawah code) menjadi “</common:LayoutAwarePage>”.

Jika terjadi error pada xaml kalian abaikan saja dulu ya.

Sekarang tambahkan pada bagian bawah dari “<common:LayoutAwarePage” code berikut :

xmlns:common=”using:AplikasiSnapping.Common”

 

Lalu tekan F7 untuk masuk ke halaman MainPage.xaml.cs, kemudian modifikasi bagian “public sealed partial class MainPage : Page” menjadi “public sealed partial class MainPage : AplikasiSnapping.Common.LayoutAwarePage”.

Setelah itu aplikasi kalian siap untuk ditambahkan snapping.

Maka tulislah code berikut di dalam bagian grid :

<VisualStateGroup x:Name=”ApplicationViewStates”>
<VisualState x:Name=”FullScreenLandscape”/>
<VisualState x:Name=”Filled”/>

<!– The entire page respects the narrower 100-pixel margin convention for portrait –>
<VisualState x:Name=”FullScreenPortrait”>
<Storyboard>
</Storyboard>
</VisualState>

<!– The back button and title have different styles when snapped –>
<VisualState x:Name=”Snapped”>
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 

Penambahan Snapping

Sekarang klik kanan pada MainPage.xaml kalian dan pilihlah “open in blend…”.

Setelah aplikasi Blend terbuka, kalian pilihlah “device”.

Aplikasi Snapping 5

Lalu pada bagian “view” aturlah tampilan aplikasi kalian sesuai dengan konten aplikasi kalian.

 

 

Jalankan Aplikasi

Saatnya menjalankan aplikasi! Sekarang run project kalian dan cobalah snapping pada aplikasi kalian.

Aplikasi Snapping 6

Saat kalian melakukan snapping.

Aplikasi Snapping 7

Mudah bukan. Saatnya kalian yang mencoba ๐Ÿ™‚

 

 

Membuat Animasi Sederhana Menggunakan Blend di Aplikasi Metro Style

Hai, hari ini saya akan mempraktekkan sedikit untuk membuat animasi sederhana menggunakan aplikasi Blend. Aplikasi Blend sudah terinstalkan otomatis jika kalian menginstal aplikasi Visual Studio 2012.

Sebenarnya dengan aplikasi Blend kita akan sangat mudah untuk mendesign aplikasi metro style. Selain itu untuk membuat objek bergerak (animasi) pun dapat dilakukan dengan menggunakan Blend.

Langsung saja kita membuat aplikasinya.

 

 

Pembuatan Aplikasi

Sekarang kalian buatlah Blank App (XAML) dan beri nama : AplikasiAnimasi

Aplikasi Animasi 1

Setelah aplikasi kalian terbuat, masuklah ke MainPage.xaml dan tulislah code berikut di bagian grid :

<Grid Background=”#FF804D23″>
<Rectangle x:Name=”kotak” Fill=”#FF722AB9″ HorizontalAlignment=”Left” Height=”136″ Margin=”0,632,0,0″ Stroke=”Black” VerticalAlignment=”Top” Width=”133″/>

</Grid>

Sehingga tampilan aplikasi kalian menjadi seperti berikut.

Aplikasi Animasi 2

Sekarang klik kanan pada MainPage.xaml pada bagian solution explorer dan pilih “Open in Blend…”.

Aplikasi Animasi 3

Setelah kalian masuk aplikasi Blend, pilihlah new (tanda +).

Aplikasi Animasi 4

Kemudian beri nama “kotakAnimation” dan tekan OK.

Setelah itu akan tampil animation editor dan lakukanlah animasi pada kotak yang kalian sudah buat sebelumnya.

Aplikasi Animasi 5

Setelah itu save pekerjaan kalian dan close Blend dengan cara klik close di kanan atas.

Setelah itu masuklah ke halaman MainPage.xaml.cs.

kemudian pada bagian constructor tambahkan code “kotakAnimation.begin();”

 

 

Jalankan Aplikasi

Waktunya menjalankan aplikasi. Sekarang run project kalian dan lihatlah kotak yang kalian bergerak sesuai dengan animasi yang kalian buat pada aplikasi Blend.

Aplikasi Animasi 6

 

Membuat Application Bar pada Aplikasi Metro Style

Pada artikel kali ini adalah bagian yang mudah akan tetapi jika kalian melewatkan bagian yang satu ini, akan sangat sulit atau bahkan aplikasi anda tidak dapat ter-publish di Windows Store. Untuk para developer yang sudah biasa mendevelop aplikasi di Windows Store pastinya sudah sangat tidak aneh dengan artikel kali ini. ๐Ÿ™‚

Oke tidak berlama-lama, langsung saja kita membuat aplikasi metro style dengan application bar.

 

 

Pembuatan Aplikasi

Buatlah blank app (XAML) dengan nama : ContohAppBar

Aplikasi AppBar 1

Setelah halaman blank page terbuka, kalian bukalah MainPage.xaml kemudian tulislah code berikut di bagian grid :

<Grid Background=”#FF082746″>
<Image x:Name=”WallpaperImg” HorizontalAlignment=”Left” Height=”768″ VerticalAlignment=”Top” Width=”1366″/>

</Grid>

Sehingga tampilan aplikasi ContohAppBar menjadi seperti berikut :

Aplikasi AppBar 2

 

Oke, sekarang di atas bagian grid tuliskan code berikut :

<Page.BottomAppBar>
<AppBar x:Name=”bottomAppBar” IsSticky=”True”>
<Grid>
<StackPanel x:Name=”rightPanel”
Orientation=”Horizontal” HorizontalAlignment=”Right”>
<Button
AutomationProperties.Name=”Cari Gambar”
AutomationProperties.AutomationId=”SortButton”
Click=”cariGambar” Style=”{StaticResource SearchAppBarButtonStyle}” />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Dan sekarang aplikasi kalian sudah memiliki sebuah application bar yang berisi satu button “Cari Gambar”.

Aplikasi AppBar 3

Tekan “F7” untuk masuk ke dalam MainPage.xaml.cs.

Tuliskan code berikut di bawah constructor :

private async void cariGambar(object sender, RoutedEventArgs e)
{
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(“.jpg”);

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

if (file != null)
{
// Ensure the stream is disposed once the image is loaded
using (Windows.Storage.Streams.IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage();

await bitmapImage.SetSourceAsync(fileStream);
WallpaperImg.Source = bitmapImage;
WallpaperImg.Stretch = Stretch.Fill;
}
}
}

 

 

Jalankan Aplikasi

Waktunya menjalankan aplikasi! Sekarang run project kalian dan setelah aplikasi kalian tereksekusi klik kanan di sembarang tempat.

Aplikasi AppBar 4

Wah, application bar kalian terpop-up ke atas! Tekan button “Cari Gambar” dan kalian akan masuk ke directory PC anda lalu pilihlah gambar dari PC kalian.

Aplikasi AppBar 5

Kemudian tekan open. Dan aplikasi kalian pun akan menampilkan gambar yang kalian pilih tadi.

Aplikasi AppBar 6

Mudah sekali bukan untuk menambahkan application bar ke aplikasi metro style kalian. Wajib mencoba ya.

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 Penterjemah Sederhana Metro Style Menggunakan HTTPClient

Oke, apa kabar developer Indonesia? Masih semangat kan untuk terus mencoba? hehe ๐Ÿ™‚

Hari ini saya akan menjelaskan dan membuat sebuah aplikasi metro style windows 8 yang sangat sederhana menggunakan HttpClient. Pertama-tama apa itu HttpClient? Mungkin ada di antara kalian yang belum pernah menggunakan HttpClient kan?
HttpClient adalah sebuah cara untuk mengirimkan HTTP request dan menerima respon dari alamat yang kita minta tersebut, kalian dapat mengolah hasil respon dengan menggunakan method-method yang sudah disediakan di dalam class HttpClient tersebut. Untuk lebih jelasnya silahkan klik disini.

Dengan menggunakan Class HttpClient saya dapat mengakses halaman API dari web-web yang memang menyediakan API untuk para developer. Kali ini saya akan menggunakan API dari microsofttranslator.com.

Mengapa microsofttranslator.com?

microsofttranslator.com telah menyediakan API penterjemah yang sangat mudah digunakan untuk para developer. Serta hasil terjemahannya yang sangat akurat, membuat microsofttranslator.com menjadi web penterjemah bahasa nomor 1 di dunia.

 

 

Pembuatan Aplikasi

Kalian sudah tidak sabar untuk mencoba kan? Oke, baik sekarang waktunya pembuatan aplikasi.

Buatlah sebuah aplikasi blank app (XAML) yang kalian beri nama : AplikasiPenterjemahBahasa. Klik disini jika kalian belum mengerti bagaimana membuat blank app (XAML)

Setelah itu bukalah MainPage.xaml lalu tulis dan gantilah bagian grid dengan :

<Grid Background=”#FF682F63″>
<Button Content=”Terjemahkan!” HorizontalAlignment=”Left” Margin=”131,627,0,0″ VerticalAlignment=”Top” Click=”terjemahkan” Width=”1101″ Height=”84″ FontSize=”18″ FontFamily=”Arial”/>
<TextBox x:Name=”textIndonesia” HorizontalAlignment=”Left” Margin=”131,160,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”427″ Width=”531″ FontSize=”18″ FontFamily=”Arial”/>
<TextBox x:Name=”textEnglish” HorizontalAlignment=”Left” Margin=”701,160,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”427″ Width=”531″ FontSize=”18″ FontFamily=”Arial” IsReadOnly=”True”/>
<TextBlock HorizontalAlignment=”Left” Margin=”277,54,0,0″ TextWrapping=”Wrap” Text=”Indonesia” VerticalAlignment=”Top” Height=”71″ Width=”228″ FontSize=”52″ FontFamily=”Forte”/>
<TextBlock HorizontalAlignment=”Left” Margin=”657,54,0,0″ TextWrapping=”Wrap” Text=”ke” VerticalAlignment=”Top” Height=”71″ Width=”68″ FontSize=”52″ FontFamily=”Forte”/>
<TextBlock HorizontalAlignment=”Left” Margin=”879,54,0,0″ TextWrapping=”Wrap” Text=”English” VerticalAlignment=”Top” Height=”71″ Width=”176″ FontSize=”52″ FontFamily=”Forte”/>

</Grid>

Sehingga tampilan aplikasi kalian sekarang menjadi seperti ini.

tampilan penterjemah bahasa 1

Setelah itu pada bagian “<Button” carilah atribut event Click=”terjemahkan”. Lalu klik kanan pada “terjemahkan” dan pilih “Navigate to Event Handler”.

tampilan penterjemah bahasa 2

Kemudian lakukan koding pada bagian void terjemahkan tersebut menjadi :

private async void terjemahkan(object sender, RoutedEventArgs e)
{
System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();

try
{
var stringterjemah = await client.GetStringAsync(“http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=78280AF4DFA1CE1676AFE86340C690023A5AC139&from=id&to=en&text=&#8221; + textIndonesia.Text);
textEnglish.Text = stringterjemah;
}
catch
{
textEnglish.Text = “Periksalah koneksi internet anda!”;
}
}

Sehingga akan menjadi seperti ini :

tampilan penterjemah bahasa 3

Lihatlah pada bagian “System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();”. Disini kalian mencoba untuk membuat objek dari class HttpClient dengan nama client.

Dan lihatlah pada bagian “var stringterjemah = await client.GetStringAsync(“http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=78280AF4DFA1CE1676AFE86340C690023A5AC139&from=id&to=en&text=&#8221; + textIndonesia.Text);”.

Disini kalian akan mengisi variabel stringterjemah dengan hasil respon dari api.microsofttranslator.com dengan inputan text yg berasal dari textbox textIndonesia yang telah kalian buat di halaman MainPage.xaml.

Sebelum kalian menjalankan aplikasi ini pastikan pada bagian Package.appxmanifest – Cappabilities, Internet (Client) anda ter-checklist agar aplikasi kalian memperbolehkan pengguna untuk mengakses internet.

 

 

Jalankan Aplikasi

Saatnya menjalankan aplikasi! Sebelumnya pastikan bahwa internet anda sedang terkoneksi ya.

Run aplikasi kalian dan isikan pada textbox indonesia kata-kata yang kalian ingin terjemahkan ke dalam bahasa inggris. Dan tekan button “Terjemahkan!” setelah itu. Dannn HOPLA! Kata-kata kalian terjemahkan ke dalam bahasa inggris.

tampilan penterjemah bahasa 5

Selamat mencoba ya! ๐Ÿ™‚

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! ๐Ÿ™‚