Osnove razvoja web sučelja i izrada chat aplikacije

undergraduate thesis

• Title (english): Basics of front-end development and creating a chat application
• Author: Karlo Huljak
• Mentor: Vedran Juričić (mentor)
• Committee member: Sanja Seljan (predsjednik povjerenstva)
• Committee member: Kristijan Klasan (član povjerenstva)
• Committee member: Vedran Juričić (član povjerenstva)
• Granter: University of Zagreb; Faculty of Humanities and Social Sciences; (Department of information and Communication sciences); Zagreb
• Defense date and country: 2023-09-20, Croatia
• Scientific / art field, discipline and subdiscipline: SOCIAL SCIENCES; Information and Communication Sciences

Abstract

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.

Abstract (english)

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.

• Keywords: HTML; CSS; Javasript; ReactJS; chat aplikacija
• Keywords (english): HTML; CSS; Javasript; ReactJS; chat application
• Language: croatian
• URN:NBN: urn:nbn:hr:131:340954
• Study programme: Title: Information Sciences; Study programme type: university; Study level: undergraduate; Academic / professional title: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) informacijskih znanosti (sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) informacijskih znanosti)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Open access
• Created on: 2023-09-22 07:56:21