Tuesday, December 19, 2017

Membuat Login Email di Android Studio dengan Firebase




Kucing Tekno - Firebase sangatlah asyik digunakan untuk membuat sebuah aplikasi dengan bantuan teknologi cloudnya. Pada tutorial kali ini kita akan membuat implementasi login dengan menggunakan email dan password untuk masuk ke aplikasi, tentu saja data tersebut online dan disimpan di server firebase.

Pada dasarnya membuat login memerlukan persiapan database untuk menyimpan data pengguna misal menyimpan username dan password. Jika menggunakan Firebase kita bisa dengan mudah mmanfaatkan fitur authentikasi email dan password. Tanpa memikirkan sebuah hosting dan sql untuk membuat login tersebut kita bisa mudah membuatnya.

Inilah contoh aplikasi Login Android menggunakan Firebase , pertama halaman login yang memerlukan email dan password jika benar akan masuk ke halaman utama yang dilengkapi dengan button Sign Out. Namun jika gagal akan ada notifikasi gagal login  dan proses tersebut wajib menggunakan internet karena aplikasinya berbasis online.

login
 -
login sukses

Download contoh aplikasi Login dengan Email dan Password di link berikut , gunakan email admin@co.id dan password indonesiaku untuk mencobanya.

Tutorial ini mungkin sedikit panjang jadi mohon teliti dan sabar untuk mempelajarinya.



Persiapan Database Firebase


Buatlah satu project Firebase dan sesuaikan namanya dengan project nanti di Android Studio , untuk langkah ini kalian wajib melihat Tutorial Membuat Project Baru di Firebase dan Menghubungkan ke Android Studio 
  • Pastikan nama project sesuai dengan package name di Android Studio
  • Taruh file .json di folder root app project Android Studio
  • Setting graddle sesuai tutorial link diatas
Setelah project dibuat dan masuk halaman utama Firebase klik tab Authentication - Pilih Sign In Methode - Pada Email/ Password klik Enable - kemudian Save.


-




Kita akan membuat satu datan sample email dan password untuk masuk ke aplikasi nanti, Klik pada tab Users - lalu Add Users - tambahkan email apa saja dan password - kemudian klik Add Users. Buat satu saja dahulu atau buat beberapa user juga tidak masalah sesuai keinginan.


-


Pembuatan database di Firebase sudah selesai dan sekarang kita akan beralih ke program Android Studio. 


Struktur Folder Project Aplikasi Login Android Studio


Berikut adalah struktur directori yang ada di project ini agar tidak bingung


  • Login merupakan activity untuk login dengan layout utamanya content_main.xml
  • MainActivity merupakan activity home atau layar setelah login berhasil dengan layout utamanya content_login.xml
  • Masukkan gambar 2 gambar  di folder drawable dengan nama login.png dan welcome2.png


Pembuatan Project Baru di Android Studio


Buatlah satu project baru - sesuaikan dengan package name di project Firebase diatas ( wajib ). Misal di project Firebase dimasukkan package name com.kucingtekno.apliasilogin maka project di Android Studio juga harus sama, bisa dibuat project Android Studio terlebih dahulu atau sebaliknya.

Disini saya membuat project dengan layout Basic Activity sebagai contoh jadi nanti layoutnya akan ada floating button dan mempunyai layout xml turunan, jadi misal kalian membuat dengan layout berbeda terserah saja.



Setelah project baru sudah dibuat , buka file build.graddle di Android Studio dan tambahkan kode berikut pada masing-masing graddle karena ada 2 buah file graddle yang berbeda jangan sampai salah menempatkan kodenya.

Buka build.graddle project tambahkan tambahkan classpath 'com.google.gms:google-services:3.1.0' dibawah dependencies sesuaikan dengan gambar 




Buka build.graddle module tambahkan implementation 'com.google.firebase:firebase-auth:11.6.2' dibawah dependencies dan apply plugin: 'com.google.gms.google-services' di akhir baris



Coba klik Sync project untuk mendownload librarynya dan pastikan tidak ada yang eror. Jangan lupa untuk menaruh file googleservice.json di folder app.


Membuat Activity Login di Android Studio

 

Setelah project dibuat kita sudah mempunyai satu activity dengan nama MainActivity, kita memerlukan satu activity untuk proses login. Buat baru dengan cara klik pada folder java - klik kanan New - Activity - Basic Activity beri nama login 




Buka file layout login tersebut , misal namanya content_login.xml lalu buat edit text untuk email dan password, satu progressbar, satu button login dan gambar untuk pemanis. Disini saya menggunakan constrain layout jadi jika kalian menggunakan layout biasanya boleh saja sesuaikan saja.

Tampilan content_login.xml kurang lebih sebagai berikut



Berikut coding lengkap file content_login.xml
-

-


Buka file login.java lalu tambahkan proses login-nya untuk keseluruhan kodenya sebagai berikut , jika ada bagian yang tidak perlu bisa disesuaikan dengan kebutuhan

Coding lengkap file  login.java
-
-



Membuat Activity Home dan Tombol Sign Out di Android Studio


Setelah tampilan login dibuat langkah berikutnya adalah membuat tampilan home saat berhasil login, buka file content_main.xml di folder layout buat satu label, 1 tombol untuk sign out dan gambar sebagai pemanis.

Berikut tampilan desain content_main.xml



Berikut coding lengkap file content_main.xml
-

-


Buka file MainActivity.java lalu tambahkan proses sign out untuk keseluruhan kodenya sebagai berikut , jika ada bagian yang tidak perlu bisa disesuaikan dengan kebutuhan

Coding lengkap file  MainActivity.java
-

-



Edit File AndroidManifest.xml


Buka file androidmanifest.xml lalu tambahkan permission internet di atas koding , tambahkan juga activity launcher agar file login.java  diakses pertama kali setelah membuka aplikasi.

Berikut coding lengkap file AndroidManifest.xml
-
-


Sekarang coba build apk atau Run App , jika sudah benar maka akan seperti hasil screenshot diatas. Tampilan mungkin berbeda karena device yang digunakan berbeda resolusi layarnya.

Sekian Tutorial Membuat Login Email di Android Studio dengan Firebase jika ada kesalahan dalam penulisan mohon koreksinya di kolom komentar dan apabila ada pertanyaan bisa ditanyakan sertakan screenshot.

Tunggu tutorial berikunya dan terima kasih salam Kucing Tekno.