ВИСОКА ТЕХНИЧКА ШКОЛА

СТРУКОВНИХ СТУДИЈА У НОВОМ САДУ

СТУДИЈСКИ ПРОГРАМ: Информационе технологије

Web aplikacija – „Social Ape“

ЗАВРШНИ РАД

Кандидат: Александар Крајишник, ИТ 19/19

Нови Сад, 2023.

Завршни рад Александар Крајишник

ВИСОКА ТЕХНИЧКА ШКОЛА

СТРУКОВНИХ СТУДИЈА У НОВОМ САДУ
СТУДИЈСКИ ПРОГРАМ: Информационе технологије

Web aplikacija – „Social Ape“

ЗАВРШНИ РАД

Кандидат: Ментор:
Александар Крајишник, ИТ19/19 др Жељко Еремић, проф.

Нови Сад, 2023

Завршни рад Александар Крајишник

ВИСОКА ТЕХНИЧКА ШКОЛА

СТРУКОВНИХ СТУДИЈА У НОВОМ САДУ
СТУДИЈСКИ ПРОГРАМ: Информационе технологије

Назив теме завршног рада:

Web aplikacija – „Social Ape“

Текст задатка:
1. Описати коришћене језике и технологије
2. Објаснити поступак израде веб апликације
3. Приказати рад готове веб апликације

Комисија:
• ____________________, председник
• ____________________, ментор Датум:_____________________
• ____________________, члан Оцена:_____________________
Завршни рад Александар Крајишник

САДРЖАЈ:
1. УВОД....................................................................................................................................................1
2. ЦИЉ......................................................................................................................................................2
3. РАЗРАДА ТЕМЕ..................................................................................................................................3
3.1 HTML – Hypertext Markup Language..........................................................................................3
3.2 SАSS – Syntactically Awesome Style Sheets...............................................................................5
3.3 ЈavaScript.......................................................................................................................................9
3.4 React framework..........................................................................................................................10
3.4.1 Основе и примјена.............................................................................................................11
3.4.2 Главне карактеристике......................................................................................................11
3.4.3 React екосистем..................................................................................................................13
3.5 Redux...........................................................................................................................................14
3.5.1 Шта је то Redux?................................................................................................................14
3.5.2 Разумијевање Redux-a и како ради...................................................................................15
3.5.3 Зашто бисмо требали користити Redux?........................................................................15
3.5.4 Када бисмо га требали користити?..................................................................................15
3.5.5 Предности Redux-a............................................................................................................16
3.6 Material UI...................................................................................................................................17
3.7 Поступак израде веб апликације..............................................................................................18
3.8 Приказ рада готове веб апликације..........................................................................................24
4. ЗАКЉУЧАК.......................................................................................................................................28
5. ЛИТЕРАТУРА...................................................................................................................................29
Завршни рад Александар Крајишник

1. УВОД

Као тему завршног рада одлучио сам да одаберем веб апликацију коју сам направио, а која се
назива „Social Ape“. Потрудио сам се да дам детаљан опис коришћених технологија и објасним
поступак израде, као и детаљан приказ рада готове веб апликације. Апликација је замишљена тако
да функционише као друштвена мрежа. Корисници могу да се региструју и пријаве на мрежу,
једни другима коментаришу и реагују на објаве и добијају обавјештења. Такођер могу да уређују
детаље својих профила, као што су нпр. локација, лични опис, веб страница или профилна слика.
У питању је „full-stack“ апликација која користи базу података бесплатног сервиса „Firebase“, али
у склопу завршног рада обрадићу само „front-end“ дио који користи најпопуларније и најмодерније
алате за израду веб апликација, а то су: HTML, SASS, JavaScript, ReactJS, Redux i Material UI.
Завршни рад Александар Крајишник

2. ЦИЉ

Сам циљ израде ове апликације био је стварање функционалне веб апликације која има функцију
друштвене мреже, а у складу са постављеним задацима за завршни рад, постоји неколико циљева,
а то су:

1. Описати коришћене језике и технологије

2. Објаснити поступак израде веб апликације
3. Приказати рад готове веб апликације
Завршни рад Александар Крајишник

3. РАЗРАДА ТЕМЕ

За израду ове апликације користиo сam многе популарне технологије за израду веб апликација, а
то су:
• HTML
• SCSS
• JAVASCRIPT
• REACT.JS
• REDUX
• MATERIAL UI

3.1 HTML – Hypertext Markup Language

HTML (HyperText Markup Language) је стандардни језик за стварање и приказивање веб страница.
HTML je најоснонвији градивни блок неке веб странице. [1] Он дефинише значење и структуру
самог садржаја на екрану. HTML је развијен у раним 1990-има на Европском центру за нуклеарна
истраживања (CERN) у Швајцарској. Тим који је створио HTML предводио је Тим Бернерс-Ли,
који је касније постао познат као "отац World Wide Web-a". HTML је створен како би омогућио
размјену и прегледавање информација путем Интернета.
Оригинална верзија HTML-а названа је HTML 1.0, која је објављена 1993. године. Касније су
објављене нове верзије HTML-а које су уводиле нове могућности и функционалности. HTML 2.0 је
објављен 1995. године и омогућио је коришћење табела и форми на веб страницама. HTML 3.2
објављен је 1997. године и увео је стилове за веб странице. HTML 4.01 објављен је 1999. године и
увео је многе нове елементе, укључујући сложенију структуру табела, слојевите стилове и
скрипте. Након HTML 4.01, наставак развоја HTML-а преузела је организација World Wide Web
Consortium (W3C). HTML 5 објављен је 2014. године и уводи многе нове значајке и побољшања у
односу на претходне верзије. HTML 5 омогућује укључивање видео и аудио садржаја, побољшану
семантичку структуру и бољу подршку за мобилне уређаје.
Шта је HTML?
HTML је „језик за означивање“ у буквалном преводу. Користи се за стварање веб страница и
апликација. Сва модерна веб мјеста израђена су користећи HTML. Он омогућава стварање
структура и садржаја на веб страницама, укључујући текст, слике, видеозаписе и друге врсте
садржаја. Такође омогућава креирање веза између страница и подржава интерактивне елементе
као што су форме и скрипте.
HTML се састоји из низа различитих „елемената“ који могу да изгледају на одређени начин или да
се понашају на одређени начин. Он користи синтаксу која се састоји од ознака (тагова) које се
стављају у оквире текста и које описују структуру и садржај веб странице. У основи, HTML се
састоји од два типа елемената: ознаке и садржаја. Ознаке су постављене у оквире текста и користе
се за описивање начина на који се треба приказати садржај. Ознаке се обично користе у паровима
(отварајући и затварајући) и имају име које се пише између знака "<" и ">". Примјер отварајуће
Завршни рад Александар Крајишник

ознаке је "<p>", а затварајуће ознаке су "<\p>". Имена самих ознака често су скраћенице, нпр.
слово <p> - параграф, <h1> - heading (заглавље). Садржај је текст који се приказује на веб
страници и налази се између отварајућих и затварајућих ознака. На примјер, унутар "<p>" и "<\p>"
ознака може бити обичан текст или друге ознаке које описују различите елементе веб странице.
Узмимо сљедећу реченицу за примјер: „Моја мачка је мрзовољна“.
Ако желимо да дата реченица стоји сама без ичега, можемо да јој одредимо да постане као
параграф и то на сљедећи начин: <p> Моја мачка је мрзовољна </p>

Слика 1. Примјер HTML тага

Уз ове основне елементе, HTML такође подржава атрибуте, који се користе за додавање додатних
информација о елементима на веб страници. Атрибути се обично наводе унутар отварајуће ознаке
и описују различите карактеристике елемента. На примјер, "<img src="slika.jpg" alt="Opis slike">"
означава да се на веб страници приказује слика са извором слике "slika.jpg" и текстом за
алтернативни опис "Opis slike".

Слика 2. Примјер HTML атрибута

Атрибути нам служе за додатне информације везане за таг. Овде у овом случају имамо атрибут
под именом „class“ и његову вриједност која је „editor-note“. Class атрибутом дефинишемо
идентификацију тог одређеног тага, да би после у „CSS-u“ могли да уређујемо излгед или у
„JavaScript-u“ могли да додијелимо неку функционланост.
Завршни рад Александар Крајишник

Слика 3. Примјер ХТМЛ елемента унутар самог пројекта

3.2 SАSS – Syntactically Awesome Style Sheets

Како бисмо разумјели шта представља SASS, односно SCSS, морамо прво да имамо добро
познавање CSS-а.
CSS (Cascading Style Sheets) представља технологију за стилизовање HTML и XML докумената.
Овај језик је настао као одговор на потребу за одвајањем презентацијског слоја од структурног и
садржајног слоја веб страница, што је довело до повећања ефикасности у развоју и одржавању веб
страница.
CSS је осмислио Håkon Wium Lie у сарадњи с Тимом Бернерс-Лијом у ЦЕРН-у 1994. године.
Прва верзија CSS-а, CSS1, објављена је 1996. године. CSS2 је објављен 1998. године, док је CSS3
објављен 1999. године. CSS3 је додао многе нове функције као што је подршка за флексибилно
позиционирање, анимације и више графичких ефеката. Постоји и CSS4, али се не сматра
формалном спецификацијом јер се његове значајке континуирано додају у CSS3.
CSS се користи за дефинисање изгледа HTML и XML елемената, укључујући фонтове, боје,
позадине, маргину, padding, позиционирање и друге визуелне атрибуте. CSS омогућава коришћење
стилских правила на више мјеста, омогућавајући промјену изгледа више елемената једним
стилским правилом. CSS такође подржава каскадно наслеђивање, што значи да се стилови
примјењују према хијерархији елемената.

Како би се дефинисали CSS стилови за неки HTML елемент, користи се селектор који
идентификује тај елемент. Нпр, ако се жели стилизовати наслов странице (H1 елемент), селектор
би био:

Слика 4. Примјер CSS селектора

Завршни рад Александар Крајишник

Након селектора, долазе CSS декларације које садрже стилове које желимо примијенити на
одабрани елемент. Свака CSS декларација састоји се од својства и вриједности.

Слика 5. Примјер CSS својства и вриједности

У овом примјеру, color и font-size су својства, а red и 24px су вриједности. Својства се односе на
карактеристике елемената које желимо стилизовати, док се вриједности односе на конкретне
вриједности које желимо примијенити на та својства.
CSS такођер омогућава груписање елемената заједно и примијењивање истих стилова на све
елементе у групи, нпр:

Слика 6. Истовремено уређивање више елемената

У овом примјеру, сви наслови H1, H2 i H3 ће бити стилизовани истом бојом.

Такођер је могуће користити и псеудо-класе и псеудо-елементе да бисмо примијенили стилове на
елементе у одређеном стању, као што су активни, неактивни, мишем пређени и слично.
Синтакса такођер подржава коришћенје коментара како би програмери могли да додају опис кода.
Коментари почињу са /* и завршавају са */.

Слика 7. Примјер CSS коментара

Завршни рад Александар Крајишник

Шта је SCSS?

SCSS је продужетак CSS-a који нуди додатне функционалности које су корисне у развоју већих и
комплекснијих пројеката. Нека од побољшања која SCSS доноси у односу на CSS су:
1. Варијабле – SCSS омогућава дефинисање варијабли које се могу користити за чување
вриједности попут боја, фонтова, маргина и других вриједности које се често понављају.
Ово чини код читљивијим и олакшава одржавање
2. Угњежђивање – SCSS дозвољава угњежђивање CSS правила унутар других правила, што
олакшава читање и писање CSS -а, нпр:

Слика 8. Угњежђивање правила

3. Оператори – SCSS укључује математичке операторе који омогућују једноставно рачунање

у CSS-у, нпр:

Слика 9. Рачунање у SCSS-у

Завршни рад Александар Крајишник

4. Насљеђивање – омогућава дефинисање правила која насљеђују својства других правила.

Нпр:

Слика 10. Насљеђивање правила

5. Функције – укључује функције које омогућавају једноставно дефинисање сложенијих

стилова. Нпр:

Слика 11. Функције у SCSS-у

Завршни рад Александар Крајишник

На сљедећој слици налази се приказ угњежђивања SCSS кода унутар самог пројекта. Унутар App
елемента налази се appWrapper, а унутар њега formContainer. App има минималну висину 100vh,
што значи да ће заузимати комплетну висину екрана и релативно је позициониран. Затим
appWrapper има својства display:flex и justify-content:center. Ова својства групишу његове
поделементе на одређени начин и централно их поравнавају. Такођер има и минималну висину
min-height:calc(100vh-60px), пошто је 60px висина навигационе траке, ово ће учинити да елемент
свеукупно заузима цијели екран. На крају, formContainer има позадинску слику чија је величина
постављена тако да она заузима комплетан елемент и додатно је позиционирана својством
background-position. Има доњи padding од 30px и такођер заузима цијелу висину екрана.

Слика 12. Примјер употребе SCSS-a у самом пројекту

3.3 ЈavaScript

JavaScript је динамички програмски језик који се користи за стварање интерактивних веб страница
и апликација. Овај језик је осмишљен да се извршава у окружењу прегледача и може да се користи
за додавање интерактивности веб страницама, проверу форми, анимације и много других ствари.
JavaScript је развијен у раним деведесетим годинама прошлог века од стране Брендана Ајка,
програмера из компаније Netscape. Прво име је било Мока, али је касније промењено у ЈаваСкрипт
због тадашњег успеха Јаве на тржишту. ЈаваСкрипт је постанаком веба постао веома популаран
језик.
JavaScript je разноврстан и добар је за почетнике. Са нешто више искуства, помоћу овог језика
можемо креирати разне игрице, анимиране 2D и 3D графике, апликације са базама података и још
много тога. Једна од главних карактеристика ЈаваСкрипта је његова способност да се асинхроно
извршава, што омогућује да се функције извршавају без обустављања извршавања програма.
Такође има могућности креирања динамичких веб страница и интерактивности на њима.
Завршни рад Александар Крајишник

Постоје многе верзије JavaScripta, али најчешће кориштене верзије су ES5, ES6, ES7 и ES8. Свака
верзија додаје нове могућности и побољшања, тако да се препоручује коришћење најновије
верзије. Тренутна верзија JavaScripta је ES13, која је објављена у јуну 2022. године
JavaScript се често користи и у комбинацији са HTML и CSS технологијама за стварање
интерактивних веб страница и апликација. Осим тога, користи се и за израду server-side апликација
коришћењем Node.js платформе. JavaScript је такођер омиљени језик за развој front-end framework-
а и библиотека, као што су React, Angular и Vue.js
JavaScript је сам по себи релативно компактан, али и веома флексибилан. Програмери су
направили додатне разноврсне алате, које додају разне могућности самом JavaScript-у са
минималним напором. У њих се сврставају:
• Browser Application Programming Interfaces (API): који су уграђени у веб претраживаче како
би омогућили функционалност као што је на примјер, динамично креирање HTML
елемента и мијењање њихових својсвта помоћу CSS-а, сакупљање видео материјала које
корисник сними камером, или генерсиање 3D анимације и аудио снимака.
• Third-party APIs који омогућавају програмерима да искористе садржај са других страница
попут Twitter-a и Facebook-a.
• Тhird-party frameworks и библиотеке које могу да се искористе ради бржег и лакшег
израђивања веб страница попут: React.js, Angular.js, Vue.js и многих других.

Слика 13. Примјер асинхроног JavaScript-a из самог пројекта

3.4 React framework

React је популаран front-end JavaScript framework који се користи за израду интерактивних веб
апликација и стараница. Развијен је од стране Facebook-а 2011. године, а касније је постао open-
source пројекат са великом заједницом корисника и developera. React се често користи у
комибнацији са другим алатима, као што су Redux, React Router, Axios и други
Створио га је Jordan Valke, програмер у компанији Фејсбук. Од свог дебија 2011. године, React је
постао један од најпопуларнијих фронт-енд frаmеwоrк-а за израду веб апликација са огромном
заједницом појединачних програмера и компанија.
Једноставно речено, ReactJS се може користити као база пројекта током развојног циклуса
једностраничних или прогресивних веб апликација и, уз React-Native, мобилних апликација. У
већини случајева, главна улога framework-а јесте преношење података DOM-у (или моделу објекта
документа), и као такве, апликације које се заснивају на React-u често захтјевају додатне
библиотеке за управљање стањем и рутирање. Због оваквих задатака често се у процесу
девелопмента укључују и Redux (за управљање стањем) и React Router (за рутирање).
Завршни рад Александар Крајишник

3.4.1 Основе и примјена

React је надалеко позната и популарна библиотека отвореног кода за JavaScript изграђена с

намером да се креирају кориснички интерфејси (UI) за једностраничне апликације. Као такав,
React управља командном линијом за веб апликације (и за мобилне уређаје, уз помоћ React-
Native), али се такође може користити за креирање UI компоненти за вишекратну употребу.

Захваљујући својим карактеристикама, React омогућава програмерима да развију велике веб

апликације које омогућавају промену података без потребе за поновним освежавањем саме
странице. Овај главни принцип омогућава да веб апликације засноване на React-у буду брзе,
једноставне и лако скалабилне. С друге стране, React је само V у MVC (Model-View-Controller)
моделу, што значи да програмери могу слободно бирати модел и контролер. Ту је и Flux,
намјенска архитектура коју је Facebook развио да задовољи овај случај, јер ће у већини сценарија
програмерима бити тешко да интегришу React у неке MVC оквире.

3.4.2 Главне карактеристике

Већ смо споменули да React омогућава лаку транзицију страница без потребе за поновним
учитавањем, чинећи апликације брзим, скалабилним (што се тиче компонената за вишекратну
употребу) и поједностављеним. У овом одељку покрићемо остале важне карактеристике које чине
React тако популарним међу заједницом програмера.
• Компоненте
React омогућава груписање блокова кода у мање градивне јединице, и тако омогућава чистији,
јаснији код и поштује један од најважнијих програмерских принципа а то је SRP (Single
Responsibility Principle). Он налаже подјелу комплекснијих цијелина програма у мање под-цјелине
које имају минимално одговорности и задужене су тачно за свој дио посла. У React контексту, то
нпр. може бити једно дугме које има тачно одређену функцију, или поље за унос података који
има својствен начин понашања који му задамо.

• Virtual DOM
Без React-а и JSX-а, вебсајтови обично користе PureJS за DOM ажурирања (једноставније речено,
ова ажурирања су ситуације када се ствари „промене” на екрану без потребе да ручно освежите
екран).
Ово у ствари није проблем када радимо са једноставним, углавном статичким сајтовима. Међутим,
у случају динамичних вебсајтова, уз сталну интеракцију корисника, коришћењем Purе или Vanilla
ЈavaScript-а, ажурирања могу постати проблем, углавном јер апликације постају превише сложене
да би се избориле са глатком транзицијом страница.
Помоћу JSX -а, девелопери могу да манипулишу и ажурирају DOM вебсајта, јер React ствара
Virtual DОМ. То је уствари копија оригиналног DОМ-а вебсајта, а React користи виртуелну копију
да види који дијелови стварног DОМ-а захтјевају измене пре него што заиста унесу неке промене.
Ево једноставног примјера. Рецимо, један од корисника коментарише коментар на блогу и кликне
дугме „остави коментар“. Када се то деси без React-а, DОМ у цјелости мора бити освјежен да би
приказао промјене - процес који захтијева вријеме. Помоћу React-а, оквир једноставно скенира
Завршни рад Александар Крајишник

Virtual DОМ и идентификује тражене промјене (додавање коментара) и ажурира само тај одређени
одјељак у оригиналном DОМ-у.
Овај селективни приступ ажурирању чини веб апликације ефикаснијим јер захтјева мање времена
за учитавање и мању рачунарску снагу. Истина је да за једноставан коментар на блогу то не би
значило пуно на углавном статичном вебсајту, али када говоримо о вебсајтовима који су
модификовани тешким динамичким функцијама, Virtual DОМ прави значајну разлику.

• JSX (JavaScript XML)

На сваком основном вебсајту или веб апликацији налази се гомила HTML докумената. Browseri
читају те документе, а затим их на вашем уређају приказују као веб странице онако како их знате

Током процеса ишчитавања, исти претраживачи стварају Модел објекта документа, који је у
основи мапа распореда тражене веб странице. Да би побољшали корисничко искуство на вебсајту,
програмери им обично додају динамички садржај, модификујући Модел објекта документа
JavaScript-ом и другим језицима.

Овде наступа JSX за ReactJS. То је екстенија (назива се JavaScript еXtension), која омогућава
програмерима да лако подешавају свој ДОМ помоћу основног кода у HTML стилу. Поред тога,
коришћење JSX-а за ажурирање DOM-а може побољшати перформансе сајта и ефикасност развоја.

• React Native
React такође користи матичне библиотеке које је Facebook објавио 2015. године. Нативне опције
пружају добро познату React архитектуру за изворне апликације попут Android-а, IOS-а и UPD-а.
React Native, framework за креирање мобилних апликација користи само JavaScript и исте
принципе као React, омогућавајући девелоперима да користе или укључују богате UI функције и
практичне компоненте, али користи исте темељне принципе изградње UI као и друге IOS или
Andorid апликације, а такође омогућава и компоненте написане у Јаvi, Svift-у или Objective-C [2].

• Jednosmerni protok podataka

Једна од главних карактеристика React-а је да се скуп непроменљивих вредности прослеђује као
својства у његовим HTML ознакама до рендера компоненти. Компонента не може директно да
мења својства, уместо тога може да користи функцију повратног позива, што програмерима
омогућава да врше измене. Овај принцип се назива „својства се снижавају, радње се повећавају“.
Завршни рад Александар Крајишник

Слика 14. React екосистем

Слика 15. LoadingSpinner компонента из самог пројекта

3.4.3 React екосистем

Ако сте нови у веб девелопменту, React Вас може лако збунити, јер програмери често ReactJS
називају JavaScript библиотеком или/и JavaScript frаmеwоrк-ом.
Неки програмери React виде као JavaScript библиотеку, а не као framework, јер у случају
библиотеке, девелопер користи код у појединачним инстанцама које то захтјевају. У случају
framework-а (као што је Ангулар, на примјер) они креирају посебне повезнице које уређују веб
апликацију и дају намјенске области за кодове који се могу прикључити.
Да бисмо ово учинили мало једноставнијим, посматрајте кодове библиотеке JavaScript-а као
украсе или намештаја који бисте поставили у вашој кући (вебсајту) коју сте већ направили. А
фрамеwорк је модел шаблона по ком сте градили кућу.
Остали девелопери гледају на React као на потпуно развијен framework због његовог робусног
екосистема и великог броја опција екстензија. Такође, када програмери одлуче да користе React за
изградњу корисничких интерфејса веб апликације, имају приступ низу функција:
• Компоненте исечака кода (градивне компоненте за креирање одређених делова
корисничког интерфејса)
• JSX за директну DОМ манипулацију
Завршни рад Александар Крајишник

• Виртуални DОМ који омогућава значајна побољшања у динамичним апликацијама.

Поред тога, React је бесплатан пројекат отвореног кода. То значи да било који програмер може
преузети и модификовати изворни код. Ово је такође од велике помоћи ако се суочите са
одређеним проблемом у одређеној функцији корисничког интерфејса, јер врло је вероватно да је
неко већ креирао библиотеку која решава Ваше проблеме. Можете користити и све што огромна
заједница има, не само за одређене појединачне карактеристике већ и за читаве шаблоне ако
желите да израдите кориснички интерфејс од почетка.

3.5 Redux

3.5.1 Шта је то Redux?

Redux је библиотека отвореног кода за управљање стањем апликације у JavaScriptu, често

коришћена уз React. Омогућава организацију података у једном централизованом складишту којим
се лако може управљати и мијењати.
Али, прије него што уђемо у срж Redux-а, хајде да објаснимо шта тачно представља стање у React-
у.
Стање је комад информације након чије промјене долази до освјежавања виртуелног ДОМ-а,
односно након чије промјене се региструју измјене на страници. Због React-овог једносмјерног
тока, комади стања могу да се дијеле и шаљу низ компоненте, али само у једном смјеру, односно
одозго према доле. Родитељске компоненте могу да дијеле своје комаде стања са својом „дјецом“,
али не постоји начин да та дјеца шаљу сопствене комаде стања назад родитељима. Кроз историју
React екосистема, ово је био један од значајнијих проблема, чије рјешавање је врло често значило
нарушавање квалитета кода. Постаје тешко управљати стањем сваке компоненте у апликацији
када величина апликације постане изузетно велика. Redux помаже у ажурирању и остањењу стања
сваке компоненте у апликацији.
Redux је створен 2015. године од стране Dan Abramovа и Andrewa Clarka, инжињера у Facebook-у.
Библиотека је створена како би се побољшало управљање стањем у React апликацијама, које је у
то вријеме било тешко одржавати. Redux се често користи у апликацијама са сложеним
корисничким интерфејсима, гдје се много података мијења на различитим мјестима и потребно је
управљати свим тим промјенама на једном мјесту.
Идеја иза Redux-а потиче од концепта Flux архитектуре, коју је креирао Facebook. Flux је
архитектура која се састоји од једносмјерног тока података у апликацији. Међутим, Flux је био
поприлично сложен и захтијевао је много кода за имплементацију.
Redux је поједноставио Flux концепт и направио га лакшим за кориштење. Redux се ослања на
принцип непромјенљивости и функционалног програмирања за управљање стањем апликације
Користи централизовану библиотеку која чува све информације на једном мјесту, тј „store“
Завршни рад Александар Крајишник

3.5.2 Раѕумијевање Redux-a и како ради

Redux није ништа друго него ЈavaScript библиотека отвореног кода која садржи стање апликације.
Рад Redux-a је врло једноставан за разумијевање. Постоје три диела грађевине: store, акције и
редуктори. Схватимо Redux на примјеру с којим смо упознати.
Претпоставимо да смо наручили слушалице с wеб странице Amazon. Након наручивања
слушалица, можете добити доставу у заданом времену. У овом случају, наручивање слушалица је
примјер акције.
Након извођења акције овде треба причекати испоруку. Постоји поступак који треба времена и
који се прати сваки пут када се наручи нешто с омиљеног wеб мјеста за е-продавницу. На исти
начин, у Redux-u након извођења акције постоји израз назван Dispatch који акцију шаље Reduceru.
Кад наручите свој пакет, испоручује се на најближе складиште на вашу адресу. Сличан поступак
се проводи у Reduxu отпремом.
Сада Reducer проматра радњу и у складу с тим чини оно што треба учинити за складиштење
података у радњу. Садржи стање кућишта прекидача, које се користи за спремање података и
враћање ажуриране вредности стања из радње. Вредност у радњи добива се ажурирања сваки пут
када стање покаже неке промене. Радња има могућност учинковитог осигурања и држи стање
апликације. Ово наглашава значај трговине која омогућава корисницима да чувају своје стање.

3.5.3 Зашто бисмо требали користити Redux?

JS библиотека - React, помаже поделити апликације на различите компоненте, али не може дати
улаз о подацима, стању и начину решавања свих осталих догађаја. React се не бави начином
управљања објектима стања, осигуравајући једини начин да се то поправи кроз Redux. Подаци
реакцијске апликације теку из надређене у подређену компоненту. Податке из надређених
компоненти можете послати дечјим компонентама у облику реквизита(props). Превише је
компоненти за React, што отежава праћење протока података од родитеља до подређених
компоненти. Као такав, користимо Redux јер има могућност управљања свим стањима
компонената [3].
Redux такођер осигурава веће искуство за програмере. Редукцијом је могуће изолирати радњу
(store) која има стање, тако да се све компоненте могу повезати с њом, од ње добити потребан
објект стања.

3.5.4 Када бисмо га требали користити?

Испод су неки од разлога када бисмо требали размотрити:

• Стање странице за спремање података - Кад корисник прегледава страницу, а затим кад
пређе на другу страницу и врати се, очекује се да ће страница бити у истом стању. Како се
редуктори иницијализирају и живе теком целе сесије, могу сачувати стање странице.
• Ако у апликацији очекујемо много корисничких интеракција, нпр. уколико правимо веб
трговину, велике су шансе да нам је потребна библиотека за централизовано управљање
стањем.
• Глобалне компоненте су лако доступне - Имају животни век апликација који омогућавају
snack барове, вести, савете итд. Redux је од највећег значаја када је у питању стварање
Завршни рад Александар Крајишник

акција за отпрему наредби. Као примјер - Ако кoд генерипе захтјев који је асинхрони,
произвео би акцију snack бара када захтјев не успе с обзиром на помоћну резерву. У
ситуацији када корисник не користи Redux, потребан је други систем догађаја или пак
треба инстанцирати snack бар компоненту, кад год се користи.
• Ако постоје бројни реквизити придружени висококвалитетној компоненти од које је
искориштено само неколико њих, тада се они могу сматрати рефакторима с Redux-ом.
• Исти део стања апликације треба пресликати на више компоненти у складишту. Redux
пружа погодан и најбољи начин дељења стања.

3.5.5 Предности Redux-a

• Централизовано стање апликације: Redux чува све податке апликације на једном мјесту, у
такозваном "store"-у. Ово омогућава лако праћење и управљање стањем апликације,
посебно у већим апликацијама.
• Предвидљивост: Redux користи принцип непромјенљивости, што значи да се стање
апликације не може директно мијењати. Умјесто тога, стварају се нове инстанце стања,
што омогућава предвидљивост понашања апликације.
• Олакшано дијељење стања: Redux олакшава дијељење стања између различитих
компоненти и модула апликације, чиме се смањује количина кода потребног за ручни
пренос стања.
• Велика заједница и екосистем: Redux је популаран и има велику заједницу корисника, што
значи да постоји много ресурса и библиотека које се могу користити уз Redux. Такођер,
Redux се често користи и у комбинацији са другим популарним библиотекама као што је
React
• Смањење нежељених ефеката: Redux користи такозване „чисте функције“ за манипулацију
стањем, што значи да се не стварају нежељени ефекти који би могли утицати на друге
дијелове апликације. Ово такођер олакшава тестирање и одржавање кода.

Слика 16. Кориштење Redux store-a унутар самог пројекта

Завршни рад Александар Крајишник

3.6 Material UI

Шта је MUI?

MUI је популарна библиотека отвореног кода која пружа унапријед дефинисане компоненте и
стилове засноване на Material Design-u, који је Google-ов дизајн систем за графички интерфејс. Ова
технологија олакшава изградњу модерних, респонзивних и атрактивних веб апликација, без
потребе за дизајнирањем сваког појединог елемента интерфејса. Material UI је настао 2014. године
као интерни пројекат компаније Call-Em-All, која је жељела да унаприједи корисничко искуство
својих производа. Првобитна верзија библиотеке била је заснована на Bootstrap-у, али је кашније
прешла на Material Design систем. Године 2016. библиотека је постала open-source и од тада је
развијају и одржавају бројни програмери и ентузијасти широм свијета. Material UI се може
користити за изградњу различитих врста веб апликације, укључујући ЦРМ, е-трговину, друштвене
мреже, алате за управљање пројектима и још много тога. Ова технологија је посебно популарна
међу React програмерима, али се може користити и са другим JavaScript оквирима и библиотекама.
Неке од компоненти које MUI нуди су разне врсте дугмади, листе, картице, аватари, слајдери и
слично. Ова технологија и њој сличне, као што су нпр. Bootstrap ili Tailwind, значајно олакшавају
посао веб дизајнера и девелопера. Функционишу на већ добро утврђеном и разрађеном дизајн
систему, користе квалитетан и јасан код, те знатно умањују вријеме које је потребно да се направи
пројекат.

Предности коришћења
• Олакшава изградњу модерног и привлачног корисничког интерфејса
• Брз и једноставан начин креирања респонзивних веб страница
• Помаже у одржавању константности изгледа и понашања различитих компоненти
• Велика заједница и подршка
• Постоји много компоненти које се могу лако прилагодити и користити у властитим
пројектима
На сљедећој слици налази се примјер комбиновања двије MUI компоненте (Tooltip и IconButton)
како би се направила једна засебна компонента - TootlipButton

Слика 17. Кориштење Material UI компоненти у самом пројекту

Завршни рад Александар Крајишник

3.7. Поступак израде веб апликације

Приликом израде ове апликације користио сам текстуални едитор под називом Visual Studio Code.
VSCode је најпопуларнији текстуални едитор када је у питању израда веб апликација.
Нуди многе погодности као што су подешавање жељених тема, додавање
корисних проширења, интуитивне пречице за кориштење и једноставан кориснички интерфејс.
Овај едитор направила је компанија Microsoft и бесплатан је за кориштење.
За израду ове апликације имао сам готове „endpointe“, односно API приступне тачке.
API, или Application Programming Interface, је скуп правила, протокола и алата који омогућују
различитим софтверским апликацијама да комуницирају међусобно и размјењују податке.
Просто речено, то су линкови које позивамо унутар кода и заузврат добијамо потребне
информације из базе података. Направио сам основну React апликацију путем команде npx create-
react-app коју сам уписао у Windows терминал. Након што сам то урадио, уклонио сам
беспотребне фајлове које апликација генерише на почетку и одлучио сам да се позабавим
фолдерском структуром и осмислим архитектуру пројекта. Један од главних правила које добар
веб девелопер треба да прати је принцип јединичне одговорности.

Имајући овај принцип на уму, фолдерску структуру конструисао сам тако да буде интуитивна,
лако читљива и да сваки фолдер извршава само своју сврху и ништа више од тога.
Фајл index.js је почетна тачка апликације, и у њој је root фајл осталих страница и компоненти.
Унутар ње рендерован је фајл App.jsx омотан redux складиштем, како би цијела апликација имала
приступ централизованом стању. Такођер, постављен је задани axios URL за API позиве.

Слика 18. Index.js фајл

Након index.js фајла вријеме је да објаснимо App.jsx. Унутар овог фајла искориштена је једна од
најпопуларнијих библиотека унутар React екосистема, а то је React Router. React Router
функционише тако што му путем Route компоненти дамо информације о „path”-у, односно URL-у
којем корисник приступа и елементу, односно страници, који треба да се прикаже када корисник
Завршни рад Александар Крајишник

приступи том линку. У овом случају, у питању је рута за почетну страницу. Као елемент рути смо
прослиједили нашу компоненту PrivateRoute, која, уколико је корисник пријављен, допушта да он
дође на почетну страницу, а уколико није, враћа га на страницу за пријаву.
Такођер, унутар овог фајла провјеравамо да ли је истекло корисниково вријеме пријаве.

Слика 19. Route компонента

Login.jsx је прва страница коју корисник види када дође на наш сајт. Састоји се од једноставне
форме за пријављивање у којој се налази поље за унос мејла, поље за унос шифре и дугме за
пријаву. Такођер, испод форме налази се линк којим корисник, уколико нема направљен
кориснички рачун, може да се пребаци на страницу за креирање рачуна, односно регистрацију.

Када корисник притисне дугме за пријаву, уколико има направљен рачун и унио је правилне
податке, дешава се сљедеће: Прво се позива API за пријављивање корисника. Уколико је корисник
унио погрешне податке, API враћа грешку и испод форме појавиће се обавјештење о погрешно
унешеним подацима. Уколико је корисник унио правилне податке биће преусмјерен на почетну
страницу.
Прије него што је корисник преусмјерен, позвива се API за добијање детаљних информација о
кориснику (профилна слика, лични опис, вебсајт и локација) које ћемо приказати на почетној
страници. Добијени резултат позива, односно податке о тренутном кориснику, спремамо у redux
складиште, како бисмо им могли приступини на осталим мјестима на којима су нам потребна, као
нпр. почетна страница.
Завршни рад Александар Крајишник

Слика 20. JSX садржај Login странице

SignUp страница је скоро иста као и Login страница, са додатком 2 нова поља – корисничко име и
потврђена шифра. React путем useRef функције прати вриједности поља у која корисник уноси
садржај. На клик дугмета за регистрацију позива се handleSignUp функција која, уколико су сви
подаци правилно унешени, пријављује корисника и добавља његове податке, чисти грешке и
преусмјерава корисника на почетну страницу. Уколико подаци нису правилно унешени,
кориснику се приказује грешка.

Слика 21. Функција handleSignUp

Завршни рад Александар Крајишник

Када корисник доспије на почетну страницу, са лијеве стране приказане су објаве осталих
корисника, а са десне стране налази се његов профил. На овој страници диспечујемо redux
асинхрону акцију која позива API за добијање корисничких објава. Пошто је ова акција асинхрона,
односно захтјева неко вријеме да се изврши, док се извршава са лијеве стране приказује се тзв.
loading spinner, из компоненте LoadingSpinner.jsx, који сигнализује кориснику учитавање ресурса.
Када се заврши учитавање и добијемо резултат у виду објава, објаве складиштимо у централно
стање апликације, како бисмо им могли приступити са више различитих мјеста, а потом их
излиставамо.

Слика 22. LoadingSpinner компонента

Слика 23. JSX садржај почетне странице

Завршни рад Александар Крајишник

Након ове три странице, било је потребно направити страницу која води до профила одређеног
корисника. Страница је замишљена тако да се са лијеве стране налазе објаве датог корисника, а са
десне стране његов профил. Главна функционалност ове странице огледа се у преузимању
корисничког имена корисника из параметара URL адресе. Кликом на корисничко име
преусмјерени смо на руту „/user/:handle“. Дакле, линк у нашој адресној траци се динамички
мијеља. Ову функционалност омогућава React Router, који динамички мијења URL адресу када
кликнемо на корисничко име неког корисника. Ово је јако битно знати из разлога што ми из
адресне траке, путем React-ове useParams функционалности, узимамо корисничко име и са лијеве
стране филтрирамо објаве и приказујемо само оне чији је креатор дати корисник. Структура User
странице иста је као структура почетне странице, само што се у овом случају са лијеве стране
налазе објаве корисника на чијем се профилу налазимо, а са десне стране информације о његовом
профилу. Такођер, искориштена је и useEffect функција која прати сваки пут када се корисничко
име (handle) из URL адресе промијени, и позива функцију за добијање детаља о новом кориснику.

Слика 24. useEffect функција

Како бих довршио израду апликације, било је потребно обратити пажњу на посљедњи сценарио, а
то је када корисник унесе погрешан линк у адресну траку са већ постојећим заданим линком наше
апликације. На примјер, задани линк за нашу апликацију је https://socialape.
Подешавањем рута дефинисали смо све могуће руте којима корисник може доспјети до жељених
страница наше апликације (https://socialape3000/login, https://socialape3000/signUp, ...).

Али, шта се дешава ако корисник унесе непостојећу руту, односно ону коју нисмо претходно
дефинисали?

Да бисмо спријечили непредвиђене сценарије, било је потребно додати страницу за случај да се то

деси. Ова страница назива се NoMatch.jsx. Њена једина функционалност је да, уколико корисник
унесе погрешан линк, обавјести га како се на заданом линку не налази ништа.
Завршни рад Александар Крајишник

Слика 25. JSX садржај NoMatch странице

Завршни рад Александар Крајишник

3.8 Приказ рада готове веб апликације

Прва страница на коју корисник наилази јесте страница за пријаву. Она се састоји од логотипа
апликације, и једноставне форме која садржи од два поља за унос и дугме за пријаву. Такођер,
уколико корисник нема рачун, могуће је, кликом на „sign up here“, доћи до странице за
регистрацију.

Слика 26. Страница за пријаву корисника

Страница за регистрацију корисника је поприлично једноставна и разликује се од претходне

странице само за 2 поља, а то су корисничко име и поновљена шифра. Уколико су унијети подаци
неисправни или заузети, корисник је о томе обавјештен приказом грешке.

Слика 27. Страница за регистрацију корисника – примјер грешке

Завршни рад Александар Крајишник

Након успјешне регистрације, корисник долази до почетне странице. Њена сврха је да, са лијеве
стране, излиста све објаве које су корисници објавили и да, са десне стране, прикаже профил
улогованог корисника уколико је завршено учитавање његових детаља, а уколико није,
приказујемо loading spinner.

Слика 28. Почетна страница

Као што видимо, свака објава са десне стране има двије иконице. Горња служи за детаљан приказ
објаве и коментара на њој, а доња за брисање објаве.
Завршни рад Александар Крајишник

Слика 29. Детаљан приказ објаве

У доњем десном углу компоненте која приказује кориснички профил налази се иконица на чији
клик отварамо модал за уређивање детаља корисничког профила.

Слика 30. Модал за уређивање корисничког профила

Кликом на знак плус у навигационој траци, корисник отвара модал за додавање нове објаве.

Слика 31. Модал за додавање нове објаве

Кликом на иконицу звона, отварамо обавјештења о реакцијама и коментарима на наше објаве.

Завршни рад Александар Крајишник

Слика 32. Модал за додавање нове објаве

Ако са било ког мјеста кликнемо на корисничко име, бићемо преусмјерени на страницу
корисничког профила тог корисника. На њој се налазе објаве корисника и детаљи његовог
профила.

Слика 33. Страница корисничког профила

На крају, ако у адресну траку унесемо погрешан линк, бићемо преусмјерени на страницу која нас
обавјештава о томе.
Завршни рад Александар Крајишник

Слика 34. NoMatch.jsx страница

4. ЗАКЉУЧАК

Циљ овог завршног рада је био да се опишу коришћени језици и технологије, те објасни поступак
израде и приказ рада готове веб апликације. Детаљно смо објаснили изглед и функционалности
саме апликације и комбинацијом наведених технологија дошли до реализовања примјера једне
комплексне вишеслојне веб апликације. Потрудио сам се да користим и опишем технологије које
су неке од најпопуларнијих у сфери веб дизајна у 2023. години.
Даљи развој апликације укључује могућности додавања пријатеља, брисања коментара,
постављања видеозаписа и слике, додавања различитих врста реакција, и слично.
Током израде апликације испоштовани су стандарди квалитета развоја веб апликација, како у
визуелном смислу (кориснички интерфејс), тако и у квалитету кода и фолдерској структури, која
оставља лак посао будућим програмерима за одржавање и проширивање функционалности
апликације.
Завршни рад Александар Крајишник

5. ЛИТЕРАТУРА

[1.] https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics ,
(приступљено 04.05.2023.)
[2.] https://www.popwebdesign.net/sta-je-react.html
(приступљено 04.05.2023.)
[3.] https://hr.education-wiki.com/3707369-what-is-redux
(приступљено 04.05.2023.)

ПОРЕКЛО (ИЗВОР) СЛИКА

Слика 1: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/
grumpy-cat-small.png
(приступљено 04.05.2023.)
Слика 2: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/
grumpy-cat-attribute-small.png
(приступљено 04.05.2023.)
Слика 3: https://lh4.googleusercontent.com/KvagbKhXBJgy-
1zqoL3k89mG0MSIaWhhzn6ewtJ654FiP81wXA6DbHZInbT-AY9J6T6UZ-
0WeFjDqkjClFgBBjQyxidQTieZqP0QZss0FCKbfsCWMa7VxcF2HgmVemaR-huvzfz9
(приступљено 04.05.2023.)

Остале слике производ су аутора.

Завршни рад Александар Крајишник

ИЗЈАВА О АУТОРСТВУ

Ја, ниже потписани студент (име и презиме)_____________________________________,

изјављујем да је овај завршни рад плод самосталног рада. Коришћена литература је наведена на
крају рада.

У Новом Саду, ___.___.20__. Студент (потпис):

_____________________________________