Tag Archives: facebook

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!