Uvod v spletno inženirstvo

Uvod v spletno inženirstvo

• Spletno inženirstvo je znanstvena disciplina, ki se ukvarja s sistematičnim razvojem, testiranjem, delovanjem in vzdrževanjem spletnih aplikacij. Pri tem sodelujejo različni strokovnjaki, kot so administratorji, arhitekti, razvijalci baz podatkov, testerji in projektni vodje.
• Posebnosti vključujejo multidisciplinarnost, potrebo po ustreznih uporabnikih za potrditev, hitre tehnološke spremembe, nove medije, povezovanje z zalednimi aplikacijami ter zagotavljanje kakovostnega vmesnika in vsebine.
• Strežnik prejema uporabnikove zahteve preko protokola HTTP, ki je aplikacijski protokol za komunikacijo. Obstaja tudi asimetrični protokol, kjer odjemalec potegne informacije iz strežnika (Pull protocol).
• Statične spletne strani so vnaprej pripravljene, medtem ko se dinamične generirajo na strežniku iz podatkov. Strežnik preverja, ali so podatki še veljavni, in vrne kodo 304, če se niso spremenili.

Postopek pri dinamični spletni strani

• Uporabnik v brskalniku odpre spletno stran, kar sproži zahtevo brskalnika strežniku.
• Strežnik za obdelavo zahteve sproži program, kot je PHP, Python ali Node.js.
• Program naloži predlogo spletne strani, ki je osnovna struktura HTML brez konkretnih podatkov.
• Program pridobi potrebne podatke iz podatkovne baze, kot je MySQL ali PostgreSQL.
• Program združi predlogo in podatke, da ustvari končno HTML stran s podatki.
• Strežnik pošlje ustvarjeno stran brskalniku, ki jo prikaže uporabniku.

Caching in piškotki

• Caching (spletno predpomnenje) izvaja posredniški strežnik, ki skrajša čas odziva in zmanjšuje promet. Posredniški strežnik ima svoje kopije in odgovarja namesto strežnika.
• Piškotki se uporabljajo za shranjevanje nizov, ker je HTTP protokol brez stanj. Piškotki omogočajo sledenje uporabnikom in prepoznavanje sej.
• Struktura piškotka vključuje ime, vrednost, domeno, datum izteka, pot, nastavitve za varno povezavo in dostop.
• Seja je povezana s piškotki in shrani uporabniške objekte. Seji je dodeljen naključen niz, imenovan ID seje.
• Ob prvem ustvarjanju seje se ID seje prenese nazaj v brskalnik, ki ID seje vključi v vse nadaljnje zahteve.
• Seje se shranjujejo na strežniški strani kot objekti, ki se izgubijo, ko uporabnik zapre odjemalca.
• Alternativa piškotkom je webstorage; IP naslov se uporablja za ugotavljanje uporabnikov, lahko pa se uporabi tudi skrita polja v obrazcu ali http avtentikacija.

Obrazci, avtentikacija in avtorizacija

• URL nizi poizvedbe se uporabljajo za shranjevanje podatkov v URL-ju.
• Element HTML obrazca ima atribut "action", ki definira URL, kamor se pošljejo podatki (kot parametri poizvedbe GET ali preko POST).
• Avtentikacija je preverjanje pristnosti uporabnika, pri čemer mora uporabnik dokazati svojo identiteto z uporabniškim imenom in geslom.
• Avtorizacija je dovoljenje za dostop do določenih virov, ki ne vključuje dostopa do vseh virov. Avtorizacija zahteva avtentikacijo.
• Za upravljanje digitalnih identitet se večinoma uporablja verifikacija z uporabniškim imenom in geslom. Enkratna prijava (SSO) omogoča dostop do povezanih sistemov.
• Strežniški paketi omogočajo ustvarjanje lokalnega razvojnega okolja (peskovnika), kjer razvijalci preizkušajo programsko kodo. Primeri: WAMP, XAMP, laragon.

NoSQL in MVC

• Podatkovne baze NoSQL so primerne za delo na spletu in podpirajo replikacijo, hitro delovanje, visoko razpoložljivost, širjenje in obdelavo velikih količin podatkov.
• DBMS (Database Management System) upravlja relacijske baze podatkov, kot so MySQL, SQLlite, MariaDB, kjer so podatki zaščiteni.
• MVC (Model-View-Controller) je vzorec arhitekture programske opreme.
• Prva generacija spletnih ogrodij je mešana programska koda s HTML. Uporabljajo se spletne knjižnice za upravljanje URL-jev, generiranje HTML, seje in vmesnik do baze podatkov.
• Druga generacija spletnih ogrodij temelji na MVC in omogoča lažjo uporabo podatkovnih baz preko objektno relacijske preslikave (ORM).
• Tretja generacija spletnih ogrodij se izvaja v brskalniku (interaktivne in hitro odzivne aplikacije).
• Četrta generacija ogrodij omogoča osredotočanje na komponente JavaScript in uporabo virtualnega DOM (učinkovitost, upodabljanje na strani odjemalca, nativne aplikacije).

MVC arhitektura in vzorec kontrolerja

• MVC jasno razdeli odgovornosti spletne aplikacije: model upravlja podatke, pogled oblikuje stran, kontroler upravlja zahteve, pridobiva podatke in nadzira pogled.
• Model upravlja podatke (objekti v PHP, JavaScript). Pogled definira izgled strani (HTML/CSS). Kontroler pošilja podatke med modelom in pogledom.
• Usmernik pridobiva informacije iz URL poizvedb in ustvarja URL-je.
• V "controllers" imamo dva arraya: controllers in action ter imamo neke akcije.
• MVC kontroler implementira vse akcije, poveže modele s pogledi, nadzira poglede in upravlja z interakcijami uporabnikov (centralizirana vstopna točka za vse zahteve).

Varnost in JavaScript okvirji

• Izogibati se je treba vnosu podatkov v poizvedbo SQL brez obdelave, da se prepreči SQL Injection napade. Poskus vdora se zgodi, če uporabniški vnos vključimo v poizvedbo SQL brez obdelave podatkov.
• Lahko omogoči ogled, spreminjanje informacij ali izvedbo operacij
• Moramo preveriti vse, kar pride od uporabnikov in podatke, ki pridejo iz zunanjih virov. Model napadov so: napadi na povezavo brskalnik-strežnik, napada na strežnik/brskalnik, zavajanje uporabnikov.
• "node.js" združuje uporabo orodij za spletno aplikacijo, deluje na čelni in zaledni delom sistema.
• Fullstack razvijalec pomeni, da ima znanje o front in backend, bazah, devops in opravljanju infrastruktur
• MERN stack je: mongo- express-react-node.js in je odprtokodni paket programske opreme za izdelavo speltnih aplikacij
• Čelni del so: Document Object Model (DOM) -MVC, single page apps, material design in HTML, CSS, Javascript, raje uporabimo frameworks: angular/resct/Vue

"Node.js" in MongoDB

• Zaledni del so: Spletni strežnik: piškotki, seje, procesiranje http, API, implementacije: Node.js/apache, mongoDB/postreSQL
• "node.js": Izvaja Javascript na strani spletnega strežnika/ ima eno samo nit. Sodeluje v ciklu "zahteva-odgovor".
• Izogibati se je treba zahtevam v vrstnem redu končani ter je na voljo callback (ne vsebuje podpore za spletni razvoj).
• Moramo dodati express.js da ima usmerjanje zahtev in predloge za dinamično ustvarjanje odgovorov in generiranje kode
• MongoDB baza, node.js – izvajalno okolje, express – spletno ogrodje
• React je JS knjižnica za izgradnjo spletnih aplikacij na odjemalčevi strani.
• HTML je le v view

Komponente in podatki

• Nemoremo uporabljati if-then-else, imeti moramo index.js za komponente
• Stanje je objekt, ki hrani za upodabljanje podatke, npr: Tukaj lahko shranimo podatke iz klica RESTful APIja
• Stanje more biti odvisno od našega delovanja,
• Ni možnosti spreminjati stanje med upodabljanjem, kar preprečuje neskončno zanko (pure function)
• Edino kar smemo komunicirati, če hočemo render je brskalnik (za to uporabimo lifecycle metode)

React Router in Baze

• Iz ukazne vrstice lahko generiramo različne dele aplikacije React: Page, Component, Hook, Service
• React Hooks so funkcije, ki razvijalcem omogoča, da se iz komponent priklopijo na stanje in življenski cikel. Vgrajene funkcije: useState, useContext, useReducer in useEffect pravila: Hooks uporabljamo samo na najvišji ravni, hook kličemo samo iz funkcije komponente
• Dokumentna baza podatkov (v relacijskih se en objekt razdeli na več tabel) Dokumentne pa hranijo objekt v enem dokumentu

Spletne storitve in NoSQL baze podatkov

• Spletne storitve zagotavlja neodvisno delovanje storitev
• REST podpira vse http metode (GET, POST, PUT, DELETE), ki omogoča kreiranje, branje, preverjanje in brisanje v bazi podatkov
• MongoDB: databases, collections, documents, fields, obe rešitvi imata: primary keys, indexes
• ACID je model relacijskih podatkovnih baz, ki temelji na transakcijah: atomarnost, konsistentnost, Izolacija, trajnost.
• CAP teorem pravi da porazdeljen sistem lahko ponudi samo 2 od teh 3 : Konsistentnost, razpoložljivost, particijska toleranca