GitHub Desktop: интерфейс для начинающих 🎨

Первый раз открыли GitHub Desktop и не знаете за что хвататься? Давайте разберём интерфейс по частям!

Главное окно: 4 зоны

┌──────────────────────────────────────────────┐
│ 1. Верхняя панель (репозиторий и ветка      │
├──────────────────────────────────────────────┤
│ 2. Табы        │ 3. Правая панель           │
│ Changes (3)    │ Diff (изменения)           │
│ History        │                             │
│                │                             │
│ Список файлов  │ Подробности изменений      │
│ -------------  │ ---------------------------│
│ 4. Зона коммита (Summary, Description)      │
└──────────────────────────────────────────────┘

Зона 1: Верхняя панель

Current Repository ▼

Показывает активный репозиторий.

Клик открывает список всех ваших репозиториев:
- Недавние (Recently Used)
- Все репозитории
- Кнопка Add для добавления нового

Current Branch ▼

Показывает текущую ветку (обычно main или master).

Клик показывает:
- Список веток
- Кнопка New Branch (создать ветку)
- Pull Requests (если есть)

Кнопки справа

1. Fetch origin — проверить обновления с GitHub
2. Pull origin — скачать изменения
3. Push origin — загрузить ваши коммиты

Зона 2: Табы (Changes & History)

Changes (Изменения)

Показывает что вы изменили:

✓ new_file.py          +45 строк
✓ edited_file.js       ~12 строк
✓ deleted_file.txt     -30 строк

Символы:
- + зелёный — файл добавлен
- ~ жёлтый — файл изменён
- - красный — файл удалён

Галочки — файлы, которые войдут в коммит.

History (История)

Показывает все коммиты:

Apr 10 | Add tests          (Вася Петров)
Apr 9  | Fix critical bug   (Маша Иванова)
Apr 8  | Initial commit     (You)

Клик на коммит показывает что было изменено.

Зона 3: Правая панель (Diff)

Показывает детали изменений:

В режиме Changes:

function calculatePrice(quantity) {
-  return quantity * 100;
+  return quantity * 120;  // Повысили цену
}

• Красные строки (- минус) — удалено
• Зелёные строки (+ плюс) — добавлено
• Белые строки — без изменений (контекст)

В режиме History:

Показывает какие файлы были изменены в выбранном коммите.

Зона 4: Commit (Создание коммита)

Две текстовых поля:

Summary (обязательное)

Краткое описание что сделано:

✅ Хорошие примеры:
- Add login form
- Fix navbar on mobile
- Update dependencies

❌ Плохие примеры:
- fix (что fix?)
- asdfsdf (бессмыслица)
- ппппп (непонятно)

Description (опциональное)

Подробное описание зачем и как:

Add login form

- Email validation
- Password strength check
- Remember me checkbox
- Forgot password link

Fixes #123

Кнопка Commit

Commit to main — создать коммит с выбранными файлами.

Меню Repository (Репозиторий)

Полезные команды:

Open in…

• Open in Visual Studio Code — открыть в редакторе
• Open in Terminal — открыть терминал
• Show in Explorer (Windows) / Show in Finder (Mac)

View on GitHub

Открывает репозиторий на GitHub.com в браузере.

Repository Settings

Настройки:
- Путь к репозиторию
- Remote (откуда clone)
- Ignored Files (.gitignore)

Create Pull Request

Создать Pull Request на GitHub.

Меню Branch (Ветки)

New Branch

Создать новую ветку от текущей:

1. Кликни Branch → New Branch
2. Введи название: feature/login-form
3. Нажми Create Branch

Merge into Current Branch

Слить другую ветку в текущую:

1. Branch → Merge into Current Branch
2. Выбери ветку для слияния
3. Нажми Merge

Rename

Переименовать текущую ветку.

Delete

Удалить ветку (только если слита или не нужна).

Горячие клавиши

Windows

• Ctrl+N — New Repository
• Ctrl+O — Add Local Repository
• Ctrl+Shift+F — Show in Explorer
• Ctrl+Shift+A — Open in Editor
• Ctrl+Shift+C — Open in Terminal
• Ctrl+1 — вкладка Changes
• Ctrl+2 — вкладка History
• Ctrl+Enter — Commit
• Ctrl+P — Push
• Ctrl+Shift+P — Pull

macOS

Те же, но Cmd вместо Ctrl.

Полезные индикаторы

Иконка синхронизации

В правом верхнем углу:

• ↑ 3 — у вас 3 непушенных коммита
• ↓ 5 — на GitHub есть 5 новых коммитов
• ↑ 2 ↓ 1 — 2 ваших, 1 удалённый

Номер возле Changes

Changes (15) — у вас 15 изменённых файлов.

Статус ветки

• Up to date — всё актуально
• Publish branch — ветка только локально
• Pull 3 — нужно подтянуть 3 коммита

Визуальные подсказки

Цвета файлов

• 🟢 Зелёный — новый файл
• 🟡 Жёлтый — изменённый файл
• 🔴 Красный — удалённый файл
• ⚪ Серый — игнорируемый (.gitignore)

Значки веток

• ✓ с галочкой — ветка на GitHub
• без галочки — только локально

Настройка внешнего редактора

1. File → Options (Windows) / Preferences (Mac)
2. Integrations → External Editor
3. Выбери из списка:
   - Visual Studio Code
   - Atom
   - Sublime Text
   - VS Code Insiders
   - И другие

Теперь Repository → Open in Editor откроет выбранный редактор!

Советы для новичков

✅ Часто делайте Fetch — проверяйте обновления
✅ Делайте маленькие коммиты — легче понять историю
✅ Пишите понятные Summary — вы сами скажете спасибо потом
✅ Используйте ветки — не бойтесь экспериментировать
✅ Смотрите Diff — понимайте что коммитите

Практика — лучший учитель! Открывайте проекты и экспериментируйте! 🚀