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/
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).
Lalu tekan Continue. Setelah itu kalian akan diminta untuk memasukkan Code Captcha.
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
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.
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.
Setelah itu pilihlah Blank Page dan beri nama TulisWall.xaml kemudian tekan Add.
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.
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”;
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.
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.
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”.
Kemudian tampilan aplikasi Facebook yang kalian buat akan ditampilkan.
Dan setelah ditampilkan seluruhnya, masukkan e-mail dan password Facebook kalian di dalamnya.
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.
Isilah textbox dan tekan tombol POST untuk mengupdate status Facebook kalian!
Periksa akun facebook kalian.
Tekan tombol Foto untuk meng-attach foto dan langsung menjadikan status di Facebook!
Periksa akun lagi setelah aplikasi beberapa saat mengupload foto kalian.
Artikel kali ini cukup panjang ya, tapi jangan patah semangat untuk mencoba ya!
Semoga bermanfaat!
Komentar Terbaru