1. Introdução
Última atualização:16/11/2022
Como criar um app Android com o Firebase e o Jetpack Compose
Neste codelab, você vai criar um app Android chamado Make It So. A interface desse app é totalmente criada com o Jetpack Compose, que é o kit de ferramentas moderno do Android para criar interfaces nativas. Ele é intuitivo e requer menos código do que escrever arquivos .xml e vinculá-los a atividades, fragmentos ou visualizações.
A primeira etapa para entender como o Firebase e o Jetpack Compose funcionam juntos é entender a arquitetura moderna do Android. Uma boa arquitetura torna o sistema fácil de entender, desenvolver e manter, já que deixa muito claro como os componentes são organizados e se comunicam entre si. No mundo do Android, a arquitetura recomendada é chamada de modelo - visualização - ViewModel. O modelo representa a camada que acessa os dados no aplicativo. A View é a camada de interface e não precisa saber nada sobre a lógica de negócios. E o ViewModel é onde a lógica de negócios é aplicada, o que às vezes exige que o ViewModel chame a camada Model.
Recomendamos a leitura deste artigo para entender como o Modelo-Visualização-ViewModel é aplicado a um app Android criado com o Jetpack Compose, já que ele facilita a compreensão da base de código e a conclusão das próximas etapas.
O que você vai criar
Make It So é um aplicativo simples de lista de tarefas que permite ao usuário adicionar e editar tarefas, adicionar sinalizações, prioridades e datas de conclusão e marcar as tarefas como concluídas. As imagens abaixo mostram as duas páginas principais do aplicativo: a página de criação de tarefas e a página principal com a lista de tarefas criadas.
Você vai adicionar alguns recursos que estão faltando neste app:
- Autenticar usuários com e-mail e senha
- Adicionar um listener a uma coleção do Firestore e fazer com que a interface reaja a mudanças
- Adicionar rastros personalizados para monitorar o desempenho de um código específico no app
- Criar um botão de ativação/desativação de recurso usando a Configuração remota e usar o lançamento gradual para lançar
O que você aprenderá
- Como usar o Firebase Authentication, o Monitoramento de desempenho, a Configuração remota e o Cloud Firestore em um aplicativo Android moderno
- Como fazer com que as APIs do Firebase se encaixem em uma arquitetura MVVM
- Como refletir as mudanças feitas com as APIs do Firebase em uma interface do Compose
O que é necessário
- Android Studio Flamingo+
- Android Emulator com a API 21 ou mais recente
- Familiaridade com a linguagem de programação Kotlin
2. Instalar o app de exemplo e configurar o Firebase
Conferir o código do app de exemplo
Clone o repositório do GitHub na linha de comando:
git clone https://github.com/FirebaseExtended/make-it-so-android.git
Criar um projeto do Firebase
A primeira coisa que você precisa fazer é acessar o Console do Firebase e criar um projeto do Firebase clicando no botão "+ Adicionar projeto", como mostrado abaixo:
Siga as etapas na tela para concluir a criação do projeto.
Adicionar um app Android ao projeto do Firebase
No seu projeto do Firebase, é possível registrar diferentes apps: para Android, iOS, Web, Flutter e Unity.
Escolha a opção Android, como mostrado aqui:
Em seguida:
- Digite
com.example.makeitsocomo o nome do pacote e, se quiser, um apelido. Para este codelab, não é necessário adicionar o certificado de assinatura de depuração. - Clique em Próxima para registrar seu app e acessar o arquivo de configuração do Firebase.
- Clique em Fazer o download do google-services.json para fazer o download do arquivo de configuração e salvá-lo no diretório
make-it-so-android/app. - Clique em Próxima. Como os SDKs do Firebase já estão incluídos no arquivo
build.gradledo projeto de exemplo, clique em Próxima para pular para Próximas etapas. - Clique em Continuar para o console para concluir.
Para que o app Make it So funcione corretamente, você precisa fazer duas coisas no console antes de acessar o código: ativar os provedores de autenticação e criar o banco de dados do Firestore.
Configurar a autenticação
Primeiro, vamos ativar a autenticação para que os usuários possam fazer login no app:
- No menu Build, selecione Authentication e clique em Get Started.
- No card Método de login, selecione E-mail/senha e ative.
- Em seguida, clique em Adicionar novo provedor e selecione e ative Anônimo.
Configurar o Cloud Firestore
Em seguida, configure o Firestore. Você vai usar o Firestore para armazenar as tarefas de um usuário conectado. Cada usuário vai ter seu próprio documento em uma coleção do banco de dados.
- No painel à esquerda do Console do Firebase, expanda Build e selecione Banco de dados do Firestore.
- Clique em Criar banco de dados.
- Deixe o ID do banco de dados definido como
(default). - Selecione um local para o banco de dados e clique em Próxima.
No caso de apps reais, escolha um local próximo aos usuários. - Clique em Iniciar no modo de teste. Leia a exoneração de responsabilidade sobre as regras de segurança.
Nas próximas etapas desta seção, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados. - Clique em Criar.
Vamos criar regras de segurança robustas para o banco de dados do Firestore.
- Abra o painel do Firestore e acesse a guia Regras.
- Atualize as regras de segurança para que fiquem assim:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow create: if request.auth != null;
allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
}
}
}
Basicamente, essas regras dizem que qualquer usuário conectado do app pode criar um documento para si mesmo em qualquer coleção. Depois que ele for criado, apenas o usuário que criou o documento poderá acessá-lo, atualizá-lo ou excluí-lo.
Executar o aplicativo
Agora está tudo pronto para executar o aplicativo. Abra a pasta make-it-so-android/start no Android Studio e execute o app. Isso pode ser feito usando um emulador do Android ou um dispositivo Android real.
3. Firebase Authentication
Qual recurso você vai adicionar?
No estado atual do app de exemplo Make It So, um usuário pode começar a usar o app sem precisar fazer login primeiro. Para isso, ele usa a autenticação anônima. No entanto, as contas anônimas não permitem que um usuário acesse os dados em outros dispositivos ou mesmo em sessões futuras. Embora a autenticação anônima seja útil para uma integração lenta, sempre ofereça a opção de converter os usuários para uma forma diferente de login. Pensando nisso, neste codelab, você vai adicionar a autenticação por e-mail e senha ao app Make It So.
Hora de programar!
Assim que o usuário criar uma conta digitando um e-mail e uma senha, você vai precisar pedir uma credencial de e-mail à API Firebase Authentication e vincular a nova credencial à conta anônima. Abra o arquivo AccountServiceImpl.kt no Android Studio e atualize a função linkAccount para que fique assim:
model/service/impl/AccountServiceImpl.kt
override suspend fun linkAccount(email: String, password: String) {
val credential = EmailAuthProvider.getCredential(email, password)
auth.currentUser!!.linkWithCredential(credential).await()
}
Agora, abra SignUpViewModel.kt e chame a função linkAccount do serviço dentro do bloco launchCatching da função onSignUpClick:
screens/sign_up/SignUpViewModel.kt
launchCatching {
accountService.linkAccount(email, password)
openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}
Primeiro, ele tenta autenticar e, se a chamada for bem-sucedida, ele vai para a próxima tela (SettingsScreen). Como você está executando essas chamadas em um bloco launchCatching, se ocorrer um erro na primeira linha, a exceção será detectada e processada, e a segunda linha não será alcançada.
Assim que a SettingsScreen for aberta novamente, verifique se as opções Fazer login e Criar conta foram removidas, porque agora o usuário já está autenticado. Para isso, vamos fazer com que o SettingsViewModel ouça o status do usuário atual (disponível em AccountService.kt) para verificar se a conta é anônima ou não. Para fazer isso, atualize o uiState em SettingsViewModel.kt para ficar assim:
screens/settings/SettingsViewModel.kt
val uiState = accountService.currentUser.map {
SettingsUiState(it.isAnonymous)
}
A última coisa que você precisa fazer é atualizar o uiState em SettingsScreen.kt para coletar os estados emitidos pelo SettingsViewModel:
screens/settings/SettingsScreen.kt
val uiState by viewModel.uiState.collectAsState(
initial = SettingsUiState(false)
)
Agora, sempre que o usuário mudar, o SettingsScreen vai se recompor para mostrar as opções de acordo com o novo estado de autenticação do usuário.
Hora de testar!
Execute o Make it So e navegue até as configurações clicando no ícone de engrenagem no canto superior direito da tela. Em seguida, clique na opção "Criar conta":
Digite um e-mail válido e uma senha forte para criar sua conta. Isso vai funcionar, e você vai ser redirecionado para a página de configurações, onde vai encontrar duas novas opções: "Fazer logout" e "Excluir conta". Para conferir a nova conta criada no painel de autenticação do console do Firebase, clique na guia "Usuários".
4. Cloud Firestore
Qual recurso você vai adicionar?
No Cloud Firestore, você vai adicionar um listener à coleção do Firestore que armazena os documentos que representam as tarefas exibidas em Make it So. Depois de adicionar esse listener, você vai receber todas as atualizações feitas nessa coleção.
Hora de programar!
Atualize o Flow disponível em StorageServiceImpl.kt para ficar assim:
model/service/impl/StorageServiceImpl.kt
override val tasks: Flow<List<Task>>
get() =
auth.currentUser.flatMapLatest { user ->
firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
}
Esse código adiciona um listener à coleção de tarefas com base no user.id. Cada tarefa é representada por um documento em uma coleção chamada tasks, e cada uma delas tem um campo chamado userId. Um novo Flow será emitido se o status do currentUser mudar (por exemplo, ao sair).
Agora, você precisa fazer com que o Flow em TasksViewModel.kt reflita o mesmo que no serviço:
screens/tasks/TasksViewModel.kt
val tasks = storageService.tasks
E a última coisa será fazer com que o composable function em TasksScreens.kt, que representa a interface, esteja ciente desse fluxo e o colete como um estado. Sempre que o estado muda, a função combinável é recomposta automaticamente e mostra o estado mais recente para o usuário. Adicione o seguinte ao TasksScreen composable function:
screens/tasks/TasksScreen.kt
val tasks = viewModel
.tasks
.collectAsStateWithLifecycle(emptyList())
Quando a função combinável tiver acesso a esses estados, você poderá atualizar o LazyColumn, que é a estrutura usada para mostrar uma lista na tela, para ficar assim:
screens/tasks/TasksScreen.kt
LazyColumn {
items(tasks.value, key = { it.id }) { taskItem ->
TaskItem( [...] )
}
}
Hora de testar!
Para testar se funcionou, adicione uma nova tarefa usando o app (clicando no botão de adição no canto inferior direito da tela). Quando você terminar de criar a tarefa, ela vai aparecer na coleção do Firestore no console do Firestore. Se você fizer login no Make it So em outros dispositivos com a mesma conta, poderá editar seus itens de tarefas e acompanhar as atualizações em todos os dispositivos em tempo real.
5. Monitoramento de desempenho
Qual recurso você vai adicionar?
É muito importante prestar atenção ao desempenho, porque os usuários provavelmente vão desistir de usar seu app se ele não for bom e demorar muito para concluir uma tarefa simples. Por isso, às vezes é útil coletar algumas métricas sobre uma jornada específica que um usuário faz no seu app. Para ajudar nisso, o Monitoramento de desempenho do Firebase oferece traces personalizados. Siga as próximas etapas para adicionar rastros personalizados e medir o desempenho em diferentes partes do código no Make it So.
Hora de programar!
Se você abrir o arquivo Performance.kt, vai encontrar uma função inline chamada trace. Essa função chama a API Performance Monitoring para criar um trace personalizado, transmitindo o nome do trace como um parâmetro. O outro parâmetro que você vê é o bloco de código que você quer monitorar. A métrica padrão coletada para cada trace é o tempo que leva para ser executado completamente:
model/service/Performance.kt
inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)
Você pode escolher quais partes da base de código são importantes para medir e adicionar rastros personalizados a elas. Confira um exemplo de como adicionar um rastro personalizado à função linkAccount que você viu anteriormente (em AccountServiceImpl.kt) neste codelab:
model/service/impl/AccountServiceImpl.kt
override suspend fun linkAccount(email: String, password: String): Unit =
trace(LINK_ACCOUNT_TRACE) {
val credential = EmailAuthProvider.getCredential(email, password)
auth.currentUser!!.linkWithCredential(credential).await()
}
Agora é sua vez. Adicione alguns rastros personalizados ao app Make it So e prossiga para a próxima seção para testar se ele funcionou conforme o esperado.
Hora de testar!
Depois de terminar de adicionar os rastros personalizados, execute o app e use os recursos que você quer medir algumas vezes. Em seguida, acesse o console do Firebase e o painel de desempenho. Na parte de baixo da tela, você encontra três guias: Solicitações de rede, Traces personalizados e Renderização de tela.
Acesse a guia Traces personalizados e verifique se os rastros que você adicionou na base de código estão sendo mostrados e se é possível saber quanto tempo geralmente leva para executar esses códigos.
6. Configuração remota
Qual recurso você vai adicionar?
Há muitos casos de uso para a Configuração remota, desde a mudança remota da aparência do app até a configuração de comportamentos diferentes para segmentos de usuários diferentes. Neste codelab, você vai usar a Configuração remota para criar um botão de alternância que vai mostrar ou ocultar o novo recurso edit task no app Make it So.
Hora de programar!
A primeira coisa que você precisa fazer é criar a configuração no Console do Firebase. Para fazer isso, acesse o painel da Configuração remota e clique no botão Adicionar parâmetro. Preencha os campos de acordo com a imagem abaixo:
Quando todos os campos estiverem preenchidos, clique no botão Salvar e em Publicar. Agora que o parâmetro foi criado e está disponível para a base de código, é necessário adicionar o código que vai buscar os novos valores no app. Abra o arquivo ConfigurationServiceImpl.kt e atualize a implementação dessas duas funções:
model/service/impl/ConfigurationServiceImpl.kt
override suspend fun fetchConfiguration(): Boolean {
return remoteConfig.fetchAndActivate().await()
}
override val isShowTaskEditButtonConfig: Boolean
get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()
A primeira função busca os valores do servidor e é chamada assim que o app é iniciado, em SplashViewModel.kt. Essa é a melhor maneira de garantir que os valores mais atualizados estejam disponíveis em todas as telas desde o início. Não é uma boa experiência do usuário se você mudar a interface ou o comportamento do app mais tarde, quando o usuário estiver no meio de fazer algo.
A segunda função está retornando o valor booleano publicado para o parâmetro que você acabou de criar no console. E você vai precisar recuperar essas informações em TasksViewModel.kt, adicionando o seguinte à função loadTaskOptions:
screens/tasks/TasksViewModel.kt
fun loadTaskOptions() {
val hasEditOption = configurationService.isShowTaskEditButtonConfig
options.value = TaskActionOption.getOptions(hasEditOption)
}
Você está recuperando o valor na primeira linha e usando-o para carregar as opções de menu dos itens de tarefa na segunda linha. Se o valor for false, o menu não terá a opção de edição. Agora que você tem a lista de opções, é necessário fazer com que a interface seja mostrada corretamente. Ao criar um app com o Jetpack Compose, você precisa procurar a composable function que declara como a interface do TasksScreen deve ser. Abra o arquivo TasksScreen.kt e atualize o LazyColum para apontar para as opções disponíveis em TasksViewModel.kt:
screens/tasks/TasksScreen.kt
val options by viewModel.options
LazyColumn {
items(tasks.value, key = { it.id }) { taskItem ->
TaskItem(
options = options,
[...]
)
}
}
O TaskItem é outro composable function que declara como a interface de uma única tarefa deve ser. E cada tarefa tem um menu com opções que aparece quando o usuário clica no ícone de três pontos no final dela.
Hora de testar!
Agora está tudo pronto para executar o app. Confira se o valor publicado usando o Console do Firebase corresponde ao comportamento do app:
- Se for
false, você só vai encontrar duas opções ao clicar no ícone de três pontos. - Se for
true, você vai encontrar três opções ao clicar no ícone de três pontos.
Tente mudar o valor algumas vezes no console e reiniciar o app. É assim que é fácil lançar novos recursos no app usando a Configuração remota.
7. Parabéns
Parabéns! Você criou um app Android com o Firebase e o Jetpack Compose.
Você adicionou o Firebase Authentication, o Monitoramento de desempenho, a Configuração remota e o Cloud Firestore a um app Android criado totalmente com o Jetpack Compose para a interface e fez com que ele se encaixasse na arquitetura MVVM recomendada.
Leia mais
- Como criar um app Android com o Firebase e o Compose
- Como adicionar o Firebase Authentication a um app do Jetpack Compose
- Como adicionar o Cloud Firestore a um app do Jetpack Compose
- Como adicionar corrotinas e fluxos a um app Android criado com o Firebase e o Compose
- Como adicionar o Monitoramento de desempenho do Firebase a um app do Jetpack Compose
- Como adicionar a Configuração remota do Firebase a um app do Jetpack Compose