Reading Time: 8 minutes

In a previous post, we discussed how to create an Android app with two of the most important building blocks of Android Architecture Components: LiveData and ViewModel. This is a follow up on that tutorial, once we have an app with clean architecture, we will be configuring Firebase Firestore for Android Architecture Components to update data in real-time and make the most out of LiveData and ViewModel in Android. Here is the previous part if you are curious:

Starting up

We will start this tutorial with the app we build for the previous tutorial, “My Shopping List”. You can get the source code here:

Open the app in Android Studio, and let the Gradle sync finish. Run the app and you should see, as the name says an app with a shopping list:

Image 1. My Shopping List app

Creating a Project in Firebase Console

The first step is to create a Firebase Console Project. Go to the Firebase Console main page in https://console.firebase.google.com/. In this screen you will get either of two layouts:

  1. If you have never used the Firebase Console before, you will be prompted with a welcome message and an invitation to “create a project”, like in image 2 below:
Image 2. Firebase Console Welcome Screen with no projects

2. If you have other projects, you will see a list of them and a white card to “add project”, like in the image below.

Image 3. Firebase Console Welcome Screen with other projects

Click in the button to create a project depending on the option you have and you will start the flow for creating a project. The first screen will prompt you for the name of the project, in this case, you will use the same name of your Android app, which is “MyShoppingList”.

Image 4. Naming the Firebase Project

Continue and the next step will ask you whether you want to enable Google Analytics, this is not necessary for Firestore, but you may want to enable it for other reasons.

Image 5. Enabling Google Analytics in Firebase Project

Click “Create project” and you will get a loading screen (Image 6), it will take a small amount of time, so don’t worry.

Image 6. Creating Firebase Project loader

Once the process is finalized, the loader will turn into 3 orange dots, with a confirmation text and a “Continue button will appear”.

Image 7. Firebase Project created correctly.

Click on the “Continue” button and you will be taken to the main screen of the “MyShoppingList” project.

Image 8. Main Screen of “MyShoppingList” project

It is important to understand that this project will work for many platforms, not only Android. If you were going to integrate Firestore to an iOS app or a web project, you will use the same project and this will also enable you to share the database across platforms.

Adding Firebase to the Android App

From this part on, the configuration is specific to Android. In the home screen of your project click on the little white Android icon to start the integration flow.

Image 9. The first step to integrating Firebase with the Android app

As a first step Firebase will request your app’s data, add the following:

  1. Package name: com.evanamargain.android.myshoppinglist. This has to be the same package name that you have in your app. If you are not sure and you are not using the demo project, go to app > manifests > AndroidManifest.xml, the package will be in the first few lines of the file.
  2. Nickname: “My Shopping List”. This can be whatever nickname that will help you remind the app name. Maybe you will want to add the suffix “Android” if you want to distinguish it somehow from another app.
  3. SHA-1 certificate: This can be empty as you won’t be using it for this tutorial.
Image 10. The first step with the needed data added

After inputting the data you will get a JSON file, named “google-services.json”. The screen has instructions to integrate it to the app, but I will explain below in case it is not clear.

Image 11. JSON config file for Firebase in Android

Go to Android Studio where you have the project open and switch the view in the left panel, most likely your project will be in “Android” mode and you will get a dropdown with the view options like in Image 12 below.

Image 12. Android Project View in Android Studio

Once you are in the “Project” view, you will see the file tree displayed like the image below (Image 13). Download the file from the Firebase Console to any location of your computer, and then ‘drag and drop’ to MyShoppingList > app.

Image 13. Android Project Structure

Then switch back to the Android view in the left panel. Most of the time you will be using Android Projects in this view as it is the easiest to navigate while coding.

Image 14. Android View in Android Studio

Once you got to the Android view, open Gradle Scripts > “build.gradle (Project: MyShoppingList)”. Add this code:

classpath 'com.google.gms:google-services:4.3.3'

In the same folder, open “Build.gradle (Module: app)” and add the following code.

apply plugin: 'com.google.gms.google-services'

...

dependencies {
  ...
  // In case you activated Google Analytics
  // Add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.2.2'
  
  // Add Firestore dependency
  implementation 'com.google.firebase:firebase-firestore:21.4.1'
}

After adding these dependencies Android Studio will request a Gradle Sync (Image 15). Click on sync now and wait, build should be successful.

Image 15. Android Studio requesting a Gradle sync

If you have any doubts whether the sync was successful, take a look at the bottom panel and it should look like in image 16 below.

Image 16. Gradle build successful in Android Studio

Finish Firebase Console Configuration

Then go back to Firebase Console and click next to confirm you have added the JSON file and dependencies to the project. There will be a note at the bottom of the screen indicating Firebase is verifying the connectivity between your app and the console. Build and run the app, it should run and look the same as it did at the beginning of the tutorial. After doing this Firebase should confirm connectivity and give you a “Continue to console” button.

Image 17. Connectivity between the app and Firebase Console was confirmed

If the above step fails, go back to the instructions and ensure you did everything correctly. Otherwise in the main screen of the project you will see a purple icon with the Android logo in purple, which means your project is connected to the app.

Image 18. Android App added to Firebase Console Project

Configuring FireStore in Firebase Console

Once you have a project in Firebase Console and have connected your app to the project, it’s time to configure your Firestore database in the console. Locate a big orange tile below the main project screen that looks like image 19 below.

Image 19. Option for cloud firestore

You will access the Firestore page of the project and get a prompt to create a Database in a big banner (Image 20).

Image 20. Firestore creation of the first Database

Click on the “Create database” button, and a modal screen will appear. It will first ask you about database security. For development and this tutorial, you will set it to test mode but take into account that for a production app it is important to enable “production mode” because you want your users’ data to be safe.

Image 21. Firestore database modes

Click next and you will be asked for the location of the server. Usually, it is recommended to choose the location closest to you or your users, as this will reduce the loading times. I think the Firebase Console automatically suggests the one closest to you.

Image 22. Firestore database location

Once you click on done it will show you a “Provisioning Cloud Firestore” spinner (Image 23). I was once told in a Google Cloud Conference that this provisioning may take up to three minutes if the service is too saturated, but it usually takes less.

Image 23. Firestore provisioning spinner

Configure the Database

Once the provisioning process is completed you will see your database like in the image below. The database is empty and waiting for you to start working on it.

Image 24. Firestore Database empty

Click on the “+ start collection” text to create your first collection. The database have a multicolumn structure base on collections > documents > fields. According to the demo app, we want our collection to be called “MyGroceries” as this will contain all our groceries.

Image 25. Firestore adding a Collection

Then for the document, you will also be prompted for a name, it can be “TodaysGroceries” or the date “March26-2020” in case you want to have several lists in your app.

Add the fields with sample data:

  1. Item1 = string – banana
  2. Item2 = string – peanut butter
  3. Item3 = string – bread

Add as many as you want or just copy the sample data we have in the app.

Image 26. Firestore adding a document

Once you have added all the fields your database should look like Image 27 below:

Image 27. Firestore database with demo data

That’s it! We now have Firebase Console and the Android app configured to use Firestore with a database in it. In the next part, we will be integrating this database to Android Architecture Components. If you want to see how the project should work at the end you can download the finished project here:

If you liked the content on this post, please subscribe at the bottom of the page. If you have any doubts don’t hesitate to leave a comment and I will reply as soon as possible. You can also donate a coffee to support me so I can keep on creating things like this!

See you next time!

Evana Margain Puig

(Visited 223 times, 1 visits today)