25.11.2024

Aula 138: ReactiveSwift e SwiftUI

Nesta aula, vamos explorar como usar ReactiveSwift com SwiftUI para criar uma aplicação reativa. O ReactiveSwift é um framework poderoso que permite a programação reativa funcional em Swift. Combiná-lo com SwiftUI nos permite criar interfaces de usuário dinâmicas e responsivas.

Começando

Antes de começarmos a codificar, certifique-se de que você adicionou ReactiveSwift e ReactiveCocoa ao seu projeto. Você pode fazer isso incluindo o seguinte em seu Package.swift, se estiver usando o Swift Package Manager:

dependencies: [
    .package(url: "https://github.com/ReactiveCocoa/ReactiveSwift.git", from: "6.0.0"),
    .package(url: "https://github.com/ReactiveCocoa/ReactiveCocoa.git", from: "6.0.0")
]

Conceitos Básicos

O ReactiveSwift permite que você crie sinais que emitem valores ao longo do tempo. Usaremos Signal e SignalProducer para lidar com eventos assíncronos e vinculá-los às nossas views SwiftUI.

Criando uma View Reativa Simples

Vamos criar um aplicativo SwiftUI simples para demonstrar o poder do ReactiveSwift. Nossa aplicação terá um campo de texto onde os usuários podem digitar seus nomes e um botão para cumprimentá-los.

Passo 1: Criar o View Model

Primeiro, precisamos de um View Model para gerenciar nossa lógica de negócios usando ReactiveSwift.

import ReactiveSwift
import SwiftUI

class GreetingViewModel: ObservableObject {
    @Published var name: String = ""
    @Published var greeting: String = "Olá, Mundo!"

    private var (greetingSignal, greetingObserver) = Signal<String, Never>.pipe()

    init() {
        // Observar mudanças na propriedade name
        self.$name
            .combineLatest(greetingSignal)
            .map { name, _ in
                name.isEmpty ? "Olá, Mundo!" : "Olá, \(name)!"
            }
            .observeValues { [weak self] greeting in
                self?.greeting = greeting
            }
    }

    func greet() {
        greetingObserver.send(value: name)
    }
}

Passo 2: Criar a View SwiftUI

Agora podemos criar uma view SwiftUI que usa nosso GreetingViewModel.

struct ContentView: View {
    @StateObject private var viewModel = GreetingViewModel()

    var body: some View {
        VStack {
            TextField("Digite seu nome", text: $viewModel.name)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button(action: {
                viewModel.greet()
            }) {
                Text("Cumprimentar")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }

            Text(viewModel.greeting)
                .padding()
        }
        .padding()
    }
}

Passo 3: Configurar o App

Por último, precisamos configurar o ponto de entrada do nosso aplicativo SwiftUI.

@main
struct ReactiveSwiftSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Explicação do Código

1. ViewModel:

   • A classe GreetingViewModel conforma-se ao protocolo ObservableObject para que o SwiftUI possa observá-la em busca de alterações.
   • As propriedades name e greeting são definidas como @Published, o que significa que o SwiftUI atualizará automaticamente a UI quando elas mudarem.
   • Criamos um Signal e um SignalObserver para ouvir alterações no nome e atualizar a saudação de acordo.

2. View SwiftUI:

   • Na ContentView, criamos um campo de texto para a entrada do usuário e um botão para acionar a saudação.
   • O Button utiliza a função greet do view model, que atualiza a mensagem de saudação.

Conclusão

Nesta aula, combinamos o poder do ReactiveSwift com SwiftUI para construir uma aplicação reativa simples. Definimos um view model que reage à entrada do usuário e atualiza a interface do usuário de forma suave. Isso é apenas o começo; o ReactiveSwift oferece muitos recursos poderosos que podem ajudar a gerenciar estados complexos e eventos assíncronos.

Sinta-se à vontade para explorar mais e aprimorar o exemplo com funcionalidades adicionais, como validação de entrada ou observáveis mais complexos!

Navigation