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

Membuat Aplikasi Forum Pada Android Connect to Firebase #1

Posting Komentar
Assalamualaikum wr.wb

Pada kesempatan kali ini admin akan membagikan tutorial mengenai pembuatan aplikasi forum pada Android dengan menggunakan Aplikasi Android Studio dan databasenya menggunakan firebase.

kenapa menggunakan firebase? firebase merupakan salah satu database realtime yang diakses menggunakan internet tentunya karena penggunaannya yang fleksibel dan cepat serta praktis maka daabase ini digemari oleh para pengembangan aplikasi khuhusnya android.

Pada tutorial kali ini kita akan mengkoneksikan aplikasi android yang kita buat dengan database firebase, selanjutnya kita akan membuat halaman register beserta style didalamnya. untuk itu silahkan temen - teman ikut tutorial kali ini mengenai Membuat Aplikasi Forum Pada Android Connect to Firebase #1 sampai selesai .. selamat mencoba

Langkah Membuat Project Baru

Untuk langkah pertama silahkan teman - teman buat project baru, untuk membuat project baru tentunya teman - teman harus membuka duka aplikasi Android Studionya. Jika teman - teman sudah membukanya silahkan klik menu file, lalu new project .. maka kita akan diarahkan pada tampilan pilihan halam. Untuk yang pertama ini kita pilih saja Empty Activity, lalu silahkan klik next untuk gambarnya seperti gambar dibawah ini:
Setelah itu teman - teman akan diarahkan pada halaman Penamaan Project , Admin mengisinya dengan nama ForumApp, karena kita akan membuat aplikasi forum .. untuk aturan lainnya seperti versi androidnya silahkan teman - teman isikan sesuai dengan yang teman- teman inginkan. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:
Kemudian silahkan tunggu sampai project baru selesai dibuat, nah pembuatan project Android telah selesai, lalu apa selanjutnya?

Selanjutnya kita akan membuat database dengan menggunakan firebase, Pada tutorial ini admin asumsikan kalian sudah mempunyai akun firebase. kemudian silahkan login dan buat database baru dengan nama BlogApp, untuk gambar lengkapnya seperti dibawah ini:

Setelah teman - teman selesai mengisikan nama databasenya kemudian centang yang bertuliskan i accept yang artinya kita menyetujui pembuatan database baru ini .. dan jika sudah silahkan klik Create Project, maka kita dapat lihat database baru telah selesai dibuat yaitu dengan nama BlogApp,  seperti gambar dibawah ini:
Setelah teman - teman berhasil membuat database barunya silhakan klik database tersebut, lalu kita akan diarahkan pada halaman dashboard database tersebut, sebetulnya kita dapat membuat database ini untuk android, ios, ataupun website. Untuk detailnya seperti gambar dibawah ini:

Silahkan teman - teman pilih gambar andorid, karena kita akan membuat aplikasi android, untuk gambarnya silahkan ikuti gambar dibawah ini:
Selanjutnya kita akan diarahkan pada halaman pengisikan paket dan nama Aplikasinya, untuk mengisinya silahkan teman - teman buka terlebih dahulu project android yang telah teman - teman buat sebelumnya, lalu lihat pada bagian package . selanjutnya copykan nama package tersebut, untuk gambarnya silahkan perhatikan gambar dibawah ini:
Setelah teman - teman copy, langkah selanjutnya pastekan nama package tersebut pada kolom nama paket, lalu isikan nama aplikasi yang teman - teman buat, untuk gambarnya silahkan perhatikan gambar berikut ini:
Setelah tahapan ini selesai, maka untuk melanjutkannya silahkan klik tombol Daftarkan Aplikasi 
maka kita akan diarahkan pada halaman kedua yaitu mendownload file google-service.json. file tersebut akan kita gunakan untuk menghubungkan aplikasi android yang kita buat dengan database firebase. Silahkan teman - teman download file tersebut.
Setelah teman - teman berhasil mendownloadnya, silahkan teman - teman cara tulisan dan logo android di pojok kiri atas lalu ganti dengan Project, Setelah itu silahkan pastekan file google-services.json yang telah teman - teman download sebelumnya, untuk selebih jelasnya silahkan perhatikan gamabr dibawah ini:
Setelah tahap diatas selesai, kudian kita lanjut untuk konfigurasi firebase degan aplikasi android kita,
pada halam ke 3 dari firebase akan tampil seperti halaman berikut. Silahkan teman teman copykan pada file build.gradle
Untuk langkah pertama silahkan copykan classpart tersebut kedalam file build.gradle tingkat project
classpath 'com.google.gms:google-services:4.3.3'. untuk lebih jelasnya silahkan perhatikan gambar dibawh ini:
Selanjutnya silahkan teman - teman buka file build.gradle tingkat aplikasi, lalu masukan configurasi yang berada di firebase kedalam file tersebut. Silahkan perhatikan gambar tersebut:
Silahkan klik dipojok kanan atas tulisan Sync Now yang diperuntukan untuk memulai konfigurasinya
seletelah itu silahkan tunggu sampai proses penyambungan aplikasi dengan firebase selesai dilakukan, setelah selesai silhakan tekan tombol Lanjutkan ke console
Setelah kita menekan tombol tersebut maka kita akan dirahkan pada halaman dashboard dari aplikasi firebase. nah untuk konfigurasi antara aplikasi dengan firebase telah selesai dilakukan.

Tahapan Pembuatan Aplikasi

Dalam tahapan pembuatan aplikasi ini kita akan membuat form login dan register dengan menggunakan database firebase yang diakses melalu internet tentunya,

Lalu bagaimana sih tapahan pembuatannya? Silahkan teman- teman simak dibawah ini mengenai tahapan pembuatan aplikasi forum, yaitu pada bagian form login dan register.
  1.  Silahkan teman-teman buat package yaitu , Activities, Adapters, Helpers, Models, yang terdapat dalam folder java. Silahkan perhatikan gambar dibawah ini: 
  2. Selanjutnya kita akan me rename file java yang bernama MainActivity menjadi Register. Silahkan klik kanan pada file tersebut lalu pilih Refactor kemudian pilih Rename.
  3. Setelah itu ganti dengan nama Register dan klik Refactor. Kemudian pindahkan file java yang bernama register tersebut kedalam folder Activities, Seperti gambar berikut:
  4. Selanjutnya untuk lebih memudahkan dalam penggunaannya silahkan rename kembali file register tersebut menjadi RegisterActivity
  5. Kemudian kita juga akan merename nama activity_main.xml menjadi activity_register.xml
  6. Kemudian silahkan res->value->colors lalu ubah script resourcenya menjadi seperti dibawah ini: <resources>
        <color name="colorPrimary">#00b0ff</color>
    <color name="colorPrimaryDark">#00b0ff</color>
    <color name="colorAccent">#00b0ff</color></resources> 
  7. Setelah langkah tersebut selesai, kemudian silah download terlebih dahulu icon profile lalu pastekan pada folder drawable, kemudia drag ImageView pada halaman tampilan Register, untuk gambarnya silahakan perhatikan gambar dibawah ini: 
    

    
 
  8. Silahkan kalian buat seperti gambar diaatas untuk posisi iconnya
  9. Langkah selanjutnya kita akan memasukan beberapa Plain Teks, silahkan teman - temanbuat tampilannya seperti tampilan berikut: 
  10. Untuk dapat mengisi tulisan pada plain teks, silhakan tambahan android:hint="Nama", sebagai contoh.
  11. Selanjutnya kita akan membuat resource pada drawable.. silahkan teman teman ikuti gambar dibawah ini 
  12. Selanjutnya silahkan beri nama dengan reg_edittext_style, lalu tekan tombol oke untuk melanjutkannya.
  13. Seletah berhasil membuat file baru tersebut silahkan ubah scriptnya menjadi seperti dibawah ini.



<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#fafafa" />
    <corners android:radius="32dp" />
    <padding android:left="12dp" android:right="12dp" android:top="12dp"
        android:bottom="12dp"/>
</shape>

  14. Selanjutnya silahkan pergi ke file activity_register.xml, lalu tambahkan perikan kode seperti              ini android:background="@drawable/reg_edittext_style", untuk lebih jelasnya silahkan                perhatikan gambar dibawah ini:
    15. Lalu diatasnya silahkan tambahkan script android:background="#ffffff" yang dimaksukan              untuk mengubah warna latar belakang menjadi putih agar style yang tadi dipanggil dapat                      terlihat. maka hasilnya akan seperti dibawah ini: 
    16. Silhakan perhatikan pada bagian name, kalian dapat melihat kita telah berhasil membuat                      border radius pada Plain text tersebut.
    17. Untuk tahapan selanjutnya kita akan mengubah style pada button, silahkan teman teman buat              kembali drawable resource file dengan nama reg_btn_style dan ubah scriptnya menjadi                    seperti dibawah ini



<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
    <corners android:radius="32dp"/>
</shape>
   18. Lalu silahkan pasang pada bagian button seperti pemasan pada Plain Text tadi, maka hasilnya             seperti gambar berikut ini:
 Setelah teman - teman mengikuti sampai tahapan ini, selanjutnya silahkan jalankan aplikasi androidnya baik menggunakan emulator atau pun menggunakan Handphone.

Seterimakasih telah berkunjung membaca artikel ini mengenai Membuat Aplikasi Forum Pada Android Connect to Firebase #1, semoga artikel ini bermanfaat
Salam Success ;)

By: Muhammad Rizal Supriadi

Anda mungkin menyukai postingan ini