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