Martha's contribution

This commit is contained in:
kunkliricsi 2020-12-08 22:39:18 +01:00
parent 37ea775d59
commit 9cae969803
9 changed files with 1183 additions and 1164 deletions

View File

@ -20,7 +20,7 @@ tudják kielégíteni azokat a speciális igényeket, amelyek egy ilyen rendszer
Jelen szakdolgozat célja egy olyan vizualizációs megoldás bemutatása, amelynek segítségével a rendszer könnyedén áttekinthető
és kezelhető. A tanszéki rendszer által kezelt eszközök a felületen is vezérelhetők
és azok működéséről különböző statisztikákat felhasználva egyszerűen értelmezhető diagrammok generálódnak.
és azok működéséről különböző statisztikákat felhasználva egyszerűen értelmezhető diagramok generálódnak.
A backend megvalósítására az ASP.NET Core-t választottam, mely platformfüggetlen megoldást nyújt a web kérések kiszolgálására.
A frontend-et a React.js használatával készítettem, mely segítségével egyszerűen és gyorsan lehet reszponzív felhasználói felületeket készíteni.

View File

@ -9,7 +9,7 @@ Ebben a fejezetben bemutatom a szerveroldal architektúráját, felépítését.
%----------------------------------------------------------------------------
A szerveroldal fejlesztésénél a háromrétegú architektúrát alkalmaztam, melynek lényege, hogy az alkalmazást logikailag három elkülönülő részre bontjuk:
\begin{itemize}
\item \textbf{Adat elérési réteg}. Ez a rész felel a tárolt entitások modell definícióiért, illetve azoknak a kiolvasásáért, tárolásáért egy adatbázisból vagy fájlrendszerből.
\item \textbf{Adatelérési réteg}. Ez a rész felel a tárolt entitások modell definícióiért, illetve azoknak a kiolvasásáért, tárolásáért egy adatbázisból vagy fájlrendszerből.
\item \textbf{Megjelenítési réteg}. Ezen réteg feladata a kliensoldal közvetlek kiszolgálása. Bármilyen irányú kommunikáció a kliensek felé ezen a rétegen keresztül történik.
\item \textbf{Üzleti logikai réteg}. Minden ami nem a közvetlen kommunikációért, megjelenítésért vagy adat elérésért, tárolásért felel, az ide kerül.
A fenti két réteg között helyezkedik el és feladata a különböző folyamatok értékelése és futtatása, valamint az adatok feldolgozása.
@ -19,7 +19,7 @@ Az ASP.NET Core beépítetten támogatja a dependency injection-t, mely a \verb+
Én minden rétegbe tettem egy ilyen \verb+Startup+ osztályt, hogy azok feleljenek a saját szolgáltatásaik konfigurálásáért és regisztrálásáért.
%----------------------------------------------------------------------------
\section{Adat elérési réteg}
\section{Adatelérési réteg}
%----------------------------------------------------------------------------
Az adatelérést az Entity Framework Core segítségével oldottam meg. Telepítettem egy MSSQL adatbázis szervert a számítógépemre, melynek csatlakozási paramétereivel
a \verb+Startup+ osztályban felkonfigurálom az EF Core által nyújtott \verb+DbContext+ saját leszármazott változatát.

View File

@ -120,7 +120,7 @@ Komponense a \ref{fig:birdmap-logs}-es ábrán látható.
\label{fig:birdmap-logs}
\end{figure}
%----------------------------------------------------------------------------
\subsection{Eszköz állapot és hangüzenet kezelő szolgáltatás}
\subsection{Eszközállapot- és hangüzenet-kezelő szolgáltatás}
%----------------------------------------------------------------------------
A szakasz további komponenseinek van egy közös ismertetője. Mégpedig, hogy mindegyiknek szüksége van a kihelyezett eszközök adataira
és az azok által publikált hangüzenetekből képzett valószínűségre.
@ -133,13 +133,13 @@ A \ref{lst:react-switch}-es listában látható, hogy a \verb+DevicesContextProv
\subsection{Dashboard}
%----------------------------------------------------------------------------
A Dashboard az alkalmazás kezdő oldala. Itt található meg a külső szolgáltatások állapotát vizsgáló komponens,
illetve a kihelyezett eszközök működési folyamatában áttekintést nyújtó diagrammok mindegyike.
illetve a kihelyezett eszközök működési folyamatában áttekintést nyújtó diagramok mindegyike.
Az oldal megjelenítésekor elindul egy másodpercenként ismétlődő folyamat,
mely a \verb+DevicesContext+-ből kiolvasott értékekből legenerálja a diagrammokon megjelenítendő összes adatot.
mely a \verb+DevicesContext+-ből kiolvasott értékekből legenerálja a diagramokon megjelenítendő összes adatot.
Ez azonban az adat mennyiségétől függően akár egy-két másodpercig is eltarthat, ami rendkívül lassúvá és használhatatlanná tenné a felületet.
Ennek elkerülése érdekében az adatfeldolgozó folyamat egyszerre csak egy pár elemet dolgoz fel, mely alfolyamatok között 20 milliszekundum szüneteket iktattam be.
Továbbá hogy a különböző diagrammok animációi is zökkenőmentesek legyenek, azok adatai cserélése között is van 300 milliszekundum szünet.
Továbbá hogy a különböző diagramok animációi is zökkenőmentesek legyenek, azok adatai cserélése között is van 300 milliszekundum szünet.
Így valamivel lasabb az adatfeldolgozás, de a felület használható marad.
%----------------------------------------------------------------------------
\subsubsection{Külső szolgáltatások}
@ -176,38 +176,38 @@ A felhasználói élmény maximalizálása érdekében a frissítés előtt lek
\subsubsection{Eszközök és szenzorok állapota}
%----------------------------------------------------------------------------
Ennek a komponensnek a szerepe, hogy áttekintést nyújtson az eszközök és szenzorok állapotáról.
Úgy gondoltam, hogy erre a legcélravezetőbb eszköz a \ref{fig:dashboard-donut}-es ábrán is látható Apexcharts fánk diagrammja.
Úgy gondoltam, hogy erre a legcélravezetőbb eszköz a \ref{fig:dashboard-donut}-es ábrán is látható Apexcharts fánk diagramja.
Látható, hogy hány darab eszköz és szenzor van bekapcsolt, kikapcsolt, illetve hibás állapotban.
Az állapotok változása esetén a \verb+DevicesContextProvider+-nek köszönhetően az adatok automatikusan frissülnek.
\begin{figure}[!ht]
\centering
\includegraphics[width=150mm, keepaspectratio]{figures/dashboard-donut-devices.png}
\caption{A Dashboard eszköz- és szenzor állapotok diagrammja}
\caption{A Dashboard eszköz- és szenzor állapotok diagramja}
\label{fig:dashboard-donut}
\end{figure}
%----------------------------------------------------------------------------
\subsubsection{Hőtérkép diagrammok}
\subsubsection{Hőtérkép diagramok}
%----------------------------------------------------------------------------
Ezekkel a diagrammokkal az a célom, hogy az eszközök által küldött észleléseket időrendben vizualizáljam.
Megvalósításukhoz az Apexcharts Heatmap típusú diagrammját használtam.
Ezekkel a diagramokkal az a célom, hogy az eszközök által küldött észleléseket időrendben vizualizáljam.
Megvalósításukhoz az Apexcharts Heatmap típusú diagramját használtam.
A \ref{fig:dashboard-heatmap-second}-as ábrán látható diagram az elmúlt egy percben küldött, másodpercenként a legnagyobb, hangüzenetekből képzett valószínűségeket ábrozolja.
A \ref{fig:dashboard-heatmap-minute}-es ábrán látható diagram pedig az elmúlt egy órában percenként a legnagyobbakat.
\begin{figure}[!ht]
\centering
\includegraphics[width=150mm, keepaspectratio]{figures/second-heatmap.png}
\caption{Másodperc alapú hőtérképes diagramm}
\caption{Másodperc alapú hőtérképes diagram}
\label{fig:dashboard-heatmap-second}
\end{figure}
\begin{figure}[!ht]
\centering
\includegraphics[width=150mm, keepaspectratio]{figures/minute-heatmap.png}
\caption{Perc alapú hőtérképes diagramm}
\caption{Perc alapú hőtérképes diagram}
\label{fig:dashboard-heatmap-minute}
\end{figure}
A függőleges tengelyen a rendszer eszközei vannak dinamikusan megjelenítve.
A vízszintes tengelyen pedig az említett időtartományok.
A diagrammokon látható négyzetek a valószínűség nagyságától függően sötétebbek vagy világosabbak.
A diagramokon látható négyzetek a valószínűség nagyságától függően sötétebbek vagy világosabbak.
\newpage
%----------------------------------------------------------------------------
\subsubsection{Riasztás számláló}
@ -217,7 +217,7 @@ Segítségével megvizsgálható, hogy mely eszközök riasztanak a legtöbbet a
\begin{figure}[!ht]
\centering
\includegraphics[width=150mm, keepaspectratio]{figures/dashboard-column-devices.png}
\caption{Eszközönkénti riasztásokat számláló diagramm}
\caption{Eszközönkénti riasztásokat számláló diagram}
\label{fig:dashboard-devices-column}
\end{figure}
@ -226,7 +226,7 @@ Az egyes oszlopok három részre vannak bontva az üzenetek öt tized, hét tize
%----------------------------------------------------------------------------
\subsubsection{Üzenetek gyakorisága}
%----------------------------------------------------------------------------
Az oldalon található utolsó diagramm egy vonal diagammn, melynek célja, hogy ábrázolja a rendszer által küldött üzenetek számát másodpercenként.
Az oldalon található utolsó diagram egy vonal diagammn, melynek célja, hogy ábrázolja a rendszer által küldött üzenetek számát másodpercenként.
A \ref{fig:dashboard-messages-line}-es ábrán látható a komponens.
A vízszintes tengelyen a legelső érték az alkalmazás által először észlelt üzenet időpontja.
Az utolsó érték a legutoljára észlelt időpontja.

View File

@ -12,8 +12,8 @@ hogy ki tudjam választani a vizualizáció szempontjából legfontosabb kompone
A jellemző adatvizualizációs megoldások közül az alábbi hármat találtam kulcsfontosságúnak a következő célokra:
\begin{itemize}
\item \textbf{Hőtérkép}. Hasznos lenne egy olyan felület, ahol az eszközök GPS koordinátái és a seregély detektálást jelző üzenetek alapján, meg lehetne jeleníteni a seregélyek hozzávetőleges előfordulásának helyeit és gyakoriságát egy térképen, hőtérképes formában.
\item \textbf{Eszköz állapotok}. Jelenleg a Command and Control mikroszolgáltatás felé indított kéréseken kívül, nincs lehetőség a kihelyezett eszközök állapotának vizsgálatára. Szükség lenne egy olyan felületre, ahol ezek állapotai láthatóak, esetleg dinamikusan is frissülnek.
\item \textbf{Diagrammok}. A hőtérképen kívül egyéb olyan diagrammok is hasznosak lehetnek, ahol látható például, hogy melyik eszköz melyik percben észlelt madárhangot vagy, hogy egy eszköz összesen hány madárhangot észelt. Minnél több információ, annál jobb.
\item \textbf{Eszközállapotok}. Jelenleg a Command and Control mikroszolgáltatás felé indított kéréseken kívül, nincs lehetőség a kihelyezett eszközök állapotának vizsgálatára. Szükség lenne egy olyan felületre, ahol ezek állapotai láthatóak, esetleg dinamikusan is frissülnek.
\item \textbf{Diagramok}. A hőtérképen kívül egyéb olyan diagramok is hasznosak lehetnek, ahol látható például, hogy melyik eszköz melyik percben észlelt madárhangot vagy, hogy egy eszköz összesen hány madárhangot észelt. Minnél több információ, annál jobb.
\end{itemize}
Ezeken kívül fontos követelmény volt még, hogy az alkalmazásom futtatható legyen Linux környezetben is, hogy az telepíthető legyen a Birbnetes Kubernetes \cite{kubernetes} klaszterébe.
@ -28,7 +28,7 @@ Az imént vázolt igények kielégítésére sok, széles körben alkalmazott me
\subsection{Grafana}
%----------------------------------------------------------------------------
A Grafana \cite{grafana} az egy nyílt forráskódú platformfüggetlen vizualizációs web alkalmazás.
Egy támogatott adatbázishoz csatlakoztatva különféle interaktív gráfokat és diagrammokat generál.
Egy támogatott adatbázishoz csatlakoztatva különféle interaktív gráfokat és diagramokat generál.
A testreszabhatóság maximalizásának érdekében különböző, akár harmadik fél által készített, bővítmények használatát is támogatja,
melyekkel új adatforrások és panel típusok integrálhatók.
A \ref{fig:grafana}-es ábra egy jó példa arra, hogy hogyan néz ki egy általános Grafana felület.

View File

@ -122,7 +122,7 @@ Alkalmazásával könnyő esztétikus felhasználói felületeket készíteni, m
%----------------------------------------------------------------------------
\subsection{Apexcharts}
%----------------------------------------------------------------------------
Az Apexcharts \cite{apexcharts} egy nyílt forráskódú JavaScript szoftvercsomag, amellyel könnyen konfigurálható, modern kinézetű diagrammokat lehet készíteni.
Az Apexcharts \cite{apexcharts} egy nyílt forráskódú JavaScript szoftvercsomag, amellyel könnyen konfigurálható, modern kinézetű diagramokat lehet készíteni.
Sokféle kliensoldali (és szerveroldali) technológiát támogat, köztük a React-et is. A kezelőfelületen található vizualizációk szinte összes elemét ennek használatával csináltam.
%----------------------------------------------------------------------------

View File

@ -41,7 +41,7 @@ a \ref{lst:dummy-service-registration}-es listában látható módon.
%----------------------------------------------------------------------------
\section{MQTT teszt alkalmazás}
\section{MQTT tesztalkalmazás}
%----------------------------------------------------------------------------
Az MQTT.NET szoftvercsomag github oldalán található néhány példa a csomag használatára \cite{mqttnet-examples}.
Ezek között találtam Sepp Penner MQTTnet.TestApp.WinForm \cite{mqttnet-winforms} projektjét,

View File

@ -12,7 +12,7 @@ Ha igen akkor jelez a felvételt küldő eszköznek, hogy szólaltassa meg a ria
berendezését, hogy elijessze a madarakat.
%----------------------------------------------------------------------------
\section{A probléma}
\section{Probléma}
%----------------------------------------------------------------------------
A jelen rendszer használata során nincs vizuális visszacsatolás az esetleges riasztásokról azok gyakoriságáról
és a rendszer állapotáról sem. Különböző diagnosztikai eszközök ugyan implementálva lettek mint például
@ -20,11 +20,11 @@ a naplózás vagy a hiba bejelentés, de ezek használata nehézkes, nem kézenf
Szükség van egy olyan megoldásra amivel egy helyen és egyszerűen lehet kezelni és felügyelni a rendszer egyes elemeit.
%----------------------------------------------------------------------------
\section{A megoldás}
\section{Megoldás}
%----------------------------------------------------------------------------
A jelen szakdolgozat egy olyan webes alkalmazás elkészítését dokumentálja, melyel a felhasználók képesek
a természetben elhelyezett eszközök állapotát vizsgálni, azokat akár ki és bekapcsolni igény szerint.
Az egyes rendszer eseményeket vizsgálva a szoftver statisztikákat készít, melyeket különböző diagrammokon ábrázolok.
Az egyes rendszer eseményeket vizsgálva a szoftver statisztikákat készít, melyeket különböző diagramokon ábrázolok.
Ilyen statisztikák például, hogy időben melyik eszköz mikor észlelt madár hangot, vagy hogy hány hang üzenet érkezik
az eszközöktől másodpercenként.

View File

@ -9,7 +9,7 @@ minimalizáltak legyenek a függőségek, így a rendszerben történő változ
%----------------------------------------------------------------------------
\section{Továbbfejlesztési lehetőségek}
%----------------------------------------------------------------------------
Az kliens oldalon történő diagrammok adatainak generálása hamar túl nagy falatnak bizonyult.
Az kliens oldalon történő diagramok adatainak generálása hamar túl nagy falatnak bizonyult.
A bevetett optimalizációk ellenére sem lett hatványozottan gyorsabb a felület.
Így az első és legfontosabb továbbfejlesztési teendő az adatok szerveroldalon történő generálása lenne.

File diff suppressed because it is too large Load Diff