Aplikasi Forum Android Studio dan Firebase - Login #2

Assalammu'alaikum , Pada kali ini admin akan melanjutkan tutorial mengenai Aplikasi Forum Android Studio dan Firebase.

Bagaimana sahabat forumkoding? semoga kita selalu diberi kesehatan.  Aamiin.

Pada tutorial yang kedua ini, kita akan mempelajari mengenai Login, menggunakan akun yang telah lita daftarkan pada Firebase. Lalu point- point apa saja yang akan kita pelajari pada tutorial kali ini? Dibawah ini point - point yang akan kita pelajari pada tutorial mengenai Aplikasi Forum Android Studio dan Firebase - Login #2.

Jika teman- teman belum mengikuti tutorial sebelumnya, teman- teman bisa mengunjungi artikel sebelumnya terlebih dahulu. Aplikasi Forum dengan Android Studio dan Firebase - User Registration #1.

Jika sudah mengikuti tutorial yang pertama, maka teman-teman siap untuk mengikuti tutorial yang kedua ini :), berikut point- point pembahasannya

Point - point Mengenai pembuatan Aplikasi Forum Android Studio dan Firebase

Dalam part kedua ini kita akan membahasan mengenai:
  1. Membuat ProfileActivity Launcher.
  2. Memeriksa Apakah Pengguna yang Masuk tetap di Profile Activity atau Pergi ke MainActivity
  3. Membuat Login Activity
  4. Login User Menggunakan Email dan Password
  5. Setelah Login langsung Pergi kehalaman ProfileActivity
  6. Menambahkan Option Menu untuk Menambahkan Fungsi Logout
  7. Setelah Logout, Pergi ke MainActivity.
Oke, setelah kita mengetahui point- point apa saja yang akan kita pelajari maka itu untuk mempermudah kita dalam pembelajaran kali ini mengenai Pembuatan Aplikasi Forum. 

Lalu bagaimana langkah- langkah untuk menyelesaikan point- point diatas? Silahkan teman- teman simak langkah - langkah dan penjelasannya dibawah ini:

Bagian 1 Pembuatan Aplikasi Forum dengan Android Studio

Nah sekarang kita telah sampai pada langkah - langkah pembuatan Aplikasi Forum dengan Android Studio.

1. Langkah pertama, silahkan teman- teman buka file AndroidManifest.xml, yang terdapat pada directori App\manifests\AndroidManifest.xml. lalu ubah script pada bagian tag aplication lebih tepatnya pada bagian tag <activity>.
<activity android:name=".ProfileActivity">     <intent-filter>         <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />     </intent-filter> </activity> <activity android:name=".RegisterActivity" /> <activity android:name=".MainActivity" />
Dari script diatas tentunya kita dapat melihat perubahan mengenai penyimpanan tag <intent-filter> yang awalnya berada pada bagian MainActivity sekarang berada pada bagian ProfileActivity.

2. Langkah kedua, Silahkan buka file ProfileActivity.java kita akan membuat variable untuk memanggil fugsi dari Auth Firebase silahkan teman- teman simpan script dibawah ini dibawah script public class ProfileActivity extends AppCompatActivity.
//firebase auth
FirebaseAuth firebaseAuth;
//views
    TextView mProfileTv;

Selanjutnya silahkan tambahkan potongan script dibawah ini pada bagian protected void onCreate
//init
firebaseAuth = FirebaseAuth.getInstance();
//init views
        mProfileTv = findViewById(R.id.profileTv);
Potongan script diatas berfungsi sebagai pendeklarasi dari variabel yang telah kita buat sebelumnya.

3. Langkah ketiga, selanjutnya kita akan membuat 2 fungsi baru pada fiel ProfileActivity.java, yang akan kita gunakan untuk pengecekan UserStatus. Silahkan teman - teman ikuti script dibawah ini.
private void checkUsetStatus(){
        FirebaseUser user = firebaseAuth.getCurrentUser();
        if (user != null){
            //user is signed in stay here
            //set email of logged in user
            mProfileTv.setText(user.getEmail());
        }else{
            //user not signed in, go to main acticity
            startActivity(new Intent(ProfileActivity.this, MainActivity.class));
            finish();
        }
    }

    @Override
    protected void onStart() {
        checkUsetStatus();
        super.onStart();
    } 
Diatas terdapat dua fungsi , yang pertama untuk mengnyiman script pengecekan Status User, dan fungsi kedua digunakan untuk menjalankan fungsi yang pertama.

4. Langkah Keempat, kita akn membuat membuat activity baru dengan nama LoginActivity, silakan teman-teman buat terlebih dahulu LoginActivity.

5. Jika sudah selesai membuat LoginActivity, silahkan teman- teman buka file LoginActivity.java lalu tambahkan script dibawah ini pada bagian protected void onCreate.
//Actionbar and its title
        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("Login");
        //enable back button
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
Selanjutnya kita akan membuat fungsi baru pada file LoginActivity.java , Silahkan teman- teman ikuti script fungsi dibawah ini:
  @Override
    public boolean onSupportNavigateUp() {
        onBackPressed(); // go previous activity
        return super.onSupportNavigateUp();
    } 

Bagian 2 Pembuatan Aplikasi Forum dengan Android Studio

Nah pada bagian  kedua ini kita akan menambahkan bada bagian xml nya
1. Silahkan teman - teman buka file activity_register.xml lalu tambahkan potongan script berikut pada bagian paling bawah:
<!--TextView: Click go to LoginActivity-->
    <TextView
        android:id="@+id/have_accountTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Already have account? Login"
        android:textAlignment="center"
        android:layout_below="@id/registerBtn"
        android:layout_marginTop="30dp"
        android:textColor="@color/colorBlack"/>

2. Selanjutnya buka file RegisterActivity.java lalu tambahkan bebepa potongan script dibawah ini:
- membuat variable baru: silahkan simpan pada bagian atas
TextView mHaveAccountTv;
- memfungsikan variable: silahkan simpan pada bagian protected void onCreate
 mEmailEt = findViewById(R.id.emailEt);
 mPasswordEt = findViewById(R.id.paswordEt);
 mRegiterBtn = findViewById(R.id.registerBtn);
 mHaveAccountTv = findViewById(R.id.have_accountTv);
- Menambahkan script baru pada bagian dibawah mRegisterBtn.setOnClickListener :

 //handle login textview click listener
        mHaveAccountTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(RegisterActivity.this,LoginActivity.class));
            }
        });
3. Selanjutnya silahkan teman - teman buka file activity_login.xml lalu ubah scriptnya menjadi seperti dibawah 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".LoginActivity">

    <!--TextView: Label Login -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:text="Login"
        android:textColor="@color/colorBlack"
        android:textSize="25sp"/>

    <!--EditText: Input Email -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:id="@+id/emailTIL">
        <EditText
            android:id="@+id/emailEt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress"
            />
    </RelativeLayout>

    <!--EditText: Input Password -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:id="@+id/passwordTIL"
        android:layout_below="@+id/emailTIL"
        app:passwordToggleEnabled="true">
        <EditText
            android:id="@+id/paswordEt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"
            />
    </RelativeLayout>
    <!--Button: Register User -->
    <Button
        android:id="@+id/loginBtn"
        android:layout_width="110dp"
        android:padding="5dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:layout_below="@+id/passwordTIL"
        android:layout_centerHorizontal="true"
        android:drawableLeft="@drawable/ic_people_black_24dp"
        android:drawablePadding="5dp"
        android:text="Login">
    </Button>

    <!--TextView: Click go to RegisterActivity-->
    <TextView
        android:id="@+id/nothave_accountTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Not have account? Register"
        android:textAlignment="center"
        android:layout_below="@id/loginBtn"
        android:layout_marginTop="30dp"
        android:textColor="@color/colorBlack"/>
</RelativeLayout> 
Maka pada tampilan login akan seperi gambar dibawah ini:

Bagian 3 Pembuatan Aplikasi Forum dengan Android Studio

Pada bagian ini kita akan fokus untuk membuat fungsi pada file LoginActivity.java.

1. Silahkan buka file LoginActivity.java kita akan membuat variabel .. silahkan ikuti penamaan variable berikut ini:
    //Declare an instance of FirebaseAuth     private FirebaseAuth mAuth;
    //views     EditText mEmailEt, mPasswordEt;     TextView notHaveAccountTv;     Button mLoginBtn;
    //program dialog     ProgressDialog pd;
2. Selanjutnya kita akan mendeklarasikan script tersebut pada bagian protected void onCreate,
silahkan ikuti script dibawah ini:
//In the onCreate() method, initialize the FirebaseAuth instance.
        // Initialize Firebase Auth
        mAuth = FirebaseAuth.getInstance();

        //init
        mEmailEt = findViewById(R.id.emailEt);
        mPasswordEt = findViewById(R.id.paswordEt);
        notHaveAccountTv = findViewById(R.id.nothave_accountTv);
        mLoginBtn = findViewById(R.id.loginBtn);
3. Selanjutnya akan membuat fungsi login, silahkan ikuti script dibawah ini dan ketik dibawah pendeklarasian variabel diatas:
//login button click
        mLoginBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //input data
                String email = mEmailEt.getText().toString();
                String passw = mPasswordEt.getText().toString().trim();
                if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()){
                    //invalid email partern set error
                    mEmailEt.setError("Invalid Email");
                    mEmailEt.setFocusable(true);
                }else{
                    //valid email pattern
                    loginUser(email, passw);
                }
            }
        });
        //not have account text click
        notHaveAccountTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(LoginActivity.this, RegisterActivity.class));
            }
        });

        //init progress dialog
        pd = new ProgressDialog(this);
        pd.setMessage("Logging In...");
4. Selanjutnya kita akan buat fungsi untuk pegecekan akun pada saat melalukan login, Silahkan Buat fungsi baru pada file LoginActivity.java untuk scriptnya seperti berikut ini:

private void loginUser(String email, String passw) {
        //show progress dialog
        pd.show();
        mAuth.signInWithEmailAndPassword(email, passw)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            //dismiss progress dialog
                            pd.dismiss();
                            // Sign in success, update UI with the signed-in user's informatio
                            FirebaseUser user = mAuth.getCurrentUser();
                            //user is logged in,so start LoginActivity
                            startActivity(new Intent(LoginActivity.this, ProfileActivity.class));
                            finish();
                        } else {
                            //dismiss progress dialog
                            pd.dismiss();
                            // If sign in fails, display a message to the user.
                            Toast.makeText(LoginActivity.this, "Authentication failed.",
                                    Toast.LENGTH_SHORT).show();
                        }
                    }
                }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                //dismiss progress dialog
                pd.dismiss();
                Toast.makeText(LoginActivity.this,""+e.getMessage(),Toast.LENGTH_SHORT).show();
            }
        });
    } 

Bagian 4 Pembuatan Aplikasi Forum dengan Android Studio

Ini merupakan tahapan untuk membuat menu dan fungsi logout 

1. Pertama kita akan membuat menu, silahkan ikut gambar berikut ini:

2. Maka akan muncul seperti halaman berikut, silahkan beri nama dengan menu:
3. Selanjutnya kita akan membuat menu_main, klik kanan pada folder menu yang telah kita buat pada tahap sebelumbnya:
4. Lalu beri nama menu_main, dan tekan oke.
5. Lalu tambahkan script pada menu_main, menjadi seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_logout"
        android:title="Logout"/>
</menu> 
Maka untuk menu akan muncul seperti gambar berikut:
6. Untuk dapat memfungsikan logout nya, silahkan teman - teman ikuti script di bawah ini,
kita akan membuat dua fungsi pada file ProfileActivity.java :
 /*inflate options menu*/
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //inflating
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    //Handle menu item clicks
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //get item id
        int id = item.getItemId();
        if (id == R.id.action_logout){
            firebaseAuth.signOut();
            checkUsetStatus();
        }
        return super.onOptionsItemSelected(item);
    }

Tahap Finising

Silahkan teman-teman jalankan aplikasinya dapat menggunakan emulator ataupun menggunakan Handphonenya masing-masing
Jika teman - teman mengikuti step by stepnya dengan hati-hati , maka akan seperti tampilan berikut ini:

1. Tampilan halaman utama sebelum login, seperti gambar berikut:
2. Tampilan setelah klik tombol login, seperti gambar berikut:
3. Tampilan ketika memasukan email yang salah ,seperti gambar berikut:
4. Tampilan ketika mengisikan password yang salah, seperti gambar berikut:
5. Tampilan ketika mengisikan email dan password sesuai yang telah didaftarkan, seperti gambar berikut:
6. Tampilan ketika sudah berhasil login, maka akan sesua dengan email yang melalukan loginnya, seperti gambar berikut:
7. Tampilan ketika akan melakuakn logout dari akun yang sudah login, seperti gambar berikut:

Mungkin sekian tutorial pada kali ini, jika teman- teman menemukan error silahkan tulis dikolom komentar atau dapar mengirimkan email ke: mrsupriadi2000@gmail.com

Terimakasih telah berkunjung dan membaca artikel mengenai Aplikasi Forum Android Studio dan Firebase - Login #2. semoga teman-teman tidak ada kendala dalam mengikuti tutorialnya.

Semoga bermanfaat, salam success :)

By: Muhammad Rizal Supriadi

0 Response to "Aplikasi Forum Android Studio dan Firebase - Login #2"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel