Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Android / Firebase

Aplikasi Forum dengan Android Studio dan Firebase - User Registration #1

Posting Komentar
Assalamualaikum wr.wb
Bagaimana sahabat forumkoding kabarnya? semoga kita selalu diberikan kesehatan aamiin yarobbal'alaamiin.

Pada kesempatan kali ini admin akan membagian tutorial mengenai Membuat Aplikasi Forum dengan Android Studio dan Firebase, yang mana nantinya aplikasi forum dapat difungsikan sebagai media membagian informasi dan melalukan chatting dengan pengguna lainnya.

Untuk tutorial pertama ini, admin akan membahas mengenai User Registration yang nantinya difungsikan untuk pengguna supaya dapat mendaftarkan akun pada aplikasi forum tersebut.

Dibawah ini beberapa point yang akan kita bahas mengenai pembuatan aplikasi forum tersebut, silahkan teman - teman simak dan perhatikan point - point dibawah ini:
  1. Menambahkan internet permission (yang diperlukan untuk firebase)
  2. Menambahkan tombol register dan login pada MainActivity.
  3. Membuat Register Activity
  4. Membuat Project Firebase and menghubungkan aplikasi dengan project tersebut
  5. Melalukan pengecekan file google-services.json untuk memastikan aplikasi terhubung dengan Firebase.
  6. User Registration menggunakan Email dan Password.
  7. Membuat Profile Activity
Melihat point - point diatas tentunya teman -teman akan mengetahui dengan rinci apa saja yang akan kita buat pada tutorial pertama ini mengenai Aplikasi Forum User Registration.

Lalu bagaimana langkah-langkah untuk membuatnya? Silahkan teman-teman simak pembahasan dibawah ini.

Point penting yang harus teman - teman perhatikan sebelum mengikuti tutorial kali ini adalah, tentunya kita sudah menginstall Android Studio dan memdaftar akun Firebase, karena kita akan menggunakan databasenya menggunakan Firebase. 
Jika Sudah memenuhi kriteria tersebut maka teman - teman siap untuk mengikut tutorial kali ini ;)

Tahap Pembuatan Aplikasi

1. Silahkan buat project baru pada Android Studio, Silahkan berinama project sesuai dengan nama yang teman - teman inginkan. Admin memberi nama projectnya dengan nama MyForum App. Selanjutnya tentukan nama Packagenya dan klik Finish untuk memulai.
kalian dapat melihat pada penamaan packagenya yaitu forumkoding, Selanjutnya tunggu sampai proses installasi project selesai.

2. Selanjutnya silahkan buka file AndroidManifest.xml, didalam folder App\manifest\AndroidManifest.xml, lalu tambahkan petikan script dibawah ini diatas tag <application.

<uses-permission android:name="android.permission.INTERNET"/>
Perikan script tersebut digunakan untuk dapat menghubungkan aplikasi kita dengan Internet, dikarenakan kita menggunakan database yang sifatnya online.

3. Langkah selanjutnya silahkan teman- teman cari dan pastekan terlebih dahulu icon Profile untuk digunakan dalam tampilah halaman login dan register. lalu selanjutnya silahkan ubah script yang terdapat didalam activity_main.xml menjadi seperti script 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=".MainActivity">

    <ImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/politeknik_pos"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>
</RelativeLayout>

4. Tahap selanjutnya kita akan menambahkan 2 buah button yang difungsikan untuk pergi kehalaman login dan pergi kehalaman register. silahkan tambahkan script dibawah ini pada file activity_main.xml , seperti dibawah ini:

<!-- Button: Register -->
    <Button
        android:id="@+id/register_btn"
        android:text="Register"
        android:textColor="#fff"
        android:background="#123"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_above="@id/login_btn"/>

    <!-- Button: Login -->
    <Button
        android:id="@+id/login_btn"
        android:text="Login"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:textColor="#fff"
        android:background="#123"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Tentunya script diatas  akan kita fungsikan, nah untuk script fungsinya admin akan menjelaskan pada nomor selanjutnya.

5. Langkah selanjutnya silahkan buka file MainActivity.java , lalu tambahkan scriptnya menjadi seperti script dibawah ini:

public class MainActivity extends AppCompatActivity {

    //views
    Button mRegisterBtn, mLoginBtn;

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

        //init views
        mRegisterBtn = findViewById(R.id.register_btn);
        mLoginBtn = findViewById(R.id.login_btn);

        //handle register button click
        mRegisterBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this, RegisterActivity.class));
            }
        });
    }
}
6. Langkah selanjutnya kita akan membuat activity baru dengan nama RegisterActivity, untuk gambar nya silahkan teman-teman perhatikan gambar dibawah ini:
Setelah teman-teman mengikuti gambar diatas, maka akan muncul halaman untuk penamaan activity.. silahkan teman-teman beri nama dengan RegisterActivity, lalu klik tombol finish. Tunggu sampai proses loading selesai.

7. Silahkan buka file RegisterActivity.java , lalu tambahkan scriptnya menjadi seperti script dibawah ini:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        //Actionbar and its title
        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("Create Account");
        //enable back button
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
}
 @Override
    public boolean onSupportNavigateUp() {
        onBackPressed(); // go previous activity
        return super.onSupportNavigateUp();
 }

Setelah teman-teman mengikuti tahapan diatas, maka langkah selanjutnya kita akan membuat project Pada Firebase dengan cara memanfaatkan fitur yang tersedia di dalam Android Studio.

Tahapan Project Firebase

Pada tahapan ini, kita akan membuat project firebase dan langsung melakukan konfigurasinya.. lalu bagaimana tahapan-tahapan pembuatannya? silahkan simak pembahasan dibawah ini:

1. Silahkan klik pada menu tools, lalu pilih Firebase, maka akan muncul seperti gambar dibawah ini:
 Pada kolom Country, silahkan teman-teman pilih sesuai dengan negara masing-masing.. jika teman-teman berasal dari indonesia maka pilih indonesia dan selanjutnya silahkan klik Connect to Firebase

2. Langkah selanjutnya silahkan klik tombol Add Firebase Authentication to your app, maka akan muncul seperti gambar berikut:
kita dapa melihat untuk mengkoneksikan firebase telah berhasil, nah selanjutnya silahkan klik tombol Accept Change untuk melanjutkannya.
Silahkan tunggu sampai proses selesai .. tentunya teman-teman harus terhubung dengan koneksi internet.

3. Selanjutnya silahkan buka file build.gradle (modul app). lalu pastikan potongan script dibawah ini ada didalam file tersebut:



implementation 'com.google.firebase:firebase-auth:16.0.5'
implementation 'com.google.firebase:firebase-core:16.0.7'
Jika potongan script diatas tidak tersedia .. maka silahkan tambahkan dan jangan lupa untuk tekan Sync Now untuk memulai konfigurasinya.

4. Langkah selanjutnya silahkan buka Aplikasi Firebase, lalu pastikan project firebase yang telah teman-teman buat tadi ada di Firebase tersebut .. untuk gambarnya silahkan teman-teman lihat gambar dibawah ini:
Teman-teman bisa melihat pada gambar diatas bahwa kita telah berhasil membuat project di firebase dengan nama MyForum App. klik pada project firebase yang telah berhasil kita buat.

5. Lalu klik Authentication pada bagian navigasi, selanjutnya silahkan pilih sign-in method, lalu silahkan ubah bagian Email\Password menjadi aktif. untuk gambar lengkapnya silahkan perhatikan dibawah ini:
  Setelah tahapan tesebut selesai, maka selanjutnya kita akan mengubah script yang terdapat dalam file activity_register.xml.

 6. Silahkan buka file activity_register.xml lalu ubah scriptnya karena kita akan menambahkan dua kolom yaitu email dan kolom password silahkan ubah 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=".RegisterActivity">

    <!--TextView: Label Register -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:text="Register"
        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="Email"
            android:inputType="textEmailAddress"
            />
    </RelativeLayout>
    <!--Button: Register User -->
    <Button
        android:id="@+id/registerBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/passwordTIL"
        android:layout_centerHorizontal="true"
        android:text="Register">
    </Button>
</RelativeLayout>

7. Pada langkah ke tujuh ini kita akan menambahkan variabel pada file RegisterActivity.java, silahkan teman-teman buka file tersebut lalu tambahkan script dibawah ini pada bagian dibawah public class RegisterActivity extends AppCompatActivity, silahkan ikuti script dibawah ini:

//views
    EditText mEmailEt, mPasswordEt;
    Button mRegiterBtn;
//progressbar to display while registering user
    ProgressDialog progressDialog;

8. Setelah kita membuat variabel maka selanjutnya kita akan membuat script untuk proses registernya
silahkan teman - teman ikuti script dibawah ini script actionBar.setDisplayHomeAsUpEnabled(true);
mEmailEt = findViewById(R.id.emailEt);
        mPasswordEt = findViewById(R.id.paswordEt);
        mRegiterBtn = findViewById(R.id.registerBtn);

        // In the onCreate() method, initialize the FirebaseAuth instance.
        // Initialize Firebase Auth
        mAuth = FirebaseAuth.getInstance();

        progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("Registering User ...");

        //handle register btn click
        mRegiterBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //input email ,password
                String email = mEmailEt.getText().toString().trim();
                String password = mPasswordEt.getText().toString().trim();
                //validate
                if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()){
                    //set error and fokus to email edittext
                    mEmailEt.setError("Invalid Email");
                    mEmailEt.setFocusable(true);
                }else if (password.length()<6){
                    //set error and focus to password edittext
                    mPasswordEt.setError("Password length at least 6 characters");
                    mPasswordEt.setFocusable(true);
                }else{
                    registerUser(email, password); //register the user
                }
            }
        });
9. Nah, setelah pada tahapan ini maka sekarang kita akan menambahkan variabel untuk dapat menggunakan authentication dari firebase. silahkan ikuti penulisan variabel dibawah ini dibawah variabel yang telah teman - teman buat sebelumnya.

//Declare an instance of FirebaseAuth
    private FirebaseAuth mAuth;
Setelah selesai membuat variable tersebut, maka teman-teman siap untuk memulai kodingan register yang tergubung dengan firebase tersebut.

10. Tambahkan terlebih dahulu potongan script dibawah ini pada bagian dibawah script mRegiterBtn = findViewById(R.id.registerBtn); 

// In the onCreate() method, initialize the FirebaseAuth instance.
        // Initialize Firebase Auth
        mAuth = FirebaseAuth.getInstance();

11. Selanjutnya silahkan teman-teman ikuti script dibawah ini secara hati-hati ya hehe. kita akan membuat suatu fungsi baru tentunya, untuk script lengkapnya silahkan perhatikan script dibawah ini:

private void registerUser(String email, String password) {
        //email and password pattern is valid, show progress dialog and start registering user
        progressDialog.show();

        mAuth.createUserWithEmailAndPassword(email, password)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            // Sign in success, dismiss dialog and start register activity
                            progressDialog.dismiss();
                            FirebaseUser user = mAuth.getCurrentUser();
                            Toast.makeText(RegisterActivity.this,"Registered..\n"+user.getEmail(),Toast.LENGTH_SHORT).show();
                            startActivity(new Intent(RegisterActivity.this,ProfileActivity.class));
                            finish();
                        } else {
                            // If sign in fails, display a message to the user.
                            progressDialog.dismiss();
                            Toast.makeText(RegisterActivity.this, "Authentication failed.",
                                    Toast.LENGTH_SHORT).show();
                        }
                    }
                }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                //error, dismiss progress dialog and get and show the error message
                progressDialog.dismiss();
                Toast.makeText(RegisterActivity.this,""+e.getMessage(),Toast.LENGTH_SHORT).show();

            }
        });
    }

Jika teman-teman menemukan ERROR pada script diatas, tenang saja ya, dikarenakan kita belum membuat halaman ProfileActivity.

 12. Silahkan teman-teman buat activity baru dengan nama ProfileActivity, setelah berhasil membuat activity baru .. maka selanjutnya silahkan buka file activity_profile.xml. lalu ubah scriptnya menjadi seperti dibawah ini:

<?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:orientation="vertical"
    android:gravity="center"
    tools:context=".ProfileActivity">

    <TextView
        android:id="@+id/profileTv"
        android:text="Profile"
        android:textSize="30sp"
        android:textColor="@color/colorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
Setelah selesai mengubah script pada file tersebut.. langkah terakhir silahkan buka file ProfileActivity.java lalu tambahkan potongan script berikut:

// action bar and its title
        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("Profile");

13. Tahapan TERAKHIR kita akan menjalankan aplikasi android ini dengan menggunakan Handphone atau menggunakan emulator.

Maka hasilnya akan seperti gamabar dibawah ini:

Tampilan Awal seperti gambar berikut
Tampilan Register seperti gambar berikut


 Memasukan email tidak sesuai dengan aturan penulisan email, seperti gambar berikut:
Penulisan email yang benar, maka akan diarahkan pada kolom password, seperti gambar berikut:
Ketika menulis password kurang dari 6 digit, seperti gambar berikut:
Ketika email dan passwordnya benar sesuai dengan aturan, seperti gambar berikut:
Ketika berhasil mendaftar, akan diarahkan pada halaman profile, seperti gambar berikut:

Ketika mendaftarkan dengan akun yang sudah terdaftar, seperti gambar berikut:
Pada gambar diatas kita melihat ketika kita mendaftarkan akun yang sama, maka akan muncul keterangan seperti berikut.

Terimakasih teman-teman telah membaca artikel ini, semoga teman-teman tidak menemukan kendala apapun saat mengikuti tutorialnya.
Semoga artikel yang admin bagikan ini bermanfaat mengenai Aplikasi Forum dengan Android Studio dan Firebase - User Registration #1.
 Jika teman- teman menemukan kendala silahkan beri komentar atau dapat kirim email.

Untuk tutorial selanjutnya silahkan kunjungi halaman Berikut: Aplikasi Forum Android Studio dan Firebase - Login #2

Semoga bermanfaat - Salam Success :)

By: Muhammad Rizal Supriadi

Anda mungkin menyukai postingan ini