Tag Archives: metro style

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! 🙂