Веб платформа за музички колектив

Универзитет “Св. Кирил и Методиј” Скопје

Факултет за информатички науки и компјутерско инженерство

Изработил: Ментор:
Андреја Јовановски 141143 д-р Иван Чорбев

Скопје, Март 2020

 Tема: Веб платформа за музички колектив

Автор: Андреја Јовановски

Насока: Компјутерски науки и инженерство

Ментор: д-р Иван Чорбев

Членови на комисија: д-р Иван Чорбев

м-р Ристе Стојанов

м-р Бобан Јоксимоски

2
Содржина
Апстракт ................................................................................................................................................. 5
Вовед ...................................................................................................................................................... 6
Користени технологии .......................................................................................................................... 7
JavaScript ............................................................................................................................................ 7
Карактеристики ............................................................................................................................. 7
JavaScript & ECMAScript ................................................................................................................. 7
Карактеристики ............................................................................................................................. 7
React ................................................................................................................................................... 8
Хронологија на React .................................................................................................................... 9
Карактеристики ........................................................................................................................... 10
Споредба со Angular и Vue ......................................................................................................... 10
JSX – JavaScript XML ..................................................................................................................... 11
Компоненти ................................................................................................................................. 12
React Router ..................................................................................................................................... 15
CSS..................................................................................................................................................... 15
Styled Components ........................................................................................................................... 16
React Transition Group ..................................................................................................................... 17
Transition Group & CSSTransition................................................................................................. 17
EmailJS .............................................................................................................................................. 17
CMS ................................................................................................................................................... 17
Headless CMS .................................................................................................................................... 18
Prismic ........................................................................................................................................... 18
Bitbucket ........................................................................................................................................... 20
Техничко Решение............................................................................................................................... 20
Опис .................................................................................................................................................. 20
Структура на проектот и веб страната ........................................................................................... 20
Влечење на податоци од Prismic ................................................................................................... 22
Изглед на веб страната ................................................................................................................... 23
Навигирање низ апликацијата ....................................................................................................... 24
Анимации ......................................................................................................................................... 24
Страница со настани ....................................................................................................................... 25
Контакт страна ................................................................................................................................. 25
Блог ................................................................................................................................................... 26
Позадинска музика ......................................................................................................................... 27
CMS и содржина .............................................................................................................................. 27
Создавање типови ....................................................................................................................... 27

3
 Пополнување со содржина ........................................................................................................ 28
Додавање на мултимедија ......................................................................................................... 29
Заклучок ............................................................................................................................................... 30
Користени ресурси .............................................................................................................................. 31

4
Апстракт

Во рамките на оваа дипломска работа беше изработена веб апликација која претставува
портфолио на музичкиот колектив Oubli. Главна цел на апликацијата е да се создаде платформа
на која колективот ќе прави промоција на нивните настани, нова издадена музика, како и блог
каде ќе се објавува содржина поврзана со самиот колектив, членовите и новостите од музичката
индустрија.
Главната технологија со која е развиена веб апликацијата е Javascript, поточно
библиотеката React. Како помошни библиотеки беа употребени, поточно Styled Components
заедно со CSS концептот за распоредување на елементите, flexbox и Prismic.io за менаџирање
со содржината на веб страната. Во текот на градењето на апликацијата е користен BitBucket –
систем за контрола на верзии.

5
Вовед

Музиката игра клучна улога во нашиот секојдневниот живот. Луѓето голем дел од
времето го поминуваат слушајќи музика.
Но, зошто е таа потребна и им е толку важна на луѓето?
Според една анкета која е спроведена во рамките на истражувањето наречено “Разоткривањето
на музичкиот мит”, музиката е третопласирана во однос на работи без кои човекот не би можел
да опстои ниту еден ден. Пред музиката се наоѓаат само интернетот и мобилниот телефон кои
во денешно време ни овозможуваат да ја слушаме каде и да сакаме. Со ваквите истражувања
се укажува дека музиката може да има значителни ефекти врз свеста, емоциите и однесувањето
на луѓето. Исто така се укажува дека луѓето ја користат за извршување различни работи, од
регулирање на емоциите до самоизразување или социјално вмрежување.
Со развојот на социјалните мрежи тие стануваат се по општи, односно нивната намена
најмногу е фокусирана на поставување фотографии, лични мислења и тие стануваат повеќе
наменски, а со тоа се губи и шансата да одредени категории ги искористат мрежите за некаква
промоција. Ваков пример е и музиката, како и социјалната мрежа myspace која пред појавата на
гигантите Facebook и Instagram беше прва по бројот на корисници. Таа овозможуваше
стилизирање на таканаречениот личен простор што денешните социјални мрежи не го
дозволуваат. Поради ваквата ограниченост се јавува потребата од создавање на веб страни во
денешно време за да музичарите имаат некакво сопствено стилизирано портфолио каде покрај
музиката ќе можат да споделат вести, информации и директен контакт до нив.

6
Користени технологии

JavaScript

JavaScript како програмски јазик првпат се појавил во Мај 1995 година, а дури во 1997 се
појавил првиот стандард за јазикот кој бил поставен од страна на ECMA International. Една
година подоцна објавена е неговата следна верзија, ECMAScript 2, за да по скоро една година е
објавена верзијата која што ќе е основа на денешната верзија на јазикот, а тоа е верзијата
ECMAScript 3. Во овој период Microsoft ја прекинува поддршката за јазикот а и соработката со
другите компании околу овој јазик, за да се посветат повеќе на нивниот пребарувач Internet
Explorer.

Карактеристики

- JavaScript е објектно ориентиран скриптен јазик. Базиран е на прототипови, односно сите

податочни структури наследуваат од прототипот на објект.
- Содржи модули за работа со текст, низи, датуми, регуларни експресии и DOM
структурата, но јазикот сам за себе нема модул за читање и запишување од мрежа или
било каков склад на податоци, па се потпира на прелистувачот или некоја надворешна
алатка.
- Подржува голем дел од парадигмата на структурното програмирање
- Има корисни алатки кои се пригодни за динамично генерирање на HTML содржина. Ни
овозможува да правиме секакви промени на екранот преку управување на различни
настани кои може да се појават на екранот (пр. клик со глувче на одредена површина)

JavaScript & ECMAScript

По неколкуте неуспешни обиди од разни компании меѓу кои и Macromedia со нивниот

ActionScript конечно компаниите увиделе дека треба да се постигне договор за
стандардизација на јазикот кон кој сите странки ќе се придржуваат. Во 2009 е донесена агенда
наречена Harmony, и од овој собир произлегува наредната (петта) верзија на JavaScript, а тоа е
ECMAScript 5. Од тогаш па наваму објавени се уште пет верзии стигнувајќи до 10-тата, од 2019
година, ECMAScript 2019. Позначајните

Карактеристики

- JavaScript е објектно ориентиран скриптен јазик. Базиран е на прототипови, односно сите

податочни структури наследуваат од прототипот на објект.
- Содржи модули за работа со текст, низи, датуми, регуларни експресии и DOM
структурата, но јазикот сам за себе нема модул за читање и запишување од мрежа или
било каков склад на податоци, па се потпира на прелистувачот или некоја надворешна
алатка.
- Подржува голем дел од парадигмата на структурното програмирање

7
 - Има корисни алатки кои се пригодни за динамично генерирање на HTML содржина. Ни
овозможува да правиме секакви промени на екранот преку управување на различни
настани кои може да се појават на екранот (пр. клик со глувче на одредена површина)

React

React е Јavascript библиотека создадена од Jordan Walke, софтверски инженер вработен

во Facebook 2011 год. Изграден и инспириран под влијание на друга рамка, XHP, користена
заедно со програмскиот јазик PHP, со цел да се овозможи создавање на сопствени и
реискористливи HTML eлементи, на кој и самиот React е основан. Прв пат е искористен за News
Feed-от на Facebook 2011, а потоа следната година е испробан на платформата Instagram кога
Facebook го откупи. Во 2013 е решено тие јавно да го објават за да може да се користи за проекти
ширум светот. Листата на компании кои што ја користат оваа библиотека е огромна каде меѓу
Facebook, React е користен од страна на Airbnb, Atlassian, Uber, Netflix, Reddit, Whatsapp, Dropbox
и др.
React библиотеката највеќе се користи за апликации со една страница или (SPA – Single
Page Application) бидејќи претставува само слој кој се користи за прикажување на веб
апликацијата на екранот без да вклучи логика од серверска страна. Една типична страна во React
апликација е структурирана како HTML страна, но тука се референцираат компонентите, кои се
основен дел од React, на пр. <Component></Component> кои креираат така наречено виртуелно
DOM дрво каде се додаваат сите вакви погоре наведени компоненти. Со ова се овозможува
подобра читливост и ефикасност при развојот на апликации.
Виртуелното DOM дрво е ефикасно при ажурирање на страната со некакви информации,
без разлика дали се кориснички влез или е промена од серверска страна. Во класичното HTML
DOM дрво, при вакво ажурирање прелистувачот е принуден да ја преработи од ново целата
страна за да може промените да ги прикаже на екран. Но, со виртуелното DOM дрво
моменталната состојба цело време се чува во меморија, за да доколку има некакви промени на
податоците, React интелигентно прави споредба на претходната и новата состојба за да точно
знае кои елементи (компоненти) во DOM дрвото да бидат освежени и прикажани во новата
состојба со што се зголемуваат перформансите на самата веб страна.
Иако React e библиотека, во комбинација со други библиотеки може да се искористи
како рамка за целосна front-end апликација. Неговата природа која се базира на компоненти
овозможува да е лесно скалабилна.

Слика 1 React

8
Хронологија на React

Година Новости

Со воведувањето на XHP, вметнувањето на готови HTML елементи во PHP

2010 кодот на Facebook се појавуава нова синтакса која ќе прерасне во
библиотеката React

2011 Првиот прототип на React од страна на Facebook

Првиот React код е вметнат низ страниците на Facebook, а со купувањето на

2012 Instagram од страна на Facebook се јавува потребата да се одвои React од
Facebook за да биде реискористлив и за други проекти

Годината кога React ќе стане јавна библиотека. Добива подршка за работа со

2013
Ruby on rails и Python
React станува се по популарен. Се појавуваат првите конференции со содржина
за React. Големи компании како Netflix започнуваат да го имплементираат во
2014
своите апликации. Објавена и помошната алатка React Developer Tools како
екстензија за Google Chrome која ја олеснува работата со React.
React станува стабилна библиотека. Објавени се првите верзии на React Native
2015
за iOS и Android, Redux и GraphQL

Појава на React Storybook, алатка за изолирано креирање на React компоненти

2016
и воведен е React Error Code системот.
Airbnb ја воведува React Sketch.app алатката, која им ја олеснува работата на
UX дизајнерите кои треба да создаваат компоненти за работа со React. React
2017
Fiber. React, Jest, Flow се релиценцирани. Подобрена е работата со фрагменти
со појавата на верзија 16
Додаден е React DevTools Profiler, за олеснето справување и пронаоѓање на
2018 грешки низ апликациите. Исто така за прв пат се појавува и React Context
API-то за предавање на одредени параметри од родител на дете компонента
Воведување на Hooks, замена за фазите (методи) кои се извршуваат во
2019 животниот циклус на една компонента. Додадена е и React Profiler компонента
за директна анализа на промените низ апликацијата

Табела 1 Хронологија на React

9
Карактеристики

- За креирањето на шаблони (компоненти) се користи синтаксата JSX. JSX е продолжение

на JavaScript јазикот, со цел да се олесни структурирањето и реискористливоста на
компонентите во React.
- Протокот на податоци се одвива само во еден правец и тоа од родител компонента на
дете компонента. Податоците кај кои нивната состојба не се менува се праќаат во
компоненти од пониско ниво како props. Овие податоци се непроменливи, и за да
настане некаква промена врз нив потребно е да се прати некаква акција со која што
старите податоци ќе бидат заменети со нови.
- Создава кеш меморија каде се чуваат овие props податоци, за да со некаква нивна
промена и доколку е потребно да ги освежи податоците на екранот.

Споредба со Angular и Vue

React Angular Vue

Објавен Март 2013 Септември 2016 Февруари 2014

Поранешен вработен
Основач Facebook Google
во Google
Официјален веб сајт reactjs.org angular.io vuejs.org
MVC (Model View
Модел Виртуелен DOM Виртуелен DOM
Controller)
Напишан во JavaScript TypeScript JavaScript
TypeScript HTML темплејти и
Преферира JSX (JavaScript XML)
(препорачливо) JavaScript
Големина 100 KB 500 KB 80 KB

Тековна верзија 16.x 9 2.6.x

Watchers: 6.6k Watchers: 3.2k Watchers: 6k
Популарност на Stars: 144k Stars: 58k Stars: 157k
официјалните GitHub Forks: 27.7k Forks: 15.9k Forks: 23.7k
Contributors: 1362 Contributors: 1089 Contributors: 289
Facebook, Instagram,
Користен од Google, Wix Alibaba, GitLab, 9gag
Uber, Reddit,

Табела 2 Споредба на React со Angular и Vue

10
 Слика 2 Статистика од број на пребарувања на Google

JSX – JavaScript XML

JSX или JavaScript XML е продолжување на синтаксата на JavaScript јазикот. Налик HTML
и XML, JSX обезбедува начин да се структурира рендерирање на компонентите користејќи
синтакса позната за многу програмери. React компонентите во најголем дел од случаите се
пишувани во JSX, иако тие можат и да бидат чист JavaScript код.

Слика 3 JSX елемент

JSX овозможува во него да содржи вредност на било каква React променлива, својство
или некој валиден JavaScript израз. If-else изразите не смеат да се користат, но е дозволено
користење на релациски и тернарнен оператор.

Слика 4 Услов во JSX ситнакса

За овој пример на екранот ќе се отпечати следното:

11
 Слика 5 JSX пример

Сите JSX елементи мораат да содржат и таг за затварање, но постојат и елементи кои што
се само затварачки.

Компоненти
Типови на компоненти

- Со внатрешна состојба (Class components):

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

Слика 6 Класна копмонента

- Без внатрешна состојба (Functional components):

Наспроти класните компоненти, кај функционалните, потребно е да користиме куки
(hooks) кои исто така можат да се извршат во одредено време од животот на компонентата,
на пример при нејзино креирање, ажурирање или бришење од виртуелниот ДОМ.

Слика 7 Функционална компонента

Props

Props или properties, се аргументи кои се предаваат на React компонентите. Нивниот

однос со компонентите е ист како аргументите на една функција, или атрибути на еден HTML
таг. Props-от ги прави компонентите да се се повеќе и повеќе реискористливи бидејќи се read-
only и се предаваат во еден правец, а тоа е од родител на дете компонента. Доколку поради
некаков настан, или промена на веб страницата некој од вредностите кои што се props во

12
дадената компонента се предизвикува ререндирање, бидејќи целиот концепт на React се
заснова на ова. Постојат случаеви кога некои од props-от сакаме да имаат предефинирана
вредност, а тоа се прави преку следната команда:

Слика 8 Поставување предефинирани props

Доколку компонентата не добие никакви props на влез, вредноста би била “User”, а во

следниот пример за создавање на една компонента со Props, нивно предавање од родител на
дете и користење овие предефинирани вредности ќе бидат препишани со предадената
вредност од родител компонентата.

Слика 9 Препраќање на props до дете компонента

State

State-от е уникатен за секоја компонента. Секоја компонента има свој state каде
зачувуваме податоци кои и се потребни на компонента во нејзиниот животен циклус. Тој се
иницијализира во конструкторот на компонентата со директна референца до state-ot:

Слика 10 Поставување состојба на компонента

13
 Состојбата на state-от може да се менува со повикување на методот setState() во било
кој дел на компонентата. Тој има неограничена големина, а до него може да се пристапи со
кодот this.state.imeNaPromenliva

Животен циклус на компонентите

Секоја компонента има свој животен циклус кој опфаќа три фази и свои методи кои се
повикуваат во даден момент:
- 3-те фази на една компонента со методите кои се повикуваат во нив:
- Прикачување (Mounting)
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
- Ажурирање (Updating)
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
- Отстранување (Unmounting)
- componentWillUnmount()

Опис на методите кои се повикуваат низ фазите:

- constructor():
Првиот метод што се повикува пред да се закачи компонентата. Служи за
иницијализирање на локалниот state и доколку има потреба од прислушување за некакви
настани.
- getDerivedStateFromProps():
Овој метод истотака се повикува пред компонентата да се закачи, но се користи само
доколку сакаме да направиме промена во локалната состојба на компонентата ако
претходно сме имале промена на props-от.
- render():
Овој метод мора да го содржи секоја компонента бидејќи ги содржи елементите кои што
сакаме да ги прикажеме на екранот. Овој метод нема да се повика само во случај доколку
shouldComponentUpdate врати false.

- componentDidMount():
Се повикува кога компонентата ќе се закачи на DOM дрвото. Обично се користи за да се
направат дополнителни промени кои не сме ги направиле при иницијализирање на
компонентата односно constructor() методот.
- shouldComponentUpdate():
Метод со кои што можеме да и укажеме компонентата доколку има промена да не се
ререндерира. Стандардно однесување и е да се ререндерира.

14
- getSnapshotBeforeUpdate():
Се повикува веднаш после ререндирањето и се користи доколку сакаме да задржиме
некоја состојба од DOM дрвото и секоја промена ќе биде препратена на
componentDidUpdate() методот.
- componentDidUpdate():
Се повикува одма после ререндерирањето и се користи доколку настанала некаква си
промена додека траело ререндирањето за да се направи промена во локалниот state.
- componentWillUnmount():
Се повикува пред компонентата да се тргне од DOM дрвото. Се користи за да се исклучат
тајмери, мрежни поврзувања или слушање на некакви настани.

Слика 11 Дијаграм со животните циклуси на компонентата

React Router

React-Router е стандардна библиотека во React наменета за рутирање и управување со

патеките низ апликацијата. Таа има контрола врз патеката на пребарувачот и според тоа низ
едноставен switch израз одредува која компонента да се прикачи на DOM дрвото. Има
едноставно API со повеќе функционалности меѓу кои: динамичко рутирање, можност за
контролирање на транзициите меѓу патеките.

CSS

CSS се залага за Cascading Style Sheets со акцент поставен на „Стил“. Додека HTML се
користи за структурирање на веб-документ (дефинирање на работи како наслови и ставови и
овозможувајќи ви да вградите слики, видео и други медиуми), CSS доаѓа преку и ги наведува

15
распоредот, боите и фонтовите на страницата на вашиот документ. CSS носи стил на веб-
страниците преку интеракција со HTML елементи.
CSS нуди повеќе можности за распоредување на елементите во DOM дрвото. Во
апликацијата е искористен концептот на flexbox кој по природа е еднодимензионален, односно
можеме да одредиме дали елементите на страната ќе бидат поставени вертикално или
хоризонтално. По самото име елементите се флексибилни, тие или се растегнуваат да зафатат
екстра простор или се намалуваат за да зафатат помалку место кога се поставени во flexbox
контејнер. Flexbox со следните карактеристики се издвојува од другите техники за
распоредување на елементите:
- Вертикално (хоризонтално) центрирање на елемент во споредба со родителот
- Сите деца елементи на контејнерот зафаќаат ист простор од достапната
висина/ширина
- Во распоред со колони, ги прави сите со еднаква висина без разлика на
големината на содржината

Styled Components

Styled components е React библиотека која се користи за создавање на React компоненти

од постоечките HTML елементи или други React компоненти и притоа да им додадеме CSS и да
ги третираме како регуларни компоненти. Со помош на овие компоненти наместо рачно да
манипулираме со CSS класите, можеме преку props-от на компонентата да додадеме конкретен
стил.
Исто така, содржат теми каде што можеме од компонента од повисоко ниво да
доделиме некаков стил на сите деца компоненти преку концептот provider-consumer.
Предност на styled-components пред се е нивната реискористливост. Доколку низ некоја
апликација одредени компоненти се појауваат повеќе пати, а се само основни HTML елементи
со некаков стил тие можеме да ги направиме на следниот начин.
Пр. Имаме потреба од наслов кој има одредена CSS класа ‘.title’ кој пред да искористиме
styled-components во JSX форма изгледа вака:

Слика 12 Header пред примена на styled components

Овој пример со примената на styled-components би изгледал вака:

Слика 13 Примена на styled components

16
React Transition Group

Оваа библиотека ги изложува поедноставните компоненти на влезно/излезни

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

Transition Group & CSSTransition

TransitionGroup компонентата менаџира множество од транзициони компоненти

(Transition или CSSTransition) во листа. Самата компонента чува состојба и по потреба кога некоја
компонента се прикачува или откачува на DOM дрвото покренува некаква транзиција.
CSSTransition е главната транзициска компонента која се надоврзува на TransitionGroup
бидејки таа ги чита и раководи сите потребни класи кои треба да се постават за да се изврши
дадената транзиција. CSSTransition применува неколку фази за време на извршување на
транзицијата. Тоа се појавување, влегување и излегување од екран односно DOM дрвото. Секоја
од овие три содржи уште две фази: активна и завршена. Низ сите овие фази можеме да
додадеме CSS стилови за транзиција за да извршиме некаква анимација на екранот.

EmailJS

EmailJS е библиотека која овозможува испраќање на е-маил директно од клиентската

страна на апликацијата (front-end) без да има потреба од back-end дел. Оваа библиотека може
да се интегрира со голем дел од емаил сервиси како Google, Sendgrip, Mailchimp и др. За да се
испрати емаил пораката, потребно е само клиентската страна да испрати барање со одредени
параметри преку едноставна форма.

CMS

CMS (Content Management System) е софтверска апликација која се користи за креирање и

менаџирање на дигитална содржина од еден централен интерфејс. Системите за менаџирање
со содржина најчесто се користат за страни кои содржат блогови, вести и продавници. Различни
CMS-и имаат различни функционалности, но главните функционалности се следните:

- Интуитивно индексирање, пребарување низ податоците преку различни функции,

атрибути како на пр. по ден на објавување, клучни зборови или автори
- Можна ревизија од страна на авторизирани лица пред содржината да се објави на
веб сајтот
- Се користат урнеци преку кои корисниците ги внесуваат податоците, за да се
избегнат било какви грешки

17
Headless CMS

Headless CMS е систем кој се основа само на back-end страната на една веб апликација,
а и поради тоа го добива името “headless”. Овој тип на CMS функционира со едноставен
интерфејс за додавање содржина, а пристапот до него е преку RESTful API (JSON, XML) за да
придобиеме информации од него. Поради овој пристап CMS системот е потполно независен од
тоа како ние ќе ги прикажеме информациите, туку само да прими REST повик, и потребните
информации да ги спакува и да ги прати назад.

Prismic

Prismic претставува CMS односно систем за менаџмент на содржина. Тој е headless CMS
систем што значи дека е целосно независен од каде е поставена front-end апликацијата.
Неговото менаџирање и менување на содржина, автоматски се изразува на веб страната.
Идејата позади ваквото решение е да се поедностави работата пред се на уредниците на
содржината за да не се меша со работата на девелоперите. Овозможува да се користи со било
каква front-end технологија со едноставни повици до Prismic API-то преку нивниот клиент.

Слика 14 Prismic

Prismic CMS е SaaS back-end API со сопствена база кој е едноставен за користење. Самиот
CMS има поддршка за повеќето front-end технологии меѓу кои React, Vue, Gatsby, Next и др. За
скоро секој од наведените постои соодветна имплементација која уште толку го олеснува
неговото користење.
Карактеристики

Покрај вообичаените придобивки како SaaS производ (хостинг, безбедност, надградба

и поддршка на клиенти), од конкурентите се разликува според следниве карактеристики:
- Создавање на сопствени податочни модели – корисниците можат да користат веќе
постоечки типови, и самите тие да се надоградуваат
- Преглед и планирање кога да се објави содржината
- Верзионирање на содржината – можност да се повратат податоците во некоја
претходна состојба, со целосен увид на времето и авторот кој ја создал истата
- Повеќе јазичен – подржува локализација
- Проектен менаџмент – Prismic конвенционално ја категоризира содржината на три
типа, “Work” за тековни проекти, “planed” за идна содржина и “archived” за содржина
која веќе е обновена со друга

18
 Слика 15 Дијаграм за работата на headless CMS

Типови на Prismic содржина

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

Сопствените типови овозможуваат сами да ги дефинираме полињата и нивните типови, односно
каков тип на податок сакаме да зачуваме. Постојат две категории на типови: повторувачки и
самостојни. Сопствените типови се креираат со избирање на категоријата како повторувачки или
самостојни, а потоа со помош на волшебник ги додаваме потребните полиња со влечење и
спуштање. Полињата можат да бидат: наслов, текст, датум, слики, броеви и др. Исто така за
текстуалните полиња се додава и во каков HTML елемент ќе биде искористен текстот за да биде
правилно форматиран. Ова овозможува стилизирање на содржината без да треба да се прават
промени во кодот на веб страната.

Prismic Content Query API

Prismic обезбедува едноставно API, преку кое со HTTP GET побарување, можеме да
повлечеме податоци од нашата база. Тој одговорот го враќа во JSON формат, што е предност за
полесна обработка на податоците на вебсајтот кој што го користи. Еден ваков повик има три
задолжителни параметри:

19
 Параметар Опис

Низа од знаци која репрезентира потребната верзија на

Ref (String)
податоците (master, preview, release preview)

access_token Заштитен токен кој е соодветен на API-то кое се користи

q Низа од потребните податоци

Bitbucket

Bitbucket— бесплатен, отворен и распределен систем за контрола на верзии кој е мошне

брз, ефикасно може да се употребува во големи проекти и содржи иновативен систем на
гранење кој поддржува нелинеарен развој. Една од главните карактерситики на Bitbucket е
распределениот пристап кон контролата на преработки (верзии), при што клиентите не ги
превземаат само најновите промени од централен опслужувач, туку тие лесно прават целосен
резервен примерок на складиштето (repository). Тоа значи дека, доколку некој од
опслужувачите е недостапен поради пад, било кој од клиентските складишта кои соработуваат
на дадениот проект може да се искористи за опоравување на опслужувачот. Всушност, секое
превземање (checkout) на клиентот е целосен резервен примерок на сите податоци од
складиштето во месниот систем.

Техничко Решение

Опис

Во процесот на развивање на оваа апликација во дипломската работа му претходеше

запознавање со користените технологии и нивна практична употреба во платформата за
музичкиот колектив Oubli бидејќи станува збор за SPA апликација која треба корисниците да ги
услужи со најбитните информации околу колективот. На него се прикажуваат следниот настан
кој треба да се одржи, тековните настани, блог со содржина околу музика, страна со
информации за колективот, нивна историја како и контакт страна. Во продолжение е прикажан
целиот процес и настаните кои се одвиваат при приказот на веб страната.

Структура на проектот и веб страната

Кодот на проектот во е сместен во три директориума:

- assets – Тука се сместени сите статични слики, логоа, стилови

20
 Слика 16 assets
- components – Тука се сместени функционалните компонентите од понизок ред, кои
служат само за приказ на податоците

Слика 17 components
- content – Тука се сместени страните кои ги примаат податоците и потоа ги предаваат на
горенаведените функционалните компоненти

Слика 18 содржина

На следната слика е прикажана структурата на React компонентите како дрво, од која е

изградена веб страницата.

21
 Слика 19 структура на компонентите

Влечење на податоци од Prismic

Prismic API-то содржи имплементација наменета за React со која се олеснува праќањето

на барања до самото API. Потребно е само да го вметнеме нивниот клиент преку кој ќе можеме
да испратиме барање за да ги добиеме податоците од API-то. За таа цел во посебна датотека
имаме сервис кој што го интегрира клиентот на Prismic.

Слика 20 Повик до Prismic API

Во главната компонента на апликацијата AppContainer, се импортира сервисот и истиот

се повикува кога компонентата ќе се прикачи на DOM дрвото преку методот
componentDidMount(). Компонентата првично прикажува spinner чија состојба ја чува самата
компонента, а во моментот кога податоците ќе пристигнат до апликацијата тој се трга од екран
и се отвара почетната страница.

22
 Слика 21 AppContainer почетна состојба и животен циклус

Изглед на веб страната

Веб страната се состои од неколку страници кои се прикажуваат на централниот дел на

екранот како што се: Home - се прикажуваат последните три објавени содржини, Events – тука
се објавени минатите и идните настани на колективот, Aboutus – општи информации околу
колективот и диџеите кои го сочинуваат, Contact – форма каде може да се испрати прашање до
колективот и Blog – место каде ќе се објавуваат месечни плејлисти, новости и рецензии.

Слика 22 Homepage

Првичниот екран ги покажува последните три објавени содржини. На клик на било која
од трите новости ќе бидете одведени до местото каде што е објавена информацијата. Доколку
е настан, таа ќе води до официјалната страна на настанот (пр. Facebook, Resident Advisor), а за
останатите објави тие ќе бидат пренасочени до блогот каде целосно ќе може да се прочита
објавата.

23
Навигирање низ апликацијата

Содржината може да биде од друг тип, а до нив може да стигнеме со навигирање од

навигацискиот дел на веб страната. Таму се поставени врски до другите страници (Events, About
us, Contact и Blog) преку кои можеме да навигираме. При клик на името од другите страници, во
URL-то се поставува името на новата страна и Router-ot кој што е закачен на него да слуша
промени и ја менува компонентата која се наоѓа на централниот дел од екранот.

Слика 23 Router во апликацијата

Со помош на Router-от повлечените податоци кои се чуваат во внатрешната состојба на

компонентата MainContent се предаваат на потребната компонента која треба да се прикаже на
екранот.

Слика 24 Навигациско мени

Анимации

Со промената на содржината со горенаведениот Router во процесот на прикажување на

новата содржина се вметнати CSS анимации со помош на TransitionGroup и CSSTransition. Тие
исто така се поврзани со Router-от, кои на промена на локацијата додаваат и одземаат класи со
кои го анимираат прикажувањето на содржината. На елементот CSSTransition се додадени
класите .animate-enter, .animate-enter-active, .animate-exit, .animate-exit-active.

24
 Слика 25 Класите со стилови анимација

Страница со настани

Страницата со настани е поделена на два дела, тековни и идни настани. Посетителите

тука можат да ги дознаат сите потребни информации околу настанот (време, локација, цена на
билет). Доколку постои онлајн купување на билети, во дополнителен дел се појавува копче кое
води директно до официјалната страна каде што корисниците можат да купат билет за настанот.

Слика 25 Настани

Контакт страна

Посетителите на веб страната доколку сакаат да го контактираат колективот можат да

испратат порака на два начини. Едниот е преку клик на емаил адресите кои се прикажани на
Contact страната или со пополнување на формата под нив. Со клик на емаил адресите се отвара
стандардниот поставен емаил клиент од оперативниот систем. Но, доколку корисникот се
одлучи да испрати порака директно преку формата која се наоѓа на страната тоа е овозможено
со библиотеката EmailJS. Тој нуди и вметнување на сопствениот клиент преку кој праќањето на
емаил пораки е многу едноставно. Доволно е само тој да се поврзе со формата каде се запишува

25
пораката и самиот тој ќе испрати барање до неговото API, кое што ќе ја пренасочи пораката до
колективот, во случајот “info@oubli.com”.

Слика 26 Contact страна

Блог

Блогот ги содржи сите вести, рецензии, објави поврзани со активностите на музичкиот

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

Слика 27 Блог

26
Позадинска музика

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

која се влече заедно со целата содржина. Плеерот се наоѓа во долниот дел од страницата,
односно footer-от каде што може музиката може да се паузира или исклучи. За неговата
имплементација не се искористени дополнителни библиотеки, туку е искористен audio HTML
елементот и React референци за да имаме контрола врз него.

Слика 28 Плеер за музика

CMS и содржина
Создавање типови

Со помош на волшебникот од Prismic API-то се креираат типовите на содржината за

потребите на веб страната. Веб страната се содржи од 4 типа: aboutus, event, music и blogpost.
Креирањето на еден тип е едноставно, со посетување на страната types во Prismic API-то. На
десниот крај од страната со кликање на копчето + се појавува волшебникот за создавање типови.

Слика 29 Креирање на тип

Со повлекување и спуштање на поле ќе се појави менито за конфигурација. Тука може

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

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

Слика 30 Додавање поле на типот

Пополнување со содржина

Покрај волшебникот за создавање типови, Prismic API-то содржи и посебен волшебник

за пополнување на содржината од одреден тип. Содржината може да биде тековна, планирана
или архивирана. Така имаме тек кои содржини биле објавени, а соодветно и да ги видиме
испланираните. Волшебникот за создавање содржина може да го пристапиме од страната
Content во Prismic API-то кој се наоѓа во горниот десен дел со икона на молив. Прво се одбира
типот на содржина а потоа се прикажуваат сите полиња кои треба да ги пополниме.

Слика 31 Додавање содржина на повторувачки тип

28
Додавање на мултимедија
Бидејќи страната исто така покрај текст содржи и мултимедија, Prismic АPI-то овие
податоци ги чува на посебно место, во Media делот. Поддржува слики, видеа, музика, pdf
документи и др. Додавањето на мултимедија е едноставно, преку Media волшебникот. Тие се
додаваат со повлекување и директно спуштање врз волшебникот или со клик на копчето
“Upload media” во горниот десен агол.

Слика 32 Prismic Media дел

29
Заклучок
Во рамките на оваа дипломска работа е изработена веб апликација за музичкиот
колектив Oubli како своевидно портфолио. Главниот мотив беше недостатокот на стилизирање
на социјалните мрежи каде самиот колектив се промовира. Апликацијата може да се подобри
од аспект на кориснички искуство со следните функционалности:
- Да се овозможи претплата за заинтересираната публика да добива тековни
информации по емаил порака
- Да се имплементира онлајн видео стриминг и радио станица која ќе функционира
преку вебсајтот кога колективот ќе има некаков настан
- Да се додаде електронска продавница преку која заинтересирани ќе можат да купат
билет за настаните на колективот или брендиран материјал
- Да се додаде опција за коментирање на блогот

30
Користени ресурси
http://www.soundslikebranding.com/myth/Uncovering_a_musical_myth.pdf
https://exploringjs.com/impatient-js/ch_history.html#standardizing-javascript
https://en.wikipedia.org/wiki/ECMAScript
https://en.wikipedia.org/wiki/React_(web_framework)
https://reactjs.org
https://styled-components.com/docs
https://www.emailjs.com/docs/
https://www.prismic.io

31