Spletno Programiranje: Node.js Lecture 2024/2025 PDF

Document Details

MagicChalcedony7682

Uploaded by MagicChalcedony7682

Univerza v Mariboru

2024

Tomaž Kosar

Tags

node.js web programming javascript computer science

Summary

These lecture slides cover Node.js, a JavaScript runtime environment, focusing on its architecture, modules, and application in web programming and MERN stack. Topics include setting up servers, handling requests, and using modules such as HTTP and events. The slides are for the 2024/2025 Spletno Programiranje (Web Programming) course at Univerza v Mariboru.

Full Transcript

SPLETNO PROGRAMIRANJE 2024/2025 Node.js 3. predavanje izr. prof. dr. Tomaž Kosar Spletno programiranje – 2. letnik UNI R-IT Prejšnja predavanja ◼ Spletna ogrodja ◼ Vzorec MVC ▪ Usmernik ▪ Kontroler ▪ Pogled ▪ M...

SPLETNO PROGRAMIRANJE 2024/2025 Node.js 3. predavanje izr. prof. dr. Tomaž Kosar Spletno programiranje – 2. letnik UNI R-IT Prejšnja predavanja ◼ Spletna ogrodja ◼ Vzorec MVC ▪ Usmernik ▪ Kontroler ▪ Pogled ▪ Model ◼ Demo vzorca MVC na aplikaciji Notes ◼ Varnost in saniranje podatkov 3. predavanje – Node.js 2 Spletno programiranje – 2. letnik UNI R-IT Povzetek ◼ Celostna arhitektura spletnih aplikacij ◼ Skladi rešitev ◼ Sklad rešitev MERN ◼ Čelni in zaledni deli sistema ◼ Node.js ▪ Namestitve ▪ Posodabljanje ▪ Moduli ▪ Osnovni koncepti 3. predavanje – Node.js 3 Spletno programiranje – 2. letnik UNI R-IT Arhitektura spletnih aplikacij Vir: link 3. predavanje – Node.js 4 Spletno programiranje – 2. letnik UNI R-IT Celostna arhitektura spletnih aplikacij ◼ Full Stack Web Application Architecture Vir: link 3. predavanje – Node.js 5 Spletno programiranje – 2. letnik UNI R-IT Celostna arhitektura spletnih aplikacij ◼ Celostna razvojna arhitektura združuje uporabo orodij, ki gradijo spletno aplikacijo. ◼ Celostna arhitektura deluje nad čelnim (front-end) in zalednim (back- end) delom sistema. ▪ „Full stack“ razvijalec pomeni, da ima razvijalec znanje iz razvoja: ▪ čelnega dela sistema (npr. Angular, ReactJS), ▪ zalednega dela sistema (npr. Java, JavaScript, Python, Node.js), ▪ bazo podatkov (MongoDB , MySQL), ▪ DevOps (avtomatizacija procesa razvoja, testiranja, namestitve), ▪ upravljanje infrastrukture (prenosljivost med sistemi, zabojniki aplikacij, npr. Docker, MS Azure). 3. predavanje – Node.js 6 Spletno programiranje – 2. letnik UNI R-IT Sklad rešitev MERN ◼ MERN stack (Mongo – Express – React – Node.js) ◼ Je brezplačen in odprtokoden paket programske opreme za izdelavo dinamičnih spletnih aplikacij. ◼ Aplikacije zapisane s skladom rešitev MERN se razvijejo v jeziku JavaScript (ter TypeScript), tako na strani strežnika kot za odjemalca. Vir: link 3. predavanje – Node.js 7 Spletno programiranje – 2. letnik UNI R-IT Alternative skladu rešitev MERN Vir: link ◼ LAMP (Linux – Apache – MySQL – Php) ◼ MEAN (MongoDB – Express – Angular – Node.js) ◼ MERNG (MERN + GraphQL) Vir: link ▪ GraphQL je poizvedbeni jezik za API (Facebook, 2015) ▪ Primer: link ◼ PERN (PostgreSQL – Express - React – Node.js) 3. predavanje – Node.js 9 Spletno programiranje – 2. letnik UNI R-IT Sklad rešitev MERN ◼ Naloge in odgovornosti ▪ React – uporabniške zahtev ▪ Node.js – razpozna zahteve ▪ Express – povprašuje po podatkih Source : link ▪ MongoDB – zagotavlja podatke Vir: link 3. predavanje – Node.js 10 Spletno programiranje – 2. letnik UNI R-IT Čelni in zaledni del ◼ Čelni del (Frontend) ▪ Implementacija: ▪ Document object Model (DOM) ▪ MVC, Single page application, Material design ▪ Tehnologije: ▪ HTML , CSS, JavaScript ▪ Angular/React/Vue ◼ Zaledni del (Backend) ▪ Tehnologije: ▪ Spletni strežnik: piškotki/seje (upravljanje s stanjem aplikacije), procesiranje HTTP zahtev, API/REST, … ▪ DBMS: CRUD, transakcije ▪ Implementacija: ▪ Node.js/Apache, MongoDB/PostgresSQL 3. predavanje – Node.js 11 Spletno programiranje – 2. letnik UNI R-IT Node.js ◼ Zaledni del sistema ▪ Razpoznava zahteve ▪ Vrne odgovor Vir: link 3. predavanje – Node.js 12 Spletno programiranje – 2. letnik UNI R-IT Spletni strežnik ◼ Spletni strežnik (angl. web server) je program, ki sprejema HTTP zahteve, ki jih pošilja odjemalec (spletni brskalnik) in jim vrne HTTP odgovor (običajno v obliki HTML) ◼ Naloge spletni strežnik preusmeri na aplikacijski strežnik (angl. application server), ki pridobi podatke iz baze podatkov in opravi logiko potrebno za sestavo odgovora. Vir: link 3. predavanje – Node.js 13 Spletno programiranje – 2. letnik UNI R-IT Node.js ◼ https://nodejs.org/en/ 3. predavanje – Node.js 14 Spletno programiranje – 2. letnik UNI R-IT Node.js ◼ Izvaja JavaScript kodo na strani spletnega strežnika ▪ Odprtokodno ogrodje, platformno neodvisno okolje ▪ Zasnovana na Chrome izvajalnem okolju JavaScript (V8 Engine) ▪ Node.js uporablja neblokiren I/O model, ki temelji na dogodkih, zaradi česar je lahek in učinkovit, kot nalašč za podatkovno intenzivne aplikacije v realnem času, ki se izvajajo v porazdeljenih napravah ▪ 2009 Ryan Dahl (potem NPM) 3. predavanje – Node.js 15 Spletno programiranje – 2. letnik UNI R-IT Node.js ◼ Zahteve se obravnavajo v eni niti (single threaded technology) ◼ Blokirne operacije pa v več nitih ter uporabljajo povratne klice (callbacks) Vir: link 3. predavanje – Node.js 16 Spletno programiranje – 2. letnik UNI R-IT JavaScript pogon v Node.js ◼ Uporabljamo JavaScript v brskalniku in strežniku ◼ Odstranjeno v Node.js: ▪ Na strežniku ne potrebujemo DOM ◼ Dodano v Node.js : ▪ Dodani dogodki in čakalna vrsta dogodkov ▪ Vse teče iz zanke dogodkov ▪ Vmesnik za vse operacije OS ▪ Ovojnice za vse klice OS (datoteke, omrežje) ▪ Dodana podpora za obdelavo podatkov ▪ Dodani ustrezni sistemski moduli 3. predavanje – Node.js 17 Spletno programiranje – 2. letnik UNI R-IT Osnove Node.js ◼ Javascript ▪ Primitivni tipi ▪ String, Number, Boolean, Undefined, Null, RegExp ▪ Vse ostalo je objekt ▪ Dinamično tipiziran ▪ Rezervirana beseda var ▪ Funkcije ◼ Razlike ▪ Dodatni tipi (Buffer) ▪ Doseg var spremenljivk (globalno -> lokalno) ▪ Dostop do globalnega dosega (objekt global) ▪ exports.name = object 3. predavanje – Node.js 18 Spletno programiranje – 2. letnik UNI R-IT REPL ◼ Okolje REPL (Read Eval Print Loop) ▪ Enostaven za uporabo ▪ Zaženemo z: node ◼ Način za testiranje kode ▪ Node.js/Javascript ◼ Dva načina delovanja ▪ Interpreter (Ctrl + C za izhod) ▪ Izvajanje skript ▪ node name.js 3. predavanje – Node.js 19 Spletno programiranje – 2. letnik UNI R-IT Osnovni moduli v Node.js ◼ Veliko standardnih (core) modulov ▪ Datotečni sistem, dostop do procesov, omrežje, časovniki, naprave, kriptovalute, itd. Jedro modula Opis http http modul vključuje objekte, metode in dogodke za ustvarjanje http strežnika Node.js. URL modul vključuje metode za razpoznavanje URL-ja. querystring vključuje metode za delo s poizvedovalnim nizom. path modul vključuje metode za obravnavo poti datotek. fs fs modul vključuje razrede, metode in dogodke za delo z V/I datotekami. util util modul vključuje uporabne funkcije, koristne za programerje. events events modul vključuje funkcije za delo z dogodki. Vir: link … … 3. predavanje – Node.js 20 Spletno programiranje – 2. letnik UNI R-IT Uporaba modula ◼ Importiramo s pomočjo funkcije require() ▪ var module = require('module_name'); ◼ Funkcija require() vrne objekt, funkcijo, lastnost ali katero koli drug koncept JavaScript. ◼ Module delimo ▪ Osnovne ▪ NPM module 3. predavanje – Node.js 21 Spletno programiranje – 2. letnik UNI R-IT Drugi moduli v Node.js ◼ Ogromna knjižnica modulov (npm) ▪ Naredimo lahko skoraj vse, kar želimo ◼ npm (Node Package Manager) se nanaša na dvoje: ▪ Online package manager za Node.js module ▪ Orodje v ukazni vrstici (command-line utility, CLI) ◼ npm se namesti samodejno z Node.js ◼ Primeri npm modulov: ▪ Nodemon – ponovni zagon spletne aplikacije ob vsaki spremembi ▪ Na koncu teh prosojnic ▪ Express – hitro, enostavno, minimalistično spletno ogrodje za HTTP (web application framework) ▪ Mongoose – Elegantno modeliranje objektov MongoDB (podatkovna baza) ◼ Oboje na naslednjem predavanju! 3. predavanje – Node.js 22 Spletno programiranje – 2. letnik UNI R-IT Node Package Manager ◼ CLI (command-line interface) ◼ Preverimo verzijo ◼ Posodobitev ◼ Namestitev posameznik paketov 3. predavanje – Node.js 23 Spletno programiranje – 2. letnik UNI R-IT Package.json ◼ Datoteka v korenskem direktoriju vsakega Node.js projekta ◼ Definira lastnosti projekta ◼ Elementi ▪ name ▪ version ▪ scripts ▪ description ▪ homepage ▪ author ▪ dependencies ▪ repositories ▪ Itd. ◼ npm namesti vse module navedene kot odvisnosti (dependencies) v paketu package.json 3. predavanje – Node.js 24 Spletno programiranje – 2. letnik UNI R-IT Modul fs ◼ Standardni (core) modul ◼ Uporabljamo v vhodno/izhodnih klicih OS ◼ Z require() naredimo klic modula ◼ fs objekt ovije klice datotečnega sistema za sinhronizacijo z OS ◼ Npr. Buffer je optimiziran za shranjevanje in operiranje nad binarnimi podatki ▪ Pomnilnik je zunaj JavaScript pogona V8 ◼ Optimizirana skupna raba preko kazalcev in ne s kopiranjem ▪ buffer.copy () ▪ Npr.: fs.readFile, socket.write 3. predavanje – Node.js 25 Spletno programiranje – 2. letnik UNI R-IT Modul fs ◼ Vsaka metoda v modulu ima sinhrono in asinhrono verzijo ▪ readFileSync() je sinhron ▪ readFile() je asinhron ◼ Asinhrone metode prejmejo zadnji argument funkcijo povratnega klica ◼ Zapis povratnega klica (readDoneCallback) ▪ Prvi argument je napaka JavaScript ▪ dataBuffer je poseben objekt (buffer) v Node ◼ Če je možno vedno uporabimo asinhrone funkcije! 26 Spletno programiranje – 2. letnik UNI R-IT Povratni klic (callback) ◼ Povratni klic je asinhroni ekvivalent funkcije ◼ Pokliče se ob zaključku funkcije ◼ Node.js APIji podpirajo povratni klic ▪ Prednost: obdelamo veliko število zahtev, ne da bi čakali da katera izmed njih prejme rezultat 3. predavanje – Node.js 27 Spletno programiranje – 2. letnik UNI R-IT Povratni klic ◼Bodite pozorni na izvajanje ◼Dodatna težava - gnezdenje ▪ Callback hell (link) 3. predavanje – Node.js 28 Spletno programiranje – 2. letnik UNI R-IT Programiranje z dogodki (event driven programming) ◼ Node.js uporablja eno samo nit ◼ Sočasnost podprta s konceptoma dogodek (angl. event) in povratni klic (call-back) ▪ Vzdrževanje sočasnosti preko klicev asinhronih funkcij ◼ Uporaba vzorca opazovalec (angl. Observer) ▪ Node.js nit ohranja zanko dogodkov (angl. event loop) ▪ Ko se naloga konča, proži ustrezen dogodek, ki opozori poslušalce (angl. listeners), da izvedejo funkcijo. ▪ Oddajnik (emitter)/poslušalec(listener) 3. predavanje – Node.js 30 Spletno programiranje – 2. letnik UNI R-IT Poslušalec/oddajnik ◼ Poslušalec (angl. listener) ▪ Funkcija, ki se prijavi na dogodek ▪ addEventListerner ◼ Oddajnik (angl. emitter) ▪ Signalizira, da se je zgodil dogodek ▪ Oddajanje dogodka povzroči klicanje vseh funkcij poslušalca 3. predavanje – Node.js 31 Spletno programiranje – 2. letnik UNI R-IT Modul events ◼ Primer poslušalec/oddajnik ◼ Posluša z on() ali addListner() ◼ Signalizira z emit() ◼ Ob oddajanju, se poslušalci pokličejo sinhrono in po vrstnem redu poslušalcev kako so bili registrirani ◼ Če poslušalca ni, potem emit() pomeni NOP 3. predavanje – Node.js 32 Spletno programiranje – 2. letnik UNI R-IT Dogodki EventEmitter ◼ Več različnih dogodkov za različna stanja myEmitter.on('conditionA', doConditionA); myEmitter.on('conditionB', doConditionB); myEmitter.on('conditionC', doConditionC); myEmitter.on('error', handleErrorCondition); ◼ Ravnanje z napakami je pomembno – Node.js se ustavi, če jih ne ujamemo! myEmitter.emit('error', new Error('Ouch!')); 3. predavanje – Node.js 33 Spletno programiranje – 2. letnik UNI R-IT Modul stream ◼ Tokovi (streams) so objekti, ki prebirajo podatke iz vira ali zapisuje podatke na cilj ◼ Modul stream ustvari/uporabi tokove podatkov ◼ Node.js API-ji vsebuje 4 tipe tokov ▪ Tokovi branja (readable, npr. fs.createReadStream) ▪ Tokovi pisanja (writable, npr. fs.createWriteStream) ▪ Dupleks tok (duplex, npr. Net.createConnection) ▪ Preoblikovanje toka (transform, npr. zlib, crypto) ◼ Vsi tipi tokov so Oddajniki (EventEmitter) in običajno vsebujejo naslednje dogodke: data, end, error, finish ◼ Priljubljen način strukturiranja strežnikov ▪ Mrežni vmesnik ⇔ obdela protokola TCP / IP ⇔ obdelava protokola HTTP ⇔ naša koda ◼ Lahko povežete tokove dinamično ▪ Dodamo module v tok: npr. stream.push (Encryption) ▪ Omrežni vmesnik ⇔ obdelava protokola TCP / IP ⇔ šifriranje ⇔ obdelava HTTP 3. predavanje – Node.js 34 Spletno programiranje – 2. letnik UNI R-IT Stream in Listner 3. predavanje – Node.js 35 Spletno programiranje – 2. letnik UNI R-IT Globalni objekti ◼ Na voljo v vseh modulih ▪ Ni potrebe po vključevanju v našo aplikacijo ◼ Objekti so: ▪ Moduli, funkcije, nizi, objekt ◼ Primeri: ▪ Spremenljivke: __filename, __dirname ▪ Funkcije: setTimeout(callback, ms) ▪ Objekti: Console, Process 3. predavanje – Node.js 36 Spletno programiranje – 2. letnik UNI R-IT Modul http ◼ Ustvari primerek strežnika http za obdelavo zahtev HTTP ◼ Za odgovor nastavimo vrsto ◼ Pošljemo nazaj odgovor in prekinite povezavo ◼ Zaženemo strežnik na vratih 3000 ◼ Primer: zagon HTTP strežnika 3. predavanje – Node.js 37 Spletno programiranje – 2. letnik UNI R-IT Node.js vgrajeni moduli ◼Veliko uporabnih modulov 3. predavanje – Node.js 38 Spletno programiranje – 2. letnik UNI R-IT Npm moduli: nodemon ◼ Nodemon je pripomoček za razvijalce, ki spremlja morebitne spremembe v kodi in samodejno znova zažene strežnik. ◼ Namestimo ga z: ◼ Spremenimo package.json: ◼ Zagon strežnika sedaj opravimo z: ▪ npm run dev ◼ Podobno kot: ▪ node --watch hello.js 3. predavanje – Node.js 39 Spletno programiranje – 2. letnik UNI R-IT Strežnik in serviranje statične vsebine 3. predavanje – Node.js 40 Spletno programiranje – 2. letnik UNI R-IT Strežnik in datoteke 3. predavanje – Node.js 41 Spletno programiranje – 2. letnik UNI R-IT Strežnik in JSON ◼RestfulAPI ◼Pridobivanje podatkov ▪ Digitalni dvojček 3. predavanje – Node.js 42 Spletno programiranje – 2. letnik UNI R-IT Spletni API ◼ Spletni API (Web Application Programming Interface) je vmesnik, ki omogoča komunikacijo med različnimi spletnimi aplikacijami: ▪ Dostop do podatkov: omogoča pridobivanje, pošiljanje in upravljanje podatkov med različnimi aplikacijami. ▪ Uporaba HTTP protokolov: Večina spletnih API-jev uporablja protokole. ▪ Format izmenjave podatkov: Najpogosteje uporablja JSON ali XML za prenos podatkov. ▪ Končne točke (angl. endpoints): so na strani strežnika določeni z URI naslovi preko katerih dostopamo do podatkov. ◼ Več o APIjih na naslednjih predavanjih 3. predavanje – Node.js 43 Spletno programiranje – 2. letnik UNI R-IT Strežnik in JSON ◼Lasten RestfulAPI 3. predavanje – Node.js 44 Spletno programiranje – 2. letnik UNI R-IT Strežnik in klic RestfulAPI (modul Axios) 3. predavanje – Node.js 45 Spletno programiranje – 2. letnik UNI R-IT Skaliranje aplikacije ◼ Node.js omogoča tudi ustvarjanje podrejenih procesov, da se vzpostavi vzporedna obdelava na večjedrnih sistemih, ki temeljijo na CPE ◼ Podrejeni procesi imajo tri tokove ▪ Child.stdin, child.stout, child.stderr ◼ Node.js ponuja modul child_process, ki ima naslednje tri glavne načine za ustvarjanje podrejenega procesa. ▪ exec - metoda child_process.exec zažene ukaz in medpomni izhodne podatke. ▪ spawn - child_process.spawn zažene nov proces z danim ukazom. ▪ fork - metoda child_process.fork je poseben primer metode spawn() za ustvarjanje podrejenih procesov. ◼ Skaliranje spletnih aplikacij drugič! 3. predavanje – Node.js 46 Spletno programiranje – 2. letnik UNI R-IT Preberite ◼tutorialspoint ◼w3school 3. predavanje – Node.js 47 Spletno programiranje – 2. letnik UNI R-IT Naslednjič ◼ Izmenjava podatkov (JSON, SOAP) ◼ Spletne storitve ◼ Vrste podatkovnih baz ▪ Relacijske podatkovne baze ▪ NoSQL 3. predavanje – Node.js 48 Spletno programiranje – 2. letnik UNI R-IT Vprašanja 3. predavanje – Node.js 49