Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Git i GitHub - Kontrola Wersji dla Piratów

Każdy programista musi znać Git - system kontroli wersji. To jak dziennik okrętowy - zapisujesz historię zmian w kodzie.

Czym jest Git? 📚

Git to system kontroli wersji - pozwala:

  • 💾 Zapisywać historię zmian w kodzie
  • ⏪ Cofać się do poprzednich wersji
  • 🤝 Współpracować z innymi programistami
  • 🌿 Branching - pracować nad różnymi funkcjami równocześnie
  • 🔍 Śledzić kto, co i kiedy zmienił

Git vs GitHub:

  • Git - narzędzie lokalne (na Twoim komputerze)
  • GitHub - platforma online do przechowywania kodu (jak Dropbox dla programistów)

Instalacja Git 🚀

Windows:

Pobierz z: https://git-scm.com/download/win

Podczas instalacji wybierz:

  • ✅ Git Bash
  • ✅ Git from the command line
  • ✅ Use Vim (lub Nano jeśli wolisz)

Mac:

Git jest już zainstalowany! Sprawdź:

1git --version

Jeśli nie ma, zainstaluj przez Homebrew:

1brew install git

Linux (Ubuntu/Debian):

1sudo apt-get update
2sudo apt-get install git

Konfiguracja Git - Pierwsze kroki ⚙️

Po instalacji skonfiguruj Git z Twoimi danymi:

1git config --global user.name "Jack Sparrow"
2git config --global user.email "jack@blackpearl.com"

Dlaczego to ważne? Każdy commit (zapis zmian) będzie miał Twoje imię i email - to jak podpis na dzienniku okrętowym.

Sprawdź konfigurację:

1git config --list

Inicjalizacja projektu Git 🎬

Masz dwa scenariusze:

Scenariusz 1: Nowy projekt (lokalny)

Gdy tworzysz nowy projekt Next.js, Git jest już zainicjalizowany automatycznie!

create-next-app
robi to za Ciebie. Sprawdź:

1ls -la

Zobaczysz folder 

.git/
- to Git repository.

Scenariusz 2: Istniejący folder (bez Git)

Jeśli masz folder bez Git:

1cd my-project
2git init

To stworzy folder 

.git/
i zainicjalizuje repozytorium.

Podstawowe komendy Git 🧭

1. git status - Stan repozytorium

Sprawdza co się zmieniło:

1git status

Zobaczysz:

  • Untracked files - nowe pliki, które Git nie śledzi
  • Modified files - zmienione pliki
  • Staged files - pliki gotowe do commit
1On branch main
2Changes not staged for commit:
3  modified:   app/page.tsx
4  
5Untracked files:
6  app/pirates/page.tsx

2. git add - Dodawanie plików do staging

Staging area to "poczekalnia" przed commitem.

1# Dodaj jeden plik
2git add app/page.tsx
3
4# Dodaj wszystkie pliki
5git add .
6
7# Dodaj wszystkie pliki .tsx
8git add *.tsx

Po 

git add
pliki są staged - gotowe do zapisu (commit).

3. git commit - Zapisywanie zmian

Commit to jak punkt kontrolny w grze - zapisujesz stan kodu.

1git commit -m "Add pirate landing page"

-m to message (wiadomość) - krótki opis co zmieniłeś.

Dobre commit messages:

  • ✅ "Add hero section to landing page"
  • ✅ "Fix button hover animation"
  • ✅ "Update Pirate interface with level field"

Złe commit messages:

  • ❌ "changes"
  • ❌ "fix"
  • ❌ "asdfghjk"
  • ❌ "WIP" (Work In Progress - tylko tymczasowo)

4. git log - Historia commitów

Zobacz historię wszystkich commitów:

1git log

Zobaczysz:

1commit a3f5b8c (HEAD -> main)
2Author: Jack Sparrow <jack@blackpearl.com>
3Date:   Mon Nov 24 10:30:00 2024 +0100
4
5    Add pirate landing page
6
7commit b2e4a9d
8Author: Jack Sparrow <jack@blackpearl.com>
9Date:   Mon Nov 24 09:15:00 2024 +0100
10
11    Initial commit

Skróty:

1# Krótka wersja (1 linia na commit)
2git log --oneline
3
4# Ostatnie 5 commitów
5git log -5
6
7# Z grafiką branchy
8git log --graph --oneline

5. git diff - Zobacz zmiany

Porównuje aktualne pliki ze staged/committed wersją:

1# Zmiany nie dodane do stage
2git diff
3
4# Zmiany w staged files
5git diff --staged

Zobaczysz:

1diff --git a/app/page.tsx b/app/page.tsx
2--- a/app/page.tsx
3+++ b/app/page.tsx
4@@ -1,5 +1,5 @@
5 export default function Home() {
6   return (
7-    <h1>Hello World</h1>
8+    <h1>Ahoy, Pirates!</h1>
9   )
10 }

.gitignore - Ignorowanie plików 🙈

Niektóre pliki NIE powinny być w Git:

  • node_modules/
    - ogromny folder (setki MB)
  • .env.local
    - sekrety (API keys, passwords)
  • .next/
    - build output
  • dist/
    , 
    build/
    - compiled files

Plik 

.gitignore
mówi Git co ignorować:

1# .gitignore
2node_modules/
3.next/
4.env.local
5.env
6.DS_Store
7*.log

Next.js automatycznie tworzy 

.gitignore
- masz to już skonfigurowane!

Branching - Gałęzie pracy 🌿

Branch (gałąź) to oddzielna linia rozwoju projektu. Możesz pracować nad nową funkcją bez wpływu na główny kod.

Tworzenie brancha

1# Stwórz nowy branch
2git branch feature/landing-page
3
4# Przełącz się na nowy branch
5git checkout feature/landing-page
6
7# Lub jedno polecenie (stwórz + przełącz)
8git checkout -b feature/landing-page

Konwencja nazw:

  • feature/nazwa
    - nowa funkcja
  • fix/nazwa
    - poprawka błędu
  • refactor/nazwa
    - refactoring
  • docs/nazwa
    - dokumentacja

Przełączanie między branchami

1# Zobacz wszystkie branche
2git branch
3
4# Przełącz na main
5git checkout main
6
7# Przełącz na feature branch
8git checkout feature/landing-page

Mergowanie branchy

Gdy skończysz funkcję, wlewasz zmiany do 

main
:

1# Przełącz się na main
2git checkout main
3
4# Wlej zmiany z feature brancha
5git merge feature/landing-page

Fast-forward merge: Jeśli 

main
się nie zmienił, Git po prostu przesuwa wskaźnik - to najłatwiejszy merge.

3-way merge: Jeśli oba branche mają nowe commity, Git tworzy nowy commit merge.

Usuwanie brancha

Po zmergowaniu możesz usunąć branch:

1git branch -d feature/landing-page

GitHub - Zdalne repozytorium ☁️

GitHub to jak piracka wyspa - miejsce gdzie przechowujesz skarby (kod).

Tworzenie repozytorium na GitHub

  1. Idź na: https://github.com
  2. Kliknij zielony przycisk "New" (lub "New repository")
  3. Wypełnij:
    • Repository name: 
      krakens-call
    • Description: "Epic pirate game built with Next.js"
    • Public lub Private (wybierz)
    • ❌ NIE zaznaczaj "Initialize with README" (masz już lokalny projekt)
  4. Kliknij "Create repository"

Łączenie lokalnego projektu z GitHub

GitHub poda Ci komendy - skopiuj je:

1# Dodaj zdalne repozytorium
2git remote add origin https://github.com/username/krakens-call.git
3
4# Zmień nazwę brancha na main (jeśli trzeba)
5git branch -M main
6
7# Wypchnij kod na GitHub
8git push -u origin main

Wyjaśnienie:

  • origin
    - nazwa zdalnego repozytorium (domyślna konwencja)
  • -u
    - ustaw upstream (domyślny branch do push/pull)
  • main
    - nazwa brancha

git push - Wysyłanie zmian

Każdy commit lokalnie → wyślij na GitHub:

1# Wypchnij wszystkie commity na origin/main
2git push
3
4# Wypchnij konkretny branch
5git push origin feature/landing-page

git pull - Pobieranie zmian

Jeśli pracujesz w zespole, inni mogą wprowadzać zmiany:

1# Pobierz zmiany z GitHub i wlej do lokalnego brancha
2git pull
3
4# Pobierz z konkretnego brancha
5git pull origin main

pull = fetch + merge:

  • git fetch
    - pobiera zmiany
  • git merge
    - wlewa je do Twojego brancha

git clone - Klonowanie repozytorium

Pobieranie istniejącego projektu z GitHub:

1git clone https://github.com/username/krakens-call.git
2cd krakens-call
3npm install
4npm run dev

Workflow z Git i GitHub 🔄

Typowy piracki workflow:

1. Nowa funkcja

1# Stwórz branch
2git checkout -b feature/pirate-profile
3
4# Pracuj nad kodem...
5# Edytuj app/profile/page.tsx
6
7# Sprawdź zmiany
8git status
9git diff
10
11# Dodaj do stage
12git add app/profile/
13
14# Commit
15git commit -m "Add pirate profile page with stats"
16
17# Wypchnij na GitHub
18git push origin feature/pirate-profile

2. Pull Request na GitHub

  1. Idź na GitHub
  2. Zobaczysz banner: "feature/pirate-profile had recent pushes"
  3. Kliknij "Compare & pull request"
  4. Wypełnij:
    • Title: "Add pirate profile page"
    • Description: Co zrobiłeś, dlaczego, screenshoty
  5. Kliknij "Create pull request"

Pull Request (PR) to prośba o wlanie zmian z Twojego brancha do 

main
. Zespół może zrobić code review.

3. Review i Merge

  1. Inni developerzy przeglądają kod
  2. Zostawiają komentarze
  3. Ty wprowadzasz poprawki (nowe commity na tym samym branchu)
  4. Gdy wszystko OK, ktoś klika "Merge pull request"
  5. Branch zostaje wlany do 
    main

4. Sync lokalnego main

1# Przełącz się na main
2git checkout main
3
4# Pobierz zmiany z GitHub
5git pull
6
7# Usuń lokalny feature branch
8git branch -d feature/pirate-profile

Cofanie zmian - Gdy coś pójdzie nie tak ⏪

Cofnij zmiany w pliku (nie committed)

1# Przywróć plik do ostatniego commit
2git checkout -- app/page.tsx
3
4# Przywróć wszystkie pliki
5git checkout -- .

Usuń pliki ze stage (git add)

1# Usuń z stage, zostaw zmiany w pliku
2git reset app/page.tsx
3
4# Usuń wszystko ze stage
5git reset

Cofnij ostatni commit (lokalnie)

1# Cofnij commit, zostaw zmiany w plikach
2git reset --soft HEAD~1
3
4# Cofnij commit, usuń zmiany w plikach (DANGER!)
5git reset --hard HEAD~1

Uwaga: 

--hard
USUWA zmiany bez możliwości odzyskania!

Revert commit (już pushed)

Jeśli commit jest już na GitHub:

1# Stwórz nowy commit odwracający zmiany
2git revert a3f5b8c
3
4# Push
5git push

revert
tworzy nowy commit - bezpieczniejsze niż 
reset
.

Git w Cursorze 🤖

Cursor ma wbudowaną obsługę Git!

Source Control panel

  1. Kliknij ikonę Source Control (po lewej, 3 rozgałęzione kółka)
  2. Zobaczysz:
    • Zmienione pliki
    • Przycisk + (git add)
    • Pole do wpisania commit message
    • Przycisk ✓ Commit

Workflow w Cursorze:

  1. Edytuj pliki
  2. Otwórz Source Control (Cmd/Ctrl + Shift + G)
  3. Kliknij + przy plikach (stage)
  4. Wpisz commit message
  5. Kliknij ✓ Commit
  6. Kliknij "..." → Push

AI Commit Messages: Cursor AI może sugerować commit messages na podstawie zmian!

Używanie AI do Git 🤖

Zapytaj Cursor AI:

Prompt 1:

1Jak cofnąć ostatni commit w Git?

Prompt 2:

1Napisz dobry commit message dla zmian w landing page - dodałem hero section i cta button

Prompt 3:

1Jak rozwiązać merge conflict w app/page.tsx?

Git Best Practices 📋

✅ Commituj często - małe, częste commity > rzadkie, duże ✅ Dobre commit messages - wyjaśnij CO i DLACZEGO ✅ Branch per feature - jedna funkcja = jeden branch ✅ Pull before push - zawsze 

git pull
przed 
git push
✅ Nie commituj secrets - 
.env
w 
.gitignore
✅ Code review - używaj Pull Requests ✅ Main zawsze działa - nie merge'uj broken code do main

❌ Nie commituj node_modules/ - ogromny, niepotrzebny ❌ Nie push --force na main (chyba że absolutnie musisz) ❌ Nie commituj WIP bez opisu - opisz co jest w trakcie

Podsumowanie 🎓

✅ Git - system kontroli wersji, dziennik okrętowy kodu ✅ GitHub - platforma do przechowywania kodu online ✅ git init - inicjalizacja repozytorium ✅ git add - dodawanie plików do stage ✅ git commit - zapisywanie zmian (snapshot) ✅ git push - wysyłanie commitów na GitHub ✅ git pull - pobieranie zmian z GitHub ✅ git branch - tworzenie gałęzi (branch) ✅ git merge - wlewanie zmian między branchami ✅ Pull Request - prośba o review i merge ✅ .gitignore - pliki ignorowane przez Git ✅ Cursor Source Control - GUI dla Git w edytorze

Następne kroki: W kolejnych modułach będziemy używać Git do:

  • Zapisywania postępów w projekcie
  • Tworzenia feature branchy
  • Deploymentu na Vercel (Vercel łączy się z GitHub!)

Do zobaczenia! 🚀

Przejdź do CodeWorlds→