Firebase Database in Android with Phone Authentication - Kotlin

-

Configure Database:

(a) Go to https://console.firebase.google.com/


(b) Then click Add Project, a dialog will be prompted. Enter project name and choose country in it and click on Create Project.


(c) Click on Add Firebase to your Android App, another dialog will be prompted. In that, enter package name and SHA-1 (compulsary for using Database) and click Register App.
fire4.png
fire5.png

 (d) Then download google_services.json file, by clicking download button and put that file in your module's root directory.
fire6.png


(e) Then navigate to Database on Side tab and click on Get Started.
Initially the Database rules will be like,

 
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}



Below rule is to allow everyone to read and write data without any authentication.

 

{
  "rules": {
    ".read": true,
    ".write": true
  }
}



(f) Then click on Authentication in side menu and navigate to Sign-in Method. And enable Phone and Save it.

Structuring Database:

The most important task is planning your database structure, i.e., How you gonna save data and querying it. In Firebase Database, the data can only be saved as JSONObject.


{
  "users": {
    "alovelace": {
      "name": "Ada Lovelace",
      "contacts": { "ghopper": true },
    },
    "ghopper": { ... },
    "eclarke": { ... }
  }
}

In Case, if you would like to store it as JSONArray, it can't be stored directly. But we can store it as follows:

 
{
 "groups": {
  "-KeYm3ITV5PWK4u-KjVW": {
   "name": "My Family Group",
   "photo": "http://dsfds"
  },
  "-KeYmGi58ersPDWhC4EM": {
   "name": "Crime Partners",
   "photo": "http://frefg"
  }
 }
}

Here, "-KeYm3ITV5PWK4u-KjVW" and "-KeYmGi58ersPDWhC4EM" are auto-generated keys. So, the JSON Tree will read that as an array as follows:

 
{
 "groups": {
  [0]: {
   "name": "My Family Group",
   "photo": "http://dfdsf....",
  },
  [1]: {
   "name": "Crime Partners",
   "photo": "http://dggfdsf....",
  }
 }
}

Posting to Database:

To access Database, get reference to your exact node,

 
    var mFirebaseInstance = FirebaseDatabase.getInstance()
    var mFirebaseDatabase = mFirebaseInstance.getReference("users/").getRef()
















Here, "users" is node here. Let's just consider it as "Table" for our understanding.








For posting data to our database as JSONObject, we can use:

















     val map = mapOf("name" to nameText, "image" to imageUrl) 
     mFirebaseDatabase.child(currentUser).setValue(map) 












For posting data as Array, we can use:









     val map = mapOf("name" to nameText, "image" to imageUrl) 
     mFirebaseDatabase.push().setValue(map) 





Here, push() will auto-generate a key and post values to that. If you need that key, you can get that with push().getKey()




Querying Database:









Firebase Database can be queried either with ValueEventListener or ChildEventListener.















                 ValueEventListener will read entire data in the given path at once and notify us when any changes happened.















                  ChildEventListener will read each child in the given path and notify us when any child added, removed or changed.







Code:



Wheww!! Now we done with prerequisite and understood basic concepts. Lets proceed with code now. 




build.gradle



Include FirebaseUI in dependencies








  compile 'com.firebaseui:firebase-ui:3.1.2'






info_page.xml




<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.support.v7.widget.AppCompatImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="104dp"
        android:layout_margin="15dp"
        android:scaleType="centerCrop"
        android:src="@drawable/default_pic"
        app:layout_constraintBottom_toTopOf="@+id/textInputLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />


    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:layout_constraintBottom_toTopOf="@+id/update"
        app:layout_constraintTop_toBottomOf="@+id/image">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:padding="15dp"
        android:text="Update"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>











FirebaseActivity.kt



Using Firebase UI, we can authenticate users with phone number very easily. Once the authentication is success, we can redirect the user to next page, there he can be able to upload his name and profile picture to the Firebase Database.








class FirebaseActivity : AppCompatActivity() {

    private val RC_SIGN_IN = 1001


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val auth = FirebaseAuth.getInstance()
        if (auth.currentUser != null) {
            // If already signed in
            startActivity(Intent(this@FirebaseActivity, InfoActivity::class.java))
            finish()
        } else {
            // If not signed in
            startActivityForResult(
                    AuthUI.getInstance()
                            .createSignInIntentBuilder()
                            .setAvailableProviders(
                                    Arrays.asList(
                                            AuthUI.IdpConfig.Builder(AuthUI.PHONE_VERIFICATION_PROVIDER).build()
                                    ))
                            .build(),
                    RC_SIGN_IN)
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == RC_SIGN_IN) {
            val response = IdpResponse.fromResultIntent(data)
            Log.v("response.toString()", "" + response.toString());
            if (resultCode == ResultCodes.OK) {
                startActivity(Intent(this@FirebaseActivity, InfoActivity::class.java))
                finish()
                return
            } else {
                when {
                    response == null -> finish()
                    response.errorCode == ErrorCodes.NO_NETWORK -> {
                        Toast.makeText(this@FirebaseActivity, "No Internet Connection", Toast.LENGTH_SHORT).show()
                        return
                    }
                    response.errorCode == ErrorCodes.UNKNOWN_ERROR -> {
                        Toast.makeText(this@FirebaseActivity, "Unknown Error", Toast.LENGTH_SHORT).show()
                        return
                    }
                }
            }
        }
    }
}













InfoActivity.kt



In this page, we have to allow the user  to upload his profile picture to Firebase Storage. Once it was uploaded, get the url of that uploaded image . Then, we have to save his name and profile picture's Url to our Firebase Database.












class InfoActivity : AppCompatActivity(), View.OnClickListener {

    val PERMISSION_REQUEST_CODE = 1001
    val PICK_IMAGE_REQUEST = 900
    lateinit var filePath: Uri
    var imageUrl: String? = ""
    lateinit var prefs: SharedPreferences
    lateinit var editor: SharedPreferences.Editor
    val FIREBASE_USERS = "users/"
    var mAuth: FirebaseAuth? = null
    var currentUser: String? = ""
    lateinit var mFirebaseInstance: FirebaseDatabase
    lateinit var mFirebaseDatabase: DatabaseReference

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.info_page)
        prefs = getSharedPreferences("", Context.MODE_PRIVATE)
        editor = prefs.edit()
        mAuth = FirebaseAuth.getInstance()
        currentUser = mAuth?.currentUser?.phoneNumber
        mFirebaseInstance = FirebaseDatabase.getInstance()
        mFirebaseDatabase = mFirebaseInstance.getReference(FIREBASE_USERS).getRef()
        
        mFirebaseDatabase.addListenerForSingleValueEvent(object : ValueEventListener {
            override fun onCancelled(data: DatabaseError?) {

            }

            override fun onDataChange(data: DataSnapshot?) {
                if (data != null)
                    if (data.hasChild(currentUser)) {
                        val map : Map<String, String>? = data.child(currentUser).getValue() as? Map<String,String>
                        Log.v("getData", "getData==" + map)
                        editor.putString("name", map?.get("name"))
                        editor.putString("image", map?.get("image"))
                        editor.putBoolean("infoAdded", true)
                        editor.commit()
                        if (prefs.getBoolean("infoAdded", false)) {
                            setUI()
                        }
                    }
            }

        })

        image.setOnClickListener(this)
        update.setOnClickListener(this)
    }

    private fun setUI() {
        name.setText(prefs.getString("name", ""))
        name.isEnabled = false
        update.text = "LogOut"
        imageUrl = prefs.getString("image", "")
        Glide.with(this@InfoActivity).load(imageUrl).into(image)
    }

    private fun chooseFile() {
        val intent = Intent().apply {
            type = "image/*"
            action = Intent.ACTION_GET_CONTENT
        }
        startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_REQUEST)
    }

    private fun uploadFile() {
        val progress = ProgressDialog(this).apply {
            setTitle("Uploading Picture....")
            setCancelable(false)
            setCanceledOnTouchOutside(false)
            show()
        }

        val data = FirebaseStorage.getInstance()
        var value = 0.0
        var storage = data.getReference().child("mypic.jpg").putFile(filePath)
                .addOnProgressListener { taskSnapshot ->
                    value = (100.0 * taskSnapshot.bytesTransferred) / taskSnapshot.totalByteCount
                    Log.v("value", "value==" + value)
                    progress.setMessage("Uploaded.. " + value.toInt() + "%")
                }
                .addOnSuccessListener { taskSnapshot ->
                    progress.dismiss()
                    imageUrl = taskSnapshot.downloadUrl.toString()
                    Log.v("Download File", "File.." + imageUrl);

                    Glide.with(this@InfoActivity).load(imageUrl).into(image)
                }
                .addOnFailureListener { exception ->
                    exception.printStackTrace()
                }

    }

    private fun updateDetails() {
        val nameText = name.text.toString().trim()
        val map = mapOf("name" to nameText,
                "image" to imageUrl)
        mFirebaseDatabase.child(currentUser).setValue(map)

        editor.putString("name", nameText)
        editor.putString("image", imageUrl)
        editor.putBoolean("infoAdded", true)
        editor.commit()
        setUI()
    }

    private fun logOut() {
        mAuth?.signOut()
        editor.clear()
        editor.commit()
        startActivity(Intent(this, FirebaseActivity::class.java))
        finish()
    }


    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        when (requestCode) {
            PERMISSION_REQUEST_CODE -> {
                if (grantResults.isEmpty() || grantResults[0] == PackageManager.PERMISSION_GRANTED)
                    Toast.makeText(this@InfoActivity, "Oops! Permission Denied!!", Toast.LENGTH_SHORT).show()
                else
                    chooseFile()
            }
        }

    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (resultCode != Activity.RESULT_OK) {
            return;
        }
        when (requestCode) {
            PICK_IMAGE_REQUEST -> {
                filePath = data!!.getData()
                uploadFile()

            }
        }
    }



    @RequiresApi(Build.VERSION_CODES.M)
    override fun onClick(v: View?) {
        when(v?.id){
            R.id.image -> {
                when {
                    (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) -> {
                        if (ContextCompat.checkSelfPermission(this@InfoActivity, Manifest.permission.READ_EXTERNAL_STORAGE)
                                != PackageManager.PERMISSION_GRANTED) {
                            requestPermissions(arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE), PERMISSION_REQUEST_CODE)
                        } else {
                            chooseFile()
                        }
                    }

                    else -> chooseFile()
                }
            }

            R.id.update -> {
                when {
                    prefs.getBoolean("infoAdded", false) -> logOut()
                    imageUrl.toString().isEmpty() -> Toast.makeText(this@InfoActivity, "Please upload an image!", Toast.LENGTH_SHORT).show()
                    name.text.toString().trim().length == 0 -> Toast.makeText(this@InfoActivity, "Please enter your name!", Toast.LENGTH_SHORT).show()
                    else -> updateDetails()
                }
            }
        }
    }
}








Run Application:











    







Note:





* Also remember that the Phone Authentication will not work in Emulator, it requires Physical device as per Document.



* If you would like to do that in Custom UI, you can refer my other JAVA post.





Reference:



1. Website : https://firebase.google.com/docs/database/android/start/
















































Comments











Post a Comment








































Popular posts from this blog









SOAP Client using ksoap2 in Android - Kotlin






-














Image







            Introduction:     SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML.   Pros:    Security - SOAP provides its own security known as WS Security .  Platform Independent - SOAP web services can be written in any programming language and executed in any platform    Cons:     Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource.  WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service.    Things to know:    The following are the things we have to know before we proceed further:                         URL  - It is the URL of WSDL file.                         NAMESPACE  - It is targetNamespace in WSDL.                                             METHOD_NAME  - It is the met








Read more










RecyclerView  with different number of columns using SpanSizeLookup






-














Image







         We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image?       Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post.   Implementation:   build.gradle   Include the following in app-level gradle file.       implementation  'com.android.support:recyclerview-v7:27.0.2'    implementation  'com.android.support.constraint:constraint-layout:1.1.0-beta5'     recycler.xml    <?xml version= "1.0"  encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      xmlns:ap








Read more










Using Camera in Android - Kotlin






-














Image







         Nowadays, most of our Android app require access to Camera to capture picture or Video. We can do that in two ways.                                  (i) Using built-in Camera,                                  (ii) Using custom Camera.   Using Built-in Camera  In this post, Let's see how to use the built-in camera to capture images and save it.     Its a simple way to capture pics. We can use the mobile's built-in camera app using Intent.      val REQUEST_IMAGE_CAPTURE =  1    private fun takePictureIntent() {       val takePictureIntent =  Intent(MediaStore . ACTION_IMAGE_CAPTURE)       if  (takePictureIntent . resolveActivity(packageManager) !=  null) {            startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE)       }  }           After the picture has been captured, the result will received on onActivityResult method. There, we can get the data, in Bitmap form.     override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {    








Read more










Exploring Android Navigation Architecture Component - MVVM - Kotlin






-














Image







            Navigation Architecture Component is released as a part of JetPack and androidx package. Its aim is to simplify the implementation of Navigation in our Android App. It defines a set of principles to build an in-app navigation with consistent and predictable user experience. Its main concept is to use single-activity architecture. It also has support for both Activity and Fragment.   Principle of Navigation:   The following are the principles of Navigation.    App should have fixed starting destination  A stack is used to represent the navigation state of app  The 'Up' button never exits the app  Up and Back are equivalent within your app's task  Deep linking to a destination or navigating to the same destination should yield the same stack    You can find the detailed explanation, here .   Components of Navigation:     (i) Navigation Graph - It's nothing but a map/blueprint of our in-app navigation. It has a list of all fragments and activities. We can also 








Read more










TabLayout in Android with Kotlin






-














Image







                1. Create New Project:              Lets create New Project with Kotlin support as follows:        2. Adding design library:             Add design library in app's build.gradle file.   build.gradle           implementation 'com.android.support:design:26.1.0'      3. Drawing layouts:     Create a layout with TabLayout and ViewPager     slide_page.xml  <?xml version="1.0" encoding="utf-8"?>  <android.support.constraint.ConstraintLayout      xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      android:layout_width="match_parent"      android:layout_height="match_parent">       <LinearLayout          android:layout_width="0dp"          android:layout_height="0dp"          android:orientation="vertical"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_con








Read more










Room with LiveData, ViewModel - Android Architecture Components - Kotlin






-














Image







              Introduction:     We have already learnt about Room in last post,  Room-Kotlin . In this post, lets learn about how to use ViewModel and LiveData with Room to improve usablity. Using LiveData with Room, allows views to be notified about data changes automatically.   LiveData:    LiveData is nothing but observable data holder class. It allows us to observer changes in data across multiple components of app. It is also aware of and respects lifecycle of Activities/Fragments. It also ensures that LiveData only updates app component observers that are in an active lifecycle state.     The following image depicts the Lifecycle and States:     Here, CREATED, STARTED, RESUMED - Active States            INTIALIZED, DESTROYED - InActive States   So, LiveData will remove the updates automatically while in InActive States, i.e., INTIALIZED and DESTROYED.   ViewModel:    ViewModel is an entity that is free of Activity/Fragment's lifecycle. So it allows us to store and manage UI-r








Read more










Map, Location update and AutoComplete Places - Kotlin






-














Image







         Let's see how to show current location in Maps and also show the location which is chosen from AutoComplete in Maps with the updated Google play services. That is, for location listening we gonna use   FusedLocationProviderClient and for autocomplete places, we gonna use, GeoDataClient with AutoCompletePrediction, i.e., no need to call places url from our end, Google Playservices will do that work for you. Okiee, Let's start now.   You can find the project in Github .   PreRequisite:  Navigate to  https://developers.google.com/maps/documentation/android-api/signup  and do as per the instructions to start.   Manifest:   Include your API key, which you got from previous step in AndroidManifest.xml              <meta-data             android:name= "com.google.android.geo.API_KEY"              android:value= "AIzXXXXXXXXXX_XXXXXXXXXXXXXX"  />     Gradle:  Include the following in app-level build 's dependencies.         implementation 'com








Read more










Databinding in RecyclerView - Android - Kotlin






-














Image







 Hey Guyss!!   Already we have seen the basics of Databinding  and how to use it in previous  post .   Now let's see how to use Databinding  in RecyclerView . And Its gonna be a short post. ;)   You can find the Project in GitHub .   Prerequisite:  build.gradle   First, we have enable dataBinding in app-level build.gradle                             android {                                      dataBinding {                                              enabled = true                                      }                             }   Next, we have add the following plugin.                                 apply plugin: 'kotlin-kapt'    Next, we have to include dependency for databinding, (Not needed, if using Android Studio 3.2 or above, since its already bundled)                               kapt "com.android.databinding:compiler:3.2.0-alpha10"      Implementation:    We can directly bind the data to RecyclerView's Adapter layout. So, let's design the








Read more










Stripe Integration in Android - Kotlin






-














Image







           Stripe is one of the simplest payment gateway to be used. It enables us to process payments in minutes. Let's see how to integrate Stripe in Android using Kotlin.    Operational Flow:                   1. App should provide order details to Stripe server and the order total will be returned to App.              2. Then the user will enter the payment/card details. That will be sent to Stripe server and the result of the request will be sent back to the App.    Create Stripe Account:   (a) Go to  https://dashboard.stripe.com/register  and enter all your details and create account.          (b) Click API in side tab. Make sure that the Account is in Test mode. And make a note of          Publishable Key and Secret Key for use.           Code:    build.gradle:     compile 'com.stripe:stripe-android:5.1.0'    Layout files:    main_layout.xml:    <?xml version="1.0" encoding="utf-8"?>   <android.support.constraint.ConstraintLayout xmlns:an








Read more










Using RxJava, Retrofit in Android - Kotlin






-














Image







  Introduction:  Reactive Programming  is a programming paradigm that’s concerned with data streams and propagation of change. The reactive model listens to changes in the event and runs the relevant code accordingly.   RxJava  is a Java based implementation of Reactive Programming.   Whereas, RxAndroid  is specific to Android platform which utilises some classes on top of the RxJava library.    Classes and Concepts:  There are 3 main components in RxJava.   (i) Observable  - It emits a stream of data or events. i.e., a class that can be used to perform some action, and publish the result.   (ii) Observer  - It receivers the events or data and acts upon it. i.e. a class that waits and watches the Observable, and reacts whenever the Observable publishes results.   It have 4 interface methods to know the different states of Observable, as follows:           onSubscribe()  - invoked when the Observer is subscribed.          onNext()  - invoked when the new item is emitted from Observer.  








Read more