---
title: 'Dokumentacija Projekta: Rs-simulator - Pravljenje kompleksnih sistema'
disqus: hackmd
---
<h1 style="text-align: center; background: #f5f5f5; padding: 5px; color :#00a5f5;">Rs-Simulator</h1>

<div style="background: #e4e3e3; text-align: center">

# Dokumentacija -- Projekat <br/> (Aplikacija za Dinamićke web sisteme)

</div>

<div style="text-align:center">

> Prirodno-matematički fakultet [color=#907bf7]
> Odsjek za matematiku TKN
>
>***Predmet:** Dinamićki Web Sistemi*
>***Projekat radio:** Tarik Selimović*
>***Profesor:** Adis Alihodžić*

</div>

---

## Sadržaj

[TOC]

## Opis web stranice

<div style="text-align: justify;">

<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; padding: 5px;">


</div>

---
Teško je naći aplikaciju koja simulira pravljenje logićkih kola, pa iz tog razloga sam uzo temu Rs-simulator koju je profesor naveo. Jednostavnim klikom i dragg-om smo u mogucnosti povezati, i dodati jednostavne komponente. Sa upustvima koje mi je profesor zado napravio sam funkcionalni log-in i sign up kojima je korisnik umogćnosti da napravi sebi profil i poćine sa radom i izradom kompleksnih projekat
<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black;">


</div>
Prilkom log-in u web aplikaciju odvede nas na poćetnu stranicu. Na poćetnoj stranici su napravljena 5 dugmadi, a to su Create Project, My Projects, All Projects, About te My Profile.

<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; margin: 5px;">


</div>

Prilikom klika na Na Create Project, otvara se glavna komponenta koja nam mogucava kreiranje projekata.
Sastoji se iz toolbar-a sa desne strane gdje se nalaze logićka kola, sa input poljem za ime te dva dugmad za
saćuvanje i brisanje trenutasnjeg projeka.

<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; margin: 5px;">


</div>

Klikom na dugme my projeckts otvori se lista saćuvanih projekata. Uz svaki projekat postoji i dugme edit klikom na njega poziva se ponovo komponenta za pravljenje projekata, istotako se pojave dva dogmad delete, post, gdje se mogu izbrisati ili postaviti da
ostali korisnici vide nas projekat.

<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; padding: 5px; margin: 5px;">


</div>

Kada kliknemo na dugme All projects kao i stvar sa my projekts otvore postoji dugme show kada se klikne prikaze se taj projekat, pri ćemu korisnik nije u mogućnosti njega promjeniti

<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; margin: 5px;">

</div>

Dalje, postoji dugme about klikom na njega pojavi se pop up sa osnovnim informacijamo o aplikaciji te broj user-a.
<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; margin: 5px;">


</div>

Posljednje dugme my profile nam omogućava da pogledamo naše informacije te dozvoljava promjenu nekih polja.
<div style="text-align: center; background: #f5f5f5f5; border: 1px solid black; margin: 5px;">


</div>

</div>

## Uvod

<div style="text-align: justify">
Odlućio sam napraviti ovaj web sistekom koristeći kao frontend dio react, koji nam omogućava mnogo brojna olakšanja prilikom izrade web sistema. Isto tako sam za backend dio odlućio raditi sa mongo bazom koristeći mongoose za izradu šeme. Mongo sam izabrao nad firebase-om jer mongo ne nudi veću ugraćeni user meneđment sa tokenima, htio sam da sam napravim token i da napravim log-out. Za te potrebe sam koristio jwt,
odnosno json web token repositori koji nudi pravljenje
web tokena. Dalje, Graphql je vrlo moćna tehnologija koja nam nudi da taćno sto je u tom momentu potrebno serveru moyemo slati a ne glomayne objekte, stoga sam mongo kombinova sa graphql, odnosno napravio sa šeme i resolvere u graphql koji su upisivali u bazu.Te upotrijebiti ćemo apollo i fatch kako bi izvršavali upite u bazu. U daljnjim djel dokumentacije ću objasniti tačnu upotrebu ovih tehnologija.

</div>

## Funkcionalnosti Pojedinačnih Komponenata web aplikacija

<div style="text-align: justify">
U ovome djelu ću preći o arhitektur svoje aplikacije te pojasniti određene komponente i funkcije. Dakle, aplikaciju pokreču dva projekta frontend dio i backend dio, front end dio se odvija na http://localhost:3000,
dok se backend dio odvija na http://localhost:8000/graphql.

***Beckend***

Prva stvar koju je potrebnu uraditi jest napraviti bazu ja sam koristio cloud bazu mongo atlas db.

mongoose
  .connect(
    "mongodb+srv://tarik:[e-mail]/RS?retryWrites=true&w=majority"
  )
  .then(() => {
    app.listen(8000);
    console.log("Succesfuly connected");
  })
  .catch((err) => console.log(err));

Dalje sam napravio 2 šeme sa kojima ćemo raditi u nastavku to su User i Projekat. Važno je navesti da ćemo u Projekt šemi sve ćuvati u nizovima kako bi olakšali rad sa koordinatama. Sljedće, jest konfiguracija grafql servera to sam uradio tako što sam instalirao isto imenu biblikoteku te ugradio je u našu aplikaciju.

app.use(
  "/graphql",
  graphQLHttp({
    schema: graphQLschema,
    rootValue: graphQLresolvers,
    graphiql: true,
  })
);

Vrlo važna stvar prije nego nastavimo detaljno u arhitektur grafql-a jeste da je poterbno dozvoliti da se pozivi mogu uputiti ka našem server jer kao defoltno nijedan web stranica ne prima poyive od druge odnosno nijedan server ne prima od drugoga.

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  if (req.method === "OPTIONS") {
    res.sendStatus(200);
  }
  next();
});

Graphql je saćinjen od šema i resolvera. Šeme kao što ime kaže prestavljaju šemu naših upita gdje mi možemo definisati o kojem tipu je rijeć tako što ga napravimo rućno.Postoje dva tipa upita mutacija i query, gdje je mutacija svaki upit koji mjenja bazu, a query svaki upiti koji vrsi samo poziv na bazu bez upisa. Ispod možete vidjeti primjer mutacija i query-a

type RootQuery{
    users: [User]!
    projects: [Project]
    login(email: String!, password: String!): AuthData
}

type RootMutation{
    createUser(userInput: UserInput!): User
    createProject(projectInput: ProjectInput!): Project
    deleteProject(id: String!): Project
}

Resolveri nam služe da sa njima izvršavamo pozive na bazu. Ispod možete vidjeti primjer resolvera za mongo db, neću prelaziti preko svako CRUD-a kojeg sam napravio i upućivao ka bazi.

 updateUser: (args) => {
    return User.findById({ _id: args.id }).then((user) => {
      user.name = args.name;
      user.surname = args.surname;
      return user.save().then((user) => {
        return { ...user._doc };
      });
    });
  }

Dakle, sada smo prešli kroz osnovnu logiku iz-a backend djela, pa ćemo sada preći na frontend dio.

***Frontend***
Kroz forntend dio ćemo preći tako što ćemo pogledati svaku komponentu opisati šta tačno radi i pojasniti osnovne funkcije.

***Auth.js***
Auth.js predstavlja log-in i sign up naše aplikacije.
Dakle, ovdje se odvija logika kojom korisnik od backenda dobiva token i uz pomoć upita izvršava upit u bazu jedan primjer takvog upita možete vidjeti ispod, sa ovim upiom provjeravamo log-in te šaljemo korisniku token ako postoji takav korisnik u bazi.

`
                {
                    login(email: "${inputValues.email}", password:"${inputValues.password}"){
                      userId
                      token
                      tokenExperation
                    }
                  }
                `

Isto tako kada se korisnik uspješno prijavi koristeći useContext-a datog u Reactu saćuvamo njegov token i userId kako bi cijela aplikacija mogla prii tom token-u.

const [context, setContext] = useContext(authContext);

***And.js, In.js, Or.js***
U ovim js fajlovima se nalaze logićka kola koja sam implementirao u aplikaciji za izradu i dizajn sam koristio konva.js u njemu sam imao već implementira klase kao sto su krug, kvadrat i linija, pa nisam mora njih da pravim. Dakle, dizajno and, or, in kola sam pravio samo pomocu krugova i kvadrata. Ovi js fajlvi sadrže iste funkcije osnovna razlika jeste njihov dizajn. Glavne funkcije koje ove klase posjeduj jesu
onHadleDragEnd i onHadnleDragMove sto nam omogućava pomjeranje naše komponente.

***ToolBar.js***
Kao što i ime govori toolbar jeste skup sastavljenj od gore navedenih komponenata. Osnovnu funkcijonalnost koju sam toolbaru omogućio jeste da se mogu uzeti komponent i postaviti na platno. Dakle, to radim tako što kada se spusti komponenta stavljam je u niz koji se u platnu refeša sa useState metodom ugrađenu u React.

***Comp.js***
Comp.js je najvažnija komponeta u cijeloj aplikacije jer ona spaja gore navedene komponente, a to su toolbar, and, in, or. Dakle, u glavnom djelu imamo 4 niza gdje ćuvamo koordinate svake od navedenih komponenata

  const [arryIn, setArryIn] = useState(arrayIn);
  const [arryAnd, setArryAnd] = useState(arrayAnd);
  const [arryOr, setArryOr] = useState(arrayOr);

Dakle, kada dođe do neke promjene u toolbar-u sa funkcijom onChange upisujemo u niz U Comp.js koja se od komponenta dodal-a and, or, in, te pomoću map-a ih iscrtavamo na platno. Te sa funkcijom saveToDb upisujemo u bazu sa određenim upitima.

var requestBody = {
      query: `
            mutation{
                createProject(projectInput: {_id: "${userId}", name: "${projectName}",arryIn:${JSON.stringify(
        dbArryIn
      )}, arryOr:${JSON.stringify(dbArryOr)}, arryAnd:${JSON.stringify(
        dbArryAnd
      )}, arryNot:[5], arryLine:${JSON.stringify(dbArryLine)}}){
                 name
            }
      }
      `,

***MyProjects.js, AllProjects.js***
Ove dvije komponente su slićne samo je važno da allProjects prikazuje sve projekte koje su user-i objavili dok u myprojects mogu se vidjeti samo projekti koje ja pravi te iste mogu dorađivati.
Dakle, prilikom pritiska na dugme Edit pozivamo komponentu Comp.js-a te postavimo varijablu update = true kako bi sakrili neke osbine Comp.js-a

</div>

---
:::info
Projekat: Tarik Selimović
:::

###### tags: `React` `Documentation` `Simulator` `Application` `Programming` `Graphql`