ebSkola

8. tēma / 8.3

8.3 Datu modelis un UI plūsma

Stundas uzdevums: Izveidot "rentgena uzņēmumu" savai programmai. Pirms ķeries pie koda, Tev ir precīzi jāzina, kādi dati Tev būs nepieciešami un kā spēlētājs pārvietosies starp spēles lokācijām. Projektēsim datu struktūras un vizualizēsim spēles gaitu.

SR 2.4.5. (Izstrādā programmatūras projektējumu - shēmas un diagrammas)

Stundas mērķi:

70 min plāns: Teorija un paraugs (~10 min) · 1. uzdevums (~15 min) - uzzīmē ER diagrammu ar divām būtībām · 2. uzdevums (~25 min) - uzzīmē UI plūsmu · 3. uzdevums (~20 min) - pārbaudi, vai plūsma sasaucas ar datiem. Papildu uzdevumu sāc tikai tad, ja pārējie trīs ir gatavi.

Pirms sāc: atver README.md vai diagrammu rīku. Noderēs 8.2 stundas PRASIBAS.md - katrai būtībai jāsasaucas ar kādu lietotāja stāstu.

Teorija: ER diagrammas un UI plūsma

  • ER diagramma (Entity-Relationship): Shēma, kas parāda, kādi objekti (būtības) eksistē sistēmā un kā tie ir saistīti.
    • Būtība (Entity): Galvenais objekts (piem., Spēlētājs, Lokācija).
    • Atribūts (Attribute): Objekta īpašība (piem., Lokācijas ID, Spēlētāja HP).
    • Saite (Relationship): Kā tie ir saistīti (piem., Spēlētājs atrodas Lokācijā).
  • UI plūsma (User Interface Flow): Diagramma, kas parāda spēlētāja ceļu.
    • Katra lokācija ir taisnstūris.
    • Izvēles ir bultas, kas ved uz nākamo taisnstūri.
    • Šī shēma palīdz ieraudzīt "strupceļus", kur spēlētājs varētu iesprūst.
  • Rīki: Profesionāļi izmanto Draw.io vai Lucidchart, bet programmētāji bieži lieto arī vienkāršas teksta diagrammas tieši kodā.
# ER diagrammas pārvēršana datu modelī
spele = {
    "id": 1,
    "speletaji": ["X", "O"],
    "laukums": [["", "", ""], ["", "", ""], ["", "", ""]],
    "pasreizejais_gajiens": "X",
    "uzvaretajs": None
}

Vides sagatavošana (Windows)

Diagrammas veido diagrammu rīkā, bet arhitektūras dokumentācijā mēs tās saglabāsim kā attēlus vai teksta shēmas.

  1. Atver pārlūkprogrammu un dodies uz diagrams.net (agrāk Draw.io).
  2. Izvēlies "Create New Diagram" -> "Blank Diagram".
  3. Sagatavo savu projekta mapi KrustiniNullites_Arhitektura, kurā saglabāsi eksportētos attēlus.

Praktiskie uzdevumi

1. uzdevums -

Uzzīmē ER diagrammu ar divām būtībām

Beigās tu redzēsi, kādi dati tavā spēlē vispār pastāv.

  1. Uzzīmē taisnstūri ar nosaukumu Spēlētājs.
  2. Pieraksti tajā vismaz trīs atribūtus, piemēram vards, hp, punkti.
  3. Uzzīmē otru taisnstūri ar nosaukumu Lokācija.
  4. Pieraksti tajā atribūtus id un teksts.
  5. Novelc līniju starp abiem un uzraksti uz tās saiti atrodas.
  6. Atzīmē katrai būtībai, kurš atribūts ir unikālā atslēga.

Gatavs, kad: diagrammā ir divas būtības ar atribūtiem, viena saite starp tām un atzīmētas atslēgas.

2. uzdevums -

Uzzīmē UI plūsmu

Beigās tu redzēsi visu ceļu no spēles sākuma līdz beigām.

  1. Uzzīmē ekrānu Sākums kā taisnstūri.
  2. Uzzīmē ekrānus Spēle un Rezultāts.
  3. Novelc bultas, kas rāda, kā spēlētājs pārvietojas starp ekrāniem.
  4. Pieraksti uz katras bultas darbību, piemēram nospiež Sākt.
  5. Pievieno vismaz vienu bultu atpakaļ, piemēram Spēlēt vēlreiz.
  6. Pārbaudi, vai no katra ekrāna var tikt prom.

Gatavs, kad: no katra ekrāna izejošas vismaz viena bulta, un neviens ekrāns nav strupceļš.

3. uzdevums -

Pārbaudi, vai plūsma sasaucas ar datiem

Beigās tu pamanīsi datus, ko neviens ekrāns nerāda.

  1. Noliec abas diagrammas blakus.
  2. Atzīmē katram ER atribūtam, kurā ekrānā tas parādās.
  3. Atrodi atribūtu, kas nav redzams nevienā ekrānā.
  4. Izlem, vai to izdzēst vai pievienot kādam ekrānam.
  5. Atrodi ekrānu, kas rāda datus, kuru ER diagrammā nav.
  6. Papildini ER diagrammu ar trūkstošo atribūtu.
  7. Pieraksti vienu secinājumu: kāpēc abas diagrammas jāzīmē kopā.

Gatavs, kad: katram ER atribūtam ir norādīts ekrāns, un neviens ekrāns neprasa datus, kuru diagrammā nav.

Papildu uzdevums - Pievieno trešo būtību

Ja pamatdarbs ir gatavs, paplašini modeli ar priekšmetiem.

  1. Uzzīmē būtību Priekšmets ar atribūtiem nosaukums un vertiba.
  2. Novelc saiti starp Spēlētājs un Priekšmets.
  3. Pieraksti uz saites, cik priekšmetu var būt vienam spēlētājam.
  4. Pievieno UI plūsmā ekrānu Inventārs.
  5. Savieno to ar ekrānu Spēle abos virzienos.

Gatavs, kad: modelī ir trīs būtības, un inventāra ekrāns ir sasniedzams un pamest.

Snieguma līmeņa apraksts (SLA)

Kritēriji 4-6 (Turpina apgūt) 7-8 (Apguvis) 9-10 (Padziļināti)
Datu modelis Būtības ir sajauktas ar darbībām; trūkst atribūtu. Skaidri definētas būtības un to galvenie atribūti. Pilnīgs ER modelis ar datu tipu norādēm (int, str, list).
ER Diagramma Shēma ir nepārskatāma vai trūkst saišu starp objektiem. Diagramma vizuāli attēlo galvenās datu saites. Profesionāli noformēta ER diagramma, kas gatava izstrādei.
UI plūsma Shēma ir lineāra, bez izvēļu iespējām. Shēma parāda vairākus ceļus un lēmumu punktus. Sarežģīta plūsma ar nosacījumiem (piem., "ja ir atslēga").

Koda piemērs

# ER modeļa realizācija ar vārdnīcu struktūru:

datu_modelis = {
    "Speletajs": {
        "vards": "str",
        "pasreizeja_lokacija_id": "int",
        "materiali": "list"
    },
    "Lokacija": {
        "id": "int",
        "apraksts": "str",
        "izveles": {
            "A": {"teksts": "str", "merkis_id": "int"},
            "B": {"teksts": "str", "merkis_id": "int"}
        }
    }
}
Statuss: Projektējums pabeigts.
Atceries: Diagramma ir Tavs līgums ar sevi. Ja projektējums ir labs, koda rakstīšana būs vienkārša "tulkošana".