Web Engineering Notes - Introduction to Web Development PDF

Uvod  Spletno inženirstvo je znanstvena disciplina, ki se ukvarja s sistematičnimi merljivimi načini (analize zahtev, načrtovanje, razvojem, testiranje, delovanje in vzdrževanje spletnih aplikacij)Vloge: administrator, arhitekt, baze, tester, vodja projekta… o Posebnosti: mult...

Uvod  Spletno inženirstvo je znanstvena disciplina, ki se ukvarja s sistematičnimi merljivimi načini (analize zahtev, načrtovanje, razvojem, testiranje, delovanje in vzdrževanje spletnih aplikacij)Vloge: administrator, arhitekt, baze, tester, vodja projekta… o Posebnosti: multidisciplinarnost, ustrezni uprabniki za potrditev, hitre spremembe tehnologij, novi mediji, povezovanje z zalednimi aplikacijami, kvaliteta vmesnika in vsebine.  Naloga strežnika je sprejemati zahteve, HTTP je aplikacijski protokol za komunikacijo strežnik uporabnik. Poznamo še asimetrični protokol odjemalca-strežnika, ki temelji na odzivu na zahtevo. Pull protocol: odjemalec potegne info iz strežnika.  Poznamo statične in dinamične spletne strani. Statične so že narejene in samo pošljemo dokument, medtem ko dinamične so generirane iz nekih fresh podatkov na strežniku in pošljejo uporabniku. Vsakih par minut preveri če so še vedno vredu podatki, če so je koda 304 not modified. Postopek pri dinamični spletni strani – Zapiski  Zahteva iz brskalnika: Uporabnik v brskalniku odpre neko spletno stran → brskalnik pošlje zahtevo strežniku.  Obdelava na strežniku: Strežnik sproži program (npr. PHP, Python, Node.js), ki zna obdelati to zahtevo.  Uporaba predloge: Program naloži predlogo (template) spletne strani – to je osnovna struktura HTML strani brez konkretnih podatkov.  Dostop do baze: Program pridobi potrebne podatke iz podatkovne baze (npr. MySQL, PostgreSQL).  Sestava strani: Program združi predlogo in podatke → ustvari končno HTML stran s konkretnimi informacijami.  Pošiljanje odgovora: Strežnik pošlje ustvarjeno (dinamično) spletno stran nazaj brskalniku, ki jo prikaže uporabniku.  Caching (spletno predpomnenje): opravlja posredniški strežnik (skrajša čas odziva, zmanjšuje promet) o Posredniški strežnik odgovarja namesto strežnika in ima svoje kopije  Spletni brskalnik je aplikacija za dostop do informacij na svetovnem spletu  Spletni strežnik procesira dohodne zahteve http in lahko vsebuje več spletnih mest  Piškotki: o Shranjujemo neki string o Zakaj? http protokol je brez stanj (ne moremo nič shranit), prepoznamo seje, želimo slediti uporabniku, o Struktura: name (obvezno), value (obvezno), domain, expiry, path, secure connection, access  Seja: o Seja povezana s piškotki o Shrani uporabniške objekte  o Seji dodeljen random niz, imenovan ID seje o Ko se seja ustvari prvič, se ID seje za to sejo kot del odgovora prenese nazaj v brskalnik uporabnika o Vsaka naslednja zahteva brskalnika vključuje ID seje  Alternativa piškotkov (webstorage) IP uporabljen za ugotavljanje uporabnikov, uporaba skritih polj v obrazcu, http avtentikacija  URL nizi poizvedbe: shranjeni kaki podatki v URLju  Obrazci (form) o Html element o Action: URL (kam pošljemo vnesene podatke o Zhatevki so lahko GET (zapakiramo kot parametri poizvedbe) ali POST (poizvedbeni niz)  Avtentikacija o Preverjanje pristnosti (strežnik točno ve kdo želi dostopati) o Uporabnik mora dokazati svojo identiteto o Uporabniško ime in geslo  Avtorizacija o Dovoljenje do določenih virov o Dobimo pravice do nekaterih virov ne pa vseh o Včasih tega nimamo o Neka vrsta avtentikacije je potrebna za avtorizacijo  Upravljanje z digitalnimi identitetami o Večina verifikacija s uporabniškim imenom in geslom o Enkratna prijava (SSO) nekje se prijavimo in imamo dostop do vseh povezanih sistemov o Enkratna odjava o Preverjanje v dveh korakih (two step verification)  Strežniški paketi o Lokalno spletno in razvojno okolje o Ustvarimo lokalno okolje (peskovnik), v katerem razvijalci napišejo, uporabijo in preizkusijo programsko kodo o Primeri: WAMP (Windows, Apache, Mysql, PHP), XAMP, laragon  Podatkovne bate NoSQL o To pomeni Not Only SQL o Bolj primerne za delo na spletu o Zakaj je dobro? Easy replication, fast performance, high availability, high scalability, big data capability  DBMS je sistem za opravljanje baze podatkov. Relacijski DBMS: MySQL, SQLlite, MariaDB o MySQL: objekti (baza, tabele, stolpci, zapisi), standardni SQL. Vsebuje information_schema, ki vsebuje podatke o vseh bazah na strežniku. Podatki so zaščiteni Vzorec MVC  Prva generacija spletnih ogrodij o Mešana programska koda in HTML o Izgled opišemo s HTML in CSS o Spletne knjižnice: upravljanje URL, generiranje HTML, seje, vmesnik do baze podatkov o Primeri: php, ASP.net…  Druga generacija spletnih ogrodij o Temeljijo na model-pogled-kontroler (model view controller, MVC) o Objektno relacijska preslikava (ORM – object relational mapping), lažja uporaba podatkovnih baz o Primeri: django, laravel, ruby on rails  Tretja generacija o Javascript ogrodja se izvajajo v brskalniku (interaktivne, hitro odzivne o Ogrodja, ki niso odvisna od zmogljivosti na strani strežnika (node.js, noSQL) o Številni konvepti prejšnjih generacij se prenašajo naprej (MVC, šablone-opis pogleda v HTML/CSS) o Primer angular js  Četrta generacija o Ogrodja omogočajo, da se osredotočimo za komponente javascript o Pogledi kot komponente za večkratno uporabo o Virtualni DOM (upodobitev pogledov v pomnilniku, podobno DOM. Prednosti: učinkovitost, upodabljanje na strani odjemalca, nativne aplikacije) o Koncepti se prenesejo naprej (javascript na strežniku, MVC, šablone) o Primeri: react.js, vue.js, angular  MVC o Načrtovalni vzorec, ki jasno razdeli odgovornosti splenti aplikaciji o Model: upravljanje s podatki (objekti v PHP, javascript. Primeri: uporabniška imena, opravila…) o Pogled: kako izgleda stran (HTML/CSS, primer: pogled uporabniškega računa, pogled vseh opravil) o Kontroler: upravlja zahteve uporabnika, pridobiva modele, nadzira pogled  Razpošiljanje z usmernikom o Pridobivanje info iz URL poizvedb (parametri) o Za ustvarjanje URL-jev je odgovoren usmernik o V controllers imamo samo dva kontrolerja v arrayu, potem pa imamo tudi neke akcije.  Znotraj MVC kontrolerja so implementiranje vse akcije (odgovornosti: poveže modele s pogledi, nadzira poglede, upravlja z interakcijami uporabnikov)  MVC o Kontroler  Vzorec programske opreme, ki omogoča centralizirano vstopno točko za vse zahteve, povezane s določenimi funkcionalnostjo  Vsi URL-ji kažejo na isto skripto o Pogled  Generiranje HTML/CSS  Uporabljajo se šablone ali predloge  Pogosto uporabljena tehnika  Dokument, ki vsebuje dele, ki so vedno enaki (statični) in doda delčke kode, ki se izračunajo (enostavna vizualizacija, enostavno vidimo dinamične podatke)   Veliko pristopov k pripravi predlog (preprosta ogrodja: uporabijo HTML, novejša (react) o Model  Dostop do podatkov  Funkcije ki jih kliče kontroler iz podatkovne baze  Kontroler spreminja model  Vse dinamične informacije, ki jih potrebuje pogled  Vezan na podatkovno bazo VARNOSTI IN SANIRANJE PODATKOV  Poizkusi vdorov (če uporabniški vnos vstavimo v poizvedbo SQL brez obdelave podatkov  Neveljavni vnos (napake uporabnikov, nerazumevanje zahtevanih podatkov o Obrazec za urejanje ime in priimka o Podatki iz obrazca se neposredno uporabljajo pri posodobitvi v podatkovni bazi  Kaj lahko gre narobe? SQL injection: 'tomaz\'); DROP TABLE duser; o Lahko omogoči ogled, spreminjanje informacij ali izvedbo operacij o Z našo aplikacijo lahko napademo karkoli, če nam uporabnik zaupa.  Problem spletnih aplikacij: velika priložnost za napadalce (sklad rešitev so vstopne točke napadalca), težko prepoznati ranljivosti  Modeli napadov: napadi na povezavo brskalnik-strežnik, napad na strežnik/brskalnik, zavajanje uporabnikov.  Zahteve: ▪ $ _GET: parametri iz naslova URL ▪ $ _POST: parametri, objavljeni v telesu HTTP (podatki obrazca) ▪ $ _FILES: zapisi o naloženih datotekah ▪ $ _SERVER: nastavitve strežnika in glave zahtevkov ▪ $ _ENV: spremenljivke okolja  Odgovor: izhod je vključen v telo odgovora, glava se lahko spremeni s funkcijo  Preveriti moramo vse kaj pride od uporabnika in podatki, ki pridejo iz zunanjih virov o Preverimo ob vnosu in izhodu. Kako? Ročno (regularni izrazi, funkcije filtriranja, dodelimo int za id…), knjižnice (PDO, MySQLi) – uporabimo pripravljene stavke. Prepričajte se, da se rezultat ujema s ciljnim kontekstom (htmlspecialchars()- kodiranje za html, regularni izraze, filtra, funkcije nizov) Node.js  Celostna razvojna arhitektura združuje uporabo orodij za spletno aplikacijo. Deluje na čelni (frontend) in zalednim (backend) delom sistema  Deluje na requestih in responsih med frontendom in backendom  Fullstack razvijalec pomeni, da ima znanje o front in backend, bazah, devops in opravljanju infrastruktur  MERN stack (mongo- express-react-node.js) o Brezplačen odprtokodni paket programske opreme za izdelavo speltnih aplikacij o MERN rešitve se pišejo v javascript (ter typescript)  Alternative: o LAMP (linux-apache-mysql-php) o MEAN (mongo, express, angular, node.js) o MERNG ( MERN + graphQL) o PERN (postgreSQL, express, react, node.js)  Čelni del (front-end): o Implementacija: -Document Object Model (DOM) -MVC, single page apps, material design o Tehnologije so HTML, CSS, Javascript, raje uporabimo frameworks: angular/resct/Vue  Zaledni del (back-end): o Tehnologije:  Spletni strežnik: piškotki, seje, procesiranje http, API  Implementacije: Node.js/apache, mongoDB/postreSQL  Zaledni del danes delamo: razpoznavanje zahteve in vrnitev odgovorov  Spletni strežnik je tisti ki sprejema zahteve in pošilja odgovore (node.js).  Aplikacijski strežnik ko zbere vse podatke je dolžan poslati podatke v spletni strežnik Node.js  Izvaja Javascript na strani spletnega strežnika  Je ne blokiran sistem I/O model, ki temelji na dogodkih. Zato je lahek in učinkovit, super za podatkovno intenzivne aplikacije v realnem času.  Zahteve se obravnavajo v eni niti o Ko dobimo request ga, da nit v event loop tako je nit vedno prosta o Ne rabijo biti reqeusti v vrstnem redu končani, ko ga je konec ga je pač konec o Ko se zaključi operacija se naredi callback  Blokirne operacije pa v več nitih ter uporabljajo povratne klice (callback)  Uporabljamo Javascript, vendar javascipt ni node.js ker imata razlike o V node.js je odstranjeno kaj delaš s HTML-jem, zato ker je to delo za front-end o Delamo s OS, datotečnim sistemom in procesi (dogodki, čakalne vrste dogodkov) o Torej dodani so bili sistemski moduli  Podobnosti s Javascript o Primitivni tipi (string, number boolean…) o Vse ostalo je objekt o Dinamično tipizaran (var) o Funkcije  Razlike o Dodatni tip (buffer) o Doseg var (globalno -> lokalno) o Dostop do globalnega dosega (objekt global)  REPL o Okolje REPL (read eval print loop)   Enostavno za uporabo  Zaženemo s node o Način za testiranje kode o Dva načina delovanja  Intepreter (ctrl + C za izhod)  Izvajanje skript  Veliko standardnih knjižnic (moduli)  Importamo module s pomočjo funkcije require() o Require() vrne objekt, funkcijo, lastnost ali katero koli drug koncept JS  Npm (node package manager)  Primeri npm modulov: nodemon, express, mongoose  Npm lahko nalagamo posamezne pakete, posodobitve, preverimo verzijo itd.  Package.json o Datoteka v korenskem direktoriju vsakega node.js o Definira lastnosti projekta o Elementi: name, version, scripts, description, homepage, author, dependecies, repositories  Modul fs o Standardni (core) modul o Vhodno/izhodnih klicih OS o Z require() naredimo klic modula o Fs objekt kliče datotečni sistem za sinhronizacijo z OS o Buffer je optimiziran za shranjevanje in operiranje binarnih podatkov o Optimizirana skupna raba preko kazalcev in ne s kopiranjem o Vsaka metoda ima sinhrono in asinhrono verzijo: reafileSync() / readfile() o Asinhrone metode prejmejo zadnji argument funkcijo povratnega klica o Zapis povratnega klica (readDoneCallback): prvi argument je error, dataBuffer je poseben objekt o Če je možno vedno uporabimo asinhrone funkcije  Povratni klic o Povratni klic je asinhroni ekvivalent funkcije o Pokliče se ob zaključku funkcije o Node.js APIji podpirajo povratni klic  Obdelamo veliko število zahtev brez da bi čakali da prejmemo rezultate  Node.js uporablja eno samo nit  Sočasnost podprta s konceptoma dogodek in povratni klic  Uporablja vzorca opazovalec  Modul events o Posluša z on() ali addListener() o Signalizira z emit() o Ob oddajanju se poslušalci pokličejo sinhrono in po vrstnem redu kako so bili registrirani o Če poslušalca ni, potem emit() pomeni NOP  EventEmitter o Več različnih dogodkov za različna stanja ---------- o Ravnanje s napakami je pomebno ker drugače se node.js ustavi  Modul stream o Tokovi so objekti, ki prebirajo podatke iz vira ali zapisuje podatke na cilj o Modul stream ustvari/uporabi tokove podatkov  o Vsi so oddajniki in običajno vsebuje dogodke: data, end, error, finish o Lahko povežemo tokove dinamično: dodamo module v tok (stream.push)  Globalni objekti o Na voljo v vseh modulih. o Objekti so: moduli, funkcije, nizi, objekt  Modul http o Ustvari primerek strežnika http za obelavo zahtev o Za odgovor nastavimo vrsto, pošljemo odgovor in prekinemo povezavo o Zaženemo na port 3000  Nodemon: pripomoček za razvijalce, ki opaža spremembe v kodi.  API: je vmesnik, ki omogoča komunikacijo med različnimi spletnimi aplikacijami: dostop do podatkov, uporaba http protokolov, format izmenjave podatkov, končne točke  Skaliranje aplikacije o Node.js omogoča podrejene procese, da se vzpostavi vzporedna obdelava na večjedrnih sistemih o Trije tokovi: child.stdin, child.stout, child.stderr o Modul child_process, ki ima nasledne načine za ustvarjanje prodrejenih procesov: Podatkovne baze in spletne storitve  Ker ima javascript nekaj pomankljivosti so naredli jezike na javascriptu, ki se na koncu v browseru izvaja vseeno javascript  JSON o Javascript object notation o Standardni fromat za predstavitev in izmenjavo podatkov o Preprosta sintaksa o Sredstvo za opisovanje podatkov o Lahko ima vrednosti: string, int, bool, null, objekt, polje… o Serializacija pomeni pretvoriti objekt v niz, ki je oblikovan po pravilih JSON o Deserializacija je njegova obratna operacija – pretvori niz v objekt  Xml:  Spletne storitve omogoča dostop do podatkov iz centralizirane podatkovne baze iz različnih virov  Zagotavlja neodvisno delovanje storitev  Uporabnik ne ve kako storitve delujejo  Storitve vseubejejo tri komponente: vmesnik, pogodba, implementacija  REST o Arhitekturni vzorec (kako naj izgleda storitev) o REST podpira vse http metode (GET, POST, PUT, DELETE) o CRUD (create, retrival, update, delete) bistvene operacije baze podatkov o Slabosti: ni protokolov o Prednosti: hiter, jezik in platforma, lahko uporabite SOAP…  Kaj je razlika med REST in RESTful API? REST je arhitekturni vzorec za ustvarjanje spletnih storitev, RESTful je implementacija tega  Postman o Je programski produkt za razvoj, uporabo in testiranje APIjev o Pošlje zahtevo API in prikaže odgovor  SOAP o Še ena alternativa za spletne storitve o Enostaven, ker temelji na xml o Priporoča W3C za komunikacijo med aplikacijami  Relacijske podatkovne baze temeljijo na transakcijah (zaporedje operacij v bazi podatkov, ki tvorijo eno opravilo). Pretvori bazo iz enega v drugo stanje. Med izvajanjem je baza lahko ne skladna. Vse operacije morejo uspeti drugače transakcija faila  CAP teorem o Eric Brewer o Ko pride do okvare omrežja se odločimo:   prekličemo operacijo zmanjša razpoložljivost, vendar zagotovimo konsistentnost  nadaljujemo z operacijo obratno o za porazdeljeno shranjevanje podatkov je nemogoče hkrati zagotoviti več kot dva od treh garancij  Podatkovne baze NOSQL o Not only SQL o Ne sovpada s tradicionalnimi relacijskimi modeli o Za procesiranje velikih količin strukturiranih in nestrukturiranih podatkov  Model BASE: noSQL temelji na tem modelu  Dokumentna podatkovna baza (v relacijskih se en objekt razdeli na več tabel) o Dokumentne pa hranijo objekt v enem dokumentu o Nabor parov: ključ – vrednost (vrednosti so dokumenti) o Dokument je strukturiran v binarnih velikih objektih (BLOB) o Lahko dokumente indeksiramo o Dokumenti imajo svoj ključ (string, URI) o Podpirajo CRUD (create, retrieval, update, deletion) o Osnovne operacije so podobne drugim zbirkam ampak terminologija no popolnoma standardizirana  Poizvedovanje o V dokumentnih bazah je po ključu (dobimo celoten dokument) o Popularne baze: mongodb, amazon dynamoDB  mongoDB o rešitev NoSQL o podatki so shranjeni v BSON (Binary JSON) o omogoča shranjevanje velike količine podatkov  podatkovne baze grafov o Specializirane za shranjevanje podatkov, predstavljenih v obliki grafov o Primeri: družbeni odnos, namere, plačilni promet, interesi o Lastnosti:  Podatkovne structure s katerimi opisujemo grafe  Optimizirano za sprehajanje po grafu brez uporabe indeksov  namesto globalnih poizvedb iskanje iz izbranih vozlišč o Podatki so predstavljeni kot vozlišča (angl. vertices) in povezave (angl. edges) o Podatkovne baze grafov so zmogljive za poizvedbe, podobne grafom o Vozlišče so med seboj povezani z nedoločenim številom povezav. o Primeri: Neo4j, MS Azure Cosmos DB, ArangoDB  Neo4j o databases, graphs, nodes, relationships, properties o Vozlišča – Predstavljajo entitete (osebe, kraje, izdelke itd.). o Relacije – Povezujejo vozlišča in imajo lahko smer ter lastnosti.  o Lastnosti – Shranjujejo informacije o vozliščih in povezavah. o Oznake – Kategorije, ki jih lahko dodelimo vozliščem za lažje iskanje. o Poizvedovalni jezik (Cypher) – Podoben SQL-ju, a prilagojen za delo z grafi.  Podatkovne baze ključ - vrendnost o Podatki so prestavljeni kot pari ključ – vrednost  Ključ se pojavi samo enkrat, vrednost pa je lahko kompleksna o Ključi so v sekljalni tabeli o Podpirajo CRUD o Težave: nestrukturirani podatki, ni povepraševalnega jezika SQL o Primeri: redis, amazon dynamoDB  Redis: databases, keys, values, hashes Stolpčne baze podatkov Definicija:  Stolpčne baze podatkov (angl. Column Data Store) so hibrid med relacijskimi podatkovnimi bazami in ključ–vrednost sistemi. Značilnosti:  Podatki so shranjeni v celicah, združenih po stolpcih, ne po vrsticah (kot v tradicionalnih relacijskih bazah).  Vsak stolpec običajno vsebuje: ime, vrednost, časovni žig  Ta način shranjevanja omogoča hitrejše poizvedbe, zlasti za analitične namene. Družine stolpcev (Column Families):  Stolpci so logično združeni v družine stolpcev.  Ena družina lahko vsebuje neomejeno število stolpcev.  Branje in pisanje poteka preko stolpcev, ne vrstic.  Podatki v posameznem stolpcu so shranjeni neprekinjeno, kar izboljša dostopnost in hitrost iskanja. Široko stolpčne shrambe (Wide Column Stores) Definicija:  Tudi imenovane shrambe razširljivih zapisov (Wide Column Store). Značilnosti:  Temeljijo na enakem principu kot stolpčne baze, a omogočajo bolj fleksibilno strukturo podatkov.  Uporabljajo dvodimenzionalni model ključ–vrednost.  Primerne za zelo velike količine podatkov.  Stolpci so združeni v družine stolpcev → ti postanejo super stolpci.  Super stolpce lahko združimo v družine super stolpcev, kar tvori tabele. Primeri široko stolpčnih shramb:  Apache Cassandra, Apache HBase, Apache Accumulo Jquery  Hitra uporabljena javascript knjižnica  Omogoča preprostejšo manipulacijo HTML dokumentov  Poenostavlja: sprehode po strukturi HTML, obdelovanje dogodkov, animiranje in interakcije Ajax  Sintaksa: $(selektor).akcija() Razlika med sinhrono in asinhrono komunikacijo Analogija:  Telefonski klic = sinhrona komunikacija o Obe strani morata biti hkrati prisotni, da komunicirata.  SMS sporočilo = asinhrona komunikacija o Ena stran pošlje sporočilo, druga ga lahko prebere pozneje – ni potrebna takojšnja prisotnost. V spletnem kontekstu:  Cikel zahteve/odgovora, ki ga uporablja večina spletnih aplikacij, pomeni sinhrono delovanje: o Odjemalec pošlje zahtevo in mora čakati, da strežnik odgovori.  Pri uporabi asinhrone komunikacije: o Aplikacija deluje neodvisno – lahko reagira takoj ali z zamikom. o Odjemalec se ne zablokira med čakanjem na odgovor strežnika. AJAX (Asynchronous JavaScript and XML)  Kratica za Asynchronous JavaScript and XML.  Omogoča asinhrono interakcijo med odjemalcem (brskalnikom) in strežnikom. Značilnosti AJAX-a:  Ni potrebe, da uporabnik klikne »Pošlji« – lahko se sproži npr. ob kliku, premiku miške, vnosu teksta itd.  Pogosto uporabljen za odzivanje na dogodke v uporabniškem vmesniku.  Zgodnje uporabe AJAX-a: o Google Maps, Gmail. Ključne prednosti: 1. Asinhrona obdelava zahtev – uporabnik lahko nadaljuje z uporabo strani, medtem ko se podatki nalagajo v ozadju. 2. Delna osvežitev vsebine – spreminjajo se samo določeni deli strani, ne celoten dokument. Tehnologije vključene pri uporabi AJAX-a:  Odjemalec (brskalnik): o JavaScript, XML/XHTML, DOM, CSS.  Strežnik: o Katerekoli spletne tehnologije:  Servleti, JSP, PHP, ASP.NET itd. Express.js, Mongoose, MongoDB  Node.js: ne vsebuje podpore za spletni razvoj. Napredno usmerjanje zahtev, predloge za dinamično ustvarjanje odgovorov in generiranje kode o Možno je da sami zapišemo podporo ali pa uporabimo ogrodja poleg  Express.js je spletno ogrodje za node.js o Hitro in minimalistično ogrodje o HTTP: vzpostavitev povezave TCP, obdelava zahtev in pošiljanje odgovorov http o Usmerjanje: povežemo URL-je s HTTP zahtevami o Vmesni sloj (middleware)- ogrodje, ki povezuje druga vmesna programska oprema o Moduli za delo s piškotki, sejami, prijavo, URL parametri, varnsot o Odgovori so v pogledih (views) o Metode za usmerjanje: GET, POST, PUT, DELETE o Poti so lahko statične ali dinamične (s parametri)  HTTP Request (req)  req.params: URL parametri (npr. user_id)  req.query: Poizvedbeni parametri (npr. ?used=false → {used: 'false'})  req.body: Vsebina telesa zahteve (JSON, forma, itd.)  req.get(field): Vrne vrednost glave HTTP (npr. req.get('Content-Type'))  Vmesna programska oprema lahko doda dodatne lastnosti HTTP Response (res)  res.write(content): Doda vsebino telesa odgovora  res.status(code): Nastavi HTTP statusno kodo (npr. 200, 404)  res.set(prop, value): Nastavi glavo odgovora (npr. res.set('Content-Type', 'application/json'))  res.end(): Konča odgovor  res.end(msg): Pošlje odgovor in ga konča  res.send(content): Kombinacija write() in end() VMESNI SLOJ Osnovni koncepti  Vmesni sloj sodeluje v ciklu zahteva-odgovor.  Ima dostop do: o req (objekt zahteve), o res (objekt odgovora), o next() (funkcija za prenos nadzora na naslednji middleware).  Uporablja se za: o Spreminjanje req in res (npr. dodajanje glav, razčlenjevanje telesa). o Izvajanje vmesnih operacij (avtentikacija, logiranje, stiskanje podatkov). Primeri middleware funkcij  Izvede poljubno kodo  Spremeni object  Zaključi cikel zahteva-odgovor  Če cikla ne konča kliče next() Vrstni red izvajanja Middleware se izvaja: 1. V zaporedju, kot je definiran v kodi. 2. Glede na usmeritev (če je vezan na specifično pot). MONGOOSE  Express lahko uporablja katerokoli bazo, ki jo podpira node (postgreSQL, mySQL, Redis, MongoDB)  Interakcija s: SQL stavki ali ODM (objekti Javascript)  Mongoose je sloj za delo z mongoDB (noSQL)  Asinhrono delovanje  REST programski jezik: list, show, create, update, remove  Model sestavimo iz sheme, prvi argument je edinstven (ime zbirke) drugi pa je shema  Imamo potem kontrolerje s katerimi kreiramo, brišemo, izpisujemo… podatke MONGoDB  Dokumentna podatkovna baza  V oblaku ali local React  MonogoDB baza, node.js – izvajalno okolje, express – spletno ogrodje  Potrebujemo react, da ustvarimo aplikacijski del na odjemalčevi strani (omogoča da ustvarimo hitro, odzivno SPA (single page app) na strani odjemalca)  Spremembe katere rabimo: CORS (prejemanje zahtev iz različnih domen), vračanje json iz kontrolerja  MERN stack (Mongo – Express – React – Node.js)  Vloga React-a v MERN o Izvrši zahteve HTTP o Upodabljanje spletne aplikacije  S reactom razvijalci uporabljajo ajax tehnologijo (dinamičen prenos podatkov)  REACT je JS knjižnica za izgradnjo spletnih aplikacij na odjemalčevi strani o Zagotavlja podatke DOM-u o Zahteva uporabo še drugih knjižnic  React uporablja JSX (JS Xml) – ker izvaja optimizacije med prevajanjem  JSX je v večini podoben HTML, lahko pa tudi uporablja izraze s {}  Nemoremo uporabljati if-then-else  Razgradnja na manjše komponente (glavni je index.js), ReactDOM.render za nalaganje prve komponente  Novi komponent dodamo tako da ustvarimo novo mapo v components (poimenujemo: majhna začetnica, razredi se le začnejo s veliko črko)  Metoda render: JSX (html) + JS v {} = sprejme podatke in naredi preslikano vrednost  Stanje je preprosto objekt, ki hrani podatke za upodabljanje. ▪ Npr. tukaj lahko shranimo podatke iz klica RESTful APIja. Ključne značilnosti metode render()  Edina obvezna metoda v razredu Component  Uporablja podatke iz:  this.props (lastnosti komponente)  this.state (notranje stanje komponente)  Ne sme spreminjati stanja (pure function)  Vedno vrne enak rezultat pri enakih vhodnih podatkih  Ne komunicira neposredno z brskalnikom (za to uporabimo lifecycle metode) Metoda componentDidMount()  Za dostop do podatkov zapišemo metodo componentDidMount().  Metoda se izvede takoj, ko je naša komponenta nameščena in v metodi bomo podali tudi prošnjo za API. Povezava metode render() in komponent  Videli smo, da za dostop do podatkov uporabimo componentDidMount() metodo v naši App.js datoteki.  Render metoda vsebuje povezave na komponente, ki jih želimo vključiti. Props  Razlika med props in state je to da se props nemore spremenit  Starš spremeni state in preko props prenese v childComponent kjer ga otrok ne more neposredno spremenit React router  Iz ukazne vrstice lahko generiramo različne dele aplikacije React: Page, Component, Hook, Service React Hooks  Funkcije, ki razvijalcem omogoča, da se iz komponent priklopijo na stanje in življenski cikel  Naredijo kodo berljive in razumljive  Hooks ne deluje znotraj razred  Vgrajene funkcije: useState, useContext, useReducer in useEffect  Uporabljajo se za nadziranje stanj  Pravila: Hooks uporabljamo samo na najvišji ravni, hook kličemo samo iz funkcije komponente  React Redux o Knjižnica za upravljanje stanj