birbmap/docs/thesis/content/birdmap-technologies.tex

136 lines
10 KiB
TeX
Raw Permalink Normal View History

2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\chapter{Használt technológiák}
\label{chapt:birdmap-technologies}
%----------------------------------------------------------------------------
2020-11-30 16:34:08 +01:00
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.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\section{A fejlesztési folyamat technológiái}
%----------------------------------------------------------------------------
2020-12-01 09:44:11 +01:00
Ebben a szakaszban azokat az eszközöket, alkalmazásokat és fejlesztőkörnyezeteket mutatom be, melyeket a fejlesztés során, a fejlesztéshez használtam.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Git}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
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.
2020-11-30 16:34:08 +01:00
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.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Trello}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
A Trello \cite{trello} egy webes projektmenedszment alkalmazás.
2020-11-30 16:34:08 +01:00
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
2020-12-07 23:19:09 +01:00
\includegraphics[width=150mm, keepaspectratio]{figures/trello-3.png}
2020-11-30 16:34:08 +01:00
\caption{Egy példa állapot a Trello felületére a fejlesztés során}
\label{fig:trello}
\end{figure}
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Visual Studio}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
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.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Visual Studio Code}
%----------------------------------------------------------------------------
2020-12-09 17:35:26 +01:00
Egy másik Microsoft termék, viszont a fentivel ellentétben a Visual Studio Code \cite{vs-code} inkább szövegszerkesztő, mint fejlesztőkörnyezet.
2020-11-30 16:34:08 +01:00
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.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\section{Backend technológiák}
%----------------------------------------------------------------------------
2020-11-30 16:34:08 +01:00
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.
2020-12-09 17:35:26 +01:00
Mindemellett a .NET teljesen platformfüggetlen, mely az egyik legfontosabb követelmény volt az alkalmazással szemben.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{ASP.NET Core}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
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 csomagkezelő rendszerének, a NuGet-nek \cite{nuget} köszönhető.
2020-12-09 17:35:26 +01:00
Használatának egyik előnye, hogy ugyan az a C\# kód tud futni a szerver és a kliens oldalon, de támogat más kliens oldali keretrendszereket is, mint például az Angular-t, a Vue.js-t
2020-11-30 16:34:08 +01:00
vagy a React.js-t.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Entity Framework Core}
%----------------------------------------------------------------------------
2020-12-09 17:35:26 +01:00
Az Entity Framework Core (röviden EF Core) egy objektum-relációs leképző keretrendszer a .NET-hez. Az adatbázissal való kommunikációt könnyítését szolgálja.
2020-12-07 23:19:09 +01:00
Használatával C\#-ban lehet adatbázis lekérdezéseket írni a LINQ (Language-Integrated Query) szoftvercsomag segítségével.
2020-11-30 16:34:08 +01:00
2020-12-03 16:37:13 +01:00
%----------------------------------------------------------------------------
\subsection{JSON Web Token}
%----------------------------------------------------------------------------
Az autorizációt többféleképpen meg lehet oldani egy alkalmazás szempontjából. Az egyik ilyen megoldás a JSON Web Token-ek (röviden JWT) \cite{jwt} használata,
ami nem más mint egy szabvány, mely módszert ad a felek közötti információ biztonságos továbbítására JSON objektumokkal.
Ezen objektumok adatokat tárolhatnak a felhasználóról például a neve vagy a szerepe, melyek segítségével a szerver eldöntheti,
hogy van-e jogosultsága hívni az adott végpontot.
A Microsoft-nak van egy beépített szoftvercsomagja, mellyel ilyen tokeneket lehet készíteni és validálni.
A szerveroldal jogosultság kezelését ezzel a csomaggal oldottam meg.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{SignalR}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
A SignalR \cite{signalr} egy .NET szoftvercsomag, mely lehetővé teszi a szerveroldal számára a kliensekkel való aszinkron kommunikációt.
2020-11-30 16:34:08 +01:00
A szerver valós időben tud értesítéseket küldeni a kliensek számára, amelyek feliratkoztak az ilyen eseményekre.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{MQTT.NET}
%----------------------------------------------------------------------------
Az MQTT.NET \cite{mqttnet-github} is egy .NET szoftvercsomag, mely a Birbnetes által is használt, a \ref{subsect:mqtt}-es alfejezetben bemutatott MQTT kommunikáció C\# nyelvű megvalósítását szolgálja.
2020-11-28 17:38:33 +01:00
2020-12-02 21:41:01 +01:00
%----------------------------------------------------------------------------
\subsection{NLog}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
A szerveroldali naplózás megvalósítására több szoftvercsomag is létezik. Az NLog \cite{nlog}-ot választottam, egyrészt mert egyszerű a használata,
másrészt mert már korábban használtam. Konfigurációs fájljában meg lehet adni a naplózott események célját, mely lehet akár fájl vagy konzol is.
Meg lehet még adni az események elrendezését, hogy azok milyen formában kerüljenek a célokba, milyen plusz információt tartalmazzanak.
2020-12-02 21:41:01 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\section{Frontend technológiák}
%----------------------------------------------------------------------------
2020-12-01 09:44:11 +01:00
Ebben a szakaszban a kliensoldalon 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 keretrendszerhez.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{React.js}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
A React.js \cite{react} egy JavaScript szoftvercsomag, melyet webes felületek fejlesztésére használnak.
2020-11-30 16:34:08 +01:00
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.
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Material UI}
%----------------------------------------------------------------------------
2020-12-07 23:19:09 +01:00
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.
2020-11-30 16:34:08 +01:00
2020-12-07 23:19:09 +01:00
A Material UI \cite{material-ui} egy szoftvercsomag, mely ezeket az útmutatásokat követő egyszerű React komponenseket tartalmaz.
2020-12-09 17:35:26 +01:00
Alkalmazásával könnyű esztétikus felhasználói felületeket készíteni, minimalizált a CSS használattal.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Apexcharts}
%----------------------------------------------------------------------------
2020-12-08 22:39:18 +01:00
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.
2020-12-01 09:44:11 +01:00
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.
2020-11-30 16:34:08 +01:00
2020-11-28 17:38:33 +01:00
%----------------------------------------------------------------------------
\subsection{Google Maps Api}
2020-12-01 09:44:11 +01:00
%----------------------------------------------------------------------------
A Google szinte összes termékének van API-ja, ami lehetővé teszi a programozók számára, hogy integrálják ezeket saját alkalmazásaikban.
A Google Maps sincs másképp és mivel ennek interfésze külön támogatja a hőtérképes réteg használatát is, nem gondoltam, hogy ettől jobb eszközt tudnék találni a feladat megvalósítására.
A Google Maps API-t, ami alapvetően csak egy JavaScript csomag, rengetegen újracsomagolják, hogy különböző részét, különböző keretrendszerekben is lehessen használni.
2020-12-09 17:35:26 +01:00
Ezek közül én a Google Map React-et \cite{google-map-react} választottam, egyrészt mert támogatja a hőtérképes réteg használatát,
2020-12-01 09:44:11 +01:00
másrészt mert lehetővé teszi a térképen való React komponensek renderelését az alapértelmezett markerek helyett.