- Csapat felállás
- Telepítési, és lokális futtatási útmutató
- Megadott bejelentkezési adatok
- Használt API-k
- Oldal ismertetése a felhasználó számára
- Probléma jegyzőkönyv
Fejlesztők:
-Frontend: Lengyel Tamás, Szabó Dáriusz
-Backend: Buzási Simon, Bihari Boldizsár
-Csapatkapitány: Bogdán Roland
Használt technológiák:
-Frotend: React
-Backend: ASP .NET
-Adatbázis: Microsoft Azure
Az alkalmazás lokális hostolásához és futtatásához, első sorban a következőket kell telepítenünk, feltéve hogy még nincsenek telepítve:
Ezek után, először a backendet kell elindítanunk, amit a következő képpen tudunk megtenni:
- Először egy Visual Studio Code-ot kell nyitnunk, majd bal fent a File -> Open Folder... opciónál ki kell keressük a projekt mappáját, azon belül is a ChatFlow nevű mappát, és ezt megnyitnunk.
- Ezután az alkalmazásban a Terminal -> New Terminal segítségével nyitni egy terminált, ahova a
dotnet buildparancsot kell beírjuk, majd egy entert nyomnunk. Ez pár másodpercig el fog tartani. - Következő lépésként, tegyük le tálcára a Visual Studio alkalmazást (még szükség lesz rá), és a projekt könyvtárába navigáljunk. Itt a ChatFlow/ChatFlow/bin/Debug/net5.0/ mappát, ahol (windows-on) egy ChatFlow.exe fájlt találunk, ezt indítsuk el.
- Utolsó lépésként, menjünk vissza a Visual Studio Code-ba, ahol File -> Open Folder... segítségével most a chatflow-web mappát nyissuk meg. Ezután a terminál segítségével (ha nincs már ott a terminál a korábbi lépésekben látható a megnyitása) írjunk be egy npm install parancsot, ezt enterrel futtassuk le (ezt egyszer kell megtenni, későbbi indításoknál elég a következő parancs), majd egy npm start parancs segítségével elindul az alkalmazás frontend része.
A bejelentkezéshez egy felhasználóra van szükségünk, ezt a rendszerben adminok által előre elkészített felhasználókkal tehetjük meg, a felhasználónév és jelszó kombinációjával. A jelenlegi létező felhasználók, és szerepköreik a következők:
- Admin felhasználó, admin szerepkör
- Email: [email protected]
- Felhasználónév: admin
- Jelszó: admin
- Kovács András, tanár szerepkör
- Email: [email protected]
- Felhasználónév: kovacs.andras
- Jelszó: andras
- Sipos Miklós, tanár szerepkör
- Email: [email protected]
- Felhasználónév: sipos.miklos
- Jelszó: miklos
- Bihari Boldizsár, diák szerepkör
- Email: [email protected]
- Felhasználónév: boldi.bihari
- Jelszó: boldi
- Bogdán Roland, diák szerepkör
- Email: [email protected]
- Felhasználónév: bogdan.roland
- Jelszó: roland
- Buzási Simon, diák szerepkör
- Email: [email protected]
- Felhasználónév: buzasi.simon
- Jelszó: simon
- Lengyel Tamás, diák szerepkör
- Email: [email protected]
- Felhasználónév: tamas.lengyel
- Jelszó: tamas
- Szabó Dáriusz, diák szerepkör
- Email: [email protected]
- Felhasználónév: dariusz.szabo
- Jelszó: dariusz
Az alkalmazás a következő API-okat használja:
| Controller | Http request | API | Role | Description |
|---|---|---|---|---|
| Auth | $POST(userid)(roomid) | /auth/{userid}/{roomid} | A | Add a user to a room |
| Auth | $DELETE(userid)(roomid) | /auth/{userid}/{roomid} | A | Remove a user from a room |
| Auth | $GET | /auth | A | Get every user |
| Auth | $POST | /auth/login + JSON | - | User login |
| Auth | $GET | /auth/allroom | S,T | Get every room of a user |
| Room | $GET | /room | A | Get every room |
| Room | $GET(idRoom) | /room/{idRoom} | A,S,T | Get one room with all of its data |
| Room | $POST | /room + JSON | A | Add a room |
| Room | $DELETE(idRoom) | /room/{idRoom} | A | Delete a room |
| Room | $PUT | /room + JSON | A | Edit a room |
| Room | $POST(idRoom) | /room/{idRoom} + JSON | S,T | Add a thread to a room (write a thread) |
| Room | $GET(idRoom) | /room/alluser/{idRoom} | A,S,T | Get every user of a room |
| Thread | $GET(idRoom) | /threads/Room/{idRoom} | S,T | Get every thread of a room |
| Thread | $GET(idRoom) | /threads/Pinned/{idRoom} | S,T | Get every pinned thread of a room |
| Thread | $PUT(idThreads) | /threads/Pin/{idThreads} | T | Pin a thread (max 3) |
| Thread | $PUT(idThreads) | /threads/DeletePin/{idThreads} | T | Unpin a thread |
| Thread | $POST(idThreads) | /threads/AddReaction/{idThreads} + JSON | S,T | React to thread |
| Thread | $DELETE(idThreads) | /threads/DeleteReaction/{idThreads} | S,T | Remove the reaction from the thread |
| Thread | $PUT | /threads/UpdateReaction + JSON | S,T | Change the reaction |
| Thread | $GET(idThreads) | /threads/Reactions/{idThreads} | S,T | Get one thread's every reaction |
| Message | $GET(idThreads) | /messages/{idThreads} | S,T | Get every message of a thread |
| Message | $POST(idThreads) | /messages/{idThreads} + JSON | S,T | Reply to a thread (add message to thread) |
| Message | $POST(idMessages) | /messages/AddReaction/{idMessages} + JSON | S,T | React to a message |
| Message | $DELETE(idReaction) | /messages/DeleteReaction/{idMessages} | S,T | Delete the reaction from the message |
| Message | $PUT | /messages/UpdateReaction + JSON | S,T | Change the reaction |
| Message | $GET(idMessages) | /messages/Reactions/{idMessages} | S,T | Get one messages every reaction |
Bejelentkezési felület
- Ezen a felületen lehet bejelentkezni a felhasználónevünkkel, és a jelszavunkkal
Főoldal
- Ha bejelentkeztünk, az alkalmazás főoldalán találjuk magunkat.
- Bal oldalsó oszlopban találhatóak a különböző szobák ahová a felhasználó tartozik, ezek között lehet váltani, ekkor a többi panel is frissül.
- A középső része az oldalnak a szobában található posztok/thread-ek. Ezekre lehet reagálni, válaszolni, és tanárok tudnak pinnelni is.
- Alul tudunk írni új posztot a kiválasztott szobába.
- A jobb felső sarokban egy gombostűre kattintva láthatjuk a pinnelt üzeneteket
- A posztokon a Reply to gombra kattintva, megjelennek jobb oldalt a poszthoz fűzött kommentek, üzenetek.
- Itt ugyanúgy alul tudunk válaszolni.
Admin felület
- Ha admin felhasználóval (admin <> admin) lépünk be, és utána a link végére odaírjuk hogy /admin, akkor az admin felületre jutunk, ahol a felhasználókat és a szobákat tudjuk kezelni.
- Az oldalon tudunk tanulót szobához rendelni.
- Szobát létrehozni.
- És szobát törölni.
- Első problémaként egy nehézséget írnék, ami pedig a frontend csapatnál volt, a React megtanulása. Korábban nem használt egyikünk sem semmiféle frontend library-t sem, így az, hogy egyből egy nagyobb volumenű projektben kellett bevetni a frissen megtanult tudást, sok időt vett igénybe.
- Megoldásként igazából a frontendesek szorgos munkáját, és tanulásra való affinitását tudnám mondani.
- Második probléma ami fellépett, az az adatbázis tervezése során volt, mégpedig egy many-to-many kapcsolat a megtervezett adatbázis táblái között.
- Ezt a problémát egy kapcsolótábla segítségével oldottuk meg.
- Frontend részen még probléma volt, az @-el való user-ek megjelölése a thread-ekben. A beépített input mezőkben erre nem volt lehetőség, se html-ben, se a használt Ant design komponensekben.
- Egy saját input komponenst kellett létrehoznunk, amiben regular expression segítségével határozható meg például a link, vagy a leütött @ karakter. Ha ezeket megtalálja a szövegben, akkor html tag-be wrap-eli őket, hogy elküldéskor látható legyen.
- A backend részen még felmerült probléma, hogy az authentikációnál, a beépített IdentityUser osztálynak nem voltak olyan tulajdonságai amire szükségünk volt.
- Ezt egy egyszerű öröklődéssel sikerült megoldani.
- Ötödik problémaként, a tervezés során felmerült, hogy a szobákban a thread-ek, és a thread-ekre való válasz üzenetek majdnem teljesen ugyanazok az osztályok voltak, így redundancia miatt próbáltuk ezt elkerülni.
- Végül hogy ne legyen végtelenül egymásba ágyazva egy ("üzenetbe egy üzenet amiben van egy üzenet..."), külön lettek szedve a Thread és a Message osztályok.