Terminal w Cursorze

Witaj z powrotem! Dzisiaj nauczysz się obsługi terminala - tekstowej konsoli do komunikacji z komputerem.

Co to jest Terminal?

Terminal (command line, konsola) to tekstowy interfejs do komunikacji z komputerem. Zamiast klikać w ikony, wpisujesz komendy.

Dlaczego terminal jest ważny?

• Szybszy niż GUI (graficzny interfejs)
• Potężniejszy - więcej możliwości
• Automatyzacja - skrypty i narzędzia
• Niezbędny do pracy z Next.js, npm, git

Otwieranie Terminala w Cursorze

Metoda 1: Skrót klawiszowy

• Naciśnij Cmd+** (Mac) lub **Ctrl+ (Windows/Linux)
• Znak ` to backtick, znajduje się pod klawiszem ESC

Metoda 2: Menu

• Kliknij Terminal → New Terminal w górnym menu

Terminal otworzy się na dole ekranu Cursora!

Podstawowe komendy - Must Know

1. pwd - Pokaż gdzie jesteś

pwd

Output: /Users/user/projekty

To pokazuje: "Jesteś w folderze projekty"

2. ls - Lista plików

Mac/Linux:

ls

Windows (Git Bash):

ls

Windows (PowerShell):

dir

Output:

pirate.html
ship.js
treasure.css

3. cd - Zmień folder

cd nazwa_folderu

Przykład:

cd projekty

Wracanie folder wyżej:

cd ..

4. mkdir - Stwórz folder

mkdir nowy_folder

Przykład:

mkdir moj_statek

5. touch - Stwórz plik

Mac/Linux:

touch plik.html

Windows (PowerShell):

New-Item plik.html

Przykład:

touch index.html

6. clear - Wyczyść terminal

clear

Lub skrót: Ctrl+L

Praktyczny przykład - Tworzenie projektu

Stwórzmy projekt "Piracki Statek" używając tylko terminala:

# 1. Sprawdź gdzie jesteś
pwd

# 2. Stwórz folder projektu
mkdir piracki_statek

# 3. Wejdź do folderu
cd piracki_statek

# 4. Stwórz plik HTML
touch index.html

# 5. Stwórz plik CSS
touch style.css

# 6. Sprawdź co stworzyłeś
ls

Output:

index.html
style.css

Gratulacje! Właśnie stworzyłeś projekt używając terminala!

Node.js i npm - Musisz to wiedzieć

Gdy będziemy budować aplikacje Next.js, będziesz używał tych komend:

node - Uruchamianie JavaScript

node --version

Output: v20.10.0 (lub inna wersja)

Sprawdza czy masz zainstalowanego Node.js

npm - Node Package Manager

npm --version

Output: 10.2.3 (lub inna wersja)

npm to menedżer pakietów - pozwala instalować biblioteki i narzędzia

Najważniejsze komendy npm:

1. Instalacja pakietów:

npm install

2. Uruchomienie projektu:

npm run dev

3. Budowanie projektu:

npm run build

Poznasz to dokładniej w następnym module!

Git - podstawy

Git to system kontroli wersji - jak pamiętnik zmian w kodzie.

Sprawdzenie statusu:

git status

Dodanie plików:

git add .

Commit (zapisanie zmian):

git commit -m "Dodałem piracką stronę"

Push (wysłanie na serwer):

git push

Poznasz Git dokładniej później. Na razie wystarczy wiedzieć, że to narzędzie do zapisywania historii zmian.

Skróty klawiszowe w terminalu ⌨

Wskazówki Pro

1. Autouzupełnianie (Tab)

Zamiast pisać:

cd piracki_statek_z_czerwona_flaga

Napisz:

cd pir[Tab]

Terminal uzupełni automatycznie!

2. Historia komend (↑)

Zamiast pisać tę samą komendę ponownie, naciśnij ↑ kilka razy, aby znaleźć poprzednią komendę.

3. Kopiuj-Wklej

• Mac: Cmd+C (kopiuj), Cmd+V (wklej)
• Windows: Ctrl+Shift+C (kopiuj), Ctrl+Shift+V (wklej) w terminalu

4. Multiple terminale

Możesz mieć wiele terminali otwartych jednocześnie:

• Kliknij "+" w prawym górnym rogu panelu terminala
• Lub użyj Cmd/Ctrl + Shift + `

Częste błędy i rozwiązania

Błąd: "command not found"

Problem: Komenda nie istnieje lub nie jest zainstalowana

Rozwiązanie:

• Sprawdź pisownię
• Zainstaluj narzędzie (np. Node.js dla node)

Błąd: "permission denied"

Problem: Brak uprawnień

Rozwiązanie:

• Mac/Linux: Dodaj sudo przed komendą (ale ostrożnie!)
• Windows: Uruchom terminal jako administrator

Terminal "zamarł"

Problem: Komenda działa i nie możesz wpisać nic nowego

Rozwiązanie:

• Naciśnij Ctrl+C żeby przerwać
• Lub zamknij terminal i otwórz nowy

Ćwiczenie praktyczne

Wykonaj te komendy w terminalu Cursora:

# 1. Sprawdź wersję Node.js
node --version

# 2. Sprawdź wersję npm
npm --version

# 3. Sprawdź gdzie jesteś
pwd

# 4. Stwórz folder "moje_przygody"
mkdir moje_przygody

# 5. Wejdź do folderu
cd moje_przygody

# 6. Stwórz plik "dziennik.html"
touch dziennik.html

# 7. Zobacz co stworzyłeś
ls

# 8. Wróć folder wyżej
cd ..

# 9. Wyczyść terminal
clear

Jeśli wszystko zadziałało - jesteś gotowy!

Podsumowanie

Terminal to tekstowy interfejs do komputera pwd - gdzie jesteś ls/dir - co jest w folderze cd - zmiana folderu mkdir - nowy folder touch - nowy plik clear - czyszczenie ↑ - poprzednia komenda Tab - autouzupełnianie

Terminal wygląda nieprzystępnie, ale jest niezwykle potężny. Z czasem stanie się Twoim najlepszym narzędziem!

W następnych modułach będziesz używał terminala do:

• Tworzenia projektów Next.js
• Instalowania bibliotek
• Uruchamiania aplikacji
• Deployowania na Vercel

Jesteś coraz bliżej zostania prawdziwym piratem-programistą!

Kapitan Redbeard out.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Terminal Pirata</title>
    <style>
        body {
            background-color: #000;
            color: #0f0;
            font-family: 'Courier New', monospace;
            padding: 20px;
        }
        .terminal {
            background-color: #1a1a1a;
            border: 2px solid #0f0;
            padding: 15px;
            border-radius: 5px;
        }
        .command {
            color: #00ff00;
            margin: 10px 0;
        }
        .output {
            color: #ffffff;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>Terminal Kapitana Redbear da</h1>

    <div class="terminal">
        <div class="command">$ pwd</div>
        <div class="output">/home/kapitan/statek</div>

        <div class="command">$ ls</div>
        <div class="output">mapa_skarbow.txt  dziennik.log  kompas.json</div>

        <div class="command">$ cat mapa_skarbow.txt</div>
        <div class="output">Skarb zakopany na wyspie X: 100 kroków na północ od palmy!</div>
    </div>

    <p>Tak wygląda prawdziwy terminal!</p>
</body>
</html>