8. Upute za puštanje u pogon

1. Instalacija

• Preduvjeti
  Prije početka instalacije, osigurajte da su na sustavu dostupni sljedeći softverski alati s odgovarajućim verzijama:

  • Git 2.47.0
  • Maven 3.9.9
  • Node.js 22.13.0
  • JDK Development Kit 21.0.5
  • Extension pack for JAVA (VSC Ekstenzija)

• Preuzimanje

  1. Na računalu otvorite terminal i upišite naredbu:

     git clone https://github.com/hplancic/SwitchPoint.git

  2. Uđite u direktorij projekta naredbom:

     cd SwitchPoint

  3. Pređite u direktorij gdje se nalazi datoteka package.json naredbom:

     cd .\Frontend\react

  4. Instalirajte potrebne ovisnosti naredbom:

     npm install

2. Postavke

• Postavljanje varijable okruženja nužne za povezivanje s bazom
  
  Windows

  1. Pritisnite Windows tipku i slovo R da otvorite Windows Run prozor
  2. Upišite sysdm.cpl i pritisnite OK
  3. Otvorite Advanced karticu i stisnite Enviroment Variables... gumb
  4. Pritisnite gumb New
  5. U prozoru koji se otvori za ime varijable napišite PASSWORD a za vrijednost AVNS_qG-3mWyGzMZIIlXmxCY
  6. Za provjeru u Windows Command Promptu napišite naredbu echo %PASSWORD% i provjerite odgovara li ispis vrijednosti

  MAC/Linux
  

  1. Otvorite terminal (na Linuxu ili macOS-u).
  2. Upišite sljedeću naredbu kako biste otvorili datoteku s varijablama okruženja za trenutnog korisnika:
     

     nano ~/.bashrc  # Za Linux (ili ~/.zshrc ako koristite Zsh na macOS-u)
     

  3. Dodajte novu liniju na kraju datoteke s definiranim imenom i vrijednošću varijable:

     export PASSWORD=AVNS_qG-3mWyGzMZIIlXmxCY
     

  4. Spremite datoteku i izađite (u nano editoru pritisnite CTRL+O za spremanje, a zatim CTRL+X za izlaz).
  5. Učitajte promjene u trenutnu sesiju terminala pomoću naredbe:

     source ~/.bashrc  # Ili ~/.zshrc ovisno o konfiguraciji
     

  6. Za provjeru upišite sljedeću naredbu u terminal:

     echo $PASSWORD
     

  7. Provjerite odgovara li ispis vrijednosti "AVNS_qG-3mWyGzMZIIlXmxCY".

3. Pokretanje aplikacije

• Pokretanje u razvojnom okruženju

  1. Pozicionirajte se u direktorij pod nazivom SwitchPoint.
  2. Promijenite trenutni direktorij naredbom:

     cd .\Backend\spring

  3. Pokrenite backend aplikaciju naredbom:

     .\mvnw spring-boot:run

  4. Otvorite novi terminal i pozicionirajte se u direktorij SwitchPoint.
  5. Promijenite trenutni direktorij naredbom:

     cd .\Frontend\react

  6. Pokrenite lokalni razvojni server naredbom:

     npm run dev

  7. Aplikacija bi sada trebala biti pokrenuta. U terminalu će se ispisati link na kojem je dostupna, obično:

     http://localhost:3000/
     

• Pokretanje u produkcijskom okruženju

  1. Generirajte build za frontend aplikaciju:

     npm run build

  2. Kopirajte buildane datoteke u direktorij Backend/spring/src/main/resources/static.
  3. Generirajte .jar datoteku za backend koristeći Maven:

     mvn clean package

  4. Pokrenite aplikaciju naredbom:

     java -jar Backend/spring/target/SwitchPoint-0.0.1-SNAPSHOT.jar

4. Upute za administratore

• Prijava na administracijski račun: username=admin, password=admin
• Upute za održavanje:

  • Pregled i upravljanje oglasima (pločama): Nakon prijave, administratori imaju pristup stranici na kojoj se prikazuju svi oglasi (ploče) dostupni u sustavu. Administratori mogu pregledavati pojedinačne oglase i, u slučaju uočavanja nepravilnosti, imaju opciju brisanja oglasa.

  • Upravljanje korisnicima: Na profilnoj stranici administratora nalazi se posebna kartica "Korisnici". U toj kartici prikazuje se popis svih registriranih korisnika sustava. Ako administrator primijeti nepravilnosti povezane s objavama nekog korisnika, može izbrisati korisnički račun tog korisnika.

5. Deploy aplikacije na Heroku (Frontend i Backend zajedno)

Priprema aplikacije

• Kreiranje Heroku aplikacije

  1. Prijavite se na Heroku CLI naredbom:

     heroku login

  2. Kreirajte novu Heroku aplikaciju:

     heroku create <naziv-aplikacije>

  3. Postavite git remote za Heroku:

     heroku git:remote -a <naziv-aplikacije>

• Priprema Procfile-a

  1. U root direktoriju aplikacije kreirajte datoteku pod nazivom Procfile. U njoj navedite kako pokrenuti backend aplikaciju:

     web: java -jar Backend/spring/target/SwitchPoint-0.0.1-SNAPSHOT.jar
     

• Postavljanje konfiguracijskih varijabli

  1. Dodajte potrebne varijable za backend, primjerice podatke o bazi podataka:

     spring.datasource.url=jdbc:postgresql://switchpoint-switchpoint.e.aivencloud.com:17495/switchpoint3?sslmode=require
     spring.datasource.driverClassName=org.postgresql.Driver
     spring.datasource.username=avnadmin
     spring.datasource.password=${PASSWORD}

• Dodavanje buildpackova

  1. Dodajte potrebne buildpackove za Javu:

     heroku buildpacks:add heroku/java

Deploy aplikacije

• Inicijalizacija git repozitorija

  1. U root direktoriju aplikacije inicijalizirajte git repozitorij (ako već nije inicijaliziran):

     git init
     git add .
     git commit -m "Initial commit"

• Push aplikacije na Heroku

  1. Deploy aplikaciju koristeći naredbu:

     git push heroku master

Priprema Frontend-a

• Prije deploya, buildajte frontend aplikaciju:

  cd Frontend/react
  npm install
  npm run build

• Buildane datoteke kopirajte u direktorij Backend/spring/src/main/resources/static kako bi frontend bio poslužen zajedno s backendom.

Verifikacija

• Nakon što je deploy završen, aplikacija će biti dostupna na URL-u koji Heroku generira, obično:

  https://<naziv-aplikacije>.herokuapp.com
  

Napomena

1. Backend (spring) je konfiguriran da koristi port 8080, dok Heroku automatski mapira port putem varijable PORT. U application.properties za backend osigurajte:

   server.port=${PORT:8080}

2. Provjerite da je datoteka application.properties pravilno konfigurirana za produkciju.

S ovim koracima aplikacija će bit uspješno implementirana!