Before Width: | Height: | Size: 702 KiB After Width: | Height: | Size: 702 KiB |
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 689 KiB After Width: | Height: | Size: 689 KiB |
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -1,8 +1,7 @@ |
|||
\chapter{Υλοποίηση εφαρμογής}\label{chapter:4-application-implementation} |
|||
|
|||
\input{chapters/4.application-implementation/4.1.implemented-parts} |
|||
\input{chapters/4.application-implementation/4.2.implementation-methodology} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack} |
|||
\input{chapters/4.application-implementation/4.4.implementation-architecture} |
|||
\input{chapters/4.application-implementation/4.5.problems-faced} |
|||
\input{chapters/4.application-implementation/4.6.design-implementation-differences} |
|||
\input{chapters/4.application-implementation/4.1.implementation-methodology} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack} |
|||
\input{chapters/4.application-implementation/4.3.implementation-architecture} |
|||
\input{chapters/4.application-implementation/4.4.problems-faced} |
|||
\input{chapters/4.application-implementation/4.5.implemented-parts} |
|||
|
@ -1,8 +1,8 @@ |
|||
\section{Τεχνολογίες υλοποίησης} \label{subsection:4-3-implementation-technology-stack} |
|||
\section{Τεχνολογίες υλοποίησης} \label{subsection:4-2-implementation-technology-stack} |
|||
|
|||
Η παρούσα ενότητα απαρτίζεται από υποενότητες, στις οποίες διατυπώνονται οι \textbf{σημαντικότερες} τεχνολογίες που χρησιμοποιήθηκαν για την υλοποίηση της εφαρμογής. Όλες οι τεχνολογίες αποτελούν δωρεάν λογισμικό ανοιχτού κώδικα. |
|||
|
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.1.development-technologies} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.2.ui-technologies} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.3.ethereum-technologies} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.4.ipfs-technologies} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.1.development-technologies} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.2.ui-technologies} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.3.ethereum-technologies} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.4.ipfs-technologies} |
@ -0,0 +1,9 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το development} |
|||
|
|||
Σε αυτήν την υποενότητα περιγράφονται ορισμένα θεμελιώδη εργαλεία και frameworks που συνετέλεσαν στην ανάπτυξη της εφαρμογής. |
|||
|
|||
%TODO: Add janus and build steps diagram |
|||
|
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.1.development-technologies/4.2.1.1.node.js} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.1.development-technologies/4.2.1.2.docker} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.1.development-technologies/4.2.1.3.jenkins} |
@ -1,8 +1,8 @@ |
|||
\subsubsection{Node.js} \label{subsection:4-3-1-1-node.js} |
|||
\subsubsection{Node.js} \label{subsection:4-2-1-1-node.js} |
|||
|
|||
\logo{chapter-4/4.3.node.js-logo}{Node.js logo} |
|||
\logo{chapter-4/4.2.node.js-logo}{Node.js logo} |
|||
|
|||
Το Node.js\footnote{\url{https://nodejs.org/}} είναι ένα περιβάλλον χρόνου εκτέλεσης Javascript πολλαπλών πλατφορμών, το οποίο εκτελείται στη μηχανή V8\footnote{\url{https://v8.dev/}} και παρέχει τη δυνατότητα εκτέλεσης κώδικα Javascript εκτός περιηγητών ιστού. Επιτρέπει στους προγραμματιστές να χρησιμοποιούν Javascript για τη σύνταξη εργαλείων γραμμής εντολών και τη δημιουργία κλιμακωτών διαδικτυακών εφαρμογών (κυρίως για εξυπηρετητές). Έχει αρχιτεκτονική βασισμένη σε συμβάντα (event-driven architecture), με δυνατότητα ασύγχρονης εισόδου/εξόδου (asynchronous I/O).\cite{4.3-node.js} |
|||
Το Node.js\footnote{\url{https://nodejs.org/}} είναι ένα περιβάλλον χρόνου εκτέλεσης Javascript πολλαπλών πλατφορμών, το οποίο εκτελείται στη μηχανή V8\footnote{\url{https://v8.dev/}} και παρέχει τη δυνατότητα εκτέλεσης κώδικα Javascript εκτός περιηγητών ιστού. Επιτρέπει στους προγραμματιστές να χρησιμοποιούν Javascript για τη σύνταξη εργαλείων γραμμής εντολών και τη δημιουργία κλιμακωτών διαδικτυακών εφαρμογών (κυρίως για εξυπηρετητές). Έχει αρχιτεκτονική βασισμένη σε συμβάντα (event-driven architecture), με δυνατότητα ασύγχρονης εισόδου/εξόδου (asynchronous I/O).\cite{4.2-node.js} |
|||
|
|||
Ένα από τα σημαντικότερα χαρακτηριστικά του Node.js είναι ο ενσωματωμένος διαχειριστής πακέτων του, ο οποίος ονομάζεται npm. Με τον npm γίνεται εφικτή η εγκατάσταση πακέτων (βιβλιοθηκών) από το μητρώο npm (npm registry\footnote{\url{https://www.npmjs.com/}}), καθώς και η οργάνωση και η διαχείρισή τους στα πλαίσια της ανάπτυξης μίας εφαρμογής που εξαρτάται από αυτά. |
|||
|
@ -1,6 +1,6 @@ |
|||
\subsubsection{Docker} \label{subsection:4-3-1-2-docker} |
|||
\subsubsection{Docker} \label{subsection:4-2-1-2-docker} |
|||
|
|||
\logo{chapter-4/4.3.docker-logo}{Docker logo} |
|||
\logo{chapter-4/4.2.docker-logo}{Docker logo} |
|||
|
|||
Το Docker αποτελεί μία πλατφόρμα η οποία παρέχει λογισμικό εικονοποίησης (virtualization) στο επίπεδο του λειτουργικού συστήματος καθώς και ολοκληρωμένα συστήματα διαμοιρασμού και εκτέλεσης των παραγόμενων εικόνων. |
|||
|
@ -1,6 +1,6 @@ |
|||
\subsubsection{Jenkins} \label{subsection:4-3-1-3-jenkins} |
|||
\subsubsection{Jenkins} \label{subsection:4-2-1-3-jenkins} |
|||
|
|||
\logo{chapter-4/4.3.jenkins-logo}{Jenkins logo} |
|||
\logo{chapter-4/4.2.jenkins-logo}{Jenkins logo} |
|||
|
|||
Το Jenkins είναι ένας πλήρως παραμετροποιήσιμος και επεκτάσιμος διακομιστής αυτοματοποίησης (automation server). Ο διακομιστής μπορεί να αυτοματοποιήσει τις διαδικασίες ελέγχου, ολοκλήρωσης, παράδοσης και εγκατάστασης του κώδικα, υλοποιώντας έτσι βασικές διαδικασίες που ορίζει το DevOps, συνεχή έλεγχο (continuous testing), συνεχή ολοκλήρωση (continuous integration), συνεχή παράδοση (continuous delivery) και συνεχή εγκατάσταση (continuous deployment). Επίσης, το Jenkins μπορεί να παραμετροποιηθεί μέσω των ρυθμίσεων που προσφέρει και των επεκτάσεων (plugins) που υπάρχουν ώστε να παρέχει τις δυνατότητες αυτές για οποιαδήποτε πλατφόρμα, γλώσσα και περιβάλλον ανάπτυξης. |
|||
|
@ -0,0 +1,9 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το UI} |
|||
|
|||
Στην παρούσα υποενότητα περιγράφονται όσες τεχνολογίες σχετίζονται με τη διεπαφή του χρήστη (UI), δηλαδή με το Presentation tier. |
|||
|
|||
% TODO: add technologies like redux, sagas |
|||
|
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.2.ui-technologies/4.2.2.1.react} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.2.ui-technologies/4.2.2.2.redux} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.2.ui-technologies/4.2.2.3.redux-saga} |
@ -1,6 +1,6 @@ |
|||
\subsubsection{React} \label{subsection:4-3-2-1-react} |
|||
\subsubsection{React} \label{subsection:4-2-2-1-react} |
|||
|
|||
\logo{chapter-4/4.3.react-logo}{React logo} |
|||
\logo{chapter-4/4.2.react-logo}{React logo} |
|||
|
|||
Η React\footnote{\url{https://reactjs.org/}} αποτελεί βιβλιοθήκη Javascript, η οποία χρησιμοποιείται για την κατασκευή διεπαφών χρήστη. Είναι δηλωτική (declarative) και βασίζεται σε components, τα οποία διαχειρίζονται την κατάστασή τους (state) και συντίθενται για να δημιουργήσουν πολύπλοκα διαδραστικά UIs. |
|||
|
@ -1,6 +1,6 @@ |
|||
\subsubsection{Redux-Saga} \label{subsection:4-3-2-3-redux-saga} |
|||
\subsubsection{Redux-Saga} \label{subsection:4-2-2-3-redux-saga} |
|||
|
|||
\logo{chapter-4/4.3.redux-saga-logo}{Redux-Saga logo} |
|||
\logo{chapter-4/4.2.redux-saga-logo}{Redux-Saga logo} |
|||
|
|||
Το Redux-Saga\footnote{\url{https://redux.js.org/}} αποτελεί μία βιβλιοθήκη Javascript του οικοσυστήματος του Redux. Πρόκειται για ένα Redux middleware, το οποίο χρησιμοποιεί ESG generator functions\footnote{\url{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*}} για την εκτέλεση και διαχείριση ποικίλων ασύγχρονων side effect. Αυτές οι συναρτήσεις (sagas) παρέχουν μία πληθώρα επιλογών για την παράλληλη εκτέλεση κώδικα που μπορεί να σχετίζεται με εξωτερικά APIs, όπως με ένα blockchain ή μία βάση δεδομένων. Με αυτόν τον τρόπο, τα τελευταία μπορούν να συμπεριληφθούν στο κεντρικό Redux store και τη διαχείριση του συνολικού state της εφαρμογής. |
|||
|
@ -1,6 +1,6 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το Ethereum} \label{subsection:4-3-3-ethereum-technologies} |
|||
\subsection{Τεχνολογίες σχετικές με το Ethereum} \label{subsection:4-2-3-ethereum-technologies} |
|||
|
|||
Στην παρούσα υποενότητα περιγράφονται εκείνες οι τεχνολογίες που σχετίζονται με το Ethereum, δηλαδή με το Application tier της τεχνολογικής στοίβας. |
|||
|
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.3.ethereum-technologies/4.3.3.1.truffle} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.3.ethereum-technologies/4.3.3.2.ganache} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.3.ethereum-technologies/4.2.3.1.truffle} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.3.ethereum-technologies/4.2.3.2.ganache} |
@ -1,6 +1,6 @@ |
|||
\subsubsection{Truffle} \label{subsection:4-3-3-1-truffle} |
|||
\subsubsection{Truffle} \label{subsection:4-2-3-1-truffle} |
|||
|
|||
\logo{chapter-4/4.3.truffle-logo}{Truffle logo} |
|||
\logo{chapter-4/4.2.truffle-logo}{Truffle logo} |
|||
|
|||
Το Truffle\footnote{\url{https://trufflesuite.com/truffle/}} είναι ένα από τα δημοφιλέστερα Ethereum development frameworks και αποτελεί τμήμα της σουίτας Truffle. |
|||
|
@ -0,0 +1,7 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το IPFS} |
|||
|
|||
Σε αυτήν την υποενότητα περιγράφονται όσες τεχνολογίες σχετίζονται με το IPFS (βλ. ενότητα \ref{section:2-7-ipfs}), δηλαδή με το Data tier της τεχνολογικής στοίβας της εφαρμογής. |
|||
|
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.4.ipfs-technologies/4.2.4.1.js-ipfs} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.4.ipfs-technologies/4.2.4.2.orbit-db} |
|||
\input{chapters/4.application-implementation/4.2.implementation-technology-stack/4.2.4.ipfs-technologies/4.2.4.3.libp2p} |
@ -1,6 +1,6 @@ |
|||
\subsubsection{js-ipfs} \label{subsection:4-3-4-1-js-ipfs} |
|||
\subsubsection{js-ipfs} \label{subsection:4-2-4-1-js-ipfs} |
|||
|
|||
\logo{chapter-4/4.3.js-ipfs-logo}{js-ipfs logo} |
|||
\logo{chapter-4/4.2.js-ipfs-logo}{js-ipfs logo} |
|||
|
|||
H υλοποίηση του IPFS που χρησιμοποείται στην εφαρμογή Concordia είναι αυτή σε Javascript και ονομάζεται js-ipfs. Μέσω αυτής της βιβλιοθήκης, παρέχεται η δυνατότητα δημιουργίας ενός IPFS κόμβου, τόσο σε έναν Node.js server, όσο και σε ένα περιβάλλον browser. |
|||
|
@ -1,6 +1,6 @@ |
|||
\subsubsection{Libp2p} \label{subsection:4-3-4-3-libp2p} |
|||
\subsubsection{Libp2p} \label{subsection:4-2-4-3-libp2p} |
|||
|
|||
\logo{chapter-4/4.3.libp2p-logo}{Libp2p logo} |
|||
\logo{chapter-4/4.2.libp2p-logo}{Libp2p logo} |
|||
|
|||
Η libp2p είναι ένα αρθρωτό σύστημα πρωτοκόλλων, προδιαγραφών και βιβλιοθηκών που επιτρέπουν την ανάπτυξη p2p εφαρμογών. Αποτελεί το υποκείμενο επίπεδο δικτύου του IPFS.\ref{2.7-ipfs-docs} |
|||
|
@ -1,9 +0,0 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το development} |
|||
|
|||
Σε αυτήν την υποενότητα περιγράφονται ορισμένα θεμελιώδη εργαλεία και frameworks που συνετέλεσαν στην ανάπτυξη της εφαρμογής. |
|||
|
|||
%TODO: Add janus and build steps diagram |
|||
|
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.1.development-technologies/4.3.1.1.node.js} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.1.development-technologies/4.3.1.2.docker} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.1.development-technologies/4.3.1.3.jenkins} |
@ -1,9 +0,0 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το UI} |
|||
|
|||
Στην παρούσα υποενότητα περιγράφονται όσες τεχνολογίες σχετίζονται με τη διεπαφή του χρήστη (UI), δηλαδή με το Presentation tier. |
|||
|
|||
% TODO: add technologies like redux, sagas |
|||
|
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.2.ui-technologies/4.3.2.1.react} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.2.ui-technologies/4.3.2.2.redux} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.2.ui-technologies/4.3.2.3.redux-saga} |
@ -1,7 +0,0 @@ |
|||
\subsection{Τεχνολογίες σχετικές με το IPFS} |
|||
|
|||
Σε αυτήν την υποενότητα περιγράφονται όσες τεχνολογίες σχετίζονται με το IPFS (βλ. ενότητα \ref{section:2-7-ipfs}), δηλαδή με το Data tier της τεχνολογικής στοίβας της εφαρμογής. |
|||
|
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.4.ipfs-technologies/4.3.4.1.js-ipfs} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.4.ipfs-technologies/4.3.4.2.orbit-db} |
|||
\input{chapters/4.application-implementation/4.3.implementation-technology-stack/4.3.4.ipfs-technologies/4.3.4.3.libp2p} |
@ -1,6 +1,9 @@ |
|||
\section{Χαρακτηριστικά που υλοποιήθηκαν} |
|||
\section{Χαρακτηριστικά που υλοποιήθηκαν} \label{section:4-6-implemented-parts} |
|||
|
|||
TODO: move to last, add diagram with colors |
|||
TODO: add references to use cases implemented with screenshots of application |
|||
TODO: add unimplemented parts like serve (front and contracts) thru IPFS, upgradability |
|||
|
|||
\subsection{Διαφορές σχεδιασμού-υλοποίησης} \label{subsection:4-6-1-design-implementation-differences} |
|||
|
|||
TODO: add diagram with colors |
|||
TODO: add differences in architecture |
@ -1 +0,0 @@ |
|||
\section{Διαφορές σχεδιασμού-υλοποίησης} \label{section:4-5-design-implementation-differen} |