# Перша зміна в браузері і як її відкотити через revert

> Невелика зміна повністю у вебінтерфейсі GitHub: знайти файл, відредагувати його у вебредакторі GitHub, закомітити в нову гілку, бо main захищена, відкрити pull request, пройти перевірки й рев'ю, змерджити й викласти. А потім зробити git revert змердженої зміни кнопкою Revert на GitHub, розібратися, коли відкочувати, а коли виправляти вперед, і що продакту варто й не варто редагувати самостійно.

- Курс: [Git і GitHub для продактів](https://productovi.com/uk/courses/git-for-product.md)
- Модуль: GitHub у продуктовій роботі
- Урок 15/15, ~41 хв
- Джерело: https://productovi.com/uk/courses/git-for-product/first-change-in-the-browser

## Знову той одрук

**Alex Tutor:** Середа четвертого тижня, і в твоєї продуктової команди в Котокормі знайома проблема. Підтримка втретє пересилає ту саму нотатку від клієнта: на сторінці доставки написано, що кур'єри телефонують «30 minutes before arival».

**Sofia:** У першому модулі мені ще пояснювали, що таке коміт. А сьогодні хочу виправити це власноруч.

**Daniel:** Будь ласка. Це текст на сторінці, а тексти сторінок належать тобі й Emma. Я перегляну це, як будь-який інший pull request, а якщо щось піде не так, кнопка Revert на GitHub усе відкотить.

**Alex Tutor:** Перш ніж клікати, визначимо межу. Продакт може спокійно редагувати тексти й документацію: тексти сторінок у файлах `.md`, FAQ, README, шаблони issues. І все це однаково проходить через pull request.

![Продакт-менеджерка впорядковує вітрину крамниці, а за задніми дверима зі значком шестерні інженери працюють біля механізмів.](https://productovi.com/courses/git-for-product/inline/first-change-in-the-browser-illustration-2.webp)

**Daniel:** Код і конфігурація лишаються за інженерами: файли `.tsx`, `config/prices.json`, усе в `.github/workflows/`. Одна пропущена кома в конфігураційному файлі може зупинити збирання всього сайту.

![Продакт редагує тексти сторінок, FAQ, README і шаблони issues через pull request; код і конфігурація лишаються за інженерами.](https://productovi.com/courses/git-for-product/diagrams/m5-l3-pm-edit-boundary-uk.png)

**Sofia:** Навіть попри те, що ціна в `config/prices.json` це просто число?

**Daniel:** Навіть тоді. Код читає це число під час оформлення. Попроси про зміну, і я зроблю її з тестами й рев'ю від Oscar, як поріг у #133.

> **Вправа:** Які з цих змін Sofia, продакт-менеджерка Котокорму, може зробити власноруч у браузері, через pull request? Познач усе, що підходить.

## Знайди файл і відкрий вебредактор GitHub

**Alex Tutor:** Почни зі сторінки репозиторію, вкладка `Code`. Відкрий папку `pages`, а в ній `delivery.md`. Або натисни `t` і набери «delivery», щоб шукати за назвою файлу.

**Sofia:** Є. Рядок 15: «Couriers call 30 minutes before arival.» А перемикач гілок над файлом показує `main`.

**Alex Tutor:** Угорі праворуч над файлом є іконка олівця, `Edit this file` («редагувати цей файл») станом на 2026 рік. Вона відкриває вебредактор GitHub просто в браузері.

**Daniel:** Поки друкуєш, нічого не зберігається й нічого не може зламатися. Доки немає коміту, редактор це лише чернетка у вкладці твого браузера.

**Alex Tutor:** Виправ слово, а тоді відкрий вкладку `Preview` («попередній перегляд»), щоб побачити текст таким, як він виглядатиме на сторінці, а не сирим Markdown.

> **Правка в `pages/delivery.md`**
>
> ```diff
>  Couriers deliver within one day in Kyiv.
> -Couriers call 30 minutes before arival.
> +Couriers call 30 minutes before arrival.
> ```
> Змінилося одне слово, тож Git показує весь рядок двічі: стару версію видалено, нову додано.

> **Вправа:** Натискання іконки олівця на файлі в `main` одразу створює нову гілку, і кожне натискання клавіші в неї зберігається.

## Commit changes…

**Alex Tutor:** Тепер зелена кнопка `Commit changes…` («закомітити зміни»). Відкривається вікно з повідомленням коміту, необов'язковим розширеним описом і вибором, куди піде коміт.

**Sofia:** У полі повідомлення вже написано «Update delivery.md».

**Daniel:** Це стандартний текст GitHub. Правдивий і марний в історії з двох тисяч комітів. Напиши, що змінилося: «Fix typo in courier note».

**Alex Tutor:** Тепер вибір. «Commit directly to the `main` branch» («закомітити просто в main») тобі недоступне: захист гілки пускає зміни в `main` лише через pull requests. Тож обирай «Create a new branch for this commit and start a pull request» («створити нову гілку для цього коміту й почати pull request»).

**Daniel:** GitHub пропонує назву на кшталт `catchow-sofia-patch-1`. Вона працюватиме, але перейменуй за нашою звичкою: `content/delivery-typo`.

**Sofia:** Далі `Propose changes` («запропонувати зміни»). Коміт потрапляє в нову гілку, а `main` зовсім не змінилася.

> **Вправа:** Чому коміт Sofia йде в нову гілку, а не просто в `main`?

**Alex Tutor:** Тепер увесь діалог разом. Яку комбінацію Daniel буде радий побачити?

> **Вправа:** Діалог `Commit changes…` відкрито для виправлення одруку в репозиторії Котокорму. Яка комбінація правильна?

## Власний pull request

**Alex Tutor:** `Propose changes` веде на сторінку «Open a pull request»: base `main`, compare `content/delivery-typo`. Назва береться з повідомлення коміту, а опис пишеш ти.

**Sofia:** What: виправлено «arival» на сторінці доставки. Why: підтримка пересилала це тричі. How to test: відкрити preview й прочитати рядок про кур'єрів. Рев'юер: Daniel.

**Alex Tutor:** Потім `Create pull request`. Це #168, і перевірки стартують одразу: `build`, `test` і `preview` з власним посиланням.

**Daniel:** До речі, схвалити власний pull request не вийде. GitHub не дає авторам схвалювати свої зміни, тож наше «одне схвалення» завжди означає, що подивився хтось інший.

**Alex Tutor:** Поки йдуть перевірки, Emma помічає pull request і просить додати ще один рядок під нотаткою про кур'єрів: «Earn loyalty points on every order and spend them at checkout.»

**Sofia:** Той самий файл, та сама гілка. Відкриваю `delivery.md` у `content/delivery-typo`, додаю її рядок і комічу просто в цю гілку: «Mention loyalty points on delivery page».

**Daniel:** Нова назва, «Fix courier typo and mention loyalty points». Перевірки зелені, у preview усе читається добре. Схвалено.

**Alex Tutor:** Ти натискаєш `Squash and merge`: один коміт у `main`, гілку видалено, а деплой завершується за чотири хвилини.

```text
Pull request #168, середа, 11:20
- [Merged] Fix courier typo and mention loyalty points #168: Злито в main через squash · мердж: Sofia · гілку content/delivery-typo видалено
- [Approved] Daniel: Схвалено
- [All checks have passed] build
- [All checks have passed] test
- [All checks have passed] preview
- [All checks have passed] deploy (production): Завершився за чотири хвилини після мерджу
```

> **Вправа:** Розстав по порядку кроки зміни, зробленої в браузері: від відкриття файлу до живої сторінки.

## Через десять хвилин

**Sofia:** Знову підтримка. Клієнтка прочитала новий рядок і питає, де знайти свої бали. А знайти їх неможливо: для клієнтів бали лояльності досі вимкнені.

**Alex Tutor:** Сторінка програми від Emma схована за флагом `loyalty-points`; Daniel вбудував цю перевірку в #157. А речення в `pages/delivery.md` жодного флагу навколо не має. Змерджено й викладено означає показано.

**Daniel:** Та сама помилка, що з моїм посиланням у меню перед `v1.4.1`: фічу приховали, а один вхід до неї ні. І на рев'ю я цього теж не помітив.

**Sofia:** Тобто ми анонсуємо бали лояльності за шість днів до запуску. Як це забрати назад?

> **Вправа:** Рядок Emma про бали лояльності потрапив у виправлення одруку #168 і разом із ним був змерджений і викладений. Чому клієнти бачать цей рядок на сторінці доставки, хоча флаг `loyalty-points` вимкнений?

## Як зробити revert pull request на GitHub

**Alex Tutor:** Відкрий #168. Унизу вкладки `Conversation`, поруч із позначкою, що його змерджено, є кнопка `Revert` (станом на 2026 рік).

**Alex Tutor:** **Revert** (відкат) нічого не видаляє: це новий коміт, який робить рівно протилежне до вже змердженого. GitHub створює нову гілку `revert-168-content/delivery-typo` з одним комітом, що скасовує #168, і готує для неї pull request.

![Слід лап іде стежкою вперед, а другий слід повертається до попереднього місця; усі відбитки обох слідів досі видно.](https://productovi.com/courses/git-for-product/inline/first-change-in-the-browser-illustration-3.webp)

*Revert нічого не видаляє: це новий коміт, що скасовує старий.*

**Daniel:** Це #169, і для нього діють ті самі правила, що й для будь-якого pull request: перевірки й одне схвалення. Скасування зміни це теж зміна. Вже дивлюся.

**Sofia:** Схвалено, перевірки зелені, злито через squash, викладено. Рядка про лояльність немає. А разом із ним і мого виправлення: «arival» повернулося.

**Alex Tutor:** Бо #168 став одним squash-комітом з обома змінами, а revert скасовує коміт цілком. Історія зберігає все: твій коміт, revert і хто що зробив.

```text
Граф комітів, від найстарішого: Зміна та її revert у main
1. коміт c3f7a05 у main "Show points balance in the account (#166)", тег v1.5.0
2. коміт 8d2b6e9 у main "Write loyalty programme page (#157)"
3. гілка content/delivery-typo починається від коміту 8d2b6e9
4. коміт 5e9a1b4 у content/delivery-typo "Fix typo in courier note"
5. коміт 1a7c4f2 у content/delivery-typo "Mention loyalty points on delivery page"
6. коміт f3c8d21: content/delivery-typo змерджено в main через squash "Fix courier typo and mention loyalty points (#168)"
7. гілка revert-168-content/delivery-typo починається від коміту f3c8d21
8. коміт a6b0e53 у revert-168-content/delivery-typo "Revert "Fix courier typo and mention loyalty points""
9. коміт d7e2f48: revert-168-content/delivery-typo змерджено в main через squash "Revert "Fix courier typo and mention loyalty points" (#169)" (виділено)
```

*Нічого не зникає: revert це новий коміт, який скасовує f3c8d21. Обидва лишаються в історії, а #168 і далі показує Merged.*

> **Вправа:** Кожен коміт у цій `main` уже викладено. Які зміни зараз на сайті?

## Revert чи виправлення вперед?

**Sofia:** А хіба не можна було просто видалити рядок про лояльність новим pull request?

**Alex Tutor:** Можна: це **виправлення вперед** (fix forward), нова зміна, яка виправляє проблему. Вона зберегла б твоє виправлення одруку. Обидва шляхи нормальні; питання в тому, який швидше й безпечніше поверне сайт до ладу.

**Daniel:** Revert, коли на живому сайті щось не так і треба просто зараз повернути останню версію, яка точно працювала, особливо коли правильне виправлення ще не очевидне. Виправляй уперед, коли виправлення крихітне й зрозуміле або коли revert забрав би з собою добрі зміни.

![Revert одразу повертає останню робочу версію, коли виправлення неочевидне; виправляй уперед, коли воно крихітне й зрозуміле або revert забрав би добрі зміни.](https://productovi.com/courses/git-for-product/diagrams/m5-l3-revert-or-fix-forward-uk.png)

![Там, де дорога розходиться, один шлях повертає до знайомого безпечного будинку, а інший веде вперед до бригади, що латає вибоїну.](https://productovi.com/courses/git-for-product/inline/first-change-in-the-browser-illustration-4.webp)

**Alex Tutor:** І кнопка спрацьовує не завжди. Якщо пізніші зміни зачепили ті самі рядки, GitHub не зможе сам зібрати revert, і його робить інженер вручну.

**Daniel:** А ще revert коду не скасовує того, що вже сталося. Якщо через баг клієнти отримали неправильні бали, revert зупинить нові, але виправлення їхніх балансів потребує плану, а не кнопки.

**Sofia:** Тут рядок був обіцянкою, яку ми ще не можемо виконати, а одрук ще годину нікому не зашкодить. Почати з revert було нормально.

> **Вправа:** Зістав кожну ситуацію після мерджу з кращим способом її виправити.

## Одна зміна, один pull request

**Sofia:** Тоді #170: гілка `content/courier-typo`, один коміт «Fix typo in courier note», така сама назва. Лише одрук.

**Daniel:** Схвалено. А рядок про лояльність отримає окремий pull request, готовий до мерджу 10 листопада, того ранку, коли флаг увімкнуть для всіх.

**Alex Tutor:** Повернімося в середу вранці, коли Emma попросила про свій рядок. Який вибір полегшив би сьогоднішній день?

> **Вправа:** Повернімося в середу вранці: твоє виправлення одруку #168 на рев'ю, коли Emma просить додати рядок про лояльність на ту саму сторінку. Який вибір зробив би зміну **легкою для скасування**?

**Alex Tutor:** І ще одне: Emma варто знати, чому її рядок зник. Вона попросила про нього з добрих намірів, і за шість днів захоче його повернути.

**Sofia:** Тоді два-три речення в командному чаті.

> **Вправа:** Напиши Emma повідомлення в чат у 2–3 реченнях: чому її рядок про лояльність прибрали зі сторінки доставки, що зараз на сайті, і коли та як рядок повернеться. Запуск (флаг для всіх клієнтів) 10 листопада.

## Власна зміна від початку до кінця

**Alex Tutor:** Якщо хочеш потренуватися, створи особистий репозиторій для практики або пройди безплатний курс GitHub Skills «Introduction to GitHub». Жоден клік там не дістанеться до справжнього сайту.

**Sofia:** Тоді сьогодні ввечері. Ламати щось там, де ніхто не бачить, звучить заспокійливо.

**Daniel:** Усі вчаться, щось ламаючи. Хитрість у тому, щоб ламати в pull request, де це легко скасувати.

**Alex Tutor:** Тоді останнє завдання курсу: сплануй зміну так, як зробиш це в понеділок, від першого кліку до плану скасування.

> **Вправа:** Сплануй зміну для issue #175 від початку до кінця.

## День запуску

**Alex Tutor:** Вівторок, 10 листопада, 9:00. Флаг `loyalty-points` вмикають для всіх клієнтів, а за хвилину рядок Emma повертається на сторінку доставки окремим pull request. Ти закриваєш #147 як виконане.

**Sofia:** У першому модулі мені було страшно, що один хибний клік зламає весь магазин. Тепер я знаю, що клік може, а чого не може, і як усе повернути.

**Daniel:** І тепер у тебе є власна історія з revert. Ласкаво просимо в історію команди.

**Alex Tutor:** Ось і весь курс: історія й diff, гілки й мерджі, pull requests і рев'ю, стани, воркфлоу й релізи, issues і дошки, а тепер і власна зміна. Репозиторій більше не чорна скринька. Це спільна пам'ять команди, і ти теж можеш у ній писати.

**Alex Tutor:** Для випадків, коли термінал таки з'являється, тримай під рукою [шпаргалку з Git](/uk/tools/git-cheat-sheet#undo): команди за задачами, ризиковані позначено, і для кожної є шлях у GitHub.

- Попередній урок: [GitHub Projects: дошка проєкту від issue до релізу](https://productovi.com/uk/courses/git-for-product/project-boards.md)

---
Productovi Learning. Безкоштовно, читати можна без реєстрації.