12.1 Front-end un back-end arhitektūra

Tavs šīs stundas izaicinājums: Saprast, kā mūsdienu lietotnes ir sadalītas priekšgalā un aizmugurē, un ka starp tām notiek HTTP komunikācija.

SR 2.4.1. Analizē problēmu un veic dekompozīciju SR 2.4.7. Lietotāja saskarne (UI)

Teorija: Klients-serveris arhitektūra

Mūsdienu web lietotnes sastāv no divām atšķirīgām daļām:

# Komunikācija notiek caur HTTP pieprasījumiem
[Pārlūks]  ── GET /api/speletaji ──>  [Serveris]
[Pārlūks] <── 200 OK + JSON ────────  [Serveris]
                                         │
                                         ▼
                                    [Datubāze]

Galvenās priekšrocības atdalītā arhitektūrai:

1. uzdevums: Esošo tehnoloģiju kartēšana

Saproti, kuras tehnoloģijas izmantojam katrā pusē.

Izpildes soļi:

  1. Sadali papīru divās kolonnās: Frontend / Backend.
  2. Frontend kolonnā uzraksti: HTML, CSS, JavaScript, fetch API, localStorage.
  3. Backend kolonnā uzraksti: Python, Flask, PostgreSQL, JSON, REST API.
  4. Vidū uzzīmē bultu ar uzrakstu "HTTP/JSON".
  5. Saglabā kā arhitektura.png savā GitHub.

2. uzdevums: Reālas vietnes analīze

Izpēti, kā darbojas zināma vietne.

Izpildes soļi:

  1. Atver pārlūku DevTools (F12) → Network cilne.
  2. Atver kādu zināmu vietni (e-klase.lv, twitch.tv).
  3. Pārlādē lapu — vēro pieprasījumus.
  4. Atrod vienu API pieprasījumu (filtrē XHR/Fetch) un apskati: URL, metode, response (JSON).
  5. Pieraksti 3 piemērus failā petijums.md.

3. uzdevums: Sava plāna projektēšana

Saprojektē sava nākamā projekta arhitektūru.

Izpildes soļi:

  1. Failā plans.md apraksti spēli, ko izveidosi šajā tēmā: "Krustiņi un nullītes" daudzspēlētāju versija.
  2. Frontend daļā: kādi UI elementi vajadzīgi? (3×3 režģis, statuss, restart poga).
  3. Backend daļā: kādi datu glabāti? (spēles ID, pašreizējais gājiens, laukums).
  4. API saskarne: POST /api/spele/jauna, GET /api/spele/:id, POST /api/spele/:id/gajiens.
  5. Uzzīmē sekvences diagrammu: spēlētājs → klients → serveris → otrs spēlētājs.

Papildus uzdevums: MVC arhitektūra

Iepazīsti vēl vienu sadalījuma paradigmu.

Izpildes soļi:

  1. Izpēti, kas ir MVC (Model-View-Controller).
  2. Salīdzini ar klients-serveris arhitektūru.
  3. Pieraksti, kuras Python ietvaros (Flask, Django) izmanto MVC variantus.

Biežākās kļūdas

Koda piemērs

# Vienkāršs aprakts: kas notiek, kad lietotājs nospiež "Sūtīt"

# 1. FRONTEND (browser)
# fetch("/api/saglabat", { method: "POST", body: ... })

# 2. BACKEND (Python serveris)
@app.route("/api/saglabat", methods=["POST"])
def saglabat():
    dati = request.json
    # 3. DATUBĀZE
    cur.execute("INSERT INTO ... VALUES (%s)", (dati["x"],))
    conn.commit()
    # 4. ATPAKAĻ FRONTEND
    return jsonify({"status": "ok"}), 201
Pieprasījums: POST /api/saglabat
Atbilde: { status: 'ok' }
Kods: 201
⬅ Tēmas apkopojums Nākamā stunda ➡