| Sažetak | Zadatak ovog završnog rada je bio izrada web aplikacije Travel Memories. Rad je podijeljen na dva glavna dijela, opis tehnologija i realizacija aplikacije. Prvi dio rada prolazi kroz različite tehnologije koje su korištene za implementaciju. Detaljno je objašnjena JavaScript biblioteka React koja poboljšava interaktivnost statičnih web stranica i olakšava izradu složenih aplikacija. Bez njenih glavnih značajki, JSX-a i virtualnog DOM-a, ne bi bio toliko privlačan programerima. JSX je sintaksno proširenje JavaScripta koje olakšava izmjenu DOM-a te se zbog toga koristi kao standardna praksa za React, a virtualni DOM omogućava Reactu da ažurira samo potrebne dijelove DOM-a te tako ubrzava i povećava performanse aplikacija. Važno je bilo objasniti i React komponente na kojima se cijela logika React biblioteke zasniva. Nakon React poglavlja slijedi poglavlje o Node.js-u, backend okruženju koje izvršava JacaScript kod izvan web preglednika. Jedno od njegovih prednosti je i mnoštvo npm paketa koji smanjuju potrebu za pisanjem redundantnih linija koda. Za aplikaciju Travel Memories korišten je Express paket koji pruža mnoge značajke čiji je cilj pojednostavljenje razvoja web i mobilnih aplikacija. Na kraju prvog dijela, prolazi se kroz svojstva PostgreSQL-a koji je korišten kao relacijska baza podataka te kroz SQL jezik kojim se upravlja bazom i kojim se izvode različite operacije nad podacima u bazi. U drugom dijelu rada, opisan je razvoj aplikacije nazvane Travel Memories. Aplikacija je implementirana u obliku troslojne klijent-server strukture gdje klijent i server komuniciraju na temelju zahtjev-odgovor metode uz pomoć Axios biblioteke. Aplikacija je izrađena za ljude koji putuju i žele sačuvati uspomene u obliku slika i opisa. Te uspomene su vidljive na Google Maps karti, tako da mogu imati sve uspomene na jednom mjestu. Aplikacija omogućava registraciju, prijavu i odjavu korisnika. Prijavljeni korisnici mogu objavljivati postove sa slikama, pregledavati tuđe postove i profile te pregledavati svoje i karte ostalih korisnika koje sadržavaju sva posjećena mjesta i informacije o putu. Jedno od bitnijih funkcionalnosti je ta da je omogućeno objavljivanje i privatnih postova koji su vidljivi samo korisnicima koji ih i objave. Za izradu karte, koja je glavni dio aplikacije, korišten je npm paket google-maps-react. Za korištenje tog npm paketa bilo je nužno prijaviti se na Google Cloud platformu te zatražiti API ključ koji omogućava korištenje i prikaz karte u projektu. Mapa prikazuje lokacije s malim fotografijama te su klikom na fotografije vidljive sve informacije o putovanju. |
| Sažetak (engleski) | The task of this bachelor's thesis was development of the Travel Memories web application. The work is divided into two main parts, the description of technologies and the application development. The first part of the thesis explains the different technologies that were used for the implementation. The JavaScript library React, which improves the interactivity of static web pages and facilitates the development of more complex applications, is explained in detail. Without its main features, JSX and virtual DOM, React would not be as attractive to developers. JSX is a syntax extension to JavaScript that makes it easy to modify the DOM and is therefore used as a standard practice for React, and the virtual DOM allows React to update only the necessary parts of the Dom, thus speeding up and increasing the performance of the application. It was also important to explain the React components, on which the entire logic of the React library is based. The React chapter is followed by a chapter on Node.js, a backend environment that executes JavaScript code outside of a web browser. One of its advantages is the multitude of npm packages that reduce the need to write redundant lines of code. The Travel Memories app uses the Express package, which provides many features aimed at simplifying the development of web and mobile applications. The end of the first part focuses on examining the properties of PostgreSQL which is used as a relational database, as well as the SQL language that manages the database and performs various operations on the data in the database. The part about the application development goes through its functionalities, architecture, and the pages it contains. Travel Memories is implemented in the form of a three-layer clientserver structure where the client and server communicate based on the request-response method with the help of the Axios library. The application was created for people who travel and want to save memories in the form of pictures and descriptions. These memories are visible on Google Maps, so that users can have all memories in one place. The application enables user registration, login and logout. Registered users can publish posts with pictures, view other people's posts and profiles, and view their own and other users maps that contain all visited places and travel information. One of the more important functionalities is the possibility to publish private posts that are visible only to users who publish them. The npm package googlemaps-react was used to create the map, which is the main part of the application. To use that npm package, it was necessary to log in to the Google Cloud platform and request an API key that enables the use and display of the map in the project. The map shows locations with small photos and when clicked, it shows all of the post informations. |
