Building an Android app with Jetpack Compose and Firebase

Building an Android app with
Jetpack Compose and Firebase
Marina Coelho
Developer Relations Engineer
@coelho_dev

Firebase
Authentication
Firebase and
Compose overview
App architecture
Calling async Firebase
methods
Firestore

Drive user engagement
Analytics
Cloud
Messaging
Remote
Config
A/B Testing
Dynamic
Links
In-app
Messaging
Improve app quality
Crashlytics
Performance
Monitoring
Test Lab
App Distribution
Build better apps
Auth
Cloud
Functions
Cloud
Firestore
Hosting
Firebase ML
Realtime
Database
Cloud
Storage
Extensions

Jetpack Compose
● Android’s modern toolkit for building native UI
● Intuitive and requires less code than writing .xml files
● First stable version of Compose was launched in 2021

Jetpack Compose
@Composable
fun Hello() {
Column(modifier = Modifier.padding(16.dp)) {
var name by remember { mutableStateOf(“”) }
if (name.isNotEmpty()) {
Text(text = "Hello, $name!")
}
}
}

Make it So
● Create and edit to-do items
● Add flags
● Add priority
● Add due date
● Mark as complete

Model-View-ViewModel + Compose

How it used to be
private lateinit var auth: FirebaseAuth
public override fun onCreate() {
super.onCreate()
auth = Firebase.auth
}
public override fun onStart() {
super.onStart()
val currentUser = auth.currentUser
}

How it is now
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent { FirstComposableFunction() }
}
}

How it is now
class AccountServiceImpl() : AccountService {
override fun getUser(): FirebaseUser? {
return Firebase.auth.currentUser
}
}

Synchronous and Asynchronous methods
● Synchronous
○ Returns directly to the caller
○ Blocks the caller thread
● Asynchronous
○ Processing in another thread
○ Return to caller thread once it’s completed

How callback works
fun authenticate(
email: String,
password: String,
onResult: (Throwable?) -> Unit
) {
Firebase.auth.signInWithEmailAndPassword(email,password)
.addOnCompleteListener { onResult(it.exception) }
}

Authentication
● Knowing a user's identity allows your app to do many things
○ Securely save user data in the cloud
○ Provide the same personalized experience across all devices
● Firebase Authentication provides backend services, SDKs and UI libraries
● It supports different authentication methods
● Offers Anonymous Authentication

Adding to code
Add to app/build.gradle file:
dependencies {
implementation 'com.google.firebase:firebase-auth-ktx'
}
Sync Android project with Gradle files again

Providing the ViewModel
@HiltViewModel
class LoginViewModel @Inject constructor() : ViewModel() {
var uiState = mutableStateOf(LoginUiState())
private set
}

The Screen
@Composable
fun LoginScreen(
[...],
viewModel: LoginViewModel = hiltViewModel()
) {
val uiState by viewModel.uiState
}

The UI State
data class LoginUiState(
val email: String = "",
val password: String = ""
)

The Screen
OutlinedTextField(
singleLine = true,
modifier = Modifier.fillMaxWidth(),
value = uiState.email,
onValueChange = { viewModel.onEmailChange(it) },
placeholder = { Text(stringResource(R.String.email)) },
)

The Screen
Button(
onClick = { viewModel.onSignInClick() },
Modifier = Modifier.fillMaxWidth()
) {
Text(text = stringResource(R.String.sign_in))
}

The ViewModel
fun onSignInClick() {
viewModelScope.launch(exceptionHandler) {
accountService.authenticate(email, password) { error ->
if (error == null) {
linkWithEmail()
} else onError(error)
}
}
}

Cloud Firestore
● NoSQL document database in the Cloud
● Data is stored into structures called documents
● Retrieve individual or list of documents
● Listen to changes across client apps
● Offers offline support

What a document looks like in Make it So

Mapping data
data class Task(
val id: String = “”,
val title: String = "",
val priority: String = "",
val dueDate: String = "",
val dueTime: String = "",
val description: String = "",
val url: String = "",
val flag: Boolean = false,
val completed: Boolean = false,
val userId: String = ""
)
val task = result.toObject<Task>()

Adding to code
Add to app/build.gradle file:
dependencies {
implementation 'com.google.firebase:firebase-firestore-ktx'
}
Sync Android project with Gradle files again

The service
val query = Firebase.firestore
.collection(TASK_COLLECTION)
.whereEqualTo(USER_ID, userId)
query.addSnapshotListener { value, _ ->
value?.documentChanges?.forEach {
val wasDocumentDeleted = it.type == REMOVED
onDocumentEvent(
wasDocumentDeleted, it.document.toObject<Task>()
)
}
}

The ViewModel
private fun onDocumentEvent(wasDocumentDeleted: Boolean, task: Task) {
if (wasDocumentDeleted) tasks.remove(task)
else updateTaskInList(task)
}
private fun updateTaskInList(task: Task) {
val index = tasks.indexOfFirst { it.id == task.id }
if (index < 0) tasks.add(task) else tasks[index] = task
}
var tasks = mutableStateListOf<Task>()
private set

The Screen
val tasks = viewModel.tasks
LazyColumn {
items(tasks, key = { it.id }) { taskItem ->
TaskItem(
task = taskItem,
onCheckChange = { viewModel.onTaskCheckChange(taskItem) },
onActionClick = { action ->
viewModel.onTaskActionClick(openScreen, taskItem, action)
}
)
}
}

There's a lot more in Firestore!
fun addListener(
userId: String,
onDocumentEvent: (Boolean, Task) -> Unit,
onError: (Throwable) -> Unit
)
fun removeListener()
fun getTask(taskId: String, onError: (Throwable) -> Unit, onSuccess: (Task) -> Unit)
fun saveTask(task: Task, onResult: (Throwable?) -> Unit)
fun deleteTask(taskId: String, onResult: (Throwable?) -> Unit)
fun deleteAllForUser(userId: String, onResult: (Throwable?) -> Unit)

Make it So Series
Github @coelho_dev
Blog

Building an Android app with Jetpack Compose and Firebase

More Related Content

What's hot (20)

Similar to Building an Android app with Jetpack Compose and Firebase (20)

Recently uploaded (20)

Building an Android app with Jetpack Compose and Firebase