Mengintegrasikan API Facebook dengan Android

Dalam tutorial ini, saya akan menunjukkan cara menghubungkan aplikasi Android Anda ke API Facebook. Banyak aplikasi seluler menggunakan Facebook API v4.x untuk login, mendaftar, dan memposting data.

Buat Android Project

Pastikan Anda memiliki Android Studio versi terbaru. Saya menggunakan versi 1.4.1

Buka Android Studio dan buat Proyek Baru, beri nama sesuai keinginan Anda. Klik Berikutnya, pilih Minimum API level 17 dan klik Berikutnya lagi. Pilih Aktivitas Kosong sebagai activity pertama, beri nama LoginActivity dan klik Selesai.

Selanjutnya, kita menambahkan aktivitas kosong lain ke proyek. Klik kanan paket dan pilih Activity -> New Activity -> Activity Kosong. Biarkan namanya sebagai default dan klik selesai.

Pastikan Anda mengubah detail API Facebook agar sesuai dengan yang Anda miliki.

Membuat ID Aplikasi Facebook

Untuk menggunakan API Facebook, kita harus menambahkan entri aplikasi ke dasbor Aplikasi Pengembang Facebook kita. Anda akan memerlukan akun pengembang Facebook jika Anda belum memilikinya. Pilih kategori acak dan klik Create App ID.

Pada halaman berikutnya, gulir ke bawah dan selesaikan kedua bidang dengan nama paket proyek.

Klik Berikutnya.

Sekarang kita perlu menambahkan Key Hash Pengembangan. Ada dua cara untuk menghasilkan satu. Opsi pertama adalah menggunakan Command line.

Windows :

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

Mac :

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Buka bagian My Apps pada Facebook dan salin ID Aplikasi :

Buka strings.xml dalam proyek Anda dan tambahkan baris kode ini :

/ File : strings.xml

<string name="facebook_app_id">{Your App ID here}</string>

Menyiapkan SDK Facebook

Buka build.gradle (Project) dan tambahkan mavenCentral() ke kedua bagian repositori. Kemudian buka build.gradle (Module) dan tambahkan library SDK dengan menambahkan baris ini ke dependensi :

compile 'com.facebook.android:facebook-android-sdk:4.18.0'

Aktivitas dan Tata Letak

Buka AndroidManifest.xml dan buat perubahan ini.

Mengubah label MainActivity :

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat.NoActionBar" >
    </activity>

Tambahkan tag ini :

<meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/app_id" />
 
    <activity
        android:name="com.facebook.FacebookActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"/>
 
    <provider              android:authorities="com.facebook.app.FacebookContentProvider"                 android:name="com.facebook.FacebookContentProvider"
    android:exported="true"/>

Sekarang kita akan bekerja dengan kelas java dan layout.

Pertama, kita akan bekerja dengan LoginActivity.java. Kelas ini membuka koneksi yang diautentikasi ke API Facebook dan mendapatkan data darinya.

Tambahkan baris ini sebelum metode onCreate di dalam kelas :

File : LoginActivity.java

private CallbackManager callbackManager;
private AccessTokenTracker accessTokenTracker;
private ProfileTracker profileTracker;
 
//Facebook login button
private FacebookCallback<LoginResult> callback = new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {
        Profile profile = Profile.getCurrentProfile();
        nextActivity(profile);
    }
    @Override
    public void onCancel() {        }
    @Override
    public void onError(FacebookException e) {      }
};

Di sini kita membuat FacebookCallback yang disebut callback. Ini mengeksekusi tindakan berikutnya setelah kita mendapatkan respons dari FACEBOOK API dan metode untuk itu adalah onSuccess().

Di dalam metode onSuccess kami membuat Profil Facebook baru dan mendapatkan data untuk profil tersebut. Kemudian kita akan membuat fungsi sederhana yang disebut nextActivity() yang akan mengubah aktivitas kita.

Kita akan menginisialisasi SDK Facebook sehingga kita dapat menggunakan fungsi dan metodenya. Di dalam onCreate() tambahkan baris ini :

FacebookSdk.sdkInitialize(getApplicationContext());
callbackManager = CallbackManager.Factory.create();
accessTokenTracker = new AccessTokenTracker() {
    @Override
    protected void onCurrentAccessTokenChanged(AccessToken oldToken, AccessToken newToken) {
    }
};
 
profileTracker = new ProfileTracker() {
    @Override
    protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) {
        nextActivity(newProfile);
    }
};
accessTokenTracker.startTracking();
profileTracker.startTracking();

Selanjutnya, kita perlu menunjukkan tombol Facebook Log in yang terkenal. Kita tidak perlu membuatnya dari awal karena ada di dalam perpustakaan SDK dan dapat dipanggil dalam tata letak kita.

Jadi kita akan mengedit tata letak LoginActivity kita. Ini nama harus content_login.xml. Bahkan, versi terbaru Android Studio membuat dua file .xml default untuk setiap aktivitas yang kami buat. File tata letak lainnya disebut activity_login.xml.

Dalam activity_login.xml menghapus kode untuk tombol mengambang karena kita tidak akan membutuhkannya.

Di content_login.xml hanya ada elemen TextView. Kami akan menghapusnya dan membuat LinearLayout baru yang berorientasi horizontal. Di dalam tata letak itu kita akan menambahkan tombol masuk. Paste kode di bawah ini untuk mengganti isi saat ini content_login.xml :

File : content_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
 
<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center"
    android:layout_margin="4dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp"/>
 
</LinearLayout>

Saya menambahkan beberapa padding di bagian atas dan bawah dan pusatkan tata letak linear horizontal. Mari kita kembali ke kelas Login dan membuat tombol.

Di dalam metode onCreate() sebelum braket penutup, tambahkan kode di bawah ini :

LoginButton loginButton = (LoginButton)findViewById(R.id.login_button);
callback = new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {
        AccessToken accessToken = loginResult.getAccessToken();
        Profile profile = Profile.getCurrentProfile();
        nextActivity(profile);
        Toast.makeText(getApplicationContext(), "Logging in...", Toast.LENGTH_SHORT).show();    }
 
    @Override
    public void onCancel() {
    }
 
    @Override
    public void onError(FacebookException e) {
    }
};
loginButton.setReadPermissions("user_friends");
loginButton.registerCallback(callbackManager, callback);

Di sini kita membuat koneksi antara tombol di content_login.xml dan perpustakaan SDK Facebook.

Ada beberapa metode @Overrided yang kita butuhkan di dalam LoginActivity.java. Tambahkan baris di bawah ini :

@Override
protected void onResume() {
    super.onResume();
    //Facebook login
    Profile profile = Profile.getCurrentProfile();
    nextActivity(profile);
}
 
@Override
protected void onPause() {
 
    super.onPause();
}
 
protected void onStop() {
    super.onStop();
    //Facebook login
    accessTokenTracker.stopTracking();
    profileTracker.stopTracking();
}
 
@Override
protected void onActivityResult(int requestCode, int responseCode, Intent intent) {
    super.onActivityResult(requestCode, responseCode, intent);
    //Facebook login
    callbackManager.onActivityResult(requestCode, responseCode, intent);
 
}

Fungsi terakhir dalam kelas ini adalah nextActivity() yang akan beralih aktivitas dan meneruskan data ke aktivitas berikutnya.

private void nextActivity(Profile profile){
    if(profile != null){
        Intent main = new Intent(LoginActivity.this, MainActivity.class);
        main.putExtra("name", profile.getFirstName());
        main.putExtra("surname", profile.getLastName());
        main.putExtra("imageUrl", profile.getProfilePictureUri(200,200).toString());
        startActivity(main);
    }
}

Kita membutuhkan nama depan dan belakang profil dan gambar profil 200 kali 200 piksel. Pada tahap ini, kita hanya mendapatkan Uri-nya. Ketiga string ini akan digunakan sebagai tambahan dalam aktivitas kami berikutnya.

MainActivity class

Fungsi nextActivity() di kelas LoginActivity meneruskan beberapa string ke aktivitas kita berikutnya. Sekarang kita menggunakannya dengan membuat tiga string lain di dalam metode onCreate() dari kelas MainActivity dan menyimpan data yang dilewatkan di dalamnya :

Bundle inBundle = getIntent().getExtras();
String name = inBundle.get("name").toString();
String surname = inBundle.get("surname").toString();
String imageUrl = inBundle.get("imageUrl").toString();

Untuk menampilkan data ini kita perlu mengubah tata letak content_main.xml. Kode di bawah ini menambahkan elemen yang kita butuhkan untuk menampilkan data. Tambahkan kode ini di dalam tag RelativeLayout :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:text="Hello:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textSize="20dp"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nameAndSurname"
        android:textSize="22dp"
        android:textStyle="bold"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"/>
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/profileImage"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Logout"
        android:id="@+id/logout"/>
</LinearLayout>

Untuk menampilkan nama profil tambahkan kode di bawah ini ke metode onCreate() kelas MainActivity :

TextView nameView = (TextView)findViewById(R.id.nameAndSurname);
nameView.setText("" + name + " " + surname);

Selanjutnya, kita ingin menampilkan gambar profil. Dari aktivitas terakhir, kita memiliki gambar Uri sebagai string. Kita dapat menggunakan Uri ini untuk mengunduh gambar sebagai file Bitmap.

Buat kelas baru, dan tambahkan kode di bawah ini :

public class DownloadImage extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;
 
    public DownloadImage(ImageView bmImage) {
        this.bmImage = bmImage;
    }
 
    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return mIcon11;
    }
 
    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
    }
}

Untuk menampilkan gambar profil di aplikasi kita, tambahkan baris di bawah ini di dalam metode onCreate() dari kelas MainActivity, setelah baris terakhir ditambahkan.

new DownloadImage((ImageView)findViewById(R.id.profileImage)).execute(imageUrl);

Ini menggunakan string imageUrl, mengunduh gambar dan menampilkannya di dalam tata letak content_main.xml.
Sekarang setelah menampilkan data selesai, kita akan menambahkan dialog berbagi ke tombol tindakan mengambang sehingga aplikasi dapat memposting ke Facebook.
Buka activity_main.xml dan ubah :

android:src="@android:drawable/ic_dialog_email"

To

android:src="@android:drawable/ic_menu_edit"

Ubah warna tombol dengan mengedit nilai warna di colors.xml. Saya menggunakan warna ini :

<color name="colorAccent">#5694f7</color>

Selanjutnya untuk membuat tombol melakukan sesuatu.
Menyatakan variabel private ShareDialog di kelas MainActivity :

private ShareDialog shareDialog;

Di dalam metode onCreate() buat dialog ini :

shareDialog = new ShareDialog(this);

Kita ingin menampilkan dialog ini ketika kami mengklik tombol mengambang. Ganti kode Snackbar dalam metode OnClick dengan kode di bawah ini :

ShareLinkContent content = new ShareLinkContent.Builder().build();
shareDialog.show(content);

Aplikasi kami sekarang dapat memposting ke Facebook, tetapi kami belum selesai, fungsi Logout hilang.

Pertama aplikasi perlu memahami apakah itu login. Inisialisasi SDK Facebook seperti yang kita lakukan di LoginActivity dengan menambahkan baris kode ini di dalam metode onCreate() :

FacebookSdk.sdkInitialize(getApplicationContext());

Tambahkan fungsi logout() :

Button logout = (Button)findViewById(R.id.logout);
        logout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                LoginManager.getInstance().logOut();
                Intent login = new Intent(MainActivity.this, LoginActivity.class);
                startActivity(login);
                finish();
            }
        });

Sekarang Anda dapat menjalankan aplikasi Anda dan posting ke Facebook!

Share this post