Added birdmap-technologies

docs/thesis/bib/mybib.bib

@@ -1,92 +1,58 @@
-@book{Wettl04,
-  author    = {Ferenc Wettl and Gyula Mayer and Péter Szabó},
-  publisher = {Panem Könyvkiadó},
-  title     = {\LaTeX~kézikönyv},
-  year      = {2004},
-}
-
-@article{Candy86,
-  author       = {James C. Candy},
-  journaltitle = {{IEEE} Trans.\ on Communications},
-  month        = {01},
-  note         = {\doi{10.1109/TCOM.1986.1096432}},
-  number       = {1},
-  pages        = {72--76},
-  title        = {Decimation for Sigma Delta Modulation},
-  volume       = {34},
-  year         = {1986},
-}
-
-@inproceedings{Lee87,
-  author    = {Wai L. Lee and Charles G. Sodini},
-  booktitle = {Proc.\ of the IEEE International Symposium on Circuits and Systems},
-  location  = {Philadelphia, PA, USA},
-  month     = {05~4--7},
-  pages     = {459--462},
-  title     = {A Topology for Higher Order Interpolative Coders},
-  vol       = {2},
-  year      = {1987},
-}
-
-@thesis{KissPhD,
-  author      = {Peter Kiss},
-  institution = {Technical University of Timi\c{s}oara, Romania},
-  month       = {04},
-  title       = {Adaptive Digital Compensation of Analog Circuit Imperfections for Cascaded Delta-Sigma Analog-to-Digital Converters},
-  type        = {phdthesis},
-  year        = {2000},
-}
-
-@manual{Schreier00,
-  author       = {Richard Schreier},
-  month        = {01},
-  note         = {\url{http://www.mathworks.com/matlabcentral/fileexchange/}},
-  organization = {Oregon State University},
-  title        = {The Delta-Sigma Toolbox v5.2},
-  year         = {2000},
-}
-
-@misc{DipPortal,
-  author       = {{Budapesti Műszaki és Gazdaságtudományi Egyetem Villamosmérnöki és Informatikai Kar}},
-  howpublished = {\url{http://diplomaterv.vik.bme.hu/}},
-  title        = {Diplomaterv portál (2011. február 26.)},
-}
-
-@incollection{Mkrtychev:1997,
-  author    = {Mkrtychev, Alexey},
-  booktitle = {Logical Foundations of Computer Science},
-  doi       = {10.1007/3-540-63045-7_27},
-  editor    = {Adian, Sergei and Nerode, Anil},
-  isbn      = {978-3-540-63045-6},
-  pages     = {266-275},
-  publisher = {Springer Berlin Heidelberg},
-  series    = {Lecture Notes in Computer Science},
-  title     = {Models for the logic of proofs},
-  url       = {http://dx.doi.org/10.1007/3-540-63045-7_27},
-  volume    = {1234},
-  year      = {1997},
-}
-
-@report{Jeney,
-  author      = {Jeney, Gábor},
-  institution = {Budapesti Műszaki és Gazdaságtudományi Egyetem, Híradástechnikai Tanszék},
-  location    = {Budapest},
-  note        = {\url{http://www.mcl.hu/~jeneyg/kinezet.pdf}},
-  title       = {Hogyan néz ki egy igényes dokumentum? {N}éhány szóban az alapvető tipográfiai szabályokról},
-  type        = {techreport},
-  year        = {2014},
-}
-
 @misc{kubernetes,
   title       = {A Kubernetes hivatalos oldala},
   url         = {https://kubernetes.io},
 }
 
+@dashboard{kubernetes-dashboard,
+  title       = {A Kubernetes Dashboard hivatalos oldala},
+  url         = {https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/},
+}
+
 @misc{docker,
   title       = {A Docker hivatalos oldala},
   url         = {https://www.docker.com},
 }
 
+@misc{grafana,
+  title       = {A Grafana hivatalos oldala},
+  url         = {https://grafana.com/},
+}
+
+@misc{kibana,
+  title       = {A Kibana hivatalos oldala},
+  url         = {https://www.elastic.co/kibana},
+}
+
+@misc{git,
+  title       = {A Git hivatalos oldala},
+  url         = {https://git-scm.com/},
+}
+
+@misc{trello,
+  title       = {A Trello hivatalos oldala},
+  url         = {https://trello.com},
+}
+
+@misc{vs,
+  title       = {A Microsoft Visual Studio hivatalos oldala},
+  url         = {https://visualstudio.microsoft.com/},
+}
+
+@misc{vs-code,
+  title       = {A Microsoft Visual Studio Code hivatalos oldala},
+  url         = {https://code.visualstudio.com/},
+}
+
+@misc{react,
+  title       = {A React.js hivatalos oldala},
+  url         = {https://reactjs.org/},
+}
+
+@misc{material-ui,
+  title       = {A Material UI hivatalos oldala},
+  url         = {https://material-ui.com/},
+}
+
 @thesis{birdnetes-tdk,
   author      = {Torma Kristóf és Pünkösdi Marcell},
   institution = {Budapesti Műszaki és Gazdaságtudományi Egyetem},

docs/thesis/content/birdmap-introduction.tex

@@ -3,12 +3,12 @@
 \label{chapt:birdmap-introduction}
 %----------------------------------------------------------------------------
 Ebben a fejezetben bemutatom a fejlesztés előtti állapotot, amikor még csak tervezgettük, hogy milyen is legyen az alkalmazás.
-Illetve bemutatot, néhány vizualizációs alternatívát, melyeket ihletszerzés gyanánt használtam.
+Illetve bemutatok, néhány vizualizációs alternatívát, melyek jó iránymutatásként szólgálltak a fejlesztés során.
 
 %----------------------------------------------------------------------------
 \section{Tervezés}
 %----------------------------------------------------------------------------
-Az első dolgunk az volt, hogy Kristóffal és Marcellel beültünk egy Teams\footnotemark-en tartott gyűlésre,
+Az első dolgom az volt, hogy Kristóffal és Marcellel beültünk egy Teams\footnotemark-en tartott gyűlésre,
 ahol elmagyarázták nagyvonalakban, hogy hogyan is működik a rendszer, mik az egyes kompnensek feladatai. 
 Ezek után az előttem álló fejlesztésre váró alkalmazás részleteit beszéltük meg, az elvárt igényeket azzal kapcsolatban.
 Itt rögtön több ötlet is felmerült, melyek közül a legkiemelkedőbbek:
@@ -17,11 +17,55 @@ Itt rögtön több ötlet is felmerült, melyek közül a legkiemelkedőbbek:
     \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.
 \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 Birdnetes Kubernetes\cite{kubernetes} klaszterébe.
 
+Az alkalmazásom kapott egy nevet is, mely a Birdnetes-t és az említett hőtérképes ötletet ötvözve Birdmap lett.
 \footnotetext{Microsoft Teams: Csevegő és gyülekezés tartó alkalmazás.}
 %----------------------------------------------------------------------------
 \section{Alternatívák}
 %----------------------------------------------------------------------------
-Az imént vázolt igények kielégítésére rengeteg kiforrott megoldás létezik már. Ezek közül bemutatok néhányat, melyek jó útmutatást adtak az alkalmazásom fejlesztése során
+Az imént vázolt igények kielégítésére rengeteg kiforrott megoldás létezik már, melyek jó példát mutattak a saját alkalmazásom fejlesztése során.
 
+%----------------------------------------------------------------------------
 \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.
+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.
+
+\begin{figure}[!ht]
+    \centering
+    \includegraphics[width=150mm, keepaspectratio]{figures/grafana.png}
+    \caption{A Grafana demo oldalának, a \url{https://play.grafana.org}-nak a felülete}
+    \label{fig:grafana}
+\end{figure}
+    
+%----------------------------------------------------------------------------
+\subsection{Kibana}
+%----------------------------------------------------------------------------
+A Kibana\cite{kibana} jelentősen hasonlít a Grafanához, azonban amíg a utóbbit inkább az időben változó metrikák vizualizálására használják például processzor leterheltség vagy memória használat,
+addig az előbbit elsődlegesen az Elasticsearch\footenotemark adatok, főként napló bejegyzések, analizálására használják.
+
+\footnotetext{Ingyenes és nyílt forráskódú index alapú keresőmotor}
+
+\begin{figure}[!ht]
+    \centering
+    \includegraphics[width=150mm, keepaspectratio]{figures/kibana-dashboard.png}
+    \caption{Egy példa a Kibana kezelőfelületére}
+    \label{fig:kibana}
+\end{figure}
+
+%----------------------------------------------------------------------------
+\subsection{Kubernetes Dashboard (Web UI)}
+%----------------------------------------------------------------------------
+A Kubernetes Dashboard\cite{kubernetes-dashboard} elsősorban nem a különböző adatok vizualizálását szolgálja, inkább a klaszter menedzselését próbálja egyszerűbbé és jobban áttekinthetővé tenni.
+Azonban egy jó példa arra, hogy egy rendszer webes kezelőfelületének, milyennek is kell lennie.
+
+\begin{figure}[!ht]
+    \centering
+    \includegraphics[width=150mm, keepaspectratio]{figures/kubernetes-dashboard.png}
+    \caption{A Kubernetes Dashboard felülete}
+    \label{fig:kibana}
+\end{figure}

docs/thesis/content/birdmap-technologies.tex

@@ -2,54 +2,109 @@
 \chapter{Használt technológiák}
 \label{chapt:birdmap-technologies}
 %----------------------------------------------------------------------------
+Ezzel a fejezettel az a célom, hogy ismertessem a fejlesztés során, illetve az alkalmazásom által használt technológiákat,
+hogy a következő fejezetekben alapozni tudjak ezeknek az ismeretére.
 
 %----------------------------------------------------------------------------
 \section{A fejlesztési folyamat technológiái}
 %----------------------------------------------------------------------------
+Ebben a szakaszban azokat az eszközöket, alkalmazásokat mutatom be, melyeket a fejlesztés során használtam. 
+
 %----------------------------------------------------------------------------
 \subsection{Git}
 %----------------------------------------------------------------------------
+A Git\cite{git} egy verziókezelő rendszer. Használatával a felhasználó le tudja menteni egy adott fájlrendszerben található fájlok állapotát.
+Megkönnyíti az egy projekten dolgozó programozók közötti kooperációt. Manapság lassan elképzelhetetlen a fejlesztés valamilyen verziókezelő használata nélkül.
+
 %----------------------------------------------------------------------------
 \subsection{Trello}
 %----------------------------------------------------------------------------
+A Trello\cite{trello} egy webes lista készítő és kezelő alkalmazás. 
+Azért használtam a fejlesztés során, mert szerettem volna egy helyet, ami tükrözi a fejlesztés állapotát, ahova le tudom írni az alkalmazással kapcsolatos ötleteimet.
+Különböző listákban tároltam a fejlesztésre váró és a kész feladatokat szerver, kliens és egyéb szerint.
+
+\begin{figure}[!ht]
+    \centering
+    \includegraphics[width=150mm, keepaspectratio]{figures/trello-cropped.png}
+    \caption{Egy példa állapot a Trello felületére a fejlesztés során}
+    \label{fig:trello}
+\end{figure}
+
 %----------------------------------------------------------------------------
 \subsection{Visual Studio}
 %----------------------------------------------------------------------------
+A Visual Studio\cite{vs} a Microsoft fejlesztőkörnyezete. Jól alkalmazható a .NET keretrendszer technológiáival, ezért ezt használtam a szerveroldal fejlesztése során.
+
 %----------------------------------------------------------------------------
 \subsection{Visual Studio Code}
 %----------------------------------------------------------------------------
+Egy másik Microsoft termék, viszont a fentivel ellentétben a Visual Studio Code\cite{vs-code} inkább szövegszerkeztő, mint fejlesztőkörnyezet.
+Ennek köszönhetően jelentősen gyorsabb és egyszerűbb a használata. Különféle bővítmények használatával nagyon jó program nyelv támogatottságot lehet elérni.
+Többek között ezen okok miatt preferáltam a kliensoldal fejlesztésére. 
 
 %----------------------------------------------------------------------------
 \section{Backend technológiák}
 %----------------------------------------------------------------------------
+Ebben a szakaszban a szerveroldal megvalósítására használt .NET technológiákat mutatom be. A választásom több ok miatt esett a .NET keretrendszer használatára.
+
+Egyrészt úgy gondoltam, hogy az alkalmazásom fajsúlyosabb részét inkább a kliensoldal fogja képezni ezért, hogy arra több energiát tudjak fordítani, valami olyat választottam,
+amivel már foglalkoztam korábban, amivel gyorsabban és rutinosabban megy a fejlesztés.
+
+Másrészt nemrég jelent meg a .NET új 5-ös verziója, melynek használatával jelentős teljesítmény javulást ígértek több területen is, és úgy gondoltam, hogy ez a projekt tökéletes lenne
+ennek próbatételére.
+
+Mindemellett a .NET teljesen platformüggetlen, mely az egyik legfontosabb követelmény volt az alkalmazással szemben.
+
 %----------------------------------------------------------------------------
 \subsection{ASP.NET Core}
 %----------------------------------------------------------------------------
+Az ASP.NET Core a .NET család ingyenes, nyílt forráskódú webes keretrendszere. Gyors és moduláris fejlesztést tesz lehetővé, mely főként a NuGet csomagoknak köszönhető.
+Használatána egyik előnye, hogy ugyan az a C\# kód tud futni a szerver éa a kliens oldalon, de támogat más kliens oldali keretrendszereket is, mint például az Angular-t, a Vue.js-t
+vagy a React.js-t.
+
 %----------------------------------------------------------------------------
 \subsection{Entity Framework Core}
 %----------------------------------------------------------------------------
+Az Entity Framework Core (röviden EF Core) egy objektum-relációs leképező keretrendszer a .NET-hez. Az adatbázissal való kommunikációt könnyítését szolgálja. 
+Használatával C\#-ban lehet adatbázis lekérdezéseket írni a LINQ (Language-Integrated Query) segítségével.
+
 %----------------------------------------------------------------------------
 \subsection{SignalR}
 %----------------------------------------------------------------------------
+A SignalR egy .NET szoftvercsomag, mely lehetővé teszi a szerveroldal számára a kliensekkel való aszinkron kommunikációt.
+A szerver valós időben tud értesítéseket küldeni a kliensek számára, amelyek feliratkoztak az ilyen eseményekre.
+
 %----------------------------------------------------------------------------
 \subsection{MQTT.NET}
 %----------------------------------------------------------------------------
-%----------------------------------------------------------------------------
-\subsection{NLog}
-%----------------------------------------------------------------------------
+Az MQTT.NET is egy .NET szoftvercsomag, mely a Birdnetes által is használt, a \ref{subsect:mqtt}-es alfejezetben bemutatott MQTT kommunikáció C\# nyelvű megvalósítását szolgálja.
 
 %----------------------------------------------------------------------------
 \section{Frontend technológiák}
 %----------------------------------------------------------------------------
+Ebben a szakaszban a kliensoldalhoz használt technológiákat mutatom be. 
+Választásomnál fő motiváció az volt, hogy szerettem volna valami újat kipróbálni, aminek nincs köze a .NET technológiákhoz.
+
 %----------------------------------------------------------------------------
 \subsection{React.js}
 %----------------------------------------------------------------------------
+A React.js\cite{react} egy JavaScript szoftvercsomag, melyet webes felületek fejlesztésére használnak.
+Fő építő elemei a komponensek, melyek elszeparált újrafelhasználható felület egységek.
+Használatának egyik előnye, hogy automatizált az állapot kezelés, tehát ha változik egy komponens állapota, akkor a React újra-rendereli azt.
+
 %----------------------------------------------------------------------------
 \subsection{Material UI}
 %----------------------------------------------------------------------------
+A Material\cite{material} elsősorban egy kezelőfelület tervezési útmutató a Google által, melyet követve szép és minőségi felületeket lehet készíteni.
+
+A Material UI\cite{material-ui} egy szoftvercsomag, mely ezeket az útmutatásokat követő egyszerű React komponenseket tartalmaz.
+Alkalmazásával könnyő esztétikus felhasználói felületeket készíteni, minimalizált a CSS használattal. 
+
 %----------------------------------------------------------------------------
 \subsection{Apexcharts}
 %----------------------------------------------------------------------------
+
+
 %----------------------------------------------------------------------------
 \subsection{Google Maps Api}
 %----------------------------------------------------------------------------

docs/thesis/content/birdnetes-introduction.tex

@@ -56,6 +56,7 @@ akkor az könnyedén duplikálható.
 
 %----------------------------------------------------------------------------
 \subsection{MQTT}
+\label{subsect:mqtt}
 %----------------------------------------------------------------------------
 Az MQTT (Message Queue Telemetry Transport) az egy kliens-szerver publish/subscribe üzenetküldő protokoll. Könnyű implementálni és alacsony a sávszélesség igénye,
 mellyel tökéletes jelöltje a Machine to Machine (M2M), illetve az Internet of Things (IoT) kommunikáció megvalósítására.