02.12.2024

Aula 200: Projeto Final: Construindo um Aplicativo Completo em SwiftUI

Nesta aula, iremos construir um aplicativo completo em SwiftUI do zero. Este projeto integrará todos os conceitos que aprendemos até agora, permitindo-nos criar um aplicativo funcional com uma interface de usuário limpa. O aplicativo que construiremos é um simples gerenciador de tarefas (todo list) que permitirá aos usuários adicionar, deletar e marcar tarefas como concluídas.

Configuração do Projeto

Criando o Projeto

1. Abra o Xcode e crie um novo projeto.
2. Selecione o modelo "App" na seção iOS.
3. Nomeie seu projeto como "TodoListApp", defina a interface para SwiftUI e o ciclo de vida para SwiftUI App.

Estrutura do Projeto

Depois que seu projeto for criado, você verá a seguinte estrutura no navegador de projetos do Xcode:

TodoListApp/
├── TodoListAppApp.swift
└── ContentView.swift

Construindo o Modelo

Criando o Modelo Todo

Primeiro, precisamos criar um modelo para representar um item da lista. Crie um novo arquivo Swift chamado Todo.swift e defina a estrutura Todo:

import Foundation

struct Todo: Identifiable {
    var id = UUID()
    var title: String
    var isCompleted: Bool = false
}

Gerenciando os Todos

Em seguida, vamos criar uma classe TodoManager para gerenciar nossa lista de tarefas. Crie um novo arquivo Swift chamado TodoManager.swift:

import Foundation

class TodoManager: ObservableObject {
    @Published var todos: [Todo] = []

    func add(todo: Todo) {
        todos.append(todo)
    }

    func remove(at offsets: IndexSet) {
        todos.remove(atOffsets: offsets)
    }

    func toggleCompletion(for todo: Todo) {
        if let index = todos.firstIndex(where: { $0.id == todo.id }) {
            todos[index].isCompleted.toggle()
        }
    }
}

Construindo a Interface de Usuário

Atualizando o ContentView

Agora, vamos construir a interface no ContentView.swift. Criaremos uma lista para exibir os todos, um campo de entrada para adicionar novos todos e botões para gerenciá-los.

import SwiftUI

struct ContentView: View {
    @StateObject private var todoManager = TodoManager()
    @State private var newTodoTitle: String = ""

    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    TextField("Nova Tarefa", text: $newTodoTitle)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    Button(action: addTodo) {
                        Text("Adicionar")
                    }
                    .disabled(newTodoTitle.isEmpty)
                }
                .padding()

                List {
                    ForEach(todoManager.todos) { todo in
                        HStack {
                            Button(action: {
                                todoManager.toggleCompletion(for: todo)
                            }) {
                                Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                            }
                            Text(todo.title)
                                .strikethrough(todo.isCompleted)
                        }
                    }
                    .onDelete(perform: todoManager.remove)
                }
            }
            .navigationTitle("Lista de Tarefas")
            .onAppear {
                // Carregar tarefas salvas, se houver
            }
        }
    }

    private func addTodo() {
        let newTodo = Todo(title: newTodoTitle)
        todoManager.add(todo: newTodo)
        newTodoTitle = "" // Limpar o campo de texto
    }
}

Aprimorando Sua Interface

Para aprimorar ainda mais o seu aplicativo, considere adicionar recursos como:

• Armazenamento persistente usando UserDefaults ou CoreData.
• Funcionalidade de edição para renomear tarefas existentes.
• Opções de filtragem para visualizar tarefas concluídas e pendentes.

Finalizando o Projeto

Executando Seu Aplicativo

Agora que configuramos tudo, execute seu aplicativo no simulador iOS ou em um dispositivo real. Você deve ser capaz de:

• Adicionar novos itens à lista de tarefas.
• Marcá-los como concluídos tocando sobre eles.
• Deletar tarefas usando um gesto de deslizar.

Conclusão

Nesta aula, construímos um aplicativo completo em SwiftUI que demonstra conceitos fundamentais como gerenciamento de dados, construção de interface de usuário e gerenciamento de estado usando SwiftUI. Você pode expandir este aplicativo básico adicionando mais recursos e melhorando o design.

Sinta-se à vontade para usar este projeto como um ponto de partida e personalizá-lo experimentando diferentes funcionalidades e designs de UI! Boa codificação!

Video

Navigation