Cara Autentikasi Menggunakan Akun Twitter pada Firebase

Cara Autentikasi Menggunakan Akun Twitter pada Firebase


Assalamualaikum Warahmatullahi Wabarakatuh.

Jaman sekarang ini, pengguna Twitter sangatlah banyak, tidak heran jika seorang pengembang aplikasi menggunakan menggunakan metode masuk dengan Akun Twitter, selain facebook dan google. Kita sabagai pengembang, dapat membuat sistem autentikasi dengan Twitter yang disediakan pada Firebase.


Firebase menyediakan banyak sekali method masuk untuk autentikasi, seperti facebook, email, google, github, nomor telepon, twitter, dll. Kita dapat mengizinkan pengguna untuk melakukan autentikasi melalui akun Twitter mereka, dengan mengintegrasikan autentikasi Twitter ke dalam aplikasi kita.

Materi lainnya yang direkomendasikan:

Cara Autentikasi Menggunakan Akun Twitter pada Firebase

1) Pertama-tama, kita harus menambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini

2) Selanjutnya kita perlu mengkonfigurasi aplikasi twitter, untuk di gunakan pada project aplikasi kita, kalian buka situs web, bernama Twitter Application Management.

3) Disini kita diharuskan untuk login/sign in dengan akun Twitter kita.

Twiitter Apps Sign In

4) Klik Create New App, untuk mendaftarkan aplikasi kita sebagai developer di Twitter, untuk mendapatkan kunci API dan Secret API.

Membuat App Baru di Twitter Apps

5) Pada bagian ini kalian diminta untuk memasukan Nama, Deskripsi, Website dan Callback URL.

Memasukan Detail Aplikasi

Pada bagian website, kalian dapat memasukan web yang menginformasikan project aplikasi kalian, atau bisa dengan memasuka website probadi kalian.

Callback URL, kalian bisa mendapatkannya pada Firebase Autentukasi saat mengaktifkan metode masuk Twitter, kalian salin URL tersebut.

Mendapatkan Callback URL

6) Masuk pada bagian Keys and Access Tokens, salin API key dan API secret, lalu tempelkan pada Metode masuk Twitter didalam Firebase, setelah itu simpan.

Mendapatkan Key API

7) Pada project aplikasi kalian, buka file build.gradle (direkori app), tambahkan library autentikasi, dan sertakan juka Twitter SDK kedalam dependencies.

compile 'com.google.firebase:firebase-auth:11.8.0'
compile("com.twitter.sdk.android:twitter-core:3.0.0@aar") { transitive = true }

8) Jangan lupa untuk menambahkan kedua permission berikut ini didalam AndroidManifest.xml kalian. permission tersebut digunakan untuk mengizinkan aplikasi membuka socket jaringan.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Disini kita akan membuat 2 buah activity, pertama yaitu activity untuk autentikasi, dimana activity tersebut akan muncul saat pertama kali dijalankan, Kedua yaitu main activity, activity tersebut akan muncul jika user berhasil login, dan didalam activity tersebut kita terdapat Button untuk logout.

9) Buat activity baru, berinama misalnya "LoginActivity", disini kita akan menambahkan Button Login yang disediakan oleh Twitter SDK.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="28dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.login">

    <com.twitter.sdk.android.core.identity.TwitterLoginButton
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

View:

Layout Activity Untuk Login

10) Selanjutnya kita buat activity baru, bernama "MainActivity", disini kita cukup menambahkan 1 buah Button saja.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.main_menu">

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keluar" />

</LinearLayout>

11) Buka file LoginActivity.java, masukan source code berikut ini:


package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.TwitterAuthProvider;
import com.twitter.sdk.android.core.Callback;
import com.twitter.sdk.android.core.Result;
import com.twitter.sdk.android.core.Twitter;
import com.twitter.sdk.android.core.TwitterAuthConfig;
import com.twitter.sdk.android.core.TwitterConfig;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.core.TwitterSession;
import com.twitter.sdk.android.core.identity.TwitterLoginButton;

public class login extends AppCompatActivity{

    //Deklarasi Variable
    private FirebaseAuth firebaseAuth; //Untuk Autentifikasi
    private FirebaseAuth.AuthStateListener authStateListener; //Untuk Menangani Kajadian Saat Autentifikasi
    private TwitterLoginButton loginButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        //Konfigurasi Twitter SDK
        //Masukan Key API dan Secret API
        TwitterAuthConfig authConfig = new TwitterAuthConfig("NWyeZKmQY4LmCbAzMtFAyWyJX",
                         "aiBPbYtBybumYbcAeheIzDAvxxKRObRpGwh8ac8Nd6UH9AJSSy");
        TwitterConfig twitterConfig = new TwitterConfig.Builder(this)
                .twitterAuthConfig(authConfig)
                .build();
        Twitter.initialize(twitterConfig);

        loginButton = findViewById(R.id.login);
        loginButton.setEnabled(true);
        loginButton.setCallback(new Callback() {
            @Override
            public void success(Result result) {
                handleTwitterSession(result.data);
            }

            @Override
            public void failure(TwitterException exception) {
                Toast.makeText(getApplicationContext(), "Autentikasi Dihentikan", Toast.LENGTH_SHORT).show();
            }
        });

        FirebaseConnect();
    }

    private void FirebaseConnect(){
        firebaseAuth = FirebaseAuth.getInstance(); //Mendapatkan Instance dari Firebase Auth

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah masuk/login dan belum keluar/logout, secara otomatis
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activiy MainActivity
                 */
                if(firebaseAuth.getCurrentUser() != null){
                    startActivity(new Intent(login.this,MainActivity.class));
                    finish();
                }
            }
        };
    }

    //Untuk Mengangani Kejadian Saat Pengguna Berhasil Login
    private void handleTwitterSession(TwitterSession session) {
        Log.d("LoginActivity", "handleTwitterSession:" + session);

        AuthCredential credential = TwitterAuthProvider.getCredential(
                session.getAuthToken().token,
                session.getAuthToken().secret);

        firebaseAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener() {
                    @Override
                    public void onComplete(@NonNull Task task) {
                        if (task.isSuccessful()) {
                            // Saat User berhasil login/autentikasi
                            Toast.makeText(getApplicationContext(), "Autentikasi Berhasil", Toast.LENGTH_SHORT).show();
                        } else {
                            // Jika user gagal untuk autentikasi
                            Log.d("LoginActivity","signInWithCredential:failure", task.getException());
                            Toast.makeText(getApplicationContext(), "Autentikasi Gagal", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
    }


    @Override
    protected void onStart() {
        super.onStart();
        //Jika User Telah Masuk/Login, makan akan mengangani kajadian apakah user telah masuk
        firebaseAuth.addAuthStateListener(authStateListener);
    }

    //Saat Aktifitas dihentikan, maka listener akan dihapus
    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            firebaseAuth.removeAuthStateListener(authStateListener);
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        loginButton.onActivityResult(requestCode, resultCode, data);
    }
}

Untuk Logout/Keluar, kalian dapat menambahkan baris kode berikut ini pada button didalam MainActivity.java:

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.firebase.auth.FirebaseAuth;

public class MainActivity extends AppCompatActivity {

    private FirebaseAuth auth;
    private FirebaseAuth.AuthStateListener authStateListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button Keluar = findViewById(R.id.logout);
        auth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah keluar/logout
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activity Login
                 */
                if(firebaseAuth.getCurrentUser() == null){
                    startActivity(new Intent(MainActivity.this, login.class));
                    finish();
                }
            }
        };
        Keluar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Digunakan Untuk Logout
                auth.signOut();
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
        auth.addAuthStateListener(authStateListener);
    }

    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            auth.removeAuthStateListener(authStateListener);
        }
    }
}

Demo:

 Screenshot_Autentikasi Dengan Facebook Example2


Untuk penjelasan lebih lanjut, kalian dapat melihat dokumentasinya disini.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Binding View Menggunakan Library ButterKnife Android

Cara Binding View Menggunakan Library ButterKnife Android


Assalamualaikum Warahmatullahi Wabarakatuh.

ButterKnife adalah salah satu Library yang dikembangkan oleh Jake Wharton. library tersebut sangat populer dan banyak digunakan oleh para developer android, karena mampu menyerhanakan pemulisan kode, itu mengapa ButterKnife wajib diikutsertakan dalam project aplikasi yang kita buat.

Salah satu fungsi dari ButterKnife yaitu dengan View Injection, kita tidak perlu menggunakan findViewById(), pada umunya saat kita mendeklarasikan sebuah view, seperti EditText, TextView, Button, dsb. kita perlu melakukan fiindViewById satu per-satu untuk setiap komponennya. findViewById akan tergantikan dengan Annotation (@BindView).
 
Cara Binding View Menggunakan Library ButterKnife Android

Selain itu, ButterKnife dapat meringkas kode seperti saat kita mengset listener pada sebuah Button, untuk memberikan Event menggunakan onClickLstener(), dengan menggunakan ButterKnife, kita tidak perlu menggunakan fungsi tersebut, kita hanya perlu menambakan Annotation (@OnClick) pada method yang ingin di eksekusi.

Itulah beberapa manfaat dari Library ButterKnife, sebenarnya masih banyak manfaat serta keguaan dari library tersebut. Pada materi ini, kita hanya akan membahas bagaimana cara eliminasi findViewById dan menggunakan Event dengan ButterKnife.

Materi lainnya yang direkomendasikan:


Cara Binding View Menggunakan Library ButterKnife Android

Buka aplikasi Android Studio kalian, Buat Project Baru. Lalu tambahkan library berikut ini pada dependencies didalam file build.gradle (direktori app).

compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

Library tersebut digunakan untuk menginstall ButterKnife dan pastikan PC kalian terhubung dengan Internet.

Buka file activity_main.xml kalian, misalkan kita membuat sebuah View seperti EditText, Button dan TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.libraryexample.MainActivity">

    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName" />

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="OK" />

    <TextView
        android:id="@+id/output"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="Hasil"
        android:textSize="15sp"
        android:textStyle="bold" />
    
</LinearLayout>

Dengan menggunakan Library ButterKnife, kita tidak perlu menggunakan findViewById pada masing-masing komponen tersebut.

Silakan kalian buka file MainActivity.java, disini kita dapat menginisialisasi View-view yang ada, hanya dengan menggunakan Annotation (@BindView), dan membuat Event dengan Annotation (@OnClick), seperti berikut ini:

package wildan.cianjur.developer.net.libraryexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

 public class MainActivity extends AppCompatActivity {

     //Mendefinisikan View dengan ButterKnife
     @BindView(R.id.input)
     EditText Input;

     @BindView(R.id.output)
     TextView Output;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Berfungsi untuk mengikat views ke dalam Activity/Fragment/Context/View
        ButterKnife.bind(this);
    }

    //Membuat onClickListener pada View yang mempunyai ID submit
    @OnClick(R.id.submit)
     public void getData(){
        String getInput = Input.getText().toString();
        Output.setText(getInput);
        Toast.makeText(this, getInput, Toast.LENGTH_SHORT).show();
     }
}

Jika kita menggunakan library ButterKnife, dalam penamaan package tidak boleh diawali dengan nama android, contoh android.developer.libraryexample, maka akan terjadi error. selain iu juga untuk method menggunakan Annotation @OnClick tidak boleh menggunakan modifier private.

Demo:

Screenshot_ButterKnife_library_Example

Jika masih kurang, kalian dapat melihat referansi lainnya disini.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Menerapkan Show/Hide Password di Android Studio

Cara Menerapkan Show/Hide Password di Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh.

Didalam sebuah aplikasi, khususnya aplikasi online yang mempunyai fitur login, pastinya terdapat Field Password yang harus user inputkan, password yang diinputkan akan di hide dan hanya menampilkan simbol, pada umumnya field password tersebut terdapat sebuah fungsi yang digunakan untuk menampilkan password, agar user tidak salah dalam memasukan password tersebut.

Cara Menerapkan Show/Hide Password di Android Studio

Pada tutorial ini, kita akan membuat program sederhana dengan menggunakan EditText untuk memasukan password user dan membuat fungsi show/hide menggunakan CheckBox.

Materi yang harus kalian ikuti sebelumnya :


Cara Menerapkan Show/Hide Password di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Buka file activity_main.xml, disini kalian tambahkan EditText dan juga Chectbox, seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">


    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <CheckBox
        android:id="@+id/showPass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Password" />
</LinearLayout>

jangan lupa untuk memasukan atribut inputType:"textPassword", disunakan untuk menghide password yang kita masukan.

View:

show_password_layout_example

3) Buka file MainActivity.java kalian, masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity{

    //Deklarasi Variable
    private EditText PassInput;
    private CheckBox ShowPass;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PassInput = findViewById(R.id.password);
        ShowPass = findViewById(R.id.showPass);
        
        //Set onClickListener, untuk menangani kejadian saat Checkbox diklik
        ShowPass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(ShowPass.isChecked()){
                    //Saat Checkbox dalam keadaan Checked, maka password akan di tampilkan
                    PassInput.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }else {
                    //Jika tidak, maka password akan di sembuyikan
                    PassInput.setTransformationMethod(PasswordTransformationMethod.getInstance());
                }
            }
        });
    }
}

Demo:

Screenshot_Show-hide Passwodr Example1 Screenshot_Show-hide Passwodr Example2

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Membuat RecyclerView dengan CardView di Android

Cara Membuat RecyclerView dengan CardView di Android


Assalamualaikum Warahmatullahi Wabarakatuh.

Sebelumnya kita sudah belajar mnganai Cara Membuat RecyclerView Material Design, didalam project tersebut kita menggunakan RecyclerView untuk menampilkan item yang tersimpan didalam ArrayList. Selanjutnya pada tutorial berikut ini, kita akan menambahkan CardView kedalam RecyclerView tersebut, CardView akan memberikan tampilan efek seperti kartu pada masing-masing item list.

Cara Membuat RecyclerView dengan CardView di Android

Saya sarankan sebelum kalian melanjutkan materi berikut ini, kalian harus membuat project RecyclerView dari tutorial yang saya berikan sebelumnya.

Materi lainnya yang direkomendasikan:

Cara Membuat RecyclerView dengan CardView di Android

1) Jangan lupa untuk menambahkan Library berikut ini didalam dependencies pada file build.gradle (direktori app).

compile'com.android.support:design:27.0.2'
compile 'com.android.support:cardview-v7:27.0.2'
compile 'com.android.support:recyclerview-v7:27.0.2'

2) Untuk menambahkan CardView, kita tinggal buka pada file view_design.xml, yang digunakan untuk mendesain tampilan layout pada masing-masing item. Bungkus semua konten didalam layout tersebut kedalam CardView, seperti berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/item_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/meme"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:contentDescription="@string/todo"
                app:srcCompat="@drawable/meme1" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toEndOf="@+id/meme"
                android:layout_toRightOf="@+id/meme"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/memetitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="2dp"
                    android:text="Wildan"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/sub_meme"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="Gambar Meme Ke: 0"
                    android:textSize="14sp" />
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

atribut cardCornerRadius digunakan untuk mengatur sudut/sisi-sisi dari cardView, dan cardElevation digunakan untuk menambahkan efek bayangan pada cardView.

Demo:

Screenshot_RecyclerView dengan CardView example

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Membuat Bottom Sheet Material Design di Android Studio

Cara Membuat Bottom Sheet Material Design di Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh.

Bottom Sheet adalah salah satu komponen Material Design, Bottom Sheet merupakan menu pilihan yang pada umumnya disembunyikan dibagian bawah activity, yang bisa kita tarik keatas untuk menampilkan daftar menu tersebut.

Cara Membuat Bottom Sheet Material Design di Android Studio

Salah satu contoh aplikasi populer yang menggunaka bottom sheet adalah Google Maps, dimana ketika user mengeklik suatu point lokasi di peta, maka informasi lokasi tersebut akan ditampilkan dalam bentuk Bottom Sheet, yang bisa kita tarik ke atas.

Itulah yang akan kita palajari, pada materi berikut ini kita akan belajar membuat program sederhana dengan menggunakan Bottom Sheet. Untuk itu mari kita simak tutorial berikut ini.

Materi lainnya yang direkomendasikan:

Cara Membuat Bottom Sheet Material Design di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama tema, jangan lupa untuk menambahkan library Android Support Design pada dependencies didalam file build.gradle (direktori app).

dependencies {
    compile 'com.android.support:design:27.0.2'
}

3) Buka file activity_main.xml kalian, untuk contoh layoutnya kalian buat seperti berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:layout_margin="10dp"
            android:id="@+id/show"
            android:text="Tampilkan Bottom Sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/hide"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Sembunyikan Bottom Sheet" />

    </LinearLayout>

 <!-- Membuat Bottom Sheet -->
    <LinearLayout
        android:id="@+id/bottomsheet"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:behavior_peekHeight="60dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Foto Hewan Unik"
            android:textColor="@android:color/white"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:gravity="center"
                android:src="@drawable/bayam" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:gravity="center"
                android:text="Bayam (Badak Kepala Ayam)"
                android:textColor="#FFFFFF"
                android:textSize="15sp"
                android:textStyle="bold" />
        </LinearLayout>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Pada layout tersebut, kita menggunakan 2 buah button untuk menampilkan dan menyembunyikan Bottom Sheet, semua komponen didalam layout tersebut, kita bungkus menggunakan CoordinatorLayout, agar Bottom Sheet tidak menupuk dengan komponen lainnya, misalnya dengan Floating Action Button, saat user menariknya keatas.

Untuk membuat Bottom Sheet, kita perlu menambahkan atribut app:layout_behavior="android.support.design.widget.BottomSheetBehavior" didalam sebuah view, kita menggunakan LinearLayout sebagai base Bottom Sheet View, didalam view/LinearLayout tersebut terdapat konten atau isi yang akan ditampilkan.

Sampai disini kalian dapat mencoba manjalankan project tersebut. untuk menampilkan konten dari Bottom Sheet, kalian tinggal menarik slider yang terdapat dibawah activity.

Demo:

Screenshot_Bottom Sheet Example1 Screenshot_Bottom Sheet Example2

Mengontrol Bottom Sheet menggunakan Java

Sebelumnya kita sudah membuat layout activity untuk Bottom Sheet, yang sudah kita coba sebelumnya.

Disini kita akan mencoba mengontrol Bottom Sheet tersebut dengan menggunakan Button, seperti menampilkan dan menyembunyikan konten diadalam Bottom Sheet.

Buka file MainActivity.java kalian, masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity{

    private Button ShowButton;
    private Button HideButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Inisialisasi tombol
        ShowButton = findViewById(R.id.show);
        HideButton = findViewById(R.id.hide);

        //Inisialisasi LinearLayout sebagai bottom sheet view
        final View BottomSheet = findViewById(R.id.bottomsheet);

        //Menempatkan LinearLayout kedalam BottomSheetBehavior
        final BottomSheetBehavior SheetBehavior = BottomSheetBehavior.from(BottomSheet);

        //Set BottomSheet view agar dapat disembunyikan semuanya
        SheetBehavior.setHideable(true);

        //Set listener dan set BottomSheet state
        ShowButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (SheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    ShowButton.setText("Sembunyikan Konten");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                } else {
                    ShowButton.setText("Tampilkan Konten");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }
            }
        });

        HideButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (SheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                    HideButton.setText("Sembuyikan Slider");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else {
                    HideButton.setText("Tampilkan Slider");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }

            }
        });
    }
}

Fungsi dari 3 buah state didalam BottomSheet view yang harus kalian ketahui:
  • BottomSheetBehavior.STATE_EXPANDED : Untuk melihat isi konten.
  • BottomSheetBehavior.STATE_COLLAPSED : Menyembunyikan isi konten.
  • BottomSheetBehavior.STATE_HIDDEN : Meyembunyikan Konten dan juga Slidernya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Membuat Animasi dan Sub Menu pada Floating Action Button

Membuat Animasi dan Sub Menu pada Floating Action Button


Assalamualaikum Warahmatullahi Wabarakatuh.

Floating Action Button adalah salah satu view Material Design, yang digunakan sebagai indikator utama pada sebuah aplikasi, FAB berbentuk lingkaran dan akan terlihat seakan mengambang pada Layout atau Activity. Pada Tutorial sebelumnya, kita sudah membahas Bagaimana Cara Membuat FAB di Android

Membuat Animasi dan Sub Menu pada Floating Action Button

Pada materi berikut ini, kita akan belajar cara membuat animasi serta menambahkan Sub Menu Item pada Floating Action Button, sub menu tersebut berguna sebagai indikator utama pada sebuah aplikasi.

Google telah menyediakan FAB dari Android Design Support Library, yang bisa kita gunakan, tetapi untuk menambahkan animasi dan sub menu, kita harus membuatnya secara manual, untuk itu kita menggunakan sebuah library, dalam membuat sub menu dan juga animasi dengan mudah. Library tersebut dibuat oleh Dmytro Tarianyk.

Materi lainnya yang direkomendasikan:

Membuat Animasi dan Sub Menu pada Floating Action Button 

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Buka file build.gradle (direktori app), tambahkan library berikut ini:

compile 'com.github.clans:fab:1.6.4'

3) Disini saya sudah menyiapkan beberapa icon, dengan ukuran 24dp, yang nantinya akan kita gunakan pada Floating Action Button, kalian dapat membutnya dengan cara, klik kanan pada direktori res > New > Vector Asset.

4) Selanjutnya buka file activity_main.xml kalian, disini kita akan menambahkan tag <FloatingActionMenu> sebagai pembungkus untuk sub menu dan <FloatingActionButton> digunakan untuk membuat sub menu item.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/fab_margin"
        app:menu_labels_textColor="#000000"
        app:menu_labels_colorNormal="#FFFFFF"
        app:menu_labels_colorPressed="#BDBDBD"
        app:fab_size="normal"
        app:menu_backgroundColor="@android:color/transparent"
        app:menu_colorNormal="@color/colorAccent"
        app:menu_colorPressed="#FF00786D"
        app:menu_icon="@drawable/ic_menu_white_24dp"
        app:menu_labels_showShadow="true"
        app:menu_openDirection="up"
        app:menu_showShadow="true">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_label="Lokasi"
            android:src="@drawable/ic_my_location_white_24dp"
            app:fab_colorNormal="@color/colorAccent"
            app:fab_colorPressed="#FF00786D"
            app:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_label="Tambah Teman"
            android:src="@drawable/ic_person_add_white_24dp"
            app:fab_colorNormal="@color/colorAccent"
            app:fab_colorPressed="#FF00786D"
            app:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_label="Setelan"
            android:src="@drawable/ic_settings_white_24dp"
            app:fab_colorNormal="@color/colorAccent"
            app:fab_colorPressed="#FF00786D"
            app:fab_size="mini" />

    </com.github.clans.fab.FloatingActionMenu>

</RelativeLayout>

Ada beberapa atribut yang akan saya jelaskan, diantaranya:
  • menu_colorNormal dan menu_colorPressed : digunakan untuk mengset warna pada FAB button, saat button tersebut tidak diklik dan Saat diklik.
  • fab_colorNormal dan fab_colorPressed : digunakan untuk mengset warna pada FAB sub menu item, saat tidak diklik dan Saat diklik.
  • fab_size : digunakan untuk mengubah ukuran, yaitu normal atau mini, saya sarankan untuk FAB Menu pilih normal dan FAB Button pilih mini.
  • menu_labels_colorNormal dan menu_labels_colorPressed : digunakan untuk mengset warna pada Labels, saat labels tersebut tidak diklik dan Saat diklik.
  • menu_showShadow dan menu_labels_showShadow : digunakan untuk menampilkan efek bayangan pada FAB dan labels.
  • menu_openDirection : untuk menentukan arah pada saat FAB membuka dan menampilkan sub menu item.
  • menu_labels_textColor : untuk menentukan warna pada text labels pada sub menu FAB.
  • menu_backgroundColor : menentukan warna background.

View:

FAB Layout Example

5) Selanjutnya buka file MainActivity.java, disini kita akan menambahkan onClickListener pada masing-masing sub menu didalam FAB, untuk menangani kejadian saat menu tersebut di klik.

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.github.clans.fab.FloatingActionButton;

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton Lokasi = findViewById(R.id.location);
        Lokasi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Pilih Lokasi", Toast.LENGTH_SHORT).show();
            }
        });

        FloatingActionButton AddFriend = findViewById(R.id.add);
        AddFriend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Tambah Teman", Toast.LENGTH_SHORT).show();
            }
        });

        FloatingActionButton Setelan = findViewById(R.id.setting);
        Setelan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Pengaturan", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Demo:

Screenshot_FAB Sub Menu Item Example

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Autentikasi Menggunakan Akun Facebook pada Firebase

Cara Autentikasi Menggunakan Akun Facebook pada Firebase


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial ini, saya akan mengajarkan pada kalian, Bagaimana Cara Autentikasi atau Metode Masuk dengan Menggunakan Akun Facebook pada Firebase, didalam firebase autentikasi, banyak sekali metode masuk yang bisa kita pilih, salah satunya yaitu Facebook.

Cara Autentikasi Menggunakan Akun Facebook pada Firebase

Alasan kenapa Facebook menjadi alternatif lain untuk metode masuk pada sebuah aplikasi, dikarenakan pengguna Facebook saat sudah semakin banyak, hampir semua orang mempunyai akun Facebook, oleh sebab itu, user dapat memilih untuk login menggunakan akun fb nya sendiri, jika ingin lebih praktis tanpa hapus registrasi.

Materi lainnya yang direkomendasikan:

Cara Autentikasi Menggunakan Akun Facebook pada Firebase

1) Tambahkan Firebase kedalam Project Aplikasi Kalian,Untuk Tutorialnya bisa dilihat Disini

2) Buka website Facebook Developer, Disini. Lalu tambahkan aplikasi baru yang ingin kita buat, untuk dihubungkan dengan Facebook.

Menambahkan Aplikasi Baru di Facebook Developer

2) Pada bagian ini, kalian isi dengan Nama Tampilan/Nama Aplikasi dan Email Kontak yang aktif, setelah itu klik Buat ID Aplikasi.

Buat ID Aplikasi Baru

3) Didalam menu Dashboard kalian, salin.copy ID Aplikasi dan Kunci Rahasia Aplikasi/App Secret.

Dashboard Pada Facebook Developer

4) Pada menu Dashboad Firebase, Buka Auhentication, pilih Metode masuk, pilih Facebook, lalu kalin masukan ID Aplikasi dan Secret App yang sudah kalian salin tadi. setelah itu klik Simpan.

Memasukan ID Aplikasi dan Sercet App pada Autentifikasi FB di Firebase

5) Buka Facebook Developer Lagi, Masuk pada menu Masuk Facebook > Tutorial Singkat > Pilih Android.

Tutorial Singkat untuk menambahkan Masuk Facebook ke Aplikasi

6) Pada bagian ini, kita langsung import saya Facebook SDK kedalam Repositori kita. Buka Project Aplikasi Android Kalian,  disini kalian diharuskan untuk mengunduh SDK dari Repositori Maven Central, buka file build.gradle (Module: Project).

allprojects {
    repositories {
        google()
        jcenter()
        mavenCentral() //Repositori Yang Harus Ditambahkan
    }
}

7) Buka file build.gradle (Module: App), masukan library berikut ini, kedalam dependencies{}.

implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
implementation 'com.google.firebase:firebase-auth:11.8.0'

8) Masuka Kedua Package Berikut ini kedalam MainActivity.java, kalian.

import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

9) Pada bagian ini, kalian ini dengan Nama Paket dan Nama Peket pada ActiviyMain (Kaliann cukup menambahkan nama class di ujing nama paket). Save.

Memasukan Nama Paket

10) Selanjutnya kalian diharuskan untuk memasukan Hash Kunci, Caranya buka CMD (Sebagai Administrator), lalu masuk pada path bin, didalam Java > jre. Contohnya seperti berikut ini:

Menentukan Path pada Java

Kalian dapat berpindah direktori menggunakan perintah cd.

11) Selanjutnya kalian download openssl pada link berikut ini. Download Disini. Extract lalu simpan pada partisi C. Jika sudah ada, kalina bisa melewati langkah berikut ini.

12) Buka cmd, lalu masukan script/pertintah berikut ini:

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\Wildan M Athoillah\.android\debug.keystore" | "C:\OpenSSL-Win64\bin\openssl" sha1 -binary | "C:\OpenSSL-Win64\bin\openssl" base64

Yang saya tandai dengan warna merah, sesuaikan dengan nama direktori di komputer/laptop kalian, lalu yang saya tandai dengan warna hijau, ubah dengan nama direktori openssl, di komputer/laptop kalian.

13 Jika sudah maka akan diminta password untuk membukanya, masukan password "android", lalu tekan enter.

Medapatkan Kunci Hash

Kalian salin Kunci Hashnya, lalu paste pada Facebook Developer

14) Aktifkan Single Sign On, Buka file /app/res/values/strings.xml kalian, tambahkan ID Aplikasi Kalian.

<string name="facebook_app_id">xxxxxxxxxxxxxxx</string>
<string name="fb_login_protocol_scheme">fbxxxxxxxxxxxxxxx</string>

15) Buka file /app/manifest/AndroidManifest.xml, lalu Tambahkan elemen uses-permission berikut ini, agar aplikasi mengijinkan membuaka socket jaringan.

<uses-permission android:name="android.permission.INTERNET" />

16) Tambahkan elemen meta-data, dan sebuah aktivitas serta filter intent untuk Tab Khusus Chrome di dalam elemen application kalian. Seperti berikut ini:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <!-- Baris Kode Yang Ditambahkan -->
        <meta-data android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id"/>

        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!-- End -->

        <activity android:name=".login">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".main_menu"></activity>
    </application>

17) Selanjutnya kita tambahkan tombol Login Facebook di activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="28dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.login">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Masuk Dengan"
        android:textSize="15sp"
        android:textStyle="bold" />

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_fb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp" />

</LinearLayout>

View:

Login Facebook Activity

18) Sebelumnya kalain harus membuat activity kedua, berimana misalnya "main_menu".

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.main_menu">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Selamat Datang Di WILDAN TECHNO ART"
        android:textSize="14sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keluar" />

</LinearLayout>

19) Buka file MainActivity.java, atau activity utama kalian, masukan source code berikut ini:

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import com.facebook.AccessToken;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FacebookAuthProvider;
import com.google.firebase.auth.FirebaseAuth;

public class login extends AppCompatActivity{

    //Deklarasi Variable
    private FirebaseAuth firebaseAuth; //Untuk Autentifikasi
    private FirebaseAuth.AuthStateListener authStateListener; //Untuk Menangani Kajadian Saat Autentifikasi
    private LoginButton loginFB;
    private CallbackManager callbackManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        //Inisialisasi Facebook Login Buton
        callbackManager = CallbackManager.Factory.create();
        loginFB = findViewById(R.id.login_fb);
        //Mengizinkan Membaca Email dan Profil
        loginFB.setReadPermissions("email", "public_profile");
        loginFB.registerCallback(callbackManager, new FacebookCallback() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                //Menghandle saat Login kia Sukses
                handleFacebookAccessToken(loginResult.getAccessToken());
            }

            @Override
            public void onCancel() {
                //Menghandle saat Membatalkan Aktivitas
            }

            @Override
            public void onError(FacebookException error) {
                //Menghandle saat Terjadi Error
                Toast.makeText(getApplicationContext(),"Terjadi Kesalahan", Toast.LENGTH_SHORT).show();
            }
        });
        FirebaseConnect();
    }

    //Kumpulan Konfigurasi Untuk Menghubungkan dengan Firebase
    private void FirebaseConnect(){
        firebaseAuth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah masuk/login dan belum keluar/logout, secara otomatis
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activiy MainMenu
                 */
                if(firebaseAuth.getCurrentUser() != null){
                    startActivity(new Intent(login.this,main_menu.class));
                    finish();
                }
            }
        };
    }

    //Konfiurasi Untuk Masuk ke Akun Facebook
    private void SignIn(){

    }

    //Untuk Mengangani Kejadian Saat Pengguna Berhasil Login
    private void handleFacebookAccessToken(AccessToken token){
        AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());
        firebaseAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener() {
                    @Override
                    public void onComplete(@NonNull Task task) {
                        if (task.isSuccessful()) {
                            Toast.makeText(getApplicationContext(),"Autentikasi Berhasil", Toast.LENGTH_SHORT).show();
                            finish();
                        }else {
                            Toast.makeText(getApplicationContext(),"Autentikasi Gagal", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
    }

    @Override
    protected void onStart() {
        super.onStart();
        //Jika User Telah Masuk/Login, makan akan mengangani kajadian apakah user telah masuk
        firebaseAuth.addAuthStateListener(authStateListener);
    }

    //Saat Aktifitas dihentikan, maka listener akan dihapus
    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            firebaseAuth.removeAuthStateListener(authStateListener);
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //Menembalikan Hasil Activity ke SDK Facebook
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }
}

Saat User berhasil login, makan akan berpindah pada activity main_menu.

Untuk Logout/Keluar, kalian dapat menambahkan baris kode berikut ini pada button didalam Activity main_menu.

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.firebase.auth.FirebaseAuth;

public class main_menu extends AppCompatActivity {

    private FirebaseAuth auth;
    private FirebaseAuth.AuthStateListener authStateListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_menu);
        Button Keluar = findViewById(R.id.logout);
        auth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah keluar/logout
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activity Login
                 */
                if(firebaseAuth.getCurrentUser() == null){
                    startActivity(new Intent(main_menu.this, login.class));
                    finish();
                }
            }
        };
        Keluar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Digunakan Untuk Logout
                auth.signOut();
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
        auth.addAuthStateListener(authStateListener);
    }

    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            auth.removeAuthStateListener(authStateListener);
        }
    }
}

Demo:

Screenshot_Autentikasi Dengan Facebook Example1 Screenshot_Autentikasi Dengan Facebook Example2

Penjelasan lengkapnya bisa kalian lihat disini.

Projectnya Bisa Kalian Download di Github Saya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Cara Autentikasi Menggunakan Akun Google pada Firebase

Cara Autentikasi Menggunakan Akun Google pada Firebase


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial kali ini, saya akan mengajarkan pada kalian bagaimana cara agar aplikasi yang kita buat dapat login/masuk dengan menggunakan akun google. Didalam Firebase menyediakan banyak sekali metode masuk untuk Autentikasi pada Aplikasi, seperti Email, Twitter, Facbook, GitHub, Ponsel, dsb.

Cara Autentikasi Menggunakan Akun Google pada Firebase

Sala satu metode masuk yang akan kita bahas yaitu, dengan menggunakan akun Google, untuk itu sebelumnya kita harus menyiapkan atau membuat akun google terlebih dahulu.

Aplikasi-aplikasi sekarang ini, banyak sekali yang menggunakan akun google sebagai alternaif metode untuk masuk kedalam sebuah aplikasi, dikarenakan popularitas akun Goolge semakin tinggi, untuk itu tidak ada salahnya jika kita menggunakan Autentikasi Google pada Proyek aplikasi kita.

Materi lainnya yang direkomendasikan:

Cara Autentikasi Menggunakan Akun Google pada Firebase

1) Pertama-tama, kita harus menambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini
.
2) Buka Dashboard Firebase kalian, pilih Authentication > Metode Masuk > Pilih Google, lalu Aktifkan > Simpan.

Memilih Metode Masuk pada Fiebase Authentication

3) Didalam project aplikasi kalian, buka file build.gradle (direkori app), tambahkan kedua library berikut ini, didalam dependencies.

compile 'com.google.firebase:firebase-auth:11.8.0'
compile 'com.google.android.gms:play-services-auth:11.8.0'

Kedua library tersebut digunakan untuk Autentikasi pada Firebase.

4) Jangan lupa untuk menambahkan kedua permission berikut ini didalam AndroidManifest.xml kalian.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

5) Buat pada activity_main.xml yang digunakan untuk login, disini kita akan menggunakan SignInButton, dan juga komponen tambahan seperti TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="28dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.login">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Masuk Dengan"
        android:textSize="15sp"
        android:textStyle="bold" />

    <com.google.android.gms.common.SignInButton
        android:id="@+id/login_google"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp">

    </com.google.android.gms.common.SignInButton>

</LinearLayout>

View:

Fiebase Login Activity

6) Buka file MainActivity.java kalian, pertama kita akan mendeklarasikan beberapa variable yang digunakan untuk kebutuhan Autentikasi, dan juga persiapkan beberapa method seperti berikut ini.

package cianjur.developer.net.firebaseexample;

import android.app.ProgressDialog;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.auth.api.signin.GoogleSignInOptions;
import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.SignInButton;
import com.google.android.gms.common.api.GoogleApiClient;
import com.google.firebase.auth.FirebaseAuth;

public class login extends AppCompatActivity implements GoogleApiClient.OnConnectionFailedListener{

    //Deklarasi Variable
    ProgressDialog progressDialog; //Membuat kemajuan/progres saat login
    private SignInButton googleButton; //Sebuah Tombol khusus Untuk Login
    private GoogleSignInOptions GSO; //Untuk Konfigurasi Google SignIn
    private GoogleApiClient mGoogleApiClient; //Membuat API/Antarmuka Untuk Client
    private FirebaseAuth firebaseAuth; //Untuk Autentifikasi
    private FirebaseAuth.AuthStateListener authStateListener; //Untuk Menangani Kajadian Saat Autentifikasi
    private final int RC_SIGN_ID = 9001; //Kode Unik Untuk SignIn
    private final String TAG = "SignInAcivity";  //Untuk Log Debugging

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        googleButton = findViewById(R.id.login_google);
        FirebaseConnect();
        googleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                SignIn();
            }
        });
    }

    //Kumpulan Konfigurasi Untuk Menghubungkan dengan Firebase
    private void FirebaseConnect(){
        //Statement
    }

    //Konfiurasi Untuk Masuk ke Akun Google
    private void SignIn(){
        //Statement
    }

    //Untuk Mengangani Kejadian Saat Pengguna Berhasil Login
    private void firebaseAuthWithGoogle(GoogleSignInAccount account){

    }

    //Menagani Kejadian Saat Gagal Koneksi
    @Override
    public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
        //Statement
    }

    @Override
    protected void onStart() {
        super.onStart();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
    }
}

7) Buat Class dan Activiy baru, berinama, misalnya  "main_menu", Kita akan berpidah pada Activity tersebut jika user berhasil login.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.main_menu">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Selamat Datang Di WILDAN TECHNO ART"
        android:textSize="18sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keluar" />

</LinearLayout>

8) Selanjutnya buka lagi MainActivity untuk login tadi, didalam method FirebaseConnect(), masukan source code berikut ini:

private void FirebaseConnect(){
        firebaseAnalytics = FirebaseAnalytics.getInstance(this); //Menghubungkan dengan Firebase Analytics
        firebaseAuth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi
        progressDialog = new ProgressDialog(this); //Sebuah ProgressDialog untuk menandakan program sedang dieksekusi

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah masuk/login dan belum keluar/logout, secara otomatis
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activiy MainMenu
                 */
                if(firebaseAuth.getCurrentUser() != null){
                    startActivity(new Intent(login.this,main_menu.class));
                    finish();
                }
            }
        };

        // Konfigurasi GoogleSignIn, Dengan cara bagaimanakah User akan Masuk
        GSO = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(getString(R.string.default_web_client_id))
                .requestEmail()
                .build();

        mGoogleApiClient = new GoogleApiClient.Builder(getApplicationContext())
                .enableAutoManage(this, this)
                .addApi(Auth.GOOGLE_SIGN_IN_API, GSO)
                .build();
    }

9) Masukan kode berikut ini didalam method onStart() dan onStop().

    @Override
    protected void onStart() {
        super.onStart();
        //Jika User Telah Masuk/Login, makan akan mengangani kajadian apakah user telah masuk
        firebaseAuth.addAuthStateListener(authStateListener);
    }

    //Saat Aktifitas dihentikan, maka listener akan dihapus
    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            firebaseAuth.removeAuthStateListener(authStateListener);
        }
    }

10) Selanjutnya didalam method SignIn(), saat tombol signIn di klik, maka user diminta untuk menentukan/memilih alamat email yang akan digunakan untuk login.

//Konfiurasi Untuk Masuk ke Akun Google
  private void SignIn(){
    Intent GSignIN = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
    startActivityForResult(GSignIN, RC_SIGN_ID);
    progressDialog.setMessage("Mohon Tunggu...");
    progressDialog.setIndeterminate(true);
    progressDialog.show();
}

11) Didalam method onActivityResult(), masukan source code berikut ini:

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // Mendapatkan Akses untuk SignIn/Masuk Jika permintaan dari Firebase Autentifikasi Terpenuhi
        if (requestCode == RC_SIGN_ID) {
            GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);
            if(result.isSuccess()){
                GoogleSignInAccount account = result.getSignInAccount();
                firebaseAuthWithGoogle(account);
            }else {
                progressDialog.dismiss();
            }
        }else{
            progressDialog.dismiss();
        }
    }

12) Didalam method onConnectionFailed(), kita cukup menambahkan baris kode berikut ini, untuk menangani kejadian jika koneksi gagal terhubung.

//Menagani Kejadian Saat Gagal Koneksi
@Override
public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
    Log.d(TAG, "OnConnectionFailed" + connectionResult);
    progressDialog.dismiss();
    Toast.makeText(getApplicationContext(),"Koneksi Tidak Terhubung", Toast.LENGTH_SHORT).show();
}

13) Setelah pengguna berhasil login, maka akan mendapatkan token ID dari objek GoogleSignInAccount, token tersebut akan ditukarkan dengan kredensial Firebase, setelah itu lakukan autentikasi dengan Firebase menggunakan kredensial tersebut.

    private void firebaseAuthWithGoogle(GoogleSignInAccount account){
        Log.d(TAG, "firebaseAuthWithGoogle:" + account.getId());

        AuthCredential credential = GoogleAuthProvider.getCredential(account.getIdToken(), null);
        firebaseAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            Toast.makeText(getApplicationContext(),"Autentikasi Berhasil", Toast.LENGTH_SHORT).show();
                            finish();
                        }else {
                            Toast.makeText(getApplicationContext(),"Autentikasi Gagal", Toast.LENGTH_SHORT).show();
                        }
                        progressDialog.dismiss();
                    }
                });
    }

Saat User berhasil login, makan akan berpindah pada activity main_menu.

Untuk Logout/Keluar, kalian dapat menambahkan baris kode berikut ini pada button didalam Activity min_menu.

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.firebase.auth.FirebaseAuth;

public class main_menu extends AppCompatActivity {

    private FirebaseAuth auth;
    private FirebaseAuth.AuthStateListener authStateListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_menu);
        Button Keluar = findViewById(R.id.logout);
        auth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi

        //Authentifikasi Listener
        authStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                /*
                 * Jika User sebelumnya telah keluar/logout
                 * Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activity Login
                 */
                if(firebaseAuth.getCurrentUser() == null){
                    startActivity(new Intent(main_menu.this, login.class));
                    finish();
                }
            }
        };
        Keluar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Digunakan Untuk Logout
                auth.signOut();
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
        auth.addAuthStateListener(authStateListener);
    }

    @Override
    protected void onStop() {
        super.onStop();
        if(authStateListener != null){
            auth.removeAuthStateListener(authStateListener);
        }
    }
}

Demo:

Screenshot_Firebase Autentikasi Google Example1 Screenshot_Firebase Autentikasi Google Example2

Projectnya Bisa Kalian Download di Github Saya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.