Backend dla Aplikacji Webowych - Laboratorium 1

Czas trwania: 3h zegarowe (4h lekcyjne) Format: Online Poziom: II semestr informatyki

📋 PLAN ZAJĘĆ

0:00-0:20 (20 min) - Wprowadzenie i Setup

0:20-1:00 (40 min) - Git Basics + Pierwsze Repo

1:00-1:40 (40 min) - HTTP i REST API Basics

1:40-2:00 (20 min) - Praca z AI w Backend Development

2:00-3:00 (60 min) - Zadanie Samodzielne

🛠 WYMAGANE NARZĘDZIA

Przed zajęciami upewnij się, że masz zainstalowane:

  1. Git Pobierz z: https://git-scm.com/downloads

  2. Cursor (edytor kodu z AI) Pobierz z: https://cursor.sh/

  3. Konto GitHub LUB GitLab

  4. Node.js (jeśli chcesz używać JavaScript/TypeScript) Pobierz z: https://nodejs.org/

  5. Python (jeśli chcesz używać Python) Pobierz z: https://www.python.org/

📖 CZĘŚĆ 1: GIT BASICS (0:20-1:00)

Co to jest Git i po co nam kontrola wersji?

Git to system kontroli wersji, który pozwala:

Podstawowe pojęcia

Praktyka: Twoje pierwsze repozytorium

# 1. Konfiguracja Git (jeśli pierwszy raz)
git config --global user.name "Twoje Imię"
git config --global user.email "twoj@email.com"

# 2. Utworzenie katalogu projektu
mkdir backend-lab1
cd backend-lab1

# 3. Inicjalizacja Git
git init

# 4. Utworzenie pliku README.md
# (otwórz Cursor i stwórz plik README.md)

Szablon README.md

# Backend API - Laboratorium 1

**Autor:** [Twoje Imię]
**Grupa:** [Numer grupy]

## Opis projektu
Proste REST API stworzone na zajęciach z backend development.

## Technologie
- [Język programowania]
- [Framework - jeśli używany]

## Endpointy
1. GET /health - status API
2. GET /data - pobranie danych
3. POST /data - dodanie danych

Commit i push do GitHub/GitLab

# 5. Pierwszy commit
git add README.md
git status  # zobacz co się dzieje
git commit -m "Initial commit: README"

# 6. Utworzenie repo na GitHub/GitLab
# - Wejdź na GitHub.com lub GitLab.com
# - Kliknij "New repository" / "New project"
# - Nadaj nazwę (np. backend-lab1)
# - NIE zaznaczaj "Initialize with README"

# 7. Połączenie z remote
git remote add origin [URL_TWOJEGO_REPO]
git branch -M main
git push -u origin main

Sprawdź: Odśwież stronę swojego repo na GitHub/GitLab - czy widzisz README?

🌐 CZĘŚĆ 2: HTTP i REST API BASICS (1:00-1:40)

📚 Dodatkowe materiały: Podstawy HTTP - szczegółowy przewodnik

Model Request-Response

Klient (przeglądarka/aplikacja)  →  [REQUEST]  →  Serwer
Klient (przeglądarka/aplikacja)  ←  [RESPONSE]  ←  Serwer

Metody HTTP

Statusy odpowiedzi HTTP

Format JSON

{
  "id": 1,
  "name": "Jan Kowalski",
  "email": "jan@example.com"
}

Zasady REST API

  1. Każdy zasób ma swój URL (endpoint)
  2. Używamy metod HTTP zgodnie z przeznaczeniem
  3. API jest bezstanowe (stateless)
  4. Odpowiedzi w formacie JSON

Przykłady endpointów REST

GET    /api/users          - lista użytkowników
GET    /api/users/1        - konkretny użytkownik (ID=1)
POST   /api/users          - nowy użytkownik
PUT    /api/users/1        - aktualizacja użytkownika
DELETE /api/users/1        - usunięcie użytkownika

Demonstracja: Publiczne API

Otwórz w przeglądarce lub użyj narzędzia do testowania API:

GET https://jsonplaceholder.typicode.com/users
GET https://jsonplaceholder.typicode.com/users/1

Narzędzia do testowania API:

🤖 CZĘŚĆ 3: PRACA Z AI W BACKEND DEVELOPMENT (1:40-2:00)

📚 Dodatkowe materiały: Narzędzia AI - kompletny przewodnik

Narzędzia AI

1. Cursor AI (główne narzędzie)

❌ Źle:

"zrób api"

✅ Dobrze:

"Stwórz endpoint GET /health w Express.js, który zwraca JSON
z polem status: 'OK' i timestamp"

2. Gemini / Claude (zewnętrzne)

Zasady pracy z AI

📌 RÓB TAK:

❌ NIE RÓB TAK:

Przykładowe pytania do AI

"Wyjaśnij mi jak działa async/await w JavaScript"

"Jak stworzyć endpoint POST w Express.js który przyjmuje JSON?"

"Co oznacza ten błąd: [wklej komunikat błędu]"

"Wyjaśnij mi ten kod linia po linii: [wklej kod]"

💻 CZĘŚĆ 4: LIVE CODING - PRZYKŁADOWE API (2:00-2:20)

Na zajęciach zobaczycie live coding prostego REST API. Poniżej znajdziesz przykłady w różnych językach.

OPCJA A: Node.js + Express

Inicjalizacja projektu:

npm init -y
npm install express

Plik server.js:

const express = require('express');
const app = express();
const PORT = 3000;

// Middleware do parsowania JSON
app.use(express.json());

// Dane w pamięci (tymczasowo)
let data = [
  { id: 1, name: "Element 1" },
  { id: 2, name: "Element 2" }
];

// 1. Health endpoint
app.get('/health', (req, res) => {
  res.json({
    status: 'OK',
    timestamp: new Date().toISOString()
  });
});

// 2. GET - pobranie danych
app.get('/data', (req, res) => {
  res.json(data);
});

// 3. POST - dodanie danych
app.post('/data', (req, res) => {
  const newItem = {
    id: data.length + 1,
    name: req.body.name
  };
  data.push(newItem);
  res.status(201).json(newItem);
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Uruchomienie:

node server.js

OPCJA B: Python + FastAPI

Instalacja:

pip install fastapi uvicorn

Plik main.py:

from fastapi import FastAPI
from pydantic import BaseModel
from datetime import datetime

app = FastAPI()

# Model danych
class Item(BaseModel):
    name: str

# Dane w pamięci
data = [
    {"id": 1, "name": "Element 1"},
    {"id": 2, "name": "Element 2"}
]

@app.get("/health")
def get_health():
    return {
        "status": "OK",
        "timestamp": datetime.now().isoformat()
    }

@app.get("/data")
def get_data():
    return data

@app.post("/data")
def add_data(item: Item):
    new_item = {
        "id": len(data) + 1,
        "name": item.name
    }
    data.append(new_item)
    return new_item

Uruchomienie:

uvicorn main:app --reload

OPCJA C: C# + ASP.NET Core Minimal API

Plik Program.cs:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

var data = new List<Item>
{
    new Item { Id = 1, Name = "Element 1" },
    new Item { Id = 2, Name = "Element 2" }
};

app.MapGet("/health", () => new {
    Status = "OK",
    Timestamp = DateTime.Now
});

app.MapGet("/data", () => data);

app.MapPost("/data", (ItemDto dto) => {
    var item = new Item {
        Id = data.Count + 1,
        Name = dto.Name
    };
    data.Add(item);
    return Results.Created($"/data/{item.Id}", item);
});

app.Run();

record Item {
    public int Id { get; set; }
    public string Name { get; set; }
}
record ItemDto(string Name);

Uruchomienie:

dotnet run

Testowanie API

# GET http://localhost:3000/health (lub 8000 dla Python, 5000 dla C#)
# GET http://localhost:3000/data
# POST http://localhost:3000/data
# Body (JSON): { "name": "Nowy element" }

Commit:

git add .
git commit -m "Add basic API with 3 endpoints"
git push

📝 CZĘŚĆ 5: ZADANIE SAMODZIELNE (2:30-3:00)

Teraz macie 30 minut na samodzielną pracę!

Zadanie podstawowe (na zajęciach)

Stwórz REST API z następującymi endpointami:

1. GET /health

Przykład odpowiedzi:

{
  "status": "OK",
  "timestamp": "2024-11-15T10:30:00Z"
}

2. GET /items (lub inna nazwa zasobu do wyboru)

Przykład odpowiedzi:

[
  { "id": 1, "name": "Element 1", "description": "Opis" },
  { "id": 2, "name": "Element 2", "description": "Opis" }
]

3. POST /items

Przykład request body:

{
  "name": "Nowy element",
  "description": "Nowy opis"
}

Checklist wykonania

Co będzie oceniane

  1. ✅ Działające 3 endpointy
  2. ✅ Sensowny README.md z instrukcjami
  3. ✅ Historia commitów w Git
  4. ✅ Kod jest czytelny i ma komentarze

Oddanie zadania

💡 WSKAZÓWKI

Pomoc AI - przykładowe prompty

"Stwórz prosty serwer HTTP w [język] z frameworkiem [nazwa],
który ma endpoint GET /health zwracający JSON z statusem i czasem"

"Jak dodać endpoint POST w [framework] który przyjmuje JSON
i dodaje element do tablicy w pamięci?"

"Wyjaśnij mi ten kod linia po linii: [wklej kod]"

Przykłady frameworków do wyboru

Jeśli masz problem

  1. Przeczytaj komunikat błędu dokładnie
  2. Zapytaj AI o wyjaśnienie błędu
  3. Sprawdź czy serwer działa (console.log / print)
  4. Przetestuj w przeglądarce lub Postman/Thunder Client
  5. Zapytaj prowadzącego na chacie

🚀 ZADANIE DODATKOWE (po zajęciach)

Jeśli chcesz rozwinąć swoje umiejętności, spróbuj stworzyć pełniejsze API dla menadżera zadań (TODO):

📋 Zadanie: REST API Menadżera Zadań

To zadanie zawiera:

📚 MATERIAŁY DODATKOWE

Linki do nauki

  1. Git Cheat Sheet: https://education.github.com/git-cheat-sheet-education.pdf
  2. HTTP Status Codes: https://httpstatuses.com/
  3. REST API Tutorial: https://restfulapi.net/
  4. JSON Formatter: https://jsonformatter.org/

Polecane narzędzia

Kursy online (darmowe)

✅ PODSUMOWANIE ZAJĘĆ

Co dzisiaj zrobiliśmy

Czego się nauczyliśmy

Na następne zajęcia

Przygotujcie się na:

❓ FAQ - Często Zadawane Pytania

Q: Czy muszę używać konkretnego języka programowania? A: Nie, możesz wybrać dowolny język który znasz (JavaScript, Python, C#, Go, itp.)

Q: Co jeśli nie zdążę skończyć zadania na zajęciach? A: Dokończ w domu i wyślij link do repo przed deadline

Q: Czy mogę użyć AI do napisania całego kodu? A: Możesz używać AI jako pomocy, ale musisz rozumieć kod który wysyłasz.

Q: Jak testować API bez Postmana? A: Możesz użyć Thunder Client (wtyczka w Cursor), przeglądarki (dla GET), lub curl w terminalu

Q: Co jeśli nie działa mi serwer? A: Sprawdź:

  1. Czy zainstalowałeś wszystkie zależności (npm install / pip install)
  2. Czy port nie jest zajęty
  3. Komunikaty błędów w konsoli
  4. Zapytaj AI o wyjaśnienie błędu

Q: Czy muszę używać GitHub czy mogę użyć GitLab? A: Możesz używać dowolnej platformy (GitHub, GitLab, Bitbucket)

Powodzenia na zajęciach! 🎯