Лекція 1

Вступ

Вітаємо на першій лекції! У нульовій лекції ми представили HTML, CSS та Sass як інструменти, які ми можемо використовувати для створення базових вебсторінок. Сьогодні ми дізнаємось про використання Ґіт та ҐітХаб, які допоможуть нам у розробці вебзастосунків.

Ґіт

  • Ґіт – це інструмент командного рядка, який допоможе нам у контролі версій кількома різними способами:
    • Дозволяючи нам відстежувати зміни, які ми вносимо до нашого коду, зберігаючи знімки нашого коду в певний момент часу.

    Changing File

    • Дозволяючи нам легко синхронізувати код між різними людьми, що працюють над одним проєктом, надавши можливість кільком людям завантажувати інформацію з та вивантажувати інформацію до репозиторію, що зберігається в інтернеті.

    Multiple Users

    • Дозволяючи нам вносити зміни та випробовувати код у іншій гілці, не змінюючи основний код, а потім об’єднувати обидва.
    • Дозволяючи нам повернутися до попередніх версій нашого коду, якщо ми усвідомлюємо, що припустились помилки.
  • У наведених вище поясненнях ми використовували слово «репозиторій», яке ми ще не пояснили. Репозиторій Ґіт – це місцезнаходження файлів, де ми зберігатимемо всі файли, пов’язані з проєктом. Вони можуть бути віддаленими (зберігаються в інтернеті) або локальними (зберігаються на вашому комп’ютері).

ҐітХаб

  • ҐітХаб – це вебсайт, який дозволяє нам зберігати репозиторії Ґіт віддалено в інтернеті.
  • Почнемо зі створення нового репозиторію в інтернеті.
    1. Переконайтеся, що у вас є обліковий запис ҐітХаб. Якщо у вас його ще немає, ви можете зробити його за посиланням.
    2. Клацніть на + у верхньому правому куті, а потім натисніть «Новий репозиторій».
    3. Створіть ім’я репозиторію, яке описує ваш проєкт.
    4. (Необов’язково) Надайте опис вашого репозиторію.
    5. Виберіть, чи має репозиторій бути загальнодоступним (видимим для всіх в інтернеті) чи приватним (видимим лише для вас та інших, кому ви спеціально надаєте доступ).
    6. (Необов’язково) Вирішіть, чи хочете ви додати README – файл, що описує ваш новий репозиторій.

    New repo demo

  • Створивши репозиторій, ми, мабуть, захочемо додати до нього якісь файли. Для цього ми візьмемо наш нещодавно створений віддалений репозиторій та створимо його копію або клон як локальний репозиторій на нашому комп’ютері.
    1. Переконайтесь, що на вашому комп’ютері встановлено Ґіт, для цього введіть git у термінал. Якщо він не встановлений, ви можете завантажити його за посиланням.

    2. Натисніть зелену кнопку «Клонувати або завантажити» на сторінці репозиторію та скопіюйте URL-адресу зі спливаючого вікна. Якщо ви не створили README, це посилання з’явиться вгорі сторінки в розділі «Швидке налаштування».

      clone and add

    3. У своєму терміналі запустіть git clone <url репозиторію>. Це завантажить репозиторій на ваш комп’ютер. Якщо ви не створили README, ви отримаєте попередження: Схоже, ви клонували у порожнє сховище. Це нормально, не варто переживати.

      clone demo

    4. Введіть ls – це команда, яка перераховує всі файли та папки у вашому поточному каталозі. Ви повинні побачити назву репозиторію, який ви щойно клонували.
    5. Введіть cd <ім'я репозиторію>, щоб перейти до цієї папки.
    6. Введіть touch <нове ім'я файлу>, щоб створити новий файл у цій папці. Тепер ви можете редагувати цей файл. Крім того, ви можете відкрити папку в текстовому редакторі та вручну додати нові файли.

    7. Тепер, щоб повідомити Ґіт, що він повинен відстежувати новий файл, який ви створили, введіть git add <нове ім'я файлу>, щоб відстежувати цей конкретний файл, або git add . для відстеження всіх файлів у цьому каталозі.

      -am same time

Коміти

  • Тепер ми розберемося для чого Ґіт може бути справді корисним. Після внесення деяких змін до файлу, ми можемо подати або закомітити ці зміни, зробивши знімок поточного стану нашого коду. Для цього ми вводимо: git commit -m "якесь повідомлення", де повідомлення описує внесені вами зміни.
  • Після цієї зміни ми можемо виконати git status, щоб побачити, як наш код порівнюється з кодом у віддаленому сховищі
  • Коли ми готові опублікувати наші локальні коміти в ҐітХаб, ми можемо виконати git push. Тепер, коли ми перейдемо до ҐітХаб у веббраузері, наші зміни будуть там відображені.
  • Якщо ви змінили лише наявні файли, а не створили нові, замість використання git add ., а потім git commit..., ми можемо звести це в одну команду: git commit -am "якесь повідомлення". Ця команда зафіксує всі внесені вами зміни.
  • Іноді віддалений репозиторій на ҐітХаб буде новішим, ніж локальна версія. У цьому випадку вам потрібно спочатку закомітити будь-які зміни, а потім виконати git pull, щоб витягнути будь-які віддалені зміни до вашого локального репозиторію.

Конфлікти злиття

  • Однією з проблем, яка може виникнути під час роботи з Ґіт, особливо коли ви співпрацюєте з іншими людьми, це те, що називається конфліктом злиття. Конфлікт злиття відбувається, коли двоє людей намагаються змінити файл таким чином, що конфліктують між собою.
  • Зазвичай це трапляється, коли ви виконуєте або git push, або git pull. Якщо це трапляється, Ґіт автоматично змінює файл у формат, який чітко окреслює суть конфлікту. Ось приклад, коли один і той же рядок був доданий двома різними способами:
a = 1
<<<<< HEAD
b = 2
=====
b = 3
>>>>> 56782736387980937883
c = 3
d = 4
e = 5
  • У наведеному вище прикладі ви додали рядок b = 2, а інша людина написала b = 3, і тепер ми повинні вибрати один із них, який потрібно зберегти. Довге число – це хеш, який представляє коміт, що суперечить вашим редагуванням. Багато текстових редакторів також надають підсвічування та прості варіанти, такі як «прийняти поточний» або «прийняти вхідний», що заощаджує ваш час на видалення доданих рядків вище.
  • Ще однією потенційно корисною командою Ґіт є git log, надає вам історію всіх ваших комітів у цьому репозиторії.

Git Log

  • Потенційно ще корисніше, якщо ви зрозумієте, що допустили помилку, можете повернутися до попереднього коміту за допомогою команди git reset одним із двох способів:
    • git reset --hard <commit> повертає ваш код точно таким, яким він був після вказаного коміту. Щоб вказати коміт, використовуйте хеш коміту, пов'язаний із комітом, який можна знайти за допомогою журналу git log, як показано вище.
    • git reset --hard origin/master повертає ваш код до версії, що на цей момент зберігається в інтернеті на ҐітХаб.

Гілки

Попрацювавши якийсь час над проєктом, ви можете вирішити, що хочете додати додаткову функцію. Зараз ми можемо просто внести зміни щодо цієї нової функції, як показано на малюнку нижче.

No Branch

Але це може бути нелегко, якщо ми потім виявимо помилку в оригінальному коді і захочемо повернутися назад, не змінюючи нову функцію. Тут використання гілок може стати справді корисним.

  • Розгалуження – це метод переходу на нову гілку при створенні нової функції, та поєднання цієї нової функції з основною частиною коду або основною гілкою лише після завершення. Такий робочий процес буде схожий на це графічне подання:

Branch

  • Гілка, яку ви зараз переглядаєте, визначається HEAD, що вказує на одну з двох гілок. За замовчуванням HEAD спрямовано на головну гілку, але ми можемо переглядати і інші гілки.
  • Тепер давайте розберемося, як ми насправді реалізуємо розгалуження в наших репозиторіях Ґіт:
    1. Запустіть git branch, щоб побачити, над якою гілкою ви зараз працюєте, вона буде позначена зірочкою зліва від її назви.

    Branch terminal

    1. Щоб створити нову гілку, ми запустимо git checkout -b <нове ім’я гілки>.

    New Branch

    1. Перемикайтеся між гілками за допомогою команди git checkout <назва гілки> та робіть коміти з будь-якими змінами для кожної гілки.
    2. Коли ми будемо готові об'єднати наші дві гілки, ми перейдемо на гілку, яку ми хочемо зберегти (майже завжди головну гілку), а потім запустимо команду git merge <інша назва гілки>. Це буде розглядатися подібно до завантаження та вивантаження (push та pull), і можуть з’явитися конфлікти злиття.

Додаткові можливості ҐітХаб

Є кілька корисних функцій, характерних для ҐітХаб, які можуть допомогти під час роботи над проєктом:

  • Forking. Як у користувача ҐітХаб, у вас є можливість форкнути будь-який репозиторій, до якого ви маєте доступ, що створює копію репозиторію, власником якого будете ви. Ми робимо це, натискаючи кнопку «Fork» у верхньому правому куті.
  • Pull Requests. Після того, як ви форкнули репозиторій та внесли деякі зміни до своєї версії, можливо, ви захочете додати ці зміни до основної версії репозиторію. Наприклад, якщо ви хочете додати нову функцію до Bootstrap, ви можете форкнути репозиторій, внести деякі зміни та подати запит на вивантаження. Потім цей запит може бути оцінений і, можливо, прийнятий людьми, які керують репозиторієм Bootsrap. Цей процес, коли люди вносять кілька редагувань, а потім просять додати їх до основного репозиторію, надзвичайно важливий для того, що називається програмним забезпеченням з відкритим кодом, або програмним забезпеченням, створеним завдяки внескам багатьох розробників.
  • Сторінки ҐітХаб або GitHub Pages. Це простий спосіб опублікувати статичний сайт в інтернеті. (Пізніше ми дізнаємося про статичні та динамічні сайти.) Для цього:
    1. Створіть новий репозиторій ҐітХаб.
    2. Клонуйте сховище та внесіть зміни локально, обов’язково включивши файл index.html, який буде посадковою сторінкою вашого вебсайта.
    3. Вивантажте ці зміни на GitHub.
    4. Перейдіть на сторінку налаштувань вашого репозиторію, прокрутіть сторінку до GitHub Pages і виберіть головну гілку у спадному меню.
    5. Прокрутіть назад до частини GitHub Pages на сторінці налаштувань, і через кілька хвилин ви побачите сповіщення про те, що «Ваш сайт опублікований за адресою:…», з URL-адресою, де ви можете знайти свій сайт!

На цьому все! Наступного разу ми розглянемо Python!