Firebase Realtime Database Tracking MVP

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-12-at-20.36.27-1024x533.png
Write caption…

Hi Coder !

Pada artikel kali ini kita akan coba belajar mengimplementasikan Firebase Realtime Database salah satu fitur unggulan dari Google berbasis Cloud. Firebase Database adalah database yang di hosting dalam cloud. Data nya disimpan dalam format JSON yang tersinkronisasi secara Realtime ke setiap user yang menggunakan nya.

Cara Kerja Firebase Realtime Database

Firebase Realtime Database bekerja dengan sangat reponsif, efisien dan kaya akan fitur dan memprovide kemanan pada saat mengakses database. Firebase Realtime Database sangat responsif karena pada saat kondisi offline sekalipun Realtime Database akan secara otomatis mensinkronasi ketika online dan meyampaikan data nya secara realtime sehingga memberi pengalaman yang baik terhadap user pengguna.

Sebelum kita mulai untuk mengimplementasikan Firebase Realtime Database ada beberapa point yang perlu diperhatikan :

What should you have ?

  1. Have Experience Kotlin on Android Before
  2. Have Experience OOP & Functional Kotlin
  3. Have Basic Experience Using MVP Pattern

What will you learn ?

  1. Implementation Firebase Realtime Database Using MVP Pattern ?
  2. Understanding how to Realtime Database works ?
  3. Understanding how to Auth Realtime Database works?

What will you do ?

  1. Create Simple Tracking App Using MVP Pattern

Jika pada tutorial ini belum memahami konsep dan implementasi dari MVP pattern silahkanc cek postingan sebelumnya ya.

Selanjutnya untuk mengimplementasikan pada project kali ini silahkan download starter project nya :

https://github.com/syntaxxxxx/TrackingRealtimeDatabase

Connect your app to database

Selanjutnya kita akan menggunakan tools Firebase seperti contoh dibawah ini dan silahkan pilih :

Selanjutnya akan terlihat seperti ini

Selanjutnya pilih Authentication pilih email dan password dan akan terlihat seperti ini :

  1. Pilih connect to Firebase
  2. Add Firebase Auth (add library Auth) akan terlihat seperti ini :
This image has an empty alt attribute; its file name is Screen-Shot-2019-08-12-at-14.54.56-1-1024x640.png
add library to gradle level module:app
Write preformatted text…

Selanjutnya untuk memastikan project kita connect to Console Firebase kita coba perhatikan gambar berikut ini dan pilih Connect to Firebase :

Selanjutnya pilih Firebase Console dan kita akan diarahkan ke Firebase Console project kita yang sudah connect akan terlihat seperti gambar berikut ini :

Selanjutnya kita akan configure untuk Realtime Database nya dan akan terlihat seperti gambar dibawah ini :

Untuk persiapan library untuk auth dan database berhasil ditambahkan ! Sebelum masuk ke implementasi code nya kita akan jelaskan terlebih dahulu package project :

  • Splash Screen => Cek session user menggunakan auth firebase
  • SignUp => Registrasi data user
  • SignIn => User dapat login
  • List User => Menampilkan list data user
  • Maps => Tracking user berdasarkan list yang dipilih

SignUp

Selanjutnya pada class SignUpContract buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signUp

import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.FirebaseUser
import com.syntax.tutorialtrackingmvp.base.BaseView

interface SignUpContarct {

interface PresenterInterface {
fun doSignUp(name: String, email: String, password: String, confPassword: String, mAuth: FirebaseAuth?)
}

interface ViewInterface : BaseView{
fun isSuccess(user : FirebaseUser?)
fun isError(msg: String)
fun isMinChar()
fun areNotSame()
fun isEmptyField()
}
}

Selanjutnya pada class SignUpPresenter buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signUp

import android.util.Log
import com.google.firebase.auth.FirebaseAuth
import com.syntax.tutorialtrackingmvp.base.BasePresenter

class SignUpPresenter(
var _view: SignUpContarct.ViewInterface? = null
) : BasePresenter<SignUpContarct.ViewInterface>,
SignUpContarct.PresenterInterface {

override fun onAttach(view: SignUpContarct.ViewInterface) {
_view = view
}

override fun onDettah() {
_view = null
}

override fun doSignUp(name: String, email: String, password: String, confPassword: String, mAuth: FirebaseAuth?) {

// check jika inputan user kosong
if (name.isEmpty() || email.isEmpty() || password.isEmpty()) {
_view?.isEmptyField()

// check password minimal 3 karakter
} else if (password.length < 3) {
_view?.isMinChar()

// check jika password dan confirm password tidak sama
} else if (password != confPassword) {
_view?.areNotSame()

} else {

// sign up user
mAuth?.createUserWithEmailAndPassword(email, password)?.addOnCompleteListener {
if (it.isSuccessful && it.isComplete) {
Log.d("TAG", "createUserWithEmail:success")
val user = mAuth.currentUser

// simpan user dan sampaikan ke view
_view?.isSuccess(user)
} else {
Log.w("TAG", "createUserWithEmail:failure", it.getException())
_view?.isError("createUserWithEmail:failure" + it.exception.toString())
}
}
}
}
}

Selanjutnya pada class SignUp buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signUp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.FirebaseUser
import com.google.firebase.database.DatabaseReference
import com.google.firebase.database.FirebaseDatabase
import com.syntax.tutorialtrackingmvp.R
import com.syntax.tutorialtrackingmvp.model.User
import com.syntax.tutorialtrackingmvp.ui.signIn.SignIn
import com.syntax.tutorialtrackingmvp.ui.user.ListUserActivity
import kotlinx.android.synthetic.main.activity_sign_up.*
import org.jetbrains.anko.startActivity
import org.jetbrains.anko.toast

class SignUp : AppCompatActivity(), SignUpContarct.ViewInterface {

private val presenter by lazy {
SignUpPresenter()
}

private var database: DatabaseReference? = null
private var mAuth: FirebaseAuth? = null

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_sign_up)

// inisialisasi database dan create database dengan key user
database = FirebaseDatabase.getInstance().reference.child("user")

// inisialisasi auth nya
mAuth = FirebaseAuth.getInstance()

presenter
onAttachView()

btn_signUp.setOnClickListener {
presenter.doSignUp(
edt_username.text.toString(),
edt_email.text.toString(),
edt_pass.text.toString(),
edt_conf_pass.text.toString(), mAuth
)
}
tv_signIn.setOnClickListener { startActivity<SignIn>() }
}

override fun isSuccess(user: FirebaseUser?) {

// save data user ke database base on uuid
val users = User()
users.name = edt_username.text.toString().trim()
users.email = edt_email.text.toString().trim()
users.password = edt_pass.text.toString().trim()
users.uuid = user?.uid!!.toString()
database?.child(user.uid)?.setValue(users)
startActivity<ListUserActivity>()
}

override fun isError(msg: String) {
toast(msg)
}

override fun isMinChar() {
toast("password min 3 karakter")
}

override fun areNotSame() {
toast("pass dan conf tidak sama")
}

override fun isEmptyField() {
toast("tidak boleh kosong")
}


override fun onAttachView() {
presenter.onAttach(this)
}

override fun onDettachView() {
presenter.onDettah()
}

override fun onStart() {
super.onStart()
onAttachView()
}

override fun onDestroy() {
super.onDestroy()
onDettachView()
}
}

Selanjutnya silahkan running aplikasi nya dan perhatikan pada logcat dan message sukses pada saat sign up akan terlihat seperti gambar dibawah ini :

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-12-at-20.23.16-1024x194.png

Perhatikan gambar berikut ini :

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-12-at-20.25.36-1024x640.png
List User yang sudah sign up

Perhatikan code berikut ini :

// inisialisasi database dan create database dengan key user
database = FirebaseDatabase.getInstance().reference.child("user")

Code diatas akan secara otomatis membuat database seperti gambar dibawah ini :

SignIn

Selanjutnya pada class SignInContract buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signIn

import com.google.firebase.auth.FirebaseAuth
import com.syntax.tutorialtrackingmvp.base.BaseView

interface SignInContract {

interface PresenterInterface {
fun doSignIn(email: String, password: String, mAuth: FirebaseAuth?)
}

interface ViewInterface : BaseView {
fun isSuccess()
fun isEmptyField()
fun isError(msg: String)
}
}

Selanjutnya pada class SignInPresenter buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signIn

import android.util.Log
import com.google.firebase.auth.FirebaseAuth
import com.syntax.tutorialtrackingmvp.base.BasePresenter

class SignInPresenter(var _view: SignInContract.ViewInterface? = null) : BasePresenter<SignInContract.ViewInterface>
, SignInContract.PresenterInterface {

override fun onAttach(view: SignInContract.ViewInterface) {
_view = view
}

override fun onDettah() {
_view = null
}

override fun doSignIn(email: String, password: String, mAuth: FirebaseAuth?) {

if (email.isEmpty() || password.isEmpty()) {
_view?.isEmptyField()

} else {
mAuth?.signInWithEmailAndPassword(email, password)?.addOnCompleteListener {
if (it.isSuccessful && it.isComplete) {
Log.d("TAG", "signInWithEmail:success")
_view?.isSuccess()
} else {
Log.w("TAG", "signInWithEmail:failure : ", it.exception)
_view?.isError("signInWithEmail:failure :" + it.exception.toString())
}
}
}
}
}

Selanjutnya pada class SignIn buat approach code nya seperti ini :

package com.syntax.tutorialtrackingmvp.ui.signIn

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.firebase.auth.FirebaseAuth
import com.syntax.tutorialtrackingmvp.R
import com.syntax.tutorialtrackingmvp.ui.signUp.SignUp
import com.syntax.tutorialtrackingmvp.ui.user.ListUserActivity
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.startActivity
import org.jetbrains.anko.toast

class SignIn : AppCompatActivity(), SignInContract.ViewInterface {

private val presenter by lazy {
SignInPresenter()
}

private var mAuth: FirebaseAuth? = null

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

mAuth = FirebaseAuth.getInstance()

presenter
onAttachView()

btn_signIn.setOnClickListener {
presenter.doSignIn(
edt_email_login.text.toString().trim(),
edt_pass_login.text.toString().trim(), mAuth
)
}

tv_signUp.setOnClickListener { startActivity<SignUp>() }
}

override fun onAttachView() {
presenter.onAttach(this)
}

override fun onDettachView() {
presenter.onDettah()
}

override fun isSuccess() {
startActivity<ListUserActivity>()
}

override fun isEmptyField() {
toast("tidak boleh kosong")
}

override fun isError(msg: String) {
toast(msg)
}

override fun onStart() {
super.onStart()
onAttachView()
}

override fun onDestroy() {
super.onDestroy()
onDettachView()
}
}

Selanjutnya silahkan running aplikasi nya dan perhatikan pada logcat dan message sukses pada saat sign in akan terlihat seperti gambar dibawah ini :

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-12-at-20.30.11-1024x201.png

Nah pada artikel ini kita sudah membuat fitur untuk :

  • SplashScreen
  • SignUp
  • SignIn

Untuk fitur List User dan Tracking menggunakan Maps akan kita lanjutin di artikel selanjutnya ya . . .

Stay Soon !

Jika ada pertanyaan atau ada yang kurang jelas silahkan tinggalkan pertanyaan pada kolom komentar dibawah ya !

Happy Coding !

1
Hello, welcome to IMA Studio 🙌
Chat with us ! We are ready to help you :-)
Powered by