Lição: 120: Implementando a Arquitetura MVVM no SwiftUI
Nesta aula, exploraremos o padrão de arquitetura MVVM (Model-View-ViewModel) e como implementá-lo em um aplicativo SwiftUI. MVVM é um padrão de design que separa a interface do usuário (View) da lógica de negócios (Model) através de um ViewModel, facilitando um código mais gerenciável e testável.
O que é MVVM?
- Model: Representa os dados e a lógica de negócios do aplicativo.
- View: A interface do usuário que exibe os dados.
- ViewModel: Serve como um intermediário entre o Model e a View, transformando os dados do Model em um formato que pode ser facilmente consumido pela View.
Configurando o Projeto
Primeiro, crie um novo projeto SwiftUI no Xcode. Você pode fazer isso selecionando "Novo Projeto" e escolhendo "App" na aba iOS.
Passo 1: Criar o Model
Vamos começar criando um Model simples. Para este exemplo, criaremos um model Pessoa
.
import Foundation
struct Pessoa: Identifiable {
let id: UUID = UUID()
let nome: String
let idade: Int
}
Passo 2: Criar o ViewModel
Em seguida, criaremos um PessoaViewModel
que conterá um array de objetos Pessoa
e fornecerá métodos para manipular ou recuperar esses dados.
import Foundation
import Combine
class PessoaViewModel: ObservableObject {
@Published var pessoas: [Pessoa] = []
init() {
buscarPessoas()
}
func buscarPessoas() {
// Simular a recuperação de dados da rede
pessoas = [
Pessoa(nome: "João Silva", idade: 30),
Pessoa(nome: "Maria Souza", idade: 25),
Pessoa(nome: "Emilly Oliveira", idade: 20)
]
}
}
Passo 3: Criar a View
Agora vamos criar a View que exibirá as pessoas. Utilizaremos o wrapper de propriedade @ObservedObject
para observar as mudanças no PessoaViewModel
.
import SwiftUI
struct ContentView: View {
@ObservedObject var viewModel = PessoaViewModel()
var body: some View {
NavigationView {
List(viewModel.pessoas) { pessoa in
VStack(alignment: .leading) {
Text(pessoa.nome)
.font(.headline)
Text("Idade: \(pessoa.idade)")
.font(.subheadline)
}
}
.navigationTitle("Pessoas")
}
}
}
Passo 4: Atualizar o Ponto de Entrada do App
Por fim, certifique-se de que sua ContentView
esteja definida como o ponto de entrada do seu aplicativo na estrutura App
.
import SwiftUI
@main
struct MVVMDemoApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Conclusão
Nesta aula, implementamos com sucesso a arquitetura MVVM em um aplicativo SwiftUI. O Model
(Pessoa
), ViewModel
(PessoaViewModel
) e View
(ContentView
) estão claramente separados, tornando o código mais fácil de manter e testar.
Pontos-Chave
- Separação de Responsabilidades: O padrão MVVM mantém o código da interface limpa, separando a lógica de negócios da camada de apresentação.
- Programação Reativa: O uso de
@Published
e@ObservedObject
permite que a View atualize reativamente quando os dados mudam. - Escalabilidade: O MVVM facilita a expansão do aplicativo, pois você pode adicionar mais recursos sem prejudicar a funcionalidade existente.
Sinta-se à vontade para experimentar o código fornecido, adicionando mais recursos, como adicionar uma nova pessoa ou editar as existentes! Boas codificações!