Modul lanjutan pengembangan aplikasi mobile menggunakan Intel XDK.

1. Pelatihan Intel XDK
Modul 7. Integrasi Aplikasi dengan Facebook Graph API
Menggunakan Intel XDK.
Dikembangkan oleh Intel Software.
1

2. Versi 1.0. September 2013.
Hak Cipta (C) 2013 Intel Software.
Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang
terdaftar milik Adobe, Inc.
Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google,
Inc.
Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation.
iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc.
Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar
milik Microsoft Corporation.
Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik
pemiliknya masing-masing yang peduli.
Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa
menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh
diperjual belikan atau digunakan untuk tujuan komersial lain.
2

3. Modul 7. Integrasi Aplikasi
dengan Facebook Graph API
Menggunakan Intel XDK.
3

4. Overview
Pada sesi ini kita akan mengintegrasikan aplikasi yang sudah dibuat dengan Facebook Graph
API. Aplikasi akan membuat profile Facebook kita mengiri status bahwa sudah mengerjakan
quiz pada aplikas xdk-duniawi 
Graph API merupakan jembatan yang bisa disebrangi oleh aplikasi sehingga sehingga
Facebook bisa menerjemahkan request yang dikirim aplikasi dengan response yang sesuai.
Hmm.. ?? 
Berikut illustrasinya:
HTML5 Based
Mobile Apps
Gambar 1 – Facebook Graph API Connect
Mari kita mulai 
Langkah 1: Setup Facebook Application
Langkah pertama ini kita harus membuat sebuah aplikasi di Facebook yang nantinya
digunakan untuk mengakses Graph API. Masuk ke halaman http://developer.facebook.com
pilih menu Apps.
Apps
Gambar 2 – Menu Developer Facebook
4

5. Langkah 2: Buat Aplikasi Facebook Baru
Setelah masuk halaman apps, selanjutnya kita buat aplikasi facebok baru. Caranya kita
tinggal pilih menu Buat Aplikasi Baru.
Buat Aplikasi Baru
Gambar 3 - Buat Aplikasi Baru
Lakukan setup pada aplikasi baru yang akan kita buat sesuai penjelasan di bawah ini:
-
Nama Aplikas (unique) : Isi dengan XDKduniawi_namaanda
App Namespace (unique) : Isi dnegan xdkduniawi_namaanda
App Category : Pendidikan
Klik lanjutkan lalu isi captcha dengan benar.
Gambar 4 - Setup Aplikasi
5

6. Langkah 3: Pengaturan Aplikasi Facebook
Setelah berhasil membuat aplikasi baru maka kita akan langsung dibawa ke dashboard
aplikasi yang kita buat tadi.
Penjelasannya sebagai berikut:
App ID
Icon aplikasi
Identias Aplikasi
Metode integrasi
Gambar 5 - Pengaturan Aplikasi
-
App ID : Merupakan ID aplikasi yang unik dan digunakan sebagai kunci untuk
berinteraksi dengan aplikasi di luar Facebook
Metode Integrasi : Ada beberapa metode integrasi, masing-masing memiliki
karakteristik yang berbeda sesuai kebutuhan.
6

7. Adapun metode yang akan kita gunakan untuk XDKduniawi ini hanya dua, yaitu Website
with Facebook Login dan Aplikasi Android Natif.
Langkah 4: Atur Cara Pengintegrasian Aplikasi
Facebook
Cara pengintegrasian yang kita gunakan berdasarkan aturan yang sudah tersedia pada Intel
XDK. Untuk aplikasi Android kita menggunakan Website with Facebook login dan Aplikasi
Android Natif sementara untuk aplikasi Intel XDK berbasis iOS menggunakan Website with
Facebook Login dan Aplikasi IOS Native.
Kita gunakan aturan untuk aplikasi Android, berikut detailnya:
Site URL
Key Hashes dari Intel XDK
Gambar 6 - Cara Pengintegrasian Aplikasi Facebook
-
Site URL : Diisi dengan http://html5tools-software.intel.com/
Key Hashes : Diambil dari pengaturan credentials pada saat mem-build aplikasi
menggunakan Intel XDK
7

8. -
Package Name : Optional, package harus sama jikalau kita ingin menambahkan update
pada aplikasi yang sudah dibuat.
Class Name : Optional
Langkah 5: Pengaturan Access Token dan Permission
Setelah pengaturan aplikasi selesai, selanjutnya kita harus membuat aplikasi ini
membolehkan aplikasi dari Intel XDK mengambil dan mengirim data. Caranya kita harus
setup permission, berikut detailnya:
Masuk menu Tools lalu pilih Graph API Explorer
Graph API Explorer
Gambar 7 - Facebook Tools
Selanjutnya pilih Dapatkan Access Token
Get Access Token
Current Access Token
Gambar 8 - Graph API Explorer
8

9. Lalu setelah muncul dialog pilihan permissions, centang pilihan sesuai dengan yang
digambarkan dibawah ini:
Gambar 9 - Select permissions
Setelah pemilihan permission selesai, maka secara otomatis akan keluar dialog Oauth seperti
di bawah ini untuk permintaan permission yang sudah tadi kita set. Klik OK untuk tiap
permintaa permissions
Gambar 10 - Oauth Permissions
9

10. Pengaturan Facebook Graph API sampai di sini  pada fase ini berarti kita sudah berhasil
membuat sebuah aplikasi Facebook yang nantinya bisa menjembatani aplikasi mobile Intel
XDK yang kita buat dengan Facebook.
Langkah 6: Pengaturan Build Credentials pada Intel
XDK
Lakukan pengaturan credentials pada saat mem-build aplikasi Intel XDK. Pengaturan yang
akna kita isi mengacu pada aplikasi Facebook yang sudah dibuat sebelumnya  berikut
penjelasannya :
Masuk menu Build, lalu pilih Android sebagai target build nya
Android
Gambar 11 - Build Android Apps
Gambar 12 - Uploading Bundle
10

11. Setelah uploading bundle berhasil, lalu masuk overview application lalu edit CREDENTIALS.
Credentials
Gambar 13 – Overview Application
Langkah selanjutnya:
-
isi FACEBOOK APPLICATION ID dengan App ID pada aplikasi Facebook yang sudah kita
buat tadi.
Lalu copy-paste FACEBOOK APPLICATION SIGNATURE ke Key Hashes pada
pengaturan cara integrasi menggunakan Android natif.
Gambar 14 - Pengaturan Credentials
11

12. Lakuran pengaturan pada step selanjutnya sesuai dengan yang dibutuhkan. Setelah semua
pengaturan build pada Intel XDK berhasil, lakukan testing pada aplikasi yang sudah kita buat
tersebut.
Oke pengaturan pada Facebook App sudah, pengaturan pada Intel XDK langkah selanjutnya
adalah coding  Kita akan melanjutkan project xdk-duniawi yang sudah kita buat
sebelumnya.
Langkah 7: Mengisi File default.js dengan Method
Facebok Integration
Fase ini kita akan mengisi file default.js yang sebelumnya berisi aksi-aksi untuk tombol
dengan method-method untuk mengintegrasikan dengan Facebook. Adapun method-method
tersebut berupa method login, postStatus.
Berikut keseluruhan method dalam file default.js
Gambar 15 - Facebook Integration pad default.js
12

13. Langkah 8: Membuat Method Facebook Login
Method ini membuka akses aplikasi Intel XDK terhadap Facebook, mengeluarkan Oauth dan
permintaan akses permissions. Berikut baris kodenya:
function fblogin(){
document.addEventListener("appMobi.facebook.login",function
(e){
if (e.success == true) {
console.log("Facebook Log in Successful");
}
else
{ console.log("Unsuccessful Login"); } },false);
AppMobi.facebook.login("publish_stream,publish_actions,offli
ne_access");
}
Langkah 9: Membuat Method untuk Post Status
Method ini melakukan posting status atas nama kita yang mengacu pada Aplikasi yang
sudah kita buat. Adapun baris kodenya adalah sebagai berikut:
function postStatus(){
$.mobile.loading( 'show', {
text: "Posting to Facebook",
textVisible: true,
theme: 'b',
html: ""
});
AppMobi.facebook.enableFrictionlessRequests();
document.addEventListener("appMobi.facebook.request.respons
e",function(e) {
console.log("News Feed Event Returned");
if (e.success == true) {
console.log("News feed updated successfully");
$.mobile.hidePageLoadingMsg();
} },false);
var objParameters = {
13

14. "picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android
yang dikembangkan menggunakan Intel XDK",
"message":"Saya telah menyelesaikan quiz pada
Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan
Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
}
AppMobi.facebook.requestWithGraphAPI("me" +
"/feed","POST", objParameters);
}
Output-nya seperi di bawah ini:
Message
Informasi Aplikasi
Image Aplikasi
Gambar 16 - Output Post Status
Langkah 11: Menambahkan Button Login to Facebook
pada Dialog Quiz
Pada modul sebelumnya, kita telah mencapat fase Quiz dan memberikan dialog untuk
feedback jawaban. Pada dialog tersebut akan ditambahkan Tombol Login fo Facebook untuk
mengambil Oauth dari Facebook.
Login to Facebook
Button
Gambar 17 - Button untuk Login ke Facebook
14

15. Berikut baris kode yang ditambahkan:
function fblogin(){
document.addEventListener("appMobi.facebook.login",function
(e){
if (e.success == true) {
console.log("Facebook Log in Successful");
}
else
{ console.log("Unsuccessful Login"); } },false);
AppMobi.facebook.login("publish_stream,publish_actions,offli
ne_access");
}
Method di atas akan menampilkan Oauth facebook, jika user belum login maka akan otomatis
muncul dialog login. Ouath di atas meminta permission publish_stream, publis_actions,
offline_access yang mana sudah merupakan standar permission dalam pengembangan
aplikasi mobile berbasis html5 dan diakses secara offline.
Langkah 12: Menambahkan Button Share to Facebook
pada Dialog Quiz
Setelah tombol login dibuat, kita akan membuat tombol Share to Facebook yang mana akan
mengirimkan sebuah postingan pada profile kita. Hal tersebut sudah dijelaskan pada langkah
sebelumnya.
Share to Facebook
Button
Gambar 18 - Share to Facebook
15

16. Mari kita pelajari baris kode berikut ini:
function postStatus(){
$.mobile.loading( 'show', {
text: "Posting to Facebook",
textVisible: true,
theme: 'b',
html: ""
});
AppMobi.facebook.enableFrictionlessRequests();
document.addEventListener("appMobi.facebook.request.response
",function(e) {
console.log("News Feed Event Returned");
if (e.success == true) {
console.log("News feed updated successfully");
$.mobile.hidePageLoadingMsg();
} },false);
var objParameters = {
"picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android
yang dikembangkan menggunakan Intel XDK Development Tools..
",
"message":"Saya telah menyelesaikan quiz pada
Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan
Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
}
AppMobi.facebook.requestWithGraphAPI("me" +
"/feed","POST", objParameters);
}
Dikarenakan services yang digunakan pada Intel XDK adalah AppMobi, maka semua method
yang berhubungan facebook mengambil dari library AppMobi. Untuk baris kode di atas, yang
paling inti adalah bagian:
AppMobi.facebook.requestWithGraphAPI("me" + "/feed","POST",
objParameters);
16

17. Kode diatas meminta Graph API dengan parameter “me” yang merupakan standar parameter
yang digunakan Graph API untuk menunjukan user yang telah login dan diberikan auth.
Parameter “/feed” merupakan opsi ke-arah mana parameter selanjutnya “POST” akan
dilemparkan. Pada kasus ini kita akan melempar “POST” ke arah “/feed” (status facebook).
Parameter teakhir objParameters merupakan object yang dibuat sebelumnya dan isinya
adalah:
-
"picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android yang dikembangkan menggunakan Intel
XDK Development Tools.. ",
"message":"Saya telah menyelesaikan quiz pada Aplikasi XDK Duniawi. Aplikasi ini
dikembangkan menggunakan Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
Object tersebut berisi array of params yang akan di “POST” ke “/feed” yang “me” miliki dan
sudah diberikan hak akses.
Berikut preview aplikasi 
Gambar 19 - Preview Post to Facebook
17

18. Horeee  kita sudah sampai tahap akhir project Mobile Apps Menggunakan Intel XDK ini.
Mari kita sedikit flash-back  apa saja yang sudah kita pelajari, selanjutnya jangan lupa
untuk terus dan terus berlatih 
Selamat berlatih menggunakan Intel XDK..
That’s all.
18