24.11.2024

Aula 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?

1. Model: Representa os dados e a lógica de negócios do aplicativo.
2. View: A interface do usuário que exibe os dados.
3. 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!

Video

Navigation