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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Building an Android app with Jetpack Compose and Firebase

Similaire à Building an Android app with Jetpack Compose and Firebase (20)

Dernier

Dernier (20)

Building an Android app with Jetpack Compose and Firebase