Csapatbeosztás

• Teamleader: Szanyi Szabolcs
• Backend: Juhász Márton Bendegúz
• Frontend: Schaffer Tamás
• Fullstack: Kozma Hunor

User manual

Üzemeltetés

Backend elindításához szükségünk van egy Visual Studio-ra, amely segítségével a szerverünk a http://localhost:5009 címen lesz elérhető és a kliensünk ezen cím API-jaira fogja küldeni a kéréseit.

Frontend elindításához szükségünk van egy Angular CLI-re. Amennyiben először húzzuk le a repository-t, akkor szükség van az "npm install" parancsra, majd ezt követően pedig az "ng serve" utasítást kiadva a kliensünk le build-elődik. Ha nem adtunk meg egyéb portot, akkor a klienst alapértelmezetten a http://localhost:4200 címen érjük el.

User - pass kombinációk

• Admin
  • Kovi
    • Email = [email protected]
    • Username = [email protected]
    • Password = almafa123
• Teachers (Customers)
  • Kiss Pista
    • Email = [email protected]
    • Username = [email protected]
    • Password = almafa123
  • Jozsi
    • Email = [email protected]
    • Username = [email protected]
    • Password = almafa123

API funkciólista

4 db controllert különböztetünk meg, ezek közül az Auth controller foglalja magába az autentikációval kapcsolatos endpointokat, a controller pedig a nevének megfelelő példányokon végez CRUD műveleteket azoknak megfelelő endpointokon keresztül. Bármely CRUD műveletet hívjuk meg (a Read kivételével), eredményként egy IActionResult-ot fogunk kapni, amelyben az adott példány vagy a hibaüzenet lesz becsomagolva. Egyes controllerek kiegészülnek egyéb logikai endpointokkal, amelyek részletes leírással rendelkeznek a felsorolásban. Ezen endpointok meghívásához szükséges a controller neve mellé írni az adott endpoint nevét is pl.: Amennyiben a SearchSoftwareClaims endpoint tartalmát szeretnénk megkapni akkor azt a /SoftwareClaim/SearchSoftwareClaims címen érjük el.

• /Auth

  • CRUD funkciók
    • [HttpPost] Task Login(LoginViewModel model)
    • [HttpPut] Task InsertUser(RegisterViewModel model)
    • [Authorize][HttpGet] Task GetUserInfos()
    • [Authorize][HttpDelete] Task DeleteMyself()
  • Egyéb endpointok
    • [Route("[action]")][HttpPost] Task Microsoft(SocialToken token)
      • A Microsoft loginhoz szükséges endpoint
    • [Route("[action]")][HttpGet] Task GetAllUsers()

• /Class

  • CRUD funkciók
    • [HttpGet] IEnumerable GetAll()
    • [HttpGet] ClassRoom GetOne(string id)
    • [HttpPost] Task CreateClass(ClassRoom classRoom)
    • [HttpPut] Task UpdateClass(ClassRoom updatedClassRoom)
    • [Httpdelete] Task DeleteClass(string id)
  • Egyéb endpointok
    • [HttpGet][Route("[action]")] IEnumerable SearchClasses (string search)
      • Egy olyan gyűjteményt ad vissza, amelyben a példányok valamilyen tulajdonsága tartalmazza a paraméterként megadott search értékét.

• /SoftwareClaim

  • CRUD funkciók
    • [HttpGet] IEnumerable GetAll()
    • [HttpGet] SoftwareClaim GetOne(string id)
    • [HttpPost] Task CreateSoftwareClaim(SoftwareClassRoomViewModel model)
    • [HttpPut] Task UpdateSoftwareClaim( SoftwareClaim updatedSoftwareClaim)
    • [HttpDelete] Task DeleteSoftwareClaim(string id)
  • Egyéb endpointok
    • [HttpGet][Route("[action]")] IEnumerable SearchSoftwareClaims(string search)
      • Egy olyan gyűjteményt ad vissza, amelyben a példányok valamilyen tulajdonsága tartalmazza a paraméterként megadott search értékét. Ezen tulajdonságok lehetnek a követekezők:
        • ClaimDate
        • Status
        • Az igénylőhöz tartozó FirstName
        • Az igénylőhöz tartozó LastName
        • A szoftverhez tartozó méret

• /Software

  • CRUD funkciók
    • [HttpGet] IEnumerable GetAll()
    • [HttpGet] Software GetOne(string id)
    • [HttpPost] Task CreateSoftware( Software software)
    • [HttpPut] Task UpdateSoftware(Software updatedSoftware)
    • [HttpDelete] Task DeleteSoftware(string id)
  • Egyéb endpointok
    • [HttpGet][Route("[action]")] IEnumerable SearchSoftwares(string search)
      • Egy olyan gyűjteményt ad vissza, amelyben a példányok valamilyen tulajdonsága tartalmazza a paraméterként megadott search értékét. Ezen tulajdonságok lehetnek a követekezők:
        • Name
        • VersionNumber
        • Size

UI ismertető!

Welcome

Minden oldal rendelkezik navigációs panellel és jogosultságtól függően különbőző oldalak/funkciók érhetőek el róla. A kezdő oldalon egy általános ismertetőt, kedvcsinálót találunk a webes alkalmazásunkról, ahol kisebb szekciókban találhatóak információ szeletek az alkalmazás képességeiről. A legalsó szekció egy footer elem, ahol a csapat tagjai és feladatkörük kerül megjelenítésre.

Login/Register

Bármilyen user, jogosultságtól függetlenül, hozhat létre új fiókot, illetve bejelentkezhet az alkalmazásba, akár meglévő Microsoft fiókot használva is.

Request Softwares

Három nagyobb szekcióra osztható fel ez az oldal:

1. Bal oldalon böngészhetjük ki a számunkra szükséges szoftvert. Amennyiben nem talljuk azt amire szükségünk van, akkor nyugodtan hozhatunk létre újat is az "Add new" gomb segítségével.
2. Jobb felső szekcióban azt a termet kereshetjük ki, amihez a szoftvert szeretnénk rendelni.
3. Jobb alsó szekcióban pedig drag and drop módszerrel be tudjuk húzni a kikeresett szoftvert.

Add Software

Új szoftvert tudunk hozzáadni az igényelhető szoftverek listájához.

Add Class

Manuálisan bármikor létre tudunk hozni új class-okat Admin jogosultsággal, amennyiben a nyilvántartásban nem találjuk azt a class-t, amelyhez szoftver igényt szeretnénk leadni.

Manage Claims

Admin által elérhető!

Itt tudjuk kezelni a szoftver igényeket. Class-onként látjuk felsorolva, hogy hova, milyen igény érkezett, illetve az igényeknek milyen az állapota. (sent/accepted/rejected)

Probléma jegyzőkönyv

Backend

• Controller szinten le akartuk kérni az aktuális user-t az alábbi módon:

  var user = await _userManager.GetUserAsync(this.User);

  Erre hamar rá kellett jönnünk, hogy nem működőképes, mivel bejelentkezett felhasználó esetén is null értéket kaptunk vissza. Megoldásképp a userek közt a UserName tulajdonságuk alapján kerestünk, mely végül pontosan visszadta a bejelentkezett felhsaználónkat. var user = _userManager.Users.FirstOrDefault (t => t.UserName == this.User.Identity.Name);

• A seed-elt, tanár jogosultságú felhasználók valamilyen oknál fogva nem tudtak belépni, viszont ha formon keresztül regisztráltunk felhasználót, akkor vele nem volt probléma. Először a kis- és nagybetűs felhasználónevekre gyanakodtunk, de formon keresztüli regisztráció során ez sem okozott problémát.

• Amikor egy SoftwareClaim státusza accepted-re változott, akkor az őt tároló terem kapciátsa nem változott. Ehhez a SoftwareClaim Update logikáján kellett módosítani, hogy amennyiben a frissített SoftwareClaim státusza accepted, akkor az idegenkulccsal hivatkozott terem kapacitását csökkentsük.

• A regisztráció első kivitelezésekor az új user-eket nem adta hozzá a többihez, mivel nem tettek eleget a regisztációs megszorításnak. Ezt a jelszó követelmények módosításával oldottuk meg.

• Amikor még az adatbázis készült, akkor a Swagger folyamatosan hibát dobott, mert nem tudta megjeleníteni az adatokat, mivel a modelleken belül a megfelelő tulajdonságokra nem volt rátéve a [JsonIgnore] attribútum.

Frontend

• Eredetileg a Figma szerint a komponenseknek gardienses szegélye lett volna, viszont ezt nem sikerült abszorválni. Ezt úgy lehetett volna megcsinálni, hogy ha egy div kerül a komponemsek mögé úgy, hogy a div 2-3px-el nagyobb mint maga a komponens, és a div kapott volna egy gradienses backgroundot, de akkor elvész a komponensek transzparens háttere.
• Van az a háttérkép, amin különböző színű alakzatok vannak. Eredeti terv az volt, hogy egyben lehet egy SVG file-ként inportálni őket, viszont a kép magassága nagyobb volt mint kellett volna és így a kép hosszaban, max 60%-nyi teret tudott volna lefedni, ami nem mutatott volna szépen, mert 80-85% az idealis. Igy ezeket az alakzatokat külön le kellett menteni egy SVG fajlba. Végül SVG-ben nem egy nagyobb kép van elmentve, hanem csak alakzatok és azokból is egy-egy példány, amelyekből végül a képet a ‘shared-panel-background’ komponensben állítottuk be.

• Az apiknál a fetch() hibakezelést (try-catch, vagy .then-.catch) nem szerettük volna folyton minden egyes fetch hívás esetén megcsinálni, ezért készítettünk egy fő apit ‘ApiBase’ néven, aminek van egy generikus ‘wrap’ metódusa, ami kezeli a hibákat, az authorize részét és a konzolra logolást. A többi api pedig ebből az apiból származik le.
• A formok amiket használunk a create-, update-, login, register részeken, azok szinte alapjaiban ugyanazok, igy szükség volt egy ‘shared-form’ komponensre, ami bekér egy input és egy button tömböt, és ezekben a tömbökben csak az input vagy a button attribútumait kell megadni, illetve a button esetében egy click eseményt, valamint az input esetében egy change eseményt. A probléma az volt, hogy ezeket az eseménykezelőket a form komponens inputként kapja meg és neki fogalma sem lesz melyik komponenstől származik ez az esemény. Igy ha a ‘this’ -t akartuk használni az eseményeken belül, akkor a ‘this’ undefined tipust kapott. A megoldas az volt, hogy amikor paraméterként hozzácsatoljuk az eseményeket az inputokhoz és a buttonokhoz, akkor az esemény megnevezése utan kellett ez a ‘.bind(this)’ amivel ez orvosolva lett.
• Kezdetben a nem Admin jogosultsággal rendelkező felhasználók tokenje a bejelentkezés után egyből eldobásra került.