In a previous article, 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 to 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.
Starting Up
We will start this tutorial with the app we built for the previous tutorial, My Shopping List. Download the starter project from my website.
Open the app in Android Studio and let the Gradle sync finish. Run the app and you should see an app with a shopping list:
Creating a Project in the Firebase Console
The first step is to create a Firebase Console Project. Go to the Firebase Console main page. On this screen, you will get one of two layouts:
- If you have never used the Firebase Console before, you will be prompted with a welcome message and an invitation to create a project.
2. If you have other projects, you will see a list of them and a white card to add a project.
Click 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.
Click 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:
Click Create project and you will get a loading screen (Image 6). It will take a small amount of time, so don’t worry.
Once the process is finalized, the loader will turn into three orange dots with a confirmation text and a Continue button will appear.
Click on the Continue button and you will be taken to the main screen of the 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 would use the same project and this would 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. On the home screen of your project, click on the little white Android icon to start the integration flow.
As a first step, Firebase will request your app’s data. Add the following:
- 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. - Nickname: My Shopping List. This can be whatever nickname that will help you remember the app name. Maybe you will want to add the suffix “Android” if you want to distinguish it from another app.
- SHA-1 certificate: This can be empty, as you won’t be using it for this tutorial.
After inputting the data, you will get a JSON file named google-services.json. The screen has instructions to integrate it into the app, but I will explain below in case it is not clear.
Go to Android Studio, where you have the project open, and switch the view in the left panel. Your project will likely be in “Android” mode and you will get a dropdown with the view options like in Image 12 below:
Once you are in the Project view, you will see the file tree displayed like in the image below. Download the file from the Firebase Console to any location of your computer and then drag and drop to MyShoppingList > app.
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.
Once you get 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.}
If you have any doubts about whether the sync was successful, take a look at the bottom panel. It should look like Image 16 below:
Finish Firebase Console Configuration
Then go back to the 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 that 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.
If the step above fails, go back to the instructions and ensure that you did everything correctly. Otherwise, on 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.
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:
You will access the Firestore page of the project and get a prompt to create a Database in a big banner:
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.
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.
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 than that.
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:
Click on the “+ start collection” text to create your first collection. The database has a multi-column structure based on collections > documents > fields. According to the demo app, we want our collection to be called MyGroceries, as this will contain all our groceries.
Then for the document, you will also be prompted for a name. It can be “TodaysGroceries” or the date (e.g. “March30–2020”) in case you want to have several lists in your app.
Add the fields with sample data:
- Item1 = string — banana
- Item2 = string — peanut butter
- Item3 = string — bread
- …
Add as many as you want or just copy the sample data we have in the app.
Once you have added all the fields, your database should look like Image 27 below:
Conclusion
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 in the end, you can download the finished project on my website.
If you have any doubts don’t hesitate to leave a comment and I will reply as soon as possible.
See you next time!
