overview

desenvolvi o cosmodex em cinco dias durante um desafio de fundamentos de UIKit na Apple Developer Academy. o projeto foi uma oportunidade de aprender UIKit de forma programática, evitando o uso de Storyboards, e de compreender os fundamentos do posicionamento de elementos na tela, navegação entre Views e manipulação de dados básicos (neste caso, a pontuação do quiz).

como adoro tudo relacionado à astronomia, tive a ideia de criar um jogo de trivia simples com a temática do universo. ele adere estritamente à arquitetura MVC, garantindo que todo o layout e gerenciamento do ciclo de vida das Views fossem tratados explicitamente via código.

o cosmodex me ajudou a aprender muito sobre o uso de Auto Layout para construir telas responsivas programaticamente. foi também uma ótima oportunidade para aprimorar minhas habilidades na separação da lógica da interface do usuário, o que pode ser desafiador às vezes. além disso, foi uma maneira de explorar alguns princípios de design imersivo, como a implementação de microinterações (como a pequena animação dos botões ao iniciar) e feedback háptico para realçar a estética do tema escuro.

adorei usar o Icon Composer para criar o ícone — você notou que as estrelinhas e galáxias no ícone são todas caracteres ASCII? 😄

design choices

palette

matter #1C1C1C
lunar #4A4A4A
beam #FFFFFF
radar #108900
redshift #9C0000

typography

SF Pro Display / legibilidade moderna
Zebras jogam xadrez com o velho faquir

some fonts used in this project are proprietary and may not display correctly if they are not installed on your system.

rationale

considerando a natureza do cosmodex como um exercício dos conceitos básicos de UIKit e também a temática escolhida - um quiz sobre o universo - optei por um design minimalista e escuro. isso não apenas complementa o tema espacial, mas tornou o processo de design bastante simples e efetivo.

a paleta de cores é composta por preto, branco e um cinza intermediário, com verde e vermelho para indicar respostas corretas e incorretas, respectivamente. a tipografia escolhida, SF Pro Display, é limpa e moderna, além de ser nativa das plataformas Apple, garantindo facilidade de uso e legibilidade.

tech stack

UIKit
UI programática
MVC
arquitetura
Auto Layout
design responsivo
Icon Composer
criação de assets

code snippets

Implementação da ExplanationViewController

swift
class ExplanationViewController: UIViewController {
    
    var explanationView = ExplanationView()
    
    var feedbackText: String = ""
    var explanationText: String = ""
    var onNext: (() -> Void)?
    
    override func loadView(){
        self.view = explanationView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        explanationView.setFeedback(feedbackText)
        explanationView.setExplanation(explanationText)
        explanationView.nextButton.addTarget(self, action: #selector(nextTapped), for: .touchUpInside)
    }
    
    @objc func nextTapped() {
        triggerHapticFeedback()
        onNext?()
    }
}

Modelo de dados do quiz

swift
struct Question {
    let text: String
    let answer: Bool
    let explanation: String
}

class QuizManager {
    private let questions: [Question] = [
        Question(text: "...", answer: true, explanation: "..."),
        Question(text: "...", answer: false, explanation: "..."),
        Question(text: "...", answer: true, explanation: "..."),
        Question(text: "...", answer: true, explanation: "..."),
        Question(text: "...", answer: true, explanation: "..."),
        Question(text: "...", answer: false, explanation: "..."),
        Question(text: "...", answer: false, explanation: "..."),
        Question(text: "...", answer: false, explanation: "..."),
        Question(text: "...", answer: false, explanation: "...")
    ]
    
    var totalQuestions: Int {
        return questions.count
    }
    
    func getQuestion(at index: Int) -> Question? {
        guard index >= 0 && index < questions.count else { return nil }
        return questions[index]
    }
}

credits

people

design · role.desenvolvimento
pedro wiezel