Desvendando MVVM e Coordinator em SwiftUI: Construindo seu Próprio App de Meditação
Dominando MVVM e Coordinator em SwiftUI: Criando um Aplicativo de Meditação
Neste artigo, vamos abordar dois padrões de design muito utilizados no desenvolvimento de aplicativos em Swift: Model-View-ViewModel (MVVM) e Coordinator. Usaremos como exemplo a criação de um aplicativo de meditação.
Entendendo o MVVM
O MVVM é um padrão de arquitetura de software estrutural que permite uma separação clara entre a lógica de negócios da interface do usuário. Ele é composto por três partes principais:
- Model: Responsável pela lógica de negócios e pelo acesso aos dados.
- View: Representa a interface do usuário.
- ViewModel: Atua como uma ponte entre o Model e a View.
O que é o padrão Coordinator?
O padrão Coordinator é usado para lidar com o fluxo de navegação dentro do aplicativo. Em vez de ter a lógica de navegação espalhada pelas Views, o Coordinator centraliza tudo em um lugar.
Exemplo de código: Aplicativo de Meditação
Vamos começar definindo nossa Model. No nosso caso, teremos apenas uma classe SessaoMeditacao
.
struct SessaoMeditacao {
let id: UUID
let titulo: String
let duracao: Int // em minutos
}
Agora, vamos criar o ViewModel para gerenciar as sessões de meditação.
class SessaoViewModel: ObservableObject {
@Published var sessoes: [SessaoMeditacao] = []
func adicionarSessao(titulo: String, duracao: Int) {
let novaSessao = SessaoMeditacao(id: UUID(), titulo: titulo, duracao: duracao)
sessoes.append(novaSessao)
}
}
Em seguida, criaremos o Coordinator. No nosso exemplo, teremos duas telas: uma para listar as sessões de meditação e outra para adicionar uma nova sessão.
protocol Coordinator {
func start()
}
class MainCoordinator: Coordinator {
let window: UIWindow
init(window: UIWindow) {
self.window = window
}
func start() {
let viewModel = SessaoViewModel()
let view = ContentView(viewModel: viewModel)
let navigationView = NavigationView {
view
}
window.rootViewController = UIHostingController(rootView: navigationView)
window.makeKeyAndVisible()
}
}
Finalmente, vamos criar as Views.
struct ContentView: View {
@ObservedObject var viewModel: SessaoViewModel
var body: some View {
List(viewModel.sessoes, id: \.id) { sessao in
Text("\(sessao.titulo) - \(sessao.duracao) minutos")
}
NavigationLink(destination: AdicionarSessaoView(viewModel: viewModel)) {
Text("Adicionar Sessão")
}
}
}
struct AdicionarSessaoView: View {
@ObservedObject var viewModel: SessaoViewModel
@State var titulo: String = ""
@State var duracao: Int = 0
var body: some View {
Form {
TextField("Título", text: $titulo)
Stepper(value: $duracao, in: 1...120) {
Text("Duração: \(duracao) minutos")
}
Button(action: {
viewModel.adicionarSessao(titulo: titulo, duracao: duracao)
}) {
Text("Salvar")
}
}
}
}
No exemplo acima, usamos SwiftUI juntamente com MVVM e Coordinator para criar um aplicativo de meditação simples, onde podemos adicionar novas sessões de meditação. Utilizar estes padrões de design no desenvolvimento de aplicativos em Swift pode nos ajudar a manter o código limpo e fácil de manter, além de facilitar a testabilidade do código.