Fire Up Your App With Firebase Firestore in MVVM Architecture With Jetpack Compose (Part I)
When developing a scalable Android app, architectural choices are key. In this series, we will construct a quiz app, utilizing the power of Model-View-ViewModel (MVVM) architecture. Our app, designed with Jetpack Compose and powered by Firebase Firestore, also leverages Dagger-Hilt for Dependency Injection.
Before we dive into the details, let’s establish a few assumptions:
- Our Android project is already set up as a Jetpack Compose project, complete with the necessary Firebase SDK dependencies. (Note: Authentication is not included in this stage of the project.)
- The Firebase project has been configured, and Firestore contains sample data ready for querying. Firestore organizes data into Collections of Documents.
In a nutshell, our app, named ‘Android Ally,’ serves as a teaching aid for native Android development. It delivers content through a series of quizzes, organized into modules such as ‘Android Basics.’ Each module represents a collection of quizzes, each comprising a question, an answer, and various data attributes, including a unique numerical rank within the module. The quiz flow involves presenting questions, revealing correct answers, and allowing users to self-assess their responses as ‘correct,’ ‘partially correct,’ or ‘incorrect.’ This process repeats, and users can also review the knowledge base at their discretion.
At this stage of app development, we’re focusing on a single screen displaying the Table of Contents (ToC) fetched from the backend. Future phases will involve running quizzes for anonymous users and implementing caching. Features like authentication will be introduced in later stages.
Our current spotlight is on a single Firestore Collection named ‘AndroidAllyContents,’ with sample Documents like ‘AndroidBasics,’ ‘JetpackComposeUI,’ and more. Each of these modules in the ToC will eventually have its own Collection, with each quiz stored within individual Documents.
With this foundation, let’s dive into the implementation process.
As shown in the figure, The Model-View-View Model (MVVM) architecture has three layers:
- Data: This is the storage layer for data that is consumed during app’s usage and may include data generated by user..
- Presentation: This is the User Interface (UI) where information is presented to the user and interaction with user takes place.
- Domain: This is the bridge between the Data and Presentation layers where data are shaped in the manner required for presentation. It includes the rules necessary to transform data.
An architecture provides the bare skeleton that is fleshed out with code. It is instructive to examine how the code is structured in packages in each layer to uncover the mechanics of the app. For example, the Data layer’s package remote contains all the client-side code for remote storage. We will step through the structure to understand the components of the app and how they relate to each other.
In order to keep it simple, we will start confine our scope to a single screen that displays a Table of Contents. It is a plain display consistent with the goal of this series. We will start by examining the client-side code for Firebase Firestore storage.