Uvod

Dobrodošli u Primijenjenu informatiku, udžbenik za sve koji žele detaljnije naučiti o programiranju i izradi aplikacija. Ovdje ćete naučiti kako napraviti web i mobilne aplikacije pomoću web programiranja. Jedna od čari web programiranja jest ta što omogućuje izradu aplikacija za sve tri glavne platforme – web, mobilne uređaje i stolna računala – uz minimalne promjene u istim programskim jezicima i tehnologijama. Usto je i najpopularnije područje programiranja (JavaScript, glavni jezik za web programiranje, bio je najpopularniji programski jezik 2024. godine), što donosi veliki broj materijala za učenje i raznovrsne mogućnosti zapošljavanja.

Za koga je ova knjiga?

Ovaj udžbenik je napravljen kao glavni materijal za učenje za pohađatelje istoimene fakultativne nastave u srednjim školama. Gradivo je stoga prilagođeno srednjoškolcima. Udžbenik je detaljniji nego što je zamišljeno da će biti pokriveno tijekom nastave Primijenjene informatike. Određene teme i detalji su izostavljeni iz kurikuluma zbog nedostatka vremena.

Udžbenik pretpostavlja vrlo malo predznanja o programiranju. Svakako, ako već imate iskustva s programiranjem, to vam samo može pomoći. Očekuje se osnovno znanje programiranja; nije važno koji ste programski jezik koristili, bitno je da razumijete što su varijable, petlje, kako napisati jednostavan program itd. Ako nikada prije niste koristili nijedan programski jezik, preporučujem vam da prvo naučite osnove programiranja, a zatim prijeđete na ovu knjigu.

Uz učenike srednjih i osnovnih škola, ovaj udžbenik je dovoljno detaljan da ga bilo koja osoba koju zanima (web) programiranje može koristiti i (nadam se) naučiti podosta iz njega. Znanje predstavljeno u njemu dovoljno je detaljno da vas stavi na put do zapošljavanja kao (junior) web programer.

Zašto Primijenjena?

Odlučio sam se za naziv Primijenjena informatika jer mi je cilj s ovim kurikulumom i udžbenikom učenicima pobliže prikazati što i kako profesionalni programeri rade. Fokus tijekom cijelog udžbenika i kurikuluma bit će na praktičnoj primjeni znanja. Učit ćete kroz projektno učenje, radit ćete vlastite aplikacije. U početku će one biti jednostavne, ali će postajati sve složenije. Naravno, teorije će uvijek biti, ona je neophodna, ali u određene teme neću ulaziti toliko duboko.

U osnovnoškolskom i srednjoškolskom informatičkom kurikulumu (barem izvan strukovnih škola), nema fokusa na izradu softvera kakav se u suvremenom dobu u praksi proizvodi i koristi. Naravno, veći je fokus na teoriji, koja prije ili kasnije postane nužna. Ideja Primijenjene informatike jest potkrijepiti standardni informatički kurikulum i omogućiti učenicima da iskoriste to znanje za izradu vlastitih aplikacija koje bi zaista imale šansu za uspjeh.

Kako koristiti ovu knjigu?

Projektno učenje

Programiranje, kao i većina vještina, ne može se naučiti pasivnim čitanjem. Kao i u matematici, vježba čini majstora: matematika se ne može naučiti samo čitanjem udžbenika, već zahtjeva rješavanje zadataka. Isto vrijedi i za programiranje, samo što su u ovom slučaju zadaci uglavnom projekti, odnosno cjelovite web-stranice ili aplikacije.

Ovaj udžbenik koristi projektno učenje: tijekom rada s udžbenikom ćemo zajedno (ali i vi samostalno!) razviti nekoliko aplikacija. Stoga su poglavlja u ovom udžbeniku podijeljena u dvije kategorije: konceptualna i projektna. U konceptualnim poglavljima naučit ćete nešto novo, a u projektnim ćete primijeniti stečeno znanje razvijajući zajedno nekoliko manjih web-stranica i aplikacija.

Nakon nekoliko poglavlja bit će naputak da je vrijeme za samostalan razvoj web-stranice ili aplikacije, uz prijedloge tema i upute za uspješnu realizaciju projekta. Ne preskačite projektna poglavlja, a pogotovo ne samostalan rad. Bez samostalnog rada nećete naučiti programirati, a znanje stečeno u konceptualnim poglavljima brzo će izblijedjeti. Cilj ove knjige i kurikuluma je da naučite razvijati projekte i sofisticirane aplikacije. Da biste to postigli na visokoj razini, morate se aktivno usavršavati.

Kvizovi

Uz projektna poglavlja i samostalan rad, na kraju svakog poglavlja nalazi se kviz za utvrđivanje gradiva. Kvizovi sadrže nekoliko vrsta pitanja, od najjednostavnijih pitanja višestrukog izbora i kratkih odgovora (najviše nekoliko riječi)... do pitanja u kojima ćete trebati odrediti hoće li se prikazani kôd pokrenuti bez greške i, ako hoće, što će ispisati.

Rezultati kvizova spremaju se isključivo lokalno i nitko ih osim vas ne vidi. Nemojte preskakati ni kvizove jer vam pomažu da odmah primijenite naučeno.

Interaktivni primjeri koda

Neki primjeri koda, poput ovog ovdje, su statični: ne možete ih pokrenuti niti išta s njima raditi. U ovakvom će se obliku nalaziti isječci koda koji se ne mogu sami po sebi izvršiti ili su manji dijelovi većeg programa.

let poruka = "Hello, world!"

Ovaj je isječak koda napisan u programskom jeziku JavaScript, koji ćete uskoro upoznati, i jednostavno postavlja novu varijablu poruka. Uz svaki takav primjer možete vidjeti naziv datoteke u kojoj se (može) nalaziti i programski jezik u kojem je napisan.

S druge strane, uz takve statične primjere koda, u ovoj knjizi postoje i tri vrste interaktivnih primjera. Drugim riječima, taj kod možete odmah mijenjati i izvršavati unutar udžbenika.

console.log(poruka)

Primijetite da u gornjem desnom kutu primjera piše naziv datoteke: script.js. Taj će se naziv nalaziti uz gotovo svaki primjer kako bismo riješili dobro poznato pitanje u programiranju: gdje smjestiti taj kod? Uz to, svaki sljedeći primjer koda u istoj datoteci (s istim nazivom) ima pristup kodu iz prethodnih primjera u toj datoteci (u istom poglavlju). Zbog toga se, kada izvršite posljednji primjer, ispiše poruka iz prethodnog primjera: u istoj su datoteci!

Pokušajte promijeniti poruku i pokrenuti kod!

Iako je jedna mala kutija s kodom dovoljna za primjere samo s JavaScriptom, web-stranice se sastoje od nekoliko programskih jezika. Također bi bilo lijepo da zapravo vidimo što se događa na toj stranici! Zbog toga su primjeri s HTML-om, CSS-om i/ili JavaScriptom prikazani u sljedećem obliku pomoću platforme Codepen. I njih možete mijenjati i vidjeti što su vaše promjene napravile.

Primijetite HTML tipku u gornjem lijevom kutu Codepena. Ako je pritisnete, otvorit će se prozor za uređivanje HTML-a te web-stranice. Promijenite naslov ispisan na stranici i pogledajte što će se dogoditi!

Konačno, za najsloženije tehnologije i primjere koda do kojih ćemo doći tek za nekoliko mjeseci, u knjizi ćemo koristiti potpuni Visual Studio Code uređivač koda (nastavite čitati da biste saznali što je to!) preko StackBlitza. Sve to u knjizi! To je program koji profesionalni programeri koriste kada pišu kod, a podržava sve značajke koje programeri trebaju. To je uređivač koda koji ćete i vi koristiti tijekom ove knjige. Ne brinite, nećete morati ništa instalirati na svoje računalo; ako čitate ovu knjigu, već imate na računalu sve što vam je potrebno!

Važno je napomenuti da se, za razliku od rezultata kvizova koji se spremaju unutar vašeg preglednika, promjene koje napravite na primjerima koda ne spremaju i resetirat će se kada osvježite stranicu knjige te da StackBlitz primjeri ne rade u Firefoxu.

Uskoro ćete se upoznati s gotovo istom verzijom Visual Studio Codea kao što je ova ovdje, i nju ćete koristiti za programiranje, vježbanje i izradu projekata tijekom ove knjige. Naravno, možete, i toplo vam preporučujem, da ga nastavite koristiti i nakon što završite s ovom knjigom. Međutim, ako želite izabrati neki drugi uređivač koda, to je sasvim u redu.

Poigrajte se s kodom i tekstom koji vidite u primjeru da vidite kakav će utjecaj imati na stranicu. Slobodno istražite koje sve trikove Visual Studio Code krije! U ovoj ćete knjizi upoznati neke od njih.

Vaše programsko okruženje

Visual Studio Code

Već sam spomenuo da ćete koristiti Visual Studio Code kao uređivač koda za programiranje, koji ću nadalje zvati VSCode. Možda ste, ako ste prije programirali u Pythonu, koristili IDLE ili nešto slično. VSCode je integrirano razvojno okruženje (IDE) i sadrži sve potrebne alate za programiranje.

To svakako uključuje i uređivač teksta kao i IDLE, ali u VSCode-u je on i inteligentan. VSCode ima IntelliSense, tehnologiju koja pruža sugestije koda dok programirate. Primjerice, ako ste negdje prije u kodu deklarirali varijablu let brzina = 170 i kasnije u kodu počnete pisati brzina, VSCode će vam predložiti dovršetak s njezinim imenom. Naravno, ovo je najosnovniji primjer. VSCode ima puno drugih značajki koje ćete otkriti, a jedna od najjednostavnijih je isticanje ključnih dijelova koda bojom, kao što ste vidjeli u primjeru gore.

Uz IntelliSense, VSCode ima ugrađeni terminal, preglednik datoteka unutar projekta, podršku za gotovo sve programske jezike putem ekstenzija te razne teme i izglede. VSCode je također IDE koji koristi većina web-programera u profesionalnom okruženju i, po mom mišljenju, izgleda puno ljepše od IDLE-a.

Računalo u oblacima

VSCode nećete instalirati na vaše računalo (iako možete, upute se nalaze na kraju knjige) nego ćete koristiti računalo u oblaku preko platforme GitHub Codespaces. GitHub je platforma za programere na kojoj pohranjujemo i dijelimo kod, međusobno komuniciramo i promoviramo softver. Praktički društvena mreža za programere koju ćete i vi koristiti.

GitHub Codespaces je GitHubova platforma koja omogućuje svima s GitHub računom (besplatan je!) da dobiju virtualno računalo smješteno na GitHubovim serverima i pristupe mu putem VSCode-a u pregledniku. Tako je, sve što vam je potrebno za potpuno korištenje ove knjige je web-preglednik, po mogućnosti Chrome. Specifikacije vašeg računala nisu važne. To virtualno računalo (Codespace) ima dvije procesorske jezgre, 8 GB RAM-a i oko 60 GB prostora na disku. Te specifikacije su više nego dovoljne za sve što ćemo raditi dok koristimo ovu knjigu. Promjene koje napravite u Codespaceu trajno se spremaju u oblak i možete se prijaviti bilo gdje i nastaviti s programiranjem.

Korištenje Codespacea je poželjno jer nam omogućuje standardizaciju razvojnog okruženja svih učenika i time osigurava da svi mogu isprobati i pokrenuti sve što smo zamislili, neovisno o specifikacijama računala u školi ili kod kuće. Zajamčeno je da svaka škola i svaki učenik imaju računalo dovoljno snažno za pokretanje Chromea. Ostalo nije važno. Drugi razlog je što ne zahtjeva nikakvu lokalnu instalaciju programa niti postavljanje radnog okruženja, što otklanja niz problema koji dolaze s instalacijom softvera (nažalost, taj problem nikad ne nestaje).

OK, kako da ja dobijem Codespace?

Prvi korak je registracija GitHub računa. Za to vam je potrebna e-adresa i lozinka (izaberite snažnu lozinku!). Često ćete koristiti GitHub tijekom učenja, pa će se ovo vrijeme isplatiti!

Otvorite GitHubovu stranicu za registraciju i unesite svoju e-adresu, lozinku i korisničko ime. Preporučujem vam da ne uključite slanje promotivnih e-poruka od GitHuba. Zatim će vas GitHub zamoliti da riješite jednostavan zadatak kako bi potvrdio da niste robot. Ako želite, možete odabrati glasovni umjesto vizualnog zadatka. Slijedite upute i kad završite, nastavite. GitHub će vam poslati kod na unesenu e-adresu za verifikaciju računa. Otvorite svoj e-mail račun i unesite taj kod.

Nakon toga je registracija dovršena i GitHub će vas preusmjeriti na vaš profil. Drugi korak je otvaranje naše stranice, klik na gumb Codespaces u gornjem desnom kutu i odobravanje pristupa našem serveru. Nakon toga ćemo za vas napraviti Codespace i preusmjeriti vas na njega. To je to! Sljedeći put kad budete htjeli otvoriti svoj Codespace, otvorite tu stranicu i ponovno se prijavite s GitHubom. Dočekat će vas tamo gdje ste stali.

Za nekoliko sekundi bi vas trebao dočekati ovakav ekran:

Prvo postavljanje Codespacea može potrajati nekoliko minuta, stoga budite strpljivi, isplatit će se. Kada se postavljanje završi, dočekat će vas potpuni VSCode u pregledniku u kojem možete odmah početi programirati. Automatski podržava mnoge jezike (uključujući Python, JavaScript, HTML, CSS, C/C++, SQL itd.), a možete instalirati ekstenzije za dodavanje podrške za još njih.

Popis predinstaliranog softvera nalazi se na gore navedenoj stranici. Korištenje vašeg Codespacea je za sada neograničeno i naravno smijete ga koristiti za bilo što vezano uz informatiku, ne samo za ovaj predmet i knjigu.

Zaključak

Sada ste spremni u potpunosti iskoristiti sve što ova knjiga i kurikulum nude. Tijekom sljedećih nekoliko poglavlja naučit ćete kako raditi sofisticirane web-aplikacije. To znanje ćete moći iskoristiti za izradu mobilnih i desktop aplikacija! U sljedećem poglavlju (prvom projektnom poglavlju!) prvo ćemo zajedno napraviti jednostavnu web-stranicu kako biste vidjeli praktičnu primjenu tog znanja. Nemojte preskakati ovo poglavlje, čak i ako preferirate učiti korak po korak, jer ćete u njemu naučiti kako koristiti Visual Studio Code!

Nadam se da ćete uživati u ovom procesu učenja. Ako imate prijedloge za poboljšanje knjige ili kurikuluma, neovisno o tome koliko su veliki ili mali (čak i ako je samo tipfeler!), slobodno nam javite! Sretno programiranje!