SVEUČILIŠTE JOSIPA JURJA STROSSMAYERA U OSIJEKU

FAKULTET ELEKTROTEHNIKE, RAČUNARSTVA I

INFORMACIJSKIH TEHNOLOGIJA

Izvješće sa stručne prakse

Marow Labs d.o.o.

Web developer

31000 Osijek 26.06.2022.

Emanuel Maričić

Mentor:
Tihomir Zovko

Osijek, 2022.
Sadržaj

1. Uvod...............................................................................................................................................1
1.1. Opis tvrtke...................................................................................................................................1
1.2. Opis cjelokupne prakse................................................................................................................1
2. Tjedna izvješća dnevnika rada........................................................................................................2
2.1. Prvi tjedan...................................................................................................................................2
2.2. Drugi tjedan.................................................................................................................................3
2.3. Treći tjedan..................................................................................................................................4
2.4. Četvrti tjedan...............................................................................................................................5
2.5. Peti tjedan...................................................................................................................................6
3. Procedure i postupci zaštite na radu..............................................................................................8
4. Zaključak.........................................................................................................................................8
5. Literatura........................................................................................................................................8
Dodatak/prilozi.......................................................................................................................................9
 1. Uvod

1.1. Opis tvrtke

Tvrtka Marrow Labs d.o.o. je tvrtka koja je usmjerena na izradu visokokvalitetnih digitalnih proizvoda
vođenih podatkovnom inteligencijom s izuzetnom softverskom arhitekturom i prekrasno kreiranim
UI/UX-om. Pruža razvoj mobilnih (iOS i Android) i web aplikacija, dizajn i analitiku podataka. Dio tima
usmjeren je na razvoj nekoliko digitalnih proizvoda temeljenih na najnovijim znanstvenim metodama
i tehnologijama koji će unaprijediti poljoprivrednu proizvodnju. Ima veliko znanje i stručnost u
nekoliko područja od e-sportova, pametnih gradova, turizma do poljoprivrede, gdje se steklo puno
iskustva razvijajući nekoliko digitalnih proizvoda. Koristeći najnovije tehnologije, algoritme i
znanstvene metode, cilj tvrtke je proizvoditi vrhunsku tehnologiju i proizvode za klijente. Zapošljava
najbolje programere i znanstvenike te blisko surađuje sa sveučilištima, kao i s vodećim svjetskim
tehnološkim tvrtkama. Cilj Marrow LAbs je stvoriti dugoročan odnos s klijentima i partnerima te
dovesti razvoj softvera na potpuno novu razinu.

1.2. Opis cjelokupne prakse

Praksa me je naučila napraviti web 3.0 aplikaciju, frontend dio. Tijekom tjedana sam učio na Web 3.0
eksternom projektu koji se zove NEVU. NEVU je aplikacija pomoću koje će izvođači moći prodavati
svoje pjesme i albume u obliku NFT-a. Na praksi sam stekao puno novih znanja i vještina i vidio kako
je to raditi na konkretnom projektu sa timom, te surađivati s timom. Jako sam zadovoljan praksom i
novim znanjima.

1
 2. Tjedna izvješća dnevnika rada

2.1. Prvi tjedan

Tjedan 1
Vremensko razdoblje 26.06.2022. – 02.07.2022.
Broj radnih sati u tjednu: 40
Ishodi učenja za tjedan prakse: postavljanje projekta te proučavanje web 3.0 tehnologija
Web programiranje: Morali smo izabrati u kojim ćemo tehnologijama kreirati ovaj projekt, te pošto
je projekt vezan s webom 3.0 smo morali dobro proučiti tehnologije jer svima je bilo to novo
područje

Što je rađeno na praksi u tom tjednu:

1. Dan – Kreiranje projekta u NextJS-u i dogovor oko samog projekta i aplikacije
2. Dan – Odabir rada u ThirdWeb library koji pruža tehnologije za 3.0 web dio, te proučavanje
ThirdWeb librarya
3. Dan – Proučavanje ThirdWeb library-a te proučavanje kako Polygon mreža radi
4. Dan – Također proučavanje ThirdWeb library-a te proučavanje kako Polygon mreža radi
5. Dan – Proučavanje samog NextJS-a, pronalaženje njegovih prednosti i mana u odnosu na ReactJS

Koji alati, tehnologije, znanja i vještine su pri tome korišteni: NextJS, MaterialUI, ThirdWeb
Koji su odgovarajući poslovi izvedeni: Proučavali smo ThirdWeb tehnologije jer nam je to svima
bilo novo područje također i Polygon test mreža koju ćemo koristiti pri izradi ove aplikacije, te smo
postavili projekt u NextJS-u i također odabrali koji library-e ćemo koristiti za razvijanje projekta te
za css
Koji su rezultati rada tijekom tog tjedna: Rezultat tokom ovog tjedna meni osobno je novo znanje
o NextJS-u, te novo znanje o Web 3.0 tehnologijama koje ćemo koristiti
Zašto je rađen i gdje se koristi taj rezultat ili posao koji se obavljao: Sve to smo radili i proučavali
kako bismo kasnije mogli isto to primijeniti u našem projektu.
Detaljan opis obavljenih poslova
1. dan - Inicijalizirali smo projekt u NextJS-u. NextJS je zapravo React framework što znači da je
zasnovan na React tehnologijama, ima malčice drugačiju strukturu nego React i najviše mi se sviđa
routing sustav koji omogućava dinamičko routanje kroz aplikaciju. Sam projekt se treba sastojati
od mogućnosti povezivanja na Metamask wallet i mogućnosti kupnje NFT-a s logiranim walletom,
te mogućnosti postavljanja NFT-a na marketplace i mnogo drugih stvari koje će te čuti tokom
projekta
2. dan – Morali smo odabrati koji library koji pruža tehnologije NFT-a i web 3.0 marketplacea će
nam biti najbolji za naš projekt, tu smo nakon proučavanja ThirdWeb library odabrali njega.
3. dan – Ovaj dan sam još uvijek proučavao ThirdWeb library, kako funkcioniraju api pozivi na
njihov server i kako dobiti određene api pozive za ono što nama treba. Također sam proučavao
Polygon test mrežu i njene api pozive koji nam omoguću vidjeti detalje bloka transakcije kada se
neka radnja obradi na nekom walletu
4. dan – Testirali smo api callove s Thirdweba i Polygona u projektu, tj. Direktno u NextJS-u
5. dan – Danas sam proučavao kako funkcionira routing sustav u NextJS-u, što ima jednu jako
dobru prednost, može se napraviti dinamička ruta npr. prikazivanje NFT-a /token/id gdje bi se id
mijenjao s obzirom na koji NFT kliknete taj bi broj pisao umjesto id-a te bi ga na toj stranici lako
mogli dohvatiti. Također sam proučavao strukturu koda NextJS-a

2
 Slika 2.1. Struktura koda NextJS-a

2.2. Drugi tjedan

Tjedan 2
Vremensko razdoblje 03.06.2022. – 09.07.2022.
Broj radnih sati u tjednu: 40
Ishodi učenja za tjedan prakse: konkretna izrada UI
Web programiranje: Ovaj tjedan smo se bavili izradom UI-a

Što je rađeno na praksi u tom tjednu:

1. Dan – Kreiranje samih stranica koje će biti u aplikaciji
2. Dan – Kreiranje dizajna za home stranicu
3. Dan – Kreiranje dizajna za /create-listing stranicu
4. Dan – Kreiranje dizajna za /marketplace stranicu
5. Dan – Kreiranje dizajna za /submission-form stranicu

Koji alati, tehnologije, znanja i vještine su pri tome korišteni: NextJS, dizajn smo radili pomoću
MaterialUI library-a koji nudi styled komponente, uređuje se zapravo osnovne komponente, gdje
također što je najbitnije kod je uredno posložen da se zna gdje se šta nalazi.
Koji su odgovarajući poslovi izvedeni: Imali smo dizajn koji smo trebali pratiti kako bi udovoljili
svojim klijentima
Koji su rezultati rada tijekom tog tjedna: Rezultat tokom ovog tjedna meni osobno je puno bolje
znanje o izradi samog dizajna stranice, puno mi je pomoglo kako od nule krenuti sa dizajnom
stranice
Zašto je rađen i gdje se koristi taj rezultat ili posao koji se obavljao: Moramo pratiti dizajn
klijentovih uputa kako bi aplikacija izgledala što ljepše i profesionalnije.
Detaljan opis obavljenih poslova
1. dan - Danas smo kreirali sve stranice tj. kako mi to zovemo, sve rute koje će se koristiti u

3
 aplikaciji, također smo morali kreirati Layout za aplikaciju, a Layout je taj da kroz cijelu
aplikaciju se proteže lijepi responzivni Header i Footer
2. dan – Danas smo kreirali UI za home stranicu. UI na home pageu se sastoji od lijepog
dizajna koji će u budućnosti prikazivati fetaured artista, te od featured kolekcije slidera,
marketplace slidera, i ostalih informacija koji govore kako aplikacija funkcionira.
3. Dan – danas sam radio dizajn za /create-listing stranicu. Ona se sastoji od jedne lijepe
forme gdje će se upisivati adresa kolekcije, id nfta, njegova cijena i u koju kategoriju spada
pa će se u budućnosti moći postaviti tj „listati“ taj NFT na marketplace.
4. dan – danas je bio vrlo zanimljiv dan, radili smo kartice za marketplace, kada se u
budućnosti bude mogao listati NFT na marketplace, izgledati će kao što je prikazano na
slici. U kartici će se prikazati odgovarajuća slika za NFT, te informacije o njemu.

Slika 2. Prikaz dizajna NFT kartice

5. Dan – danas sam radio dizajn za /create-listing stranicu. Ona se sastoji od jedne lijepe
forme gdje će se upisivati informacije o izvođaču. Morao sam napraviti input takav da kada
je prazan da ima sivu boji kao na slici 3., a kada se krene pisati u njega tj. kada je input
popunjen onda ima bijelu boju. Nisam očekivao da će to biti tako izazovno za kreirati.

4
 Slika 3. Prikaz praznog inputa u formi

Slika 3. Prikaz ispunjenog inputa u formi

2.3. Treći tjedan

Tjedan 3
Vremensko razdoblje 07.02.2022. - 11.02.2022.
Broj radnih sati u tjednu: 40
Ishodi učenja za tjedan prakse:
Baze podataka: demonstrirati povezivanje na bazu podatka, postavljanje upita u odgovarajućem
programskom jeziku
Web programiranje: Izabrati odgovarajući način pristupa bazi podataka preko weba i povezati s
primjerima.

Što je rađeno na praksi u tom tjednu: Izrada backend dijela projektnog zadataka koji se radi u
timu.
Koji alati, tehnologije, znanja i vještine su pri tome korišteni: C#, .NET framework, Dependency
injection, Autofac, Postman, rad s bazom podataka, multilayer arhitektura, asinkrono
programiranje
Koji su odgovarajući poslovi izvedeni: Kreirana baza podataka, uneseni podaci u bazu, podijeljen
posao između tima, kreirana multilayer arhitektura, IoC kontejner, napravljen CRUD za svaku
tablicu u projektu.
Koji su rezultati rada tijekom tog tjedna: U potpunosti je napravljen backend dio projektong
zadataka. Sve je stavljeno na github i spremno je za izradu frontend dijela.
Zašto je rađen i gdje se koristi taj rezultat ili posao koji se obavljao: Napravljeno je kako bi
prilikom povezivanja sa frontedom mogli dohvaćati podatke iz baze podataka preko WebAPI. Sve
tablice imaju CRUD pa na sve njih možemo unositi podatke.
Detaljan opis obavljenih poslova
Započeli smo na rad na projektu. Podijelili smo zadatke u timu te smo krenuli s programiranjem.
Napravili smo bazu podataka sa svim tablicama u koje smo unijeli testne podatke. Implementirali
smo CRUD za sve tablice. Koristili smo DI, asinkrono programiranje te bazu podataka. Nakon
napravljenog posla smo sve postavili na github.

2.4. Četvrti tjedan

5
Tjedan 4
Vremensko razdoblje 14.02.2022. - 18.02.2022.
Broj radnih sati u tjednu: 40
Ishodi učenja za tjedan prakse:
Baze podataka: definirati i napraviti bazu podataka, forme za unos podataka, kreiranje upita i
pogleda
Web programiranje: Izabrati odgovarajući način pristupa bazi podataka preko weba i povezati s
primjerima.

Što je rađeno na praksi u tom tjednu: Dodane dodatne funkcionalnosti u backend dio projekta kao
što su paging, filter i sortiranje. Provjereno da je sve funkcionalno.
Koji alati, tehnologije, znanja i vještine su pri tome korišteni: Od do sada ne korištenih
tehnologija smo koristili HTML, CSS, JavaScript, React te reactov bootstrap.
Koji su odgovarajući poslovi izvedeni: Nove funkcionalnosti u backend dijelu zadatka, filter,
sortiranje i paging. Provjera funkcionalnosti i upoznavanje s reactom. Uvod u react i upoznavanje s
osnovnim pojmovima u reactu. Kreiranje prve react aplikacije kao mini projekta.
Koji su rezultati rada tijekom tog tjedna: U potpunosti završen backend dio projekta. Instaliranje
reacta i upoznavanje s osnovama reacta te pokretanje prve mini aplikacije u reactu.
Zašto je rađen i gdje se koristi taj rezultat ili posao koji se obavljao: Filter, paging i sortiranje se
koristi na svim web stranicama pa tako i na našoj. Dodaju kompleksnosti stranice i gotovo da i
nema stranice koja to nema. Upoznavanje s reactom zbog frontend dijela aplikacije.
Detaljan opis obavljenih poslova
Dodavanje novih funkcionalnosti na backend dijelu, filter, sort i paging kako bi korisnici imali
dodatne mogućnosti filtriranja i sortiranja kao i odabira koliko će se elemenata prikazivati po
stranici. Prikaz klase stvorene za paging je prikazan na slici 2.3. Završene nove funkcionalnosti te
počeak rada u Reactu. Upoznavanje sa reactom te osnovnim pojmovima. Pokretanje prve mini
aplikacije u Reactu. Radili smo funkcije, renderiranje elemenata te komponente. [4]

6
 Slika 2.3. Prikaz paginga stvorenog na praksi

2.5. Peti tjedan

Tjedan 5
Vremensko razdoblje 21.02.2022. - 25.02.2022.
Broj radnih sati u tjednu: 40
Ishodi učenja za tjedan prakse:
Baze podataka: demonstrirati povezivanje na bazu podatka, postavljanje upita u odgovarajućem
programskom jeziku
Web programiranje: Objasniti način komunikacije između web preglednika i poslužitelja.

Što je rađeno na praksi u tom tjednu: Daljnje učenje Reacta , stanje React komponenti, rukovanje
događajima, spajanje na API, bootstrap i React, react routing, izrada frontend dijela i prezentacija
projekta.
Koji alati, tehnologije, znanja i vještine su pri tome korišteni: Korištene nove tehnologje i alati:
React, Axios, ReactRouter
Koji su odgovarajući poslovi izvedeni: Naučene nove funkcionalnosti u Reactu: upravljanje
stanjima u Reactu, rukovanje događajima, spajanje na APU, React routing te završen frontend dio
projekta.
Koji su rezultati rada tijekom tog tjedna: Rezultati tijekom tjednu su novo znanje o Reactu,
stanjima u Reactu, upravljanju događajima te završen projektni zadatak, frontend i backend te
prezentacija projekta [6].
Zašto je rađen i gdje se koristi taj rezultat ili posao koji se obavljao: U ovom smo tjednu naučili
raditi frontend dio web stranice. Nakon što smo napravili backend dio ostao nam je napraviti
frontend dio kako bio stranica dobila svoj izgled. Nakon obavljenog posla stranica je dobila svoj

7
konačni izgleda te smo isti prezentirali drugom timu te mentorici.
Detaljan opis obavljenih poslova
U zadnjem tjednu praske smo radili na frontend dijelu projektnog zadatka. Naučili smo raditi u
Reactu te rukovati s događajima, stanjima i komponentama [5]. Radili smo na frontend dijelu te
smo dizajnirani izgled onda i ostvarili. Spojili smo s API-em što je prije bilo rađeno s Postmanom.
Nakon završenog rada na projektu prezentirali smo projekt drugom timu te mentorici. Dobili smo
pozitivne komentare. Prikaz malog dijela frontenda nalazi se na slici 2.4.

Slika 2.4. Prikaz frontend dijela aplikacije, ispis modela automobila, napravljeno na praksi

8
 3. Procedure i postupci zaštite na radu

Radili smo na računalima, programirali, pa nije bilo potrebe za nekom dodatnom mjerom opreza i
zaštite na radu u ovih 5 tjedana.

4. Zaključak

Praksa je odličan način da se nauče nove stvari i iz prve ruke vidi kako je to raditi na konkretnim
projektima u timu, kao što ćemo svi mi raditi nakon faksa. Za vrijeme faksa nisam imao osjećaj kako
je to raditi u takvom okruženju ali sada vidim kako je, i moram reći da je u početku bilo prilično
neobično međutim, nakon kratkog vremena sam se navikao i dalje je rad išao puno lakše. Stekao sam
nova znanja i iskustva te sam jako sretan što sam odabrao Mono za obavljanje prakse. U budućnosti
se vidim da radim na sličnim projektima kao što je bio i ovaj, a za početak planiram sam početi raditi
na sličnom projektu kako bi ponovio stečena znanja i utvrdio ista.

5. Literatura

[1] https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-
using-mvc/implementing-basic-crud-functionality-with-the-entity-framework-in-asp-net-mvc-
application

[2] https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/

[3] https://www.mono.hr/pdf/Dependency-Injection-in-practice-CodeCAMP.pdf

[4] https://reactjs.org/docs/getting-started.html

[5] https://v5.reactrouter.com/web/guides/quick-start

[6] https://reactjs.org/docs/faq-structure.html

9
Dodatak/prilozi
Link na github gdje se nalazi cijeli projekt:

https://github.com/mdankovic2541/AuTop/tree/master/Praksa2022-g01-01-main

10