Search

Cilj ovog rada je izrada web-aplikacije koja će poboljšati proces održavanja kvizova u ugostiteljskim objektima. Web-aplikacija treba omogućiti lakše i elegantnije provođenje kvizova na način da se odgovaranje na pitanja te evaluacija odgovora ne vrše papirnatim putem, već putem aplikacije što će ubrzati cjelokupni proces i smanjiti količinu posla organizatorima kvizova. Korisnici web-aplikacije su organizator kviza te ekipe koje na tom kvizu sudjeluju. Iz tog je razloga aplikacija ostvarena u intranet okruženju bez oslanjanja na Internet te je naglasak stavljen na jednostavnost sučelja za natjecatelje koji kvizu pristupaju putem pametnih telefona. Osim toga, aplikacija je prenosiva i samostojeća kako bi organizatoru kviza bila omogućena što veća jednostavnost korištenja. Glavne tehnologije korištene u izradi web-aplikacije su Python, Flask, Vue.js, SQLite te PyInstaller, a u radu je objašnjena njihova funkcionalnost i kontekst u kojem se koriste prilikom izrade aplikacije. The aim of this paper is to create a web-application that will improve the process of holding pub quizzes. The web-application should enable easier and more elegant quizzes in such a way that answering questions and evaluating answers is not done on paper, but through the application, which will speed up the whole process and reduce the amount of work for quizmasters. Users of the web-application are the quizmaster and the teams that participate in the quiz. For this reason, the application was created in an intranet environment without relying on the Internet, and emphasis was placed on the simplicity of the interface for contestants who access the quiz via smartphones. In addition, the application is portable and stand-alone to offer the quizmaster the most simple way of using the application. The main technologies used in the development of the web-application are Python, Flask, Vue.js, SQLite and PyInstaller, and the paper explains their functionality and the context in which they are used when creating the application.

U ovom radu dizajnirana je i implementirana relacijska baza podataka i web aplikacija za praćenje korištenja ortopedskih implantata. U bazi podataka su pohranjeni potrebni podaci o dobavljačima, zaposlenicima, hijerarhiji komponenti i primjercima određene komponente, pamti se i korištenje komponenti za statističke svrhe. Dizajnirano je intuitivno sučelje koje je jednostavno koristiti. Za implementaciju baze podataka korištena je PostgreSQL tehnologija, dok su za web aplikaciju korištene tehnologije Spring Boot i Vue.js. In this paper, a relational database and a web application for tracking the usage of orthopedic implants have been designed and implemented. The necessary data about suppliers, employees, component hierarchy, and instances of specific components are stored in the database, and the usage of components is recorded for statistical purposes. An intuitive user interface that is easy to use has been designed. PostgreSQL technology was used for implementing the database, while Spring Boot and Vue.js technologies were used for the web application.

Cilj rada je izrada web aplikacije zadužene za jednostavno prikazivanje BPMN modela, odnosno procesa u kojem korisnik sudjeluje ili kojeg želi pokrenuti uz svoje arhivirane procese. Ideja za razvoj aplikacije došla je iz potrebe za prikazom BPMN modela, koji se koristi za definiranje procesa, za korisnika tog procesa. Zasniva se na jednom većem sustavu čija je namjena automatizacija i poboljšanje procesa, a sve je započelo sa sustavom prijave prakse kod studenata informatike. Aplikacija je izrađena kroz Vue.js 2 te je velika pozornost posvećena samom sučelju kako bi bilo što jednostavnije i intuitivnije prema korisniku, a naročito dio vezan uz prezentiranje BPMN modela. Razvoj je baziran na svojstvu aplikacije da bude skalabilna kako bi se u bližoj budućnosti mogla jednostavno i brzo nastaviti razvijati na postojeći kod. The goal of thesis is the creation of a web application in charge of simply displaying the BPMN model, i.e. the process in which the actor participates or wants to start with his archived processes. The idea for developing the application came from the need to display the BPMN model, which is used to define a process, for the actor of that process. It is based on one larger system whose purpose is automation and process improvement, which started with the internship application system for computer science students. The application was created using Vue.js 2, and great attention was paid to the interface itself to make it as simple and intuitive as possible for the user, especially the part related to presenting the BPMN model. The development is based on the property of the application to be scalable so that in the near future it can easily and quickly continue to develop on the existing code.

Ovaj rad predstavlja implementaciju edukacijske aplikacije za vježbanje matematičkih zadataka za djecu koja pohađaju četvrti razred osnovne škole. Cilj aplikacije je pomoći djeci sa savladavanjem gradiva na zabavan način. U prvom poglavlju rada opisani su svi zahtjevi koje aplikacija zadovoljava. U drugom poglavlju opisane su slične aplikacije koje već postoje. Nakon toga prikazan je model rješenja aplikacije. U četvrtom poglavlju bavimo se arhitekturom aplikacije i korištenim tehnologijama. Nakon toga objašnjeno je kako su sve funkcionalnosti implementirane te kako lokalno pokrenuti izvorni kod. This paper presents the implementation of an educational application for practicing word problems in mathematics. The aim of the application is to help children master the subject matter in a fun and engaging way. First chapter of the paper describes all the requirements that the application meets. In the second chapter, similar applications that already exist are described. After that, a model of the application's solution is presented. In the fourth chapter, we deal with the architecture of the application and the technologies used. After that, it is explained how all the functionalities were implemented and how to run the source code locally.

Diplomski rad prikazuje kreiranje startup plana te na temelju istog, izradu web aplikacije „myOrder“ čija je glavna svrha optimizacija naručivanja i posluživanja u restoranu. U uvodu je dan kraći opis problema, motivacije, način rješavanja te je navedena korištena tehnologija. Startup plan razrađuje probleme plasiranja proizvoda na tržište u smislu unutarnje vrijednosti proizvoda, konkurencije te u financijskom i marketinškom smislu. Praktični dio ističe najvažnije funkcionalnosti aplikacije, kako su one implementirane i kako naposljetku izgledaju. Rezultat rada je funkcionalna, responzivna web aplikacija. Zaključak sadrži kratak pregled i analizu onoga što je napravljeno dobro, što se moglo napraviti bolje te koje funkcionalnosti bi bilo isplativo implementirati u idućim iteracijama., This graduate thesis deals with the creation of a startup plan and based on it, the making of the web application "myOrder", whose main purpose is to optimize ordering and serving in a restaurant. Introduction gives a brief description of the problem, motivation, solution, and the technology used to accomplish this goal. The startup plan elaborates the problems of placing the product on the market in terms of intrinsic product value, competition, and in financial and marketing terms. The practical part highlights the most important functionalities of the application, how they are implemented and how they look in the end. The result is a functional, responsive web application. The conclusion contains a brief overview and analysis of what was done well, what could have been done better, and which functionalities would be profitable to implement in future iterations.

U završnom radu je izrađena web aplikacija koja omogućuje korisnicima da dijele i slušaju glazbu. Aplikacija podržava dvije vrste korisnika, izvođača i slušatelja. Izvođači imaju mogućnost dijeljenja i organizacije vlastite glazbe uz što im se pruža i praćenje statistike slušanja. S druge strane slušatelju je omogućena pretraga glazbe i ostalog sadržaja, kreiranje vlastitih lista, te naravno slušanje glazbe. Aplikacija je razvijena u Spring Boot i Vue.js programskim okvirima odnosno u Java i JavaScript programskim jezicima., The goal of this project was the development of web application for sharing and listening to music. Application has two types of users, artists and regular users. Artists are users who can upload their own music, create albums or other collection and monitor listening statistics, while regular users can search for music and other artists, create playlists and listen. Application was developed in Java and Spring Boot on the backend and javaScript and Vue.js on the frontend.

U ovom radu opisan je proces izrade računalnog programa za stvaranje i uređivanje Markdown datoteka, pod nazivom RemisMD. Aplikacija je izrađena u potpunosti koristeći web tehnologije HTML, CSS i JavaScript uz pomoć Electron razvojnog okvira i Vue.js za izradu sučelja. Markdown dokumenti otvoreni u aplikaciji prikazuju se formatirani, a korisnik uređuje svaku liniju datoteke posebno, u izvornom Markdown obliku. Uz to, boje sučelja se mogu prilagođavati definiranjem vlastitih tema. Završni rad se sastoji od opisa funkcionalnosti aplikacije, analize i usporedbe sličnih programskih rješenja, opisa korištenih tehnologija te detaljnog objašnjenja implementacije. This bachelor’s thesis describes the process of developing a desktop program for creating and editing Markdown files, by the name of RemisMD. The application is built entirely using the HTML, CSS and JavaScript web technologies with the help of the Electron framework and Vue.js for creating the interface. Markdown documents opened in the app are shown formatted and the user edits each line of the file separately, in plaintext Markdown. Along with that, the colors of the user interface are customizable by defining themes. The bachelor’s thesis consists of a description of the program’s functionalities, an analysis and comparison of similar applications, a description of technologies used and a detailed explanation of the implementation.

U radu su prikazane komponente aplikacije rađene u klijent-server arhitekturi, a poseban naglasak stavljen je na razvoj klijentskog dijela web aplikacije. Iako se klijentski dio temelji na tehnologijama poput HTML-a, CSS-a i JavaScripta, razvojni inženjeri vrlo često koriste okvire koji pružaju moderan pristup dizajnu i funkcionalnosti, te olakšavaju prikaz podataka dohvaćenih sa servera. U radu su analizirani popularni okviri, njihove prednosti, nedostaci i značajke, kao i mogućnosti njihove integracije u postojeći sustav. U sklopu rada su prikazane sličnosti i razlike u korištenju i sintaksi najpoznatijih razvojnih okvira, poput AngularJS, Vue.js i React.js. The paper presents the components of the application made in the client-server architecture, and special emphasis will be placed on the development of the client part of the web application. Although the client part is based on technologies such as HTML, CSS and JavaScript, developers often use frameworks that provide modern access to design and functionality, and facilitate the display of data retrieved from the server. The paper presents and analyzes popular frameworks, their advantages, disadvantages and features, as well as the possibilities of their integration into the existing system. Also, the paper shows the similarities and differences in the usage and syntax of the most famous frameworks, such as AngularJS, Vue.js and React.js.

Potaknuto težnjom ka olakšanju pisanju JavaScript koda nastali su JavaScript biblioteke i web okviri. Oni obuhvaćaju komplete kraćeg napisanog koda i uvelike olakšavaju posao programera. Popularne mrežne stranice koje se svakodnevno posjećuju i koriste se zapravo sastoje od JavaScript biblioteka i okvira i između ostalog zbog njih su brze i efikasne. Cilj završnog rada je upoznati se s JavaScript bibliotekama i okvirima, proučiti ih te naučiti način na koji se oni koriste, kako olakšavaju izradu aplikacija i mrežnih stranica i čemu služe u odnosu na čistu JavaScript. Kao jedni od najpopularnijih JavaScript biblioteka i okvira u svrhu rada izabrani su jQuery, React, Angular i Vue.js. Na početku je predstavljen JavaScript kao popularni programski jezik zbog kojega su biblioteke i okviri prvenstveno nastali kako bi olakšali i ubrzali cijeli proces pisanja koda, navodi se u čemu se biblioteke i web okviri razlikuju. Također je ukratko prikazan jQuery kao početak biblioteka i predstavnik principa piši manje, napravi više. Prvi dio rada se sastoji od općenitog prikaza biblioteke React i Angular i Vue.js okvira, raspravljaju se čimbenici kao što je njihova povijest, instalacija, hello world primjer i na kraju usporedba zastupljenosti među razvojnim programerima. U drugom djelu rada nalazi se praktični primjer njihove implementacije u jednostavnijem primjeru podsjetnika kako bi se prikazala njihova primjena i razlika od čistog JavaScripta.

Cilj ove aplikacije je korištenjem Vue.js framework-a pružiti korisniku što lakše sučelje za svladavanja gradiva teorijskog dijela vozačkog ispita. Glavni dio aplikacije sastavljen je od 4 komponente Teorije, Pitanja, Kvizova te Znakova. Teorija pruža setove pitanja i odgovora po poglavljima priloženim na jednom mjestu. Komponenta Pitanja pruža korisniku samoprovjeru naučenih pitanja također po poglavljima. Kvizovi omogućuju korisniku pripremu za kviz teorijskog dijela vozačkog ispita. Kvizovi su sastavljeni kao pravi kvizovi, odnosno sastoje se od 38 pitanja, sadržavaju 120 bodova, imaju vremensko ograničenje i tako dalje. Spremanjem riješenih kvizova u SQLite bazu podataka pomoću Express.js i Sequelize-a, korisniku pružamo uvid u rezultate svih njegovih riješenih kvizova. Svi ti dijelovi pružaju korisniku veću mogućnost prolaska teorijskog dijela vozačkog ispita. The goal of this application is to use the Vue.js framework to provide the user with the easiest possible interface for mastering the theoretical part of the driving test. The main part of the application is composed of 4 components: Theory, Questions, Quizzes and Signs. Theory provides sets of questions and answers by chapters attached in one place. The Questions component provides the user with a self-evaluation of learned questions also by chapter. Quizzes prepare the user for theoretical part of the driving test quiz. They are composed like real quizzes, i.e. they consist of 38 questions, contain 120 points, have a time limit and so on. By saving the solved quizzes in the SQLite database using Express.js and Sequelize, we provide the user with insight into the results of all his solved quizzes. All these parts provide the user with a greater possibility of passing the theoretical part of the driving test.

Ovaj rad se bavi izgradnjom mrežnog sustava za kupovinu ulaznica za kino. U početku je opisan problem kojim se ona bavi, te su objašnjeni zahtjevi sustava. Zatim su navedene i objašnjene pojedine tehnologije korištene za izradu ovog rada, nakon čega slijedi detaljan opis arhitekture rješenja kroz sva 3 glavna modula. Nakon toga su prikazani neki primjeri API poziva, zatim je opisan rad sustava uz pomoć slika, te upute za korištenje. This paper deals with the construction of an online system for the purchase of cinema tickets. Initially, the problem it deals with is described, and the system requirements are explained. Then, the individual technologies used to create this paper are listed and explained, followed by a detailed description of the solution architecture through all 3 main modules. After that, some examples of API calls are shown, after which the operation of the system with the help of images is described, as well as instructions for use.

U ovom radu napravljena je aplikacija koja može pohranjivati par vrsti bioinformatičkih podataka. Podaci koji su uključeni su referentni genomi, očitanja iz uređaja za sekvenciranje i mapiranja tih očitanja. Sve podatke se može pretraživati po različitim parametrima te se mapirana očitanja mogu vizualizirati. Aplikacija je napravljena kao web aplikacija koja podržava više korisnika. The result of this paper is a web application for saving a few types of bioinformatic data. Data which is possible to add includes references of genomes, reads from sequencing machines and mappings of those reads. All the data can be searched by different parameters and the mapped reads can be visualized. The application is made as a web application that supports multiple users.

Web-aplikacije su temeljni elementi današnjeg weba. U ovom radu obrađena je teorijska osnova web-aplikacija; od čega je moderna web-aplikacija sastavljena, koje se tehnologije koriste, te koje vrste web-aplikacija postoje te njihove prednosti i nedostatci. Dana je usporedba s ostalim vrstama aplikacija. Također je priložen kratki uvod u razvoj samih web-aplikacija kroz povijest. Cilj ovog diplomskog rada je modernizirati postojeći sustav Edgar. U tu svrhu dana je analiza aktualnih radnih okvira za stvaranje jednostraničnih web-aplikacija te je provedena ocjena između novouvedenog Vue.js radnog okvira za stvaranje jednostraničnih web-aplikacija i postojećeg višestraničnog mehanizma. Modernizacija je primarno temeljena na definiranju API ruta, kroz koje se šalju poruke JSON formata. Drugi aspekt modernizacije jest unaprjeđenje korisničkog iskustva, o čemu je također napravljena analiza u samom radu. Modernizacija je provedena modularno te je teoretski moguće zamijeniti Vue.js klijent s bilo kojim drugim frontend klijentom kako bi se osigurala maksimalna sloboda pri odabiru željenih tehnologija. Za kraj, komentirana su moguća poboljšanja modernizacije, te glavni nedostaci ovakvog pristupa. Web-applications are the basis of the modern web. This paper contains the theoretical analysis of web-applications; what modern web-applications are made of, which technologies are commonly used, as well as what kind of web-applications exist and their pros and cons. Additionally, this paper compares the web-application approach to creating software with other kind of applications. Next, there is a short introduction to the historical development of the modern web-application. The goal of this paper is to modernize the existing Edgar system using the web framework Vue.js. To that end, an analysis of available web frameworks had been made between the most popular modern web frameworks (such as React, Angular, Vue.js and Svelte). This paper also contains the performance analyses of the existing multi-page application approach and the newly implemented single-page application approach to developing web-applications. The modernization is modular in nature; the main difference is the definition of the API route which sends responses in JSON format. That change means the Edgar system becomes language-agnostic, since it is theoretically possible to swap out the Vue.js web framework with any other that is able to parse JSON responses. The other aspect of modernization are improvements to the user experience, which is also discussed in this paper. Lastly, the paper discusses possible improvements of the modernization, and the main faults of this approach.

U teorijskom dijelu ovog diplomskog rada napravljen je pregled postojećih komercijalnih i open-source alata koji rješavaju problem generiranja smislenih testnih podataka za relacijske baze podataka. Analizom je utvrđeno da ne postoji alat koji nudi zadovoljavajući skup funkcionalnosti. Vodeća postojeća rješenja podržavaju spajanje na samo jedan sustav za upravljanje bazama podataka, ne nude funkcionalnost vizualizacije generiranih podataka i dostupni su na samo jednom operacijskom sustavu. Cilj diplomskog rada bio je izraditi funkcionalnu aplikaciju koja rješava navedeni problem te implementira funkcionalnosti koje postojeća rješenja na tržištu nemaju. Napravljen je pregled pristupa i radnih okvira za izradu višeplatformskih stolnih aplikacija te je za izradu aplikacije odabran Electron. Electron je radni okvir otvorenog koda kojim je moguće napraviti stolnu aplikaciju koristeći web tehnologije te isporučiti tu aplikaciju na tri vodeća operacijska sustava: Windows, Linux i MacOS. Za vizualizaciju generiranih testnih podataka korištena je JavaScript biblioteka Echarts. Demonstriran je rad i način korištenja razvijenog programskog rješenja te je dana procjena uporabljivosti kao i planovi za budući razvoj. In the theoretical part of this graduate thesis, an overview of the existing commercial and open-source tools that solve the problem of generating meaningful test data for relational databases was made. The analysis found that there is currently no tool that satisfies a core set of expected functionalities. Leading solutions support connection with only one database management system. Also, they do not offer the functionality of visualizing the generated data and they are only available on one operating system. The aim of this this thesis was to create a functional app that solves this problem and implements functionalities that the existing solutions do not have. An overview of approaches and frameworks for the development of multi-platform desktop applications was made and Electron was selected as the tool for the development. Electron is an open source framework that allows development of a desktop application using web technologies and deliver the application to three leading operating systems: Windows, Linux and MacOS. The Javascript Echarts library was used to visualize the generated test data. The functionalities of the developed application were demonstrated, an assesment of the usability was given and plans for the future development were discussed.

U ovom radu je napravljena Web trgovina za sportske opremu. Prvo je opisan problem, nakon toga su objašnjene tehnologije (PostgreSQL, Spring Boot, Node.js, Vue.js) koje su korištene za izgradnju Web aplikacije. Nakon toga slijedi opis i struktura baze podataka. U završnom dijelu rada su prikazani neki API pozivi i opisan je rad sustava i kako se taj sustav koristi. In this paper, a Web store for sports equipment was created. The problem is described first, after that the technologies (PostgreSQL, Spring Boot, Node.js, Vue.js) that were used to build the Web application are explained. This is followed by a description and structure of the database. The final part of the paper presents some API calls and describes the operation of the system and how the system is used.

Cilj ovog diplomskog rada je izraditi mobilnu i web aplikaciju kako bi korisnici i azili mogli na što jednostavniji i brži način saznati lokaciju nestalog psa ili ako korisnici žele vidjeti oglase za udomljavanje pasa svih azila na jednom mjestu bez da pretražuju svaki azil posebno na njihovim internetskim stranicama. Kroz ovaj diplomski rad upoznali smo se sa svim prednostima i manama svih tehnologija od mobilnih aplikacija pa sve do web aplikacija. Rad na početku govori općenito o postojećim aplikacijama i po čemu su one bolje i lošije. Nakon toga se za našu aplikaciju govori koje su prednosti i mane. Zatim su nabrojane sve korištene tehnologije te je napravljena usporedba sa ostalim tehnologijama. Rad zatim prikazuje Use Case i Use Case Sequence dijagrame gdje je detaljno prikazana gotovo svaka aktivnost u aplikaciji. Prikazuje se na koji način akteri rade interakciju s aplikacijom. U posljednjem dijelu su napravljene korisničke upute kako koristiti aplikaciju. U njima je prijeđen i detaljno razrađen svaki korisnički scenarij. The aim of this thesis is to create a mobile and web application so that users and shelters can find out the location of a missing dog as easily and quickly as possible or if users want to see reports for adopting dogs of all shelters in one place without searching each shelter on their website. Through this thesis, we learned about all the advantages and disadvantages of all technologies from mobile applications to web applications. The paper initially talks about existing applications in general and what makes them better and worse. After that, our application talks about the advantages and disadvantages. Then, all the technologies used are listed and a comparison with other technologies is made. The paper then displays the Use Case and Use Case Sequence diagrams where almost every activity in the application is shown in detail. It shows how the actors interact with the application. In the last part, user instructions on how to use the application are made. In them, each user scenario is traversed and elaborated in detail.

Diplomski rad prikazuje izrađenu web-aplikaciju iskorištavanjem postojećeg skladišta podataka u svrhu boljeg planiranja i donošenja poslovnih odluka u maloprodajnoj i veleprodajnoj industriji. Prvi dio rada opisuje prikupljene korisničke zahtjeve te odabranu arhitekturu sustava na temelju postavljenih zahtjeva. Potom slijedi opis modela postojećeg skladišta podataka i opis aplikacijskog modela koji uključuje sve dodatne strukture potrebne za ispravan rad web-aplikacije. Webaplikacija izrađena koristeći programski jezik Python i razvojni okvir Django te programski jezik JavaScript uz razvojni okvir Vue.js opisana je u trećem poglavlju. Aplikacija nudi jednostavan i intuitivan način rada s podacima uz suvremeni dizajn korisničkog sučelja. Na kraju rada navedene su upute za instalaciju programske potpore. The thesis presents a web application based on the existing data warehouse in order to improve the planning and business decision making in retail and wholesale environments. The first part of the paper presents the accumulated user demands as well as the system architecture which was chosen based on the set demands. This is followed by a description of the model of the existing data warehouse and a description of the application relational model which includes all of the additional structures necessary for the optimal performance of the web app. The third chapter describes the web app written using Python and Django framework, as well as JavaScript's Vue.js framework. The application provides a simple and intuitive way of handling data with a modern user interface design. The paper ends with the instructions needed for the installation of the software.

Cilj diplomskog rada je razrada modela web aplikacije izrađene pomoću razvojnog okvira Nuxt.js, koja svojim korisnicima pruža pomoć pri izradi pravilnog plana prehrane na osnovu njihovih trenutnih tjelesnih podataka. Aplikacija je napisana programskim jezikom Javascript unutar razvojnog okruženja WebStorm. Za ključne funkcionalnosti aplikacije je korištena Google-ova platforma Firebase, odnosno njezine dvije usluge – Firebase Authentication usluga za izradu korisničkih računa, te Cloud Firestore baza podataka. Korisniku je omogućen uvid u njegove tjelesne kalkulacije i preporučeni su mu dnevni unos kalorija i raspodjela makronutrijenata unutar istog raspona. Korisnik na raspolaganju ima brojne namirnice koje svojevoljno veže u obroke, a pomoću svojih stvorenih obroka može stvarati svoje jelovnike, pri čemu jedan jelovnik predstavlja sve obroke koje planira konzumirati u jednom danu. Aplikacija mu pomaže tako što mu prikazuje upozorenja ovisno o tome koliko jelovnici koje je kreirao odstupaju od preporučenih kalkulacija koje su izrađene za njega. Korisnik uvijek treba ažurirati aplikaciju svojim najnovijim tjelesnim podacima da bi aplikacija uuvijek sadržavala najtočnije kalkulacije. Svaki puta kada korisnik ažurira podatke o svojem tijelu, ti podaci se pohranjuju u svrhu stvaranja analitike. Korisnik može generirati još jedan dio analitike tako što će svoje jelovnike vezati za datume kada ih planira konzumirati. Na taj način može imati uvid koliko se držao onoga što mu je aplikacija preporučila, te koliki je napredak uspio napraviti. The aim of the thesis is to develop a model of a web application created using the framework Nuxt.js, which provides its users with assistance in creating a proper diet plan based on their current body data. The application is written in the Javascript programming language within the WebStorm development environment. For the key functionalities of the application, Google's Firebase platform was used, ie its two services - Firebase Authentication service for creating user accounts, and Cloud Firestore database. The user is given an insight into his body calculations and is given a recommendation about his daily calorie intake and distribution of macronutrients within the same range. The user has at his disposal a number of groceries that he voluntarily ties into meals, and with the help of his created meals he can create his own menus, where one menu represents all the meals he plans to consume in one day. The app helps him by showing him alerts depending on how much the menus he has created deviate from the recommended calculations made for him. The user should always update the app with their latest body data so that the app always contains the most accurate calculations. Each time a user updates their body data, that data is stored for the purpose of creating analytics. The user can generate another piece of analytics by linking their menus to the dates when they plan to consume them. In this way, he can have an insight into how much he adhered to what the app recommended to him, and how much progress he managed to make.

Tema rada je oblikovanje web aplikacije „ocijeni Majstora“ koja će omogućavati vrednovanje izvođača građevinskih radova. Aplikaciju mogu koristiti svi koji planiraju graditi ili adaptirati stambene ili gospodarske objekte. Onima koji tek planiraju angažirati usluge izvođača aplikacija pomaže tako što imaju uvid u komentare i ocjene korisnika kojima je izvršena usluga. Nakon što usluga izvođača bude gotova, korisnici mogu komentirati i ostaviti željenu ocjenu. Bitno je da svaki put kada registrirani korisnik ocjeni firmu, ta firma dobiva obavijest o zaprimljenom komentaru. To je važno jer su tako obje strane informirane o svim događanjima u aplikaciji. Ocjenjivanje je uvelike olakšano zbog mogućnosti prijave preko vlastitog Google ili Facebook računa. U nastavku rada bit će objašnjene sve tehnologije koje su korištene, to su HTML, CSS, JavaScript, Vue.js, Node.js, Firebase baza, Bootstrap i BootstrapVue okviri. Govorit će se o popratnim funkcionalnostima koje poboljšavaju iskustvo samog korisnika, kao što je prosječna cijena izvođača, portfolio u obliku galerije slika, poveznice na društvene mreže, email sustav obavještavanja i ostale funkcionalnosti. Objasniti će se što je i kako se koristi Netlify, kao i program za izradu prototipa sučelja Figma. Nakon implementacije i dijagrama u radu će detaljno biti objašnjeni koraci kako se koristi aplikacija pomoću slika sučelja web aplikacije. The thesis is structured around forming web app “ocijeni Majstora” for rating construction workers and firms. The app gives benefit for those who are planning to build or renovate residential and work space. Users can see comments and ratings of preceding recipient of the app. Once the contractor’s work is complete, users can comment and leave the rating for them. It is important that every time a registered user evaluates a company, that company receives a notification about the received comment. This is important because this way both sides are informed about all the reviews in the application. Rating of the construction workers is simplified through login with Google or Facebook account. The thesis will also explain used technologies which are HTML, CSS, JavaScript, Vue.js, Node.js, Firebase base, Bootstrap and BootstrapVue frames. Afterwards, we will discuss accompanying functionalities which improve the user experience, such as, arithmetic mean of price, portfolio, gallery, email notify and links to construction firms social networks. The thesis will also discuss how to use Netlify and Figma, program for interface production. Afterwards, the thesis will precisely explain the steps of the app usage via pictures of interface of web app.

U okviru ovog završnog rada prikazana je izrada Single page web aplikacije za razmjenu stvari na internetu. Na početku govorimo o web tehnologijama koje su korištene kako bi razvili aplikaciju. Nakon tog opisujemo arhitekturu baze podataka kao i tehnologije korištene za njenu izradu. Zatim je objašnjena arhitektura aplikacije te potrebne ekstenzije za korištene web tehnologije. Na kraju pogledali smo sve funkcionalnosti koje nam pruža web aplikacija te kako se aplikacija koristi uz prikaz korisničkog sučelja As part of this final paper, the development of a single page web application for exchanging items on the Internet is presented. At the start of the paper we talk about the web technologies that were use din the development of the application . We then describe the architecture of the database as well as the technologies used to create it. After that we show the architecture of the application as well as the necessary extensions for used web technologies. Finally, we looked at all the functionalities provided by the web application and show how the application is used with the display of the user interface

Cilj ovoga rada je izrada aplikacije čija je zadaća pohrana i prikaz umjetničkih djela korisnika. Za izradu ove aplikacije korišten je programski jezik Javascript, tj. Node.js radno okruženje te Express.js i Vue.js razvojni okviri. U radu su opisane korištene tehnologije. Aplikacija koristi MySQL sustav upravljanja relacijskom bazom podataka kako bi pohranila sve potrebne informacije o korisnicima i njihovim objavama. Izrađena aplikacija se sastoji od nekoliko stranica različitih funkcionalnosti. Glavna stranica je početna stranica na kojoj svi korisnici mogu pregledavati objavljene umjetnine. Ostale starnice se sastoje od prijave i registracije za korisnika tipa gosta, te korisničke galerije i stranice za objavu novih umjetničkih djela za registriranog korisnika. The goal of this work is to create an application whos task is to store and display user art. The language used to create this application is Javascript, or more precisely, Node.js runtime enviroment and Express.js and Vue.js frameworks. The paper describes technologies used. The application is using MySQL database management system for storing all the relevant information about the users and their submitions. The created application consists of several pages with different functionalities. The main page is the homepage that all users have access to and thez can used it to browse through submitions. The other pages consist of the register and login page for guests, and user gallery and upload page for submiting new art pieces available to the registered users.

U ovom radu obrađena je tema udaljenog naručivanja u ugostiteljskim objektima tj. prvenstveno restoranima. Početak rada se bavi problemom i zahtjevima aplikacije. Sljedeće poglavlje bavi se korištenim tehnologijama koje su Spring Boot za backend i Vue.js za frontend. Nakon toga je poglavlje u kojem je obrađena arhitektura aplikacije i njezina baza podataka. Na kraju je poglavlje u kojem je prikazano korisničko sučelje aplikacije u kojem je objašnjeno njezino korištenje. Rad završava zaključkom. The topic of this thesis is remote ordering in restaurants. The start of the thesis is tackling the problems and requests of the application. Next chapter describes used technologies which are Spring Boot for backend and Vue.js for frontend. After that, there is a chapter about architecture of the application and its database. Last chapter describes user interface and how its used. Thesis ends with conclusion.

Tema ovog diplomskog rada je izrada sustava za prikupljanje, obradu i prikaz dnevničkih zapisa međusobno povezanih servisa u skoro realnom vremenu. Na samom početku su obrađeni osnovni pojmovi vezani uz tokove podataka poput vremenskih domena, prozora i vodostaja. Zatim slijedi opis osnovnih funkcionalnosti tehnologija koje su korištene prilikom implementacije spomenutog prototipa sustava. Među njima se nalaze Apache Kafka, Spark Streaming i Spark Structured Streaming. Korisničko sučelje i web aplikacija ostvareni su korištenjem Vue.jsa i Dropwizarda. Sami sustav je testirana na dvama različitim tipovima dnevničkih zapisa, aplikacije za naplatu parkinga i nginx web poslužitelja sustava Edgar. Ostvaren je protočan cjeloviti cjevovod koji garantira „točno jednom” od odredišta do izvora, uz malo kašnjenje i ispravne rezultate. The topic of this thesis is building a system for collecting, processing and displaying logs of interconnected services in almost real time. At the very beginning, the basic concepts related to data flows such as time domains, windows and watermarks are described. Then follows a descriptions of basic technology functionalities used in the implementation of said prototype system. These include Apache Kafka, Spark Streaming and Spark Structured Streaming. The user interface and web application were achieved using Vue.js and Dropwizard. The system itself was tested on two different log data types, of a parking billing app and the Edgar system’s nginx web server. A complete flow pipeline is achieved that guarantees "exactly once" from the destination to the source, with little delay and correct results.

Ova aplikacija jest dizajnirana i implementirana kao oglasnik koji omogućava ponudu i potražnju planinarskih izleta. Registrirana planinarska društva mogu nuditi planinarske izlete, a registrirani i neregistrirani korisnici ih mogu potraživati. O svakom izletu dostupni su podaci kao datum i vrijeme polaska, cijena, transport, lokacija, ruta izleta i sl. Rezultate pretrage je moguće filtrirati po cijeni, datumu polaska, lokaciji i statusu. Svi korisnici mogu mijenjati podatke svog profila, a administratori društava mogu mijenjati i podatke o društvu. Svim registriranim korisnicima je omogućeno ostavljanje osvrta s medijskim sadržajima na ponude. This application was designed and implemented as an advertisement portal that enables the suppy and demand of hiking trips. Registered mountaineering associations can offer mountaineering trips and registered and unregistered users can search them. Each trip has available information like date and time of departure, transport, location, price, trip route, guides, etc. Search results can be filtered by price, departure date, location and status. All users can change their profile information, and hiking association administrators can also change association information. All registered users can leave reviews with media content on hiking trip offers.

U ovom radu analizirani su razvojni okviri u klijentskom dijelu aplikacije. Nakon uvoda gdje se ukratko prolazi kroz povijest i sadašnjost izrade web aplikacija, navedeni su glavni izazovi koji se pojavljuju pri izradi klijentskog dijela većih i kompleksnijih aplikacija te pregled kako su ti izazovi riješeni u trenutno tri najpoznatija razvojna okvira – Reactu, Vue.jsu i Angularu. Nakon teorijskog dijela, razvijena je jednaka aplikacija sa sva tri razvojna okvira s ciljem uvida u proces razvoja aplikacija s razvojnim okvirima i njihove usporedbe. Također, navedene su i neke kritike upućene razvojnim okvirima te kratak osvrt na budućnost razvojnih okvira. This paper analyzes client-side web application development frameworks. After a brief introduction and a look at the history and the current state of web application development, the paper outlines the main challenges when developing big and complex web applications and how are those challenges solved in three currently most popular frameworks – React, Vue.js and Angular. The paper also goes through the development of three equal web applications, each developed with one of the mentioned frameworks in order to have a better insight in the process of application development with a framework and to compare them. Also, some critiques of the frameworks are mentioned, as well as a brief discussion of their possible future.

U ovom radu predstavili smo pojam progresivnih web-aplikacija (PWA), naveli smo prednosti i mane te objasnili glavna obilježja takvih aplikacija. Istaknuli smo dva JavaScript aplikacijska okvira koja se mogu koristiti za izradu PWA - Vue.js i NuxtJS. Ukratko smo objasnili proces izrade aplikacija pomoću okvira Vue.js, a potom prikazali kako okvir NuxtJS, zahvaljujući automatskoj konfiguraciji, olakšava izradu Vue aplikacija. Tijek izrade aplikacije koja zadovoljava sve uvjete PWA prikazali smo na primjeru aplikacije Tracking App. Aplikaciju smo izradili pomoću aplikacijskog okvira NuxtJS, a svi uvjeti progresivnosti ispunjeni su uz pomoć modula Nuxt PWA. In this thesis we introduced the concept of progressive web-applications (PWAs), presented advantages and disadvantages and core features of these applications. We pointed out two JavaScript frameworks which can be used for PWA development - Vue.js and NuxtJS. We briefly explained the process of application development with Vue.js, and then presented how NuxtJS, thanks to its automatic configuration, makes Vue application development easier. The flow of PWA development was presented by building Tracking App application. We built this application using NuxtJS framework, and all PWA requirements were satisfied with help of Nuxt PWA module.

U sklopu ovog završnog rada implementiran je programski sustav koji omogućava korisnicima definiranje standarda ispisa bibliografskih referenci sustava Flora Croatica Database, te ispis samih referenci po definiranom standardu. Klijentska aplikacija je napravljena u razvojnom okviru Vue.js, dok je poslužiteljski dio napravljen koristeći ASP .NET Core web-servise. Baza podataka koju sustav koristi je implementirana u sustavu SQL Server. Aplikacija se pokreće koristeći neki od standardnih web preglednika kao što su Google Chrome, Firefox, Edge, Safari i sl. Aplikacija omogućava korisnicima prikaz svih definiranih standarda, dodavanje novih i uređivanje postojećih. Pri uređivanju standarda korisnici mogu definirati ispise za definirane tipove dokumenata, te dodavati i brisati razne elemente ispisa, te za svaki definirati stil ispisa. Konačno, korisnici također mogu i ispisati željene reference po nekom od definiranih standarda. The result of this bachelor thesis is a software that enables users to define standards for printing of bibliographic references from the Flora Croatica Database System, and then also print those references using the defined standard. Client-side application was developed in the Vue.js framework, while the server side was developed by using ASP .NET Core Web Services. Database that is used by the software was implemented in SQL Server. Application can be opened using any of the standard web browsers, like Google Chrome, Firefox, Edge, Safari, etc. The application enables users to view all the defined standards, create new ones and modify existing ones. While modifying a standard, users can define printing styles for defined document types, and add and remove various print elements and define a printing style for each one. Finally, users can also print the references they want using one of the defined standards.

Izradom aplikacije internetskog dućana za IT opremu želi se pojednostavniti i poboljšati iskustvo trgovanja za kupca i vlasnika trgovine. Pristupom aplikaciji, kupac može pregledati sve proizvode i pripadne recenzije. Registracija kupcu ostvaruje mogućnost kupovine proizvoda te pisanja recenzija za proizvode. Vlasnik trgovine ima pristup svim podatcima o korisnicima, transakcijama, proizvodima i pripadnim recenzijama i kategorijama. Također, vlasnik ima mogućnost dodavanja novih proizvoda, korisnika ili recenzija. Svi podatci su spremljeni u bazu podataka koja se nalazi na poslužitelju te im vlasnik može pristupiti u bilo kojem trenutku. Aplikacija je podijeljena u dva dijela, odnosno prisutna je svojevrsna dihotomija između poslužiteljskog dijela (eng. back end) i klijentskog dijela (front end). Poslužiteljska aplikacije je gdje se nalazi baza podataka i Restful API’s (Application Programming Interface), a klijentska aplikacija se pokreće u korisnikovom web pregledniku. Poslužiteljska aplikacija je napravljena u Laravelu, a klijentska koristeći Vue.js razvojni okvir (eng. framework). Na ovaj način se želi pojednostavniti izrada aplikacije te naknadna ažuriranja aplikacije jer je sama aplikacija podijeljena na manje dijelove., When developing a new web shop application the goal is to make the application easy to use for both buyers and owner, also to simplify the process of buying and selling products. Buyers can browse all the products and read the reviews. Once the buyer successfully registered they can buy products and write reviews for products. Each buyer has their own profile page where they can change their profile information and also monitor their transactions. The web shop owner has control over all the products, users, reviews and categories on the web shop. The owner is able to add new products as well as update or delete any products, users, reviews or categories. All these informations are stored in a database that is located on the server so they are available to the owner at any time. The application is split into two parts. There is a back end aplication that is located on the server, this is where the database and the Restful API’s are. Front end application will be running in the user’s browser. Application is split into smaller parts so it is easier to develop, maintain and latter update.

Cilj ovog diplomskog rada izraditi je web aplikaciju koja će olakšati vođenje evidencije odlazaka zaposlenika na godišnji odmor. U okviru završnog rada izrađena je slična aplikacija, međutim ova aplikacija može se pokrenuti preko weba te je u nekim pogledima unaprijeđena. Aplikacija uvelike olakšava tvrtkama odlazak njihovih radnika na plaćene dopuste, godišnje odmore i sl. Na početku ovog diplomskog rada kratko su opisana prava radnika propisana zakonima u Republici Hrvatskoj, ali i prava koja svaki poslodavac prema istim tim zakonima posjeduje. Potom su opisane tehnologije koje su potrebne za izradu ove web aplikacije. Korišten je PHP programski jezik, u kombinaciji s Laravel te Vue.js programskim okvirima. Baza podataka detaljno je osmišljena pomoću MySQL-a. Ovim putem sam proces je automatiziran te je u potpunosti smanjena zamorna dokumentacija, a ako znamo da je automatizacija budućnost IT-a, tada ova aplikacija još više dobiva na svojoj vrijednosti. The goal of this project was to develop a web application which will make easier to track the record of employees going on vacation. As a part of bachelor thesis, a similar application was developed, however, this application can be started through the web server and some of the features have been improved. The application greatly facilitates the procedure every company has with its own employees when going on a vacation. At the beginning of this work, a short introduction on working rights has been made, but also there was a comment about rights every employer has. After that, all technologies used for developing this project have been shortly described. PHP programming language has been used, in combination with Laravel framework and Vue.js framework. Database is designed using MySQL programming tool. This way, the process of going on vacation was automated and accelerated, and on the other hand, tiresome documentation has been reduced. If we know that automatization is the future of the IT, then this application's value is rapidly increasing.

Tema ovog diplomskog rada je „Razvoj aplikacije e-zapisnik za praćenje košarkaškeutakmice“. Detaljno je opisan razvoj i implementacija web aplikacije. Web aplikacijeimaju široku primjenu u svim djelatnostima, većina aplikacija ima razvijenu i web verzijuaplikacije jer je pristup takvim vrstama aplikacija brz i jednostavan i ne zahtijeva punopripreme za korištenje. Opisane su sve tehnologije koje su korištene pri izradi webaplikacije, a to su JavaScript, Python, programski okvir Vue.js, programski okvir Flask,baza podataka SQLite, HTML za strukturu web aplikacije te CSS za dizajn pojedinihdijelova aplikacije. In this graduation thesis "Development of an e-record application for monitoring abasketball game". The development and implementation of a web application isdescribed in detail. Web applications have a wide application in all industries, mostapplications have developed and web version of the application because access tosuch types of applications is quick and easy and does not require much preparationfor use. All technologies used in creating a web application are described, namelyJavaScript, Python, Vue.js framework, Flask framework, SQLite database, HTML forweb application structure and CSS for design of individual parts of the application.

Cilj završnog rada je bio realizirati modernizaciju web aplikacije koja nije responzivna. Kreirana je respozivna višejezična web aplikacija za iznajmljivanje apartmana koja korisnicima omogućuje uvid u dostupnost svakog apartmana, kao i postavljanje rezervacija za apartman. Za izradu aplikacije korišten je Vue.js framework te neki od njegovih paketa poput Vuex, i18n, VueRouter. Radi ljepšeg dizajna korišten je Vuetify paket koji je kreiran na temelju Bootstrapa, a koristi Material Design uzorke. Pristup Firebase bazi podataka ostvaren je putem Axios http alata. Primjenom aplikacije omogućavaju se razna poboljšanja u vidu olakšavanja posla i skraćenje vremena koje vlasnik mora uložiti da bi iznajmio apartman. The aim of the final work was to realize the modernization of a web application that is not responsive. A responsive multilingual web application for renting apartments has been created, which allows users to see the availability of each apartment, as well as set reservations for the apartment. During the implementation of the application, the Vue.js framework was used, as well as some of its packages such as Vuex, i18n, VueRouter. For a nicer design, the Vuetify package was used, which was created based on Bootstrap, and uses Material Design patterns. Access to the Firebase database was achieved through the Axios http tool. By applying the application, various improvements are enabled in the form of easier work and shortening of the time that the owner must invest in order to rent an apartment.

U ovom radu opisano je rješenje kr eiranja sustava za naručivanje u ugostiteljskim objektima. Opisano je rješenje pozadinskog sučelja napisan u Django razvojnom okruženju. Opisano je i okruženje prema korisniku napisano u Vue.ja razvojnom okruženju. Također je razrađeno korištenje cijelog d ijela sustava te na čin na koji sučelje prema korisniku i sučelje prema programeru međusobno komuniciraju kao i način na koji dijele podatke. This pa per describes solution of creating system for ordering in catering. It is described in details backend part of system written in Django framework as well as frontend written in Vue.js framework. Also is described how entire system works and the way the bac kend and fronted communicate to each other and the way they share data. This paper also contains instructions on how to set up computer system to be able to run proj ect. It also contains ideas for future upgraded versions.

Web aplikacije svakim danom sve više rastu i sve više ih ima. Sve su složenije sa sve više mogućnosti, rješavaju više problema te je korisničko sučelje sve bolje i bolje. Jednostavno se stvari jako brzo razvijaju i sve više je čovjek usmjeren na Internet. Ovaj rad obuhvaća razvoj web aplikacije čija je tema upravljanje projektima. Kroz rad se raspravlja o načinu postavljanja glavnih alata i paketa za razvoj aplikacije te sam način na koji se aplikacija razvija. Od korisničkog sučelja, glavnih funkcionalnosti i detaljnog objašnjavanja metoda koje ih prate do poslužitelja i upravljanja podacima koji dolaze do njega. Web applications grow exponentially and there are more and more of them with each day. They are more complexed with even more functionalities, solve even more problems, plus, user interface is better and better. Simply, things evolve rapidly and human is much more oriented to the Internet. This paper covers the development of web application whose topic is project management. Within the paper discusses how to set up the main tools and packages for application development and the way in which the application is developed. From user interface, main functionalities and detailed explanation of methods to the server and the management of the data from the client.

U ovom radu opisani su nedostatci postojećih sustava za organizaciju instrukcija i predloženo je novo rješenje u obliku web aplikacije izrađene u modernim web tehnologijama temeljenim na programskom skriptnom jeziku JavaScript. Izrađeni su: baza podataka (SQL Server), poslužiteljski API (Node.js) i klijentska aplikacija (Vue.js). Aplikacija koja je rezultat ovog rada omogućuje pretraživanje instrukcija po određenom kolegiju za određeni fakultet umjesto po generalnoj domeni, što osigurava kompatibilnost gradiva, pregled slobodnih termina instruktora za sljedećih tjedan dana te online rezervaciju ili otkazivanje rezervacije bez prethodnog stupanja u kontakt s instruktorom. Ovakav koncept mogućnosti pregledavanja slobodnih termina prije rezervacije mogao bi se primijeniti i u druge djelatnosti. In this paper the shortcomings of existing tutoring systems are described and new solution – web application developed in modern web technologies based on the JavaScript script language is proposed. The application is based on relational database (SQL Server), back-end API (Node.js) and front-end application (Vue.js). This tutoring organization system allows searching tutor for a particular course of a particular faculty instead of searching for a course in general, which ensures the compatibility of teaching matter. The system gives an overview of free instructor terms for the whole next week and provides online booking or cancellation without contacting the instructor first. The proposed concept of being able to view free appointments prior to booking could also be applied to other domains.

Aplikacije su postale neizbježni dio svakodnevnog života. Zato je bitno upoznati se sa okruženjima za razvoj web aplikacija koje se dijele na frontend i backend. Teorijski dio rada temelji se na opisu nekoliko okruženja te kako odabrati idealno okruženje temeljem potreba i osobnih preferencija. Praktični dio rada obuhvaća sveukupni proces izrade web i mobilne aplikacije za rezervaciju u studentskim referadama. Cilj aplikacije je ubrzati i automatizirati proces posjeta referadi na moderan način preko web aplikacije za zaposlenike i mobilne aplikacije za studente. Praktični dio se sastoji od izrade prototipa korisničkog sučelja, opisivanja funkcionalnosti i njihov dijagramski prikaz. Slijedi implementacija važnih funkcionalnosti aplikacija te korisničke upute. Applications have become an unavoidable part of our daily lives. That is why there is significant importance when it comes to learning about web application development interfaces which can be divided into frontend and backend frameworks. The theoretical section is based on describing several frameworks to demonstrate the decision-making process on which framework to choose based on needs and personal preferences. The practical section includes the process of making web and mobile applications for reservations at student offices. The main goal is to speed up and automate the process of visiting the student offices by using a web application for employees and a mobile application for students. The practical section also includes making a UI prototype and functionality description with diagrams. The following chapters focus on the implementation.

Ovim završnim radom prikazani su dizajn i izrada raspodijeljenog sustava za kontrolu i vođenje osobnih financija, koji se temelji na klijent-poslužitelj arhitekturi. Pri razvoju sustava obuhvaćen je niz aktualnih tehnologija. Poslužitelj je implementiran u ASP.NET Core 3.0 tehnologiji. Na klijentskoj strani web aplikacija izrađena je u Vue.js, a mobilna u NativeScript-Vue programskom okviru. Komunikacija između klijenta i poslužitelja odvija se REST pozivima, koristeći HTTPS mrežni protokol. Za pristup podacima iz baze podataka upotrijebljen je Entity Framework Core, a za pohranu SQL Server baza podataka. Visual Studio 2019 i Visual Studio Code poslužili su kao razvojni alati. Cilj ovog rada je razvoj jednostavnog, pristupačnog i skalabilnog raspodijeljenog sustava za vođenje financija. Uz prikaz razvoja, u radu se želi opisati tehnologije koje su primijenjene za izradu sustava te njihove prednosti i ograničenja. This final paper describes the design and development of a distributed system for managing personal finances, based on client-server architecture. A number of current technologies were included in the development of the system. The implementation of the server was performed in ASP.NET Core 3.0 technology. On the client side, a web application is created in the Vue.js framework, and a mobile application in the NativeScript-Vue framework. Client-server communication is secured by REST calls, using the HTTPS network protocol. Entity Framework Core was used to access the data from the database and SQL Server to store the data. Visual Studio 2019 and Visual Studio Code were used as development tools. The aim of this paper is to develop a simple, affordable and scalable distributed financial management system. In addition to presenting the development, the paper seeks to describe the technologies used to design the system and their advantages and limitations.

Izrada korisničkog sučelja za tvrtku Ericsson koja nam služi za zapisivanje protokola na što jednostavniji i efikasniji način nakon izvršavanja automatiziranih testova. Objasniti ćemo programski okvir Vue.js, koji se temelji na programskom jeziku JavaScript, u kojem je izrađena ova aplikacija. Također, pojasnit ćemo što su to zapravo automatizirani testovi, kako se oni kontinuirano integriraju, te na koji način će ova aplikacija pomoći i olakšati posao brojnim ljudima unutar tvrtke., Creating a user interface for Ericsson that helps us record protocols as easily and efficiently as possible after performing automated tests. We will explain the Vue.js programming framework, which is based on the JavaScript programming language in which this application was created. We will also clarify what automated tests really are, how they are continuously integrated, and how this application will help and make it easier for many people within the company.

Raspored sati jedan je od klasičnih modela upravljanja vremenom kod kojeg se javlja optimizacijski problem alociranja resursa u vremenske jedinice pod uvjetom zadovoljavanja postavljenih ograničenja. Sustav za upravljanje rasporedom nudi svojevrsno rješenje i djelomičnu automatizaciju ovog procesa te je namijenjen korištenju na sveučilišnoj razini sa ciljem olakšavanja izrade semestralnog modela rasporeda sati i optimizacije organizacije resursa potrebnih za izvođenje nastave. U ovom je radu opisan logički dizajn sustava, njegove funkcionalnosti, programsko rješenje te web tehnologije koje su korištene u implementaciji.

Cilj ovog diplomskog rada bio je razviti web sjedište Oglasnik, a potom izraditi pripadajuću marketinšku kampanju za njegovu promociju. Web sjedište je razvijeno u Vue.js i Nuxt.js frameworcima. Dodatno, se je koristio HTML i JavaScript. Za bazu podataka korišten je Firebase. Za potrebe dizajna korišten je CSS i SCSS. Tijekom pisanje koda koristila se BEM metodologija koja je pripomogla u konzistentnom pisanju koda. Za potrebe web sjedišta Oglasnik provelo se je strateško planiranje i promišljanje u kojem su se definirale misija, vizija i vrijednosti Oglasnika. Potom se je definirala marketinška strategija s detaljno razrađenim marketinškom planom. Sukladno navedenom izrađen je vizualni identitet i pripadajuća knjiga standarda. U knjizi standarda definirana je tipografija, sustav boja, prikazane su varijante logotipa te su one dodatno popraćene tekstualnim i vizualnim objašnjenjima kakve varijante su dopuštene, a kakve ne. Za izradu logotipa korištene su smjernice dobrog dizajna pri čemu je velika pažnja posvećena kombiniranju boja i oblika ne bi li se dobio jedinstven, ali ujedno i prepoznatljiv stil logotipa. Radi bolje promocije izrađeni su i promotivni materijali koju su izrađeni u Illustratoru i Photoshopu. Web sjedištu je dan jednostavan naziv Oglasnik čime se korisnicima odmah daje do znanja da je stranica namijenjena oglašavanju usluga. Iako je kod Oglasnika naglasak na edukativne usluge poput instrukcija, prevođenja te izrada materijala u određenim alatima. Kao zadnja komponenta izrađena je marketinška kampanja koja je većim djelom bazirana na društvenim mrežama zbog budžetskog ograničenja, ali je uključena i promocija offline čime se želi obuhvatiti širu dobnu skupinu. Kroz kampanju su zadani i strateški ciljevi čime je u planu nadogradnja i poboljšanje web stranice ako se pokaže željeni interes za daljnjim razvojem web sjedišta.

Web aplikacije svakim danom sve više rastu i sve više ih ima. Sve su složenije sa sve više mogućnosti, rješavaju više problema te je korisničko sučelje sve bolje i bolje. Jednostavno se stvari jako brzo razvijaju i sve više je čovjek usmjeren na Internet. Ovaj rad obuhvaća razvoj web aplikacije čija je tema upravljanje projektima. Kroz rad se raspravlja o načinu postavljanja glavnih alata i paketa za razvoj aplikacije te sam način na koji se aplikacija razvija. Od korisničkog sučelja, glavnih funkcionalnosti i detaljnog objašnjavanja metoda koje ih prate do poslužitelja i upravljanja podacima koji dolaze do njega.

Unatoč činjenici da programsko inženjerstvo ima prilično kratku povijest postojanja, u zadnjih je nekoliko godina sve zastupljenija znanstvena grana. Web stranice su se razvile do te mjere da je danas gotovo ne moguće pronaći razliku između dinamičke web stranice i web aplikacije s obzirom da dijele relativno jednake osobine. Kako su se aplikacije razvijale tako je postajala sve veća zainteresiranost od strane korisnika za integracijom sustava u određene ustanove kako bi se repetativni poslovi mogli izbjeći te teški poslovi mogli olakšati. Softvere danas možemo pronaći svagdje oko nas od perilice za rublje do aplikacije na zaslonu našega ekrana. Ovaj rad usmjeren je izgradnji klijentskih komponenti web aplikacije koja bi olakšala posao administratorima unutar sveučilišnih ustanova prilikom kreiranja rasporeda sati za narednu akademsku godinu. Detaljno su razrađuje funkcionalnosti na strani klijenta kako bi jedna takva aplikacija mogla nesmetano funkcionirati. Despite the fact that programming engineering has a fairly short history of existence, over the last few years it is increasingly represented in science. Websites have evolved to such an extent that today it is virtually impossible to find the difference between a dynamic web site and web application since they share relatively similar characteristics. As the applications developed, the users have become more and more interested in the integration of software into a certain institution in order to avoid repetitive jobs, and alleviate difficult jobs. The software today can be found everywhere around us from the washing machine to the application on the screen of our monitor. This thesis focuses on building the frontend of web applications that would facilitate business administrators within university institutions while creating a schedule for the next academic year. It elaborates on client-side functionalities so that one such application can run flawlessly.

U ovom radu obrađena je tema razvoja sustava za male iznajmljivače. U prvom djelu rada navode se tehnologije koje će se koristiti i razlozi iz kojih su odabrane. Zatim slijedi opis arhitekture razvijene aplikacije. Opisana je baza podataka i objašnjena implementacija višeslojne arhitekture. Slijedi opis korisničkog sučelja, integracije sa vanjskim servisima i implementacije push obavijesti. U posljednjem poglavlju rada prikazano je korisničko sučelje razvijene aplikacije. The topic of this thesis is the development of a system for small renters. In the first part of the thesis there is a list of used technologies and reasons for which they were picked. The first part is followed by the description of the complete software architecture of the application including the database design and the implementation of the multi-layer architecture. Following the multi-layer architecture there is a description of the integration with external services as well as the implementation of push notifications. After that the architecture of the user interface implementation is described. In the end the completed user interface of the application is shown in the last chapter of the thesis.

Sustav za komunikaciju u stvarnom vremenu mora omogućiti dvosmjernu komunikaciju između poslužitelja i klijenta kako bi akcije jednog korisnika imale utjecaj na sučelje drugog korisnika u stvarnome vremenu. Jedna od najpogodnijih tehnologija za ostvarivanje ovakve komunikacije je WebSocket. U radu su opisani osnovni principi komunikacije u stvarnom vremenu na transportnom i aplikacijskom sloju, razlika između HTTP-a i WebSocketa, kao i moderne tehnologije izrade web sučelja. Uz pomoć opisanih principa i tehnologija izrađeno je web sučelje za izmjenu poruka između korisnika u stvarnom vremenu. Real time communication system has to enable two-way communication between server and client, so that one user's actions could affect another user's interface in real time. One of the most convenient technologies that empowers this kind of communication is WebSocket. Firstly, basic principles of real time communication on transport and application layer are described. Then, HTTP and WebSockets are compared. Furthermore, this seminar goes through modern technologies for creating web interfaces. Using abovementioned principles and technologies, web interface for real time message exchange was created.

Unatoč činjenici da programsko inženjerstvo ima prilično kratku povijest postojanja, u zadnjih je nekoliko godina sve zastupljenija znanstvena grana. Web stranice su se razvile do te mjere da je danas gotovo ne moguće pronaći razliku između dinamičke web stranice i web aplikacije s obzirom da dijele relativno jednake osobine. Kako su se aplikacije razvijale tako je postajala sve veća zainteresiranost od strane korisnika za integracijom sustava u određene ustanove kako bi se repetativni poslovi mogli izbjeći te teški poslovi mogli olakšati. Softvere danas možemo pronaći svagdje oko nas od perilice za rublje do aplikacije na zaslonu našega ekrana. Ovaj rad usmjeren je izgradnji klijentskih komponenti web aplikacije koja bi olakšala posao administratorima unutar sveučilišnih ustanova prilikom kreiranja rasporeda sati za narednu akademsku godinu. Detaljno su razrađuje funkcionalnosti na strani klijenta kako bi jedna takva aplikacija mogla nesmetano funkcionirati.

U ovom radu smo predstavili i objasnili JavaScript aplikacijski okvir pod nazivom Vue.js koji se koristi za izradu modernih web-aplikacija. Objasnili smo njegove značajke i glavne prednosti. Izradom prvo vrlo jednostavne, a potom i naprednije web-aplikacije na primjerima smo objasnili mogućnosti aplikacijskog okvira Vue.js. Glavna prednost Vue.js okvira je mogućnost izrade modernih SPA (Single-Page Applications) aplikacija i vrlo dobra optimiziranost same biblioteke. Samim time aplikacije izrađene pomoću Vue.js aplikacijskog okvira imaju vrlo dobre predispozicije da budu brze i bez zastajkivanja. In this graduate thesis we have introduced and explained JavaScript framework Vue.js which is used for building modern web-applications. We’ve explained its core features and main advantages. Building one simple and one more complex sample web-application gave us an opportunity to show all feature possibilities of Vue.js through examples. Vue’s main advantage is the possibility of building modern SPA applications and a nicely optimized core library. With these properties of the framework, applications built with Vue.js are more likely to be fast and smooth.

U radu je opisan proces razvoja programske podrške za brigu o djeci. Kao prvi korak procesa napravljena je analiza postojec ́ih rješenja. Rezultati analize utjecali su na postavljene zahtjeve vlastitog rješenja te na odluku o korištenju odgovarajuc ́ih teh- nologija. Sljedec ́i korak u procesu razvoja bilo je modeliranje relacijske baze podataka cˇiji modeli su opisani u radu. Objašnjena je arhitektura programske podrške i osnovni principi koji su se koristili u izradi. Napravljen je detaljan pregled funkcionalnosti sustava te uputstva za korištenje i instalaciju. Na samom kraju ukratko su opisane korištene tehnologije. This paper describes the process of developing childcare management software. An analysis of the existing solutions was made as the first step in the process. The results of the analysis have influenced the requirements of this particular solution and the decision to use the appropriate technologies. The next step in the development process was the modeling of relational databases whose models are described in the paper. The architecture of the software and the basic principles used in the design were explained. An overview of system functionality and instructions for use and installation has been made. At the very end, the technology used is described briefly.

Vue.js je sučelje koje omogućuje programiranje i razvoj aplikacija kombinacijom HTML i JavaScript jezika. Aplikacija StudentEvent osim sučelja Vue.js koristi paket za dizajn komponenti Vuetify, Vuex store management i bazu podataka Firebase. U uvodnom dijelu se govori općenito o mobilnim i web aplikacijama te se istražuje tržište i motivacija za implementaciju aplikacije. Kroz slijedeća se poglavlja prati razvoj i implementacija počevši od osnovnog oblika aplikacije. Zatim se izrađuju stranice na kojima se postepeno implementiraju mogućnosti te se podaci povezuju i prikazuju preko baze podataka. Aplikacija služi kao primjer razvojnih mogućnosti okruženja Vue.js i njegovih paketa. Vue.js is an interface which provides the ability for application programming and development using the combination of HTML and JavaScript programming languages. Besides using the Vue.js interface, the StudentEvent application also uses the Vuetify component design package, Vuex store management and the Firebase database. The introductory chapter focuses on mobile and web applications in general and it also explains the general idea and motivation for developing such an application. The next chapters follow the development and implementation of the application starting with the basic design. The majority of chapters then focus on creating and connecting the pages and their data with the database. The application serves as an example of the development abilities of Vue.js and its packages.

U sklopu ovog rada se detaljno opisuju karakteristike progresivnih webovskih aplikacija te karakteristike trenutno najpopularnijih JavaScript radnih okvira za njihovu izradu, React-a i Vue.js-a. Pored definiranih svojstava tehničke prirode, dan je uvid i u svojstva koja utječu na primjenjivost radnog okvira na određene klase problema. Usporedba navedenih radnih okvira se obavlja na temelju definiranih karakteristika i svojstava te su, za potrebe verifikacije teza navedenih u radu, izrađene dvije ogledne progresivne webovske aplikacije, svaka pomoću zasebnog proučavanog radnog okvira. Također je prikazana i analiza zastupljenosti odabranih radnih okvira kao i popis najpopularnijih primjera njihove primjene na svjetskom tržištu. This thesis thoroughly describes Progressive Web Application characteristics along with the characteristics of the now most popular JavaScript frameworks used for their development, React and Vue.js. Besides defining technical features, the thesis also covers properties affecting the applicability of the selected frameworks on certain problem classes. The comparison of the frameworks is based on those defined characteristics and features. Two Progressive Web Applications have been developed for the purpose of verifying the claims laid out in this thesis, each one with its own framework. Also shown is the analysis of the selected frameworks usage along with a list of the most popular examples of their appliance on the world market.

Tema završnog rada je izrada web aplikacije za provjeru složenosti broja. Aplikacija određuje je li uneseni broj prost ili složen te ispisuje rastav na proste faktore složenog broja. Web aplikacija je rađena unutar Atom razvojnog okruženja programskim jezikom JavaScript, opisnim jezikom HTML i CSS te uz pomoć aplikacije WAMP koja služi za stvaranje umjetnih servera i baza podataka The topic of this final work is the making of a web application to verify if an entered number is a prime number and if not, dissolving it into factors. The web application was made in the Atom development program using the programming language JavaScript, HTML and CSS markup language and the WAMP application for creating artificial local servers and databases