›_ ebskola.lv
← 2.4 2.6 →

2.5 Datņu sistēmas organizēšana un arhīvi

Stundas uzdevums: Strukturēt projekta failus loģiskā mapju sistēmā, atjaunot failu ceļus kodā un izveidot projekta rezerves kopiju (arhīvu).

2.3.3. Pārvalda datņu sistēmu, veic arhivēšanu; 5.2.6. Digitālā pratība.

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Ceļi un mapju hierarhija

Tīmekļa projekti vienmēr seko konkrētai struktūrai. Visi faili neatrodas vienā "kaudzē": 

# Mapju struktūra projektam
mans_projekts/
├── index.html
├── css/
│   └── stils.css
├── js/
│   └── spele.js
├── attels/
│   └── varonis.png
└── README.md

# Arhīva izveide piegādei
zip -r mans_projekts.zip mans_projekts/

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 2.5 Datņu sistēmas organizēšana un arhīvi; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

mkdir mans_projekts
cd mans_projekts
mkdir css
mkdir js
mkdir atteli
echo "<h1>Mana spēles lapa</h1>" > index.html
echo "console.log('projekts darbojas');" > js/spele.js
  1. Atver darba failu vai rīku. Komandas izpildi projekta mapē atvērtā terminālī.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver File Explorer un izveido projekta mapē trīs apakšmapes: css, js un atteli.
  2. Pārvieto style.css uz mapi css un script.js uz mapi js.
  3. Atver index.html un atjauno ceļus: <link href="css/style.css"> un <script src="js/script.js"></script>.
  4. Saglabā un atver pārlūkā - pārbaudi, vai stili joprojām darbojas.
  5. Pārbaudi DevTools → "Console" - nav jābūt kļūdas ziņojumam par trūkstošiem failiem.
  6. Pārbaudi arī attēlu ceļus - ja attēls bija atteli/varonis.png, ceļš paliek nemainīgs.
  7. Salabo pirmo "404 Not Found" kļūdu DevTools - tas nozīmē, ka kāds ceļš ir nepareizs.
  8. Veic git commit -m "Reorganize project into css/ js/ atteli/ folders".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver index.html pārlūkā un pārbaudi, ka lapa izskatās tieši tāpat kā pirms failu pārkārtošanas.
  2. Atver DevTools → "Network" → pārlādē lapu - pārbaudi, ka nav neviena "404" statusa resursa.
  3. Atver css/style.css VS Code - pārbaudi, vai tajā joprojām ir pareizais kods.
  4. Mēģini (uz laiku) ierakstīt nepareizu ceļu index.html - pārbaudi, ka DevTools to uzrāda kā kļūdu.
  5. Labo atpakaļ uz pareizo ceļu un pārbaudi, ka kļūda izzūd.
  6. Izveido ZIP arhīvu no projekta mapes (labais klikšķis → Compress/Send to Compressed).
  7. Pieraksti vienu secinājumu: kāpēc visi failu nosaukumi jāraksta ar mazajiem burtiem un bez atstarpēm.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno index.html galvē <meta name="viewport" content="width=device-width, initial-scale=1.0">, ja tādas nav.
  2. Saglabā projektu kā ZIP arhīvu ar nosaukumu, piemēram, mana-spele-v1.zip.
  3. Izvelc ZIP arhīvu jaunā mapē - pārbaudi, vai index.html atveras pareizi no jaunās atrašanās vietas.
  4. Salabo jebkuru ceļa kļūdu, kas parādās no jaunās mapes.
  5. Veic git commit -m "Finalize folder structure".
  6. Atver GitHub.com un pārbaudi, ka repozitorijā redzamas mapju ikoniņas (css/, js/, atteli/).
  7. Parādi repozitorija struktūru klasesbiedram - vai viņš saprot, kur atrodas katrs fails?

Biežākās kļūdas (un kā tās labot):

Koda piemērs (Mapju koks un Relatīvie ceļi)

Speles_Projekts/
├── css/
│   └── style.css
├── assets/
│   ├── images/
│   │   ├── player.png
│   │   └── background.jpg
│   └── audio/
│       └── jump.mp3
└── index.html
<!-- Kā atsaukties uz failiem no index.html -->
<link rel="stylesheet" href="css/style.css">
<img src="assets/images/player.png" alt="Varonis">
⬅ Iepriekšējā stunda Nākamā stunda ➡