Jegyértékesítő with Angular and ASP.NET Core

Jegyértékesítő webalkalmazás

A webes portál, ahol jegyeket lehet megvásárolni. Az adminisztrációs felületen lehet eseményeket felvinni, az egyes eseményekhez pedig beállítani, hogy milyen kategóriájú jegyekből hány darab árusítható. A vásárlók bejelentkezés nélkül is tudják böngészni a naptárat, ill. bejelentkezés után tudnak jegyet vásárolni. A weboldalt egy adatbázis fogja segíteni a megfelelő működés eléréséhez. A frontend pedig angular segítségével jelenik meg egy böngészőben.

A weboldal felépítése

A főoldal

• Két nézetet tartalmaz. Megnyitáskor a naptár nézet jelenik meg. Ahol esemény található ott az lila színezéssel kiemelkedik. A második néztet az egy listanézet ahol listaszerűen lehet böngészni az események közül.

Esemény hozzáadása

• Admin felhasználó bejelentkezése után lehetőség van új eseményt hozzáadni az alábbi űrlap kitöltésével. A jegyekből csak azt a kategóriát érdemes kitölteni amelyiket szeretnénk árusítani. Amennyiben 0 darabon és 0 áron hagyjuk nem lesz lehetséges olyan jegyet kapni.

• Kép feltöltésén kívül mindegyik input-ot ki kell tölteni az esemény létrehozásához.

  • Description: Az esemény megnevezése, rövid leírása.
  • Location: Az esemény helyszíne, hol fog zajlani.
  • Category: A jegy típusai, ami lehet Early Bird, Last Minute, Normal vagy VIP
  • Event start / Event end: Az esemény kezdetét és végét jelöli meg.
  • About: Az esemény hosszabban kifejtett leírása
  • Upload event image: Az eseményről egy borítókép

Esemény szerkesztése / törlése

• Kizárólag csak admin felhasználóval lehetséges. Szerkesztéskor megjelenik egy ugyan olyan felület, mint a létrehozáskor csak itt már a meglevő adatokkal jelenik meg. Törlés is csak admin felhasználóval lehetséges.

Jegyvásárlása

• Az esemény rákattintásával lehet megnézni a jegyek árát és kategóriáját.

• Bejelentkezést követően a felhasználók megtudják venni a kiválasztott jegyet.

Strukturális felépítése

Frontend

Hat lényegi Angular komponensből áll össze

• Home a főoldal megjelenéséért felelős.
• Login a bejelentkezést teszi lehetővé, hogy lehessen jegyet vásárolni.
• Registration a regisztrációt teszti lehetővé a felhasználók számára.
• Event List a naptár nézetben listázza a kivalaszott napon az eseményeket.
• Tickets a kiválaszott eseménynél listázza az elérhető jegyeket.
• Summary a kiválasztott jegy és esemény összesítő oldala, ahol a jegyet lehet megvenni.

Backend

ASP.NET Core keretrendszer SQL adatbázissal

• A backend három modelből épül fel.

  • User egy felhasználót reprezentál.
  • Event egy eseményt reprezentál.
  • Ticket egy jegyet reprezentál az eseményben.

• Mindegyik modelhez tartozik egy Service és egy Controller osztály ami segítésével össze van kötve az adatbázis az API hívásokkal.

Használata

Frontend

Node.js telepítés után a projekt könyvtárában egy terminál ablakban az alábbi parancsok kiadásával indítható program. Első futtatáskor a node modulok telepítése szükséges.

npm install

Projekt indítása.

npm start

Az alkalmazás a https://localhost:4200 porton fut.

Backend

.NET Core Runtime telepítés után a jegy-backend mappában egy terminál ablakban az alábbi parancs kiadásával indítható el az adatbázis.

dotnet watch run