SportData VPN Test Task

Как запустить проект

Через Xcode

1. Откройте файл SportData-VPN-Test-Task.xcodeproj.
2. Выберите схему SportData-VPN-Test-Task.
3. В качестве destination выберите My Mac.
4. Нажмите Run (Cmd + R).

Через терминал

xcodebuild -project "SportData-VPN-Test-Task.xcodeproj" \
  -scheme "SportData-VPN-Test-Task" \
  -derivedDataPath /tmp/SportDataVPNDerivedData \
  CODE_SIGNING_ALLOWED=NO build

Какие проблемы UI были исправлены

В качестве исходной точки был использован визуальный макет с большим круглым CONNECT, списком серверов слева, картой мира и нижними кнопками Settings / Help. После анализа макета и текущего приложения были исправлены следующие UI-проблемы:

• Исходный экран выглядел как статичный концепт, а не как нативное macOS-приложение.
• В верхней части макета одновременно показывались Not Connected и Loading..., что создавало противоречивый сигнал о состоянии.
• Декоративная карта мира занимала заметную площадь, но не помогала пользователю выполнить основное действие.
• Огромная кнопка подключения визуально доминировала над всем экраном и ослабляла иерархию интерфейса.
• Список серверов в макете выглядел как набор одинаковых кнопок без нативного поведения и без явного контекста выбранного элемента.
• Кнопки Settings и Help были вынесены в нижнюю часть экрана и конкурировали за внимание с основным сценарием.

В текущем проекте эти проблемы решены так:

• Интерфейс построен на NavigationSplitView, что соответствует паттернам macOS.
• Выбор сервера вынесен в отдельный sidebar, а управление соединением и статус — в detail-область.
• Состояние подключения отображается в отдельной status card с цветовым индикатором и информацией о выбранном сервере.
• Основное действие сведено к одной понятной кнопке Connect / Disconnect.
• Вторичные действия Help и Settings перенесены в toolbar и не мешают основному сценарию.
• Во время подключения список серверов блокируется, чтобы исключить конфликт действий.

Какие UX-решения были приняты

• Основной пользовательский сценарий сделан линейным и понятным: выбрать сервер слева, увидеть статус справа, затем подключиться.
• Текущий сервер всегда виден рядом со статусом, поэтому пользователь понимает, к какой стране относится соединение.
• Текст и иконка основной кнопки меняются в зависимости от состояния (Connect, Connecting…, Disconnect), чтобы действие было очевидным.
• При смене сервера в активном соединении выполняется контролируемое переподключение, а не мгновенное и непредсказуемое переключение.
• Для второстепенных действий используются нативные элементы macOS toolbar, чтобы интерфейс выглядел привычно и не перегружал экран.
• Визуальная структура экрана разделяет навигацию и действие: слева выбор, справа управление. Это снижает когнитивную нагрузку и делает сценарий быстрее для первого использования.
• Логика состояний вынесена во VPNViewModel, поэтому поведение интерфейса остается предсказуемым и легко расширяется.

Структура проекта

• SportData-VPN-Test-Task/Views/VPNView.swift — основной экран приложения.
• SportData-VPN-Test-Task/ViewModels/VPNViewModel.swift — логика подключения и переключения серверов.
• SportData-VPN-Test-Task/Models/VPNConnectionState.swift — описание состояний подключения.
• SportData-VPN-Test-Task/Models/VPNServer.swift — модель сервера и список доступных стран.
• SportData-VPN-Test-Task/SportData_VPN_Test_TaskApp.swift — точка входа в приложение.