Sempre fiz posts sobre o desenvolvimento web, mas agora comecei uma nova fase como desenvolvedor mobile na Stone Co. Por isso, decidi compartilhar um pouco do que estou aprendendo nessa área.
Esse é o primeiro post de uma série voltada para desenvolvimento mobile, principalmente com Kotlin Multiplatform (KMP). E pra começar com o pé direito, vou falar sobre um assunto essencial: a principal arquitetura usada no desenvolvimento de aplicativos.
O que é a arquitetura MVVM?
Imagine que você está construindo uma casa de brinquedos. Para que tudo funcione bem, você precisa de três partes trabalhando juntas:
- Os brinquedos e os móveis (Model): Eles ficam guardados no armário. São os dados da casa, como os nomes dos brinquedos e onde eles estão.
- Um ajudante organizado (ViewModel): Ele sabe onde estão todos os brinquedos no armário e pode pegá-los para você. Além disso, ele arruma tudo antes de entregar, para que seja fácil de entender.
- Um contador de histórias (View): Ele mostra os brinquedos para você e conta o que cada um faz. É a parte da casa com a qual você interage diretamente.
Essa é a ideia principal da arquitetura MVVM: cada parte tem seu trabalho bem definido. O Model cuida dos dados, o ViewModel organiza e conecta, e a View é onde a mágica acontece, mostrando tudo para quem está brincando.
Por que isso é importante? Porque, assim como em uma casa bem organizada, cada parte do MVVM sabe o que fazer e não se atrapalha. E quando você usa Kotlin Multiplatform, pode construir essa casa tanto para crianças que brincam no Android quanto para as que usam iOS, sem precisar criar tudo do zero para cada um!
Agora vamos descobrir como montar uma casa de brinquedos usando MVVM no Kotlin Multiplatform.
Mas antes, por que usar MVVM no Kotlin Multiplatform?
No Kotlin Multiplatform (KMP), você pode escrever um único pedaço de código que funciona tanto em Android quanto em iOS.
Imagine que sua lojinha agora tem duas filiais: uma em um bairro (Android) e outra em outro bairro (iOS). Você quer que ambas usem os mesmos dados (Model) e tenham a mesma organização (ViewModel), mas cada filial pode ter uma fachada diferente (View).
Com MVVM, você consegue:- Reutilizar código: O Model e o ViewModel podem ser compartilhados entre Android e iOS.
- Manter organização: Cada parte do código tem sua responsabilidade.
- Facilitar testes: Você pode testar o ViewModel e o Model sem depender da interface gráfica.
Como funciona o MVVM na prática?
Vamos construir uma aplicação simples que mostra uma lista de brinquedos usando MVVM no Kotlin Multiplatform.
Model (Os dados)
O Model é onde os dados vivem. Aqui, criamos uma classe que representa os brinquedos:
1data class Toy(val name: String, val price: Double)E criamos uma função que retorna uma lista de brinquedos:
1class ToyRepository {
2 fun getToys(): List<Toy> {
3 return listOf(
4 Toy("Carrinho", 29.99),
5 Toy("Boneca", 39.99),
6 Toy("Quebra-cabeça", 19.99)
7 )
8 }
9}ViewModel (O gerente)
O ViewModel conecta o Model à View. Ele pede os dados do Model e organiza para a View:
1import kotlinx.coroutines.flow.MutableStateFlow
2import kotlinx.coroutines.flow.StateFlow
3
4class ToyViewModel(private val repository: ToyRepository) {
5 private val _toys = MutableStateFlow<List<Toy>>(emptyList())
6 val toys: StateFlow<List<Toy>> get() = _toys
7 fun loadToys() {
8 _toys.value = repository.getToys()
9 }
10}View (O atendente)
A View é a interface do usuário. Em Android, por exemplo, usamos o Jetpack Compose:
1import androidx.compose.runtime.Composable
2import androidx.compose.runtime.collectAsState
3import androidx.compose.runtime.getValue
4
5@Composable
6fun ToyListScreen(viewModel: ToyViewModel) {
7 val toys by viewModel.toys.collectAsState()
8 // Mostra a lista de brinquedos
9 LazyColumn {
10 items(toys) { toy ->
11 Text("Nome: toy.name, Preço: R$ toy.price")
12 }
13 }
14}Para iOS, você pode usar SwiftUI conectando o mesmo ViewModel através de uma camada de integração do KMP.
A mágica da sincronização
O que torna o MVVM incrível é como ele facilita a atualização da interface do usuário. Quando algo muda no Model (por exemplo, um novo brinquedo é adicionado), o ViewModel informa a View automaticamente, e a tela é atualizada sem que você precise fazer nada extra.
Bom, é isso, espero que tenha gostado!