Osnove razvoja web sučelja i izrada chat aplikacije

završni rad

• Naslov (engleski): Basics of front-end development and creating a chat application
• Autor: Karlo Huljak
• Mentor: Vedran Juričić (mentor)
• Član povjerenstva: Sanja Seljan (predsjednik povjerenstva)
• Član povjerenstva: Kristijan Klasan (član povjerenstva)
• Član povjerenstva: Vedran Juričić (član povjerenstva)
• Ustanova koja je dodijelila akademski / stručni stupanj: Sveučilište u Zagrebu; Filozofski fakultet; (Odsjek za informacijske i komunikacijske znanosti); Zagreb
• Datum i država obrane: 2023-09-20, Hrvatska
• Znanstveno / umjetničko područje, polje i grana: DRUŠTVENE ZNANOSTI; Informacijske i komunikacijske znanosti

Sažetak

U ovom radu, opisat će se proces stvaranja jednostavnije chat aplikacije pomoću ReactJS razvojne okoline. Kako je ReactJS razvojna okolina koja se najčešće koristi u svrhu stvaranja SPA(Single-page application) projekata, dobar je odabir za ovakav projekt. Za rad u ReactJS- u potrebno je poznavanje HTML-a, CSS-a i Javascript-a, pa će se prije opisivanja rada u React-u, opisati ti programski jezici, odnosno njihovi koncepti koji se koriste u izradi same aplikacije. Tags u HTML-u, class i id u CSS-u te funkcije i liste u Javascript-u su neki od pojmova koji će se opisati i objasniti u ovom radu. Zatim će se predstaviti način rada i
koncepti u širem smislu vezano uz ReactJS – kako se HTML, CSS i Javascript koriste u izradi komponenata koji zajedno čine funkcionalnu aplikaciju. Potom će se opisati postupak izrade same aplikacije. Aplikacija će se moći testirati pomoću više otvorenih kartica u web pregledniku gdje će se u svakoj novoj kartici generirati novi korisnik sa nasumično odabranim imenom i prezimenom, kao i jedinstvenom, nasumično odabranom bojom koja će poslužiti umjesto profilne slike korisnika. Kako bi aplikacija bila u potpunosti funkcionalna, moralo bi se izaći iz sfere front-enda, odnosno stvaranja korisničkog web sučelja. Iz tog razloga, kao back-end koristit će se usluga ‘Scaledrone’ koja će omogućiti rad ove aplikacije.

Sažetak (engleski)

This work will describe the process of creating a simpler chat application using the ReactJS development environment. Since ReactJS is a development environment most commonly used for creating Single-Page Application (SPA) projects, it is a good choice for such a project. Working with ReactJS requires knowledge of HTML, CSS, and JavaScript, so before describing the work in React, we will explain these programming languages and their concepts used in building the application. Terms like HTML tags, class and id in CSS, as well as functions and lists in JavaScript, are some of the concepts that will be described and explained in this work. We will then introduce the working principles and concepts related to ReactJS in a broader sense - how HTML, CSS, and JavaScript are used to create components that together form a functional application. Next, the process of building the application itself will be described. The application will be testable by opening multiple tabs in a web browser, where each new tab will generate a new user with randomly selected first and last names, as well as a unique, randomly chosen color to be used instead of a user profile picture. To make the application fully functional, it will be necessary to go beyond the front-end realm, i.e., creating the user interface. For this reason, the "Scaledrone" service will be used as the back end, enabling the operation of this application.

• Ključne riječi: HTML; CSS; Javasript; ReactJS; chat aplikacija
• Ključne riječi (engleski): HTML; CSS; Javasript; ReactJS; chat application
• Jezik: hrvatski
• URN:NBN: urn:nbn:hr:131:340954
• Studijski program: Naziv: Informacijske znanosti; Vrsta studija: sveučilišni; Stupanj studija: preddiplomski; Akademski / stručni naziv: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) informacijskih znanosti (univ. bacc. inf.)
• Vrsta resursa: Tekst
• Način izrade datoteke: Izvorno digitalna
• Prava pristupa: Otvoreni pristup
• Datum i vrijeme pohrane: 2023-09-22 07:56:21