From ed42449de1ddcb64415991515de8f79ae16a3dad Mon Sep 17 00:00:00 2001 From: Evangelos Oulis Date: Tue, 21 Jan 2020 19:46:34 +0200 Subject: [PATCH] Update v1.3 --- project.adoc | 66 +++++++++++++++++++++++------ project.html | 88 ++++++++++++++++++++++++++++++++++----- serverNode/serv.py | 2 +- webInterface/parking.html | 24 ++++++----- 4 files changed, 144 insertions(+), 36 deletions(-) diff --git a/project.adoc b/project.adoc index 2ae05a7..8f52d5e 100644 --- a/project.adoc +++ b/project.adoc @@ -176,9 +176,9 @@ link:++https://www.heroku.com/platform++[Heroku], για την οποιά μπ image::Photos/itops-pizza_as_a_service.png[1000,800] -- -Για την διαδικασία του deployment εκτελούμε ένα σύνολο βημάτων τα οποία αποτελούνται από την αντιγραφή του κώδικα -σε ένα reposetory του link:++https://github.com/oulievancs/serverNode++[GitHub] και την δημιουργία ενός project στην πλατφόρμα για το -τρέξιμο του process. link:++https://stackabuse.com/deploying-a-flask-application-to-heroku/++[περισσότερα]. Ακόμα +Για το deployment εκτελούμε ένα σύνολο βημάτων τα οποία αποτελούνται από την ανάρτηση του κώδικα +σε ένα repository του link:++https://github.com/oulievancs/serverNode++[GitHub] και την δημιουργία ενός project στην πλατφόρμα Heroku. +, link:++https://stackabuse.com/deploying-a-flask-application-to-heroku/++[περισσότερα για το deployment εδώ]. Ακόμα εγκαθισούμε στο project που μόλις φτιάξαμε μία MySQL βάση δεδομένων για να μπορούμε να αποθηκεύσουμε τα δεδομένα μας. ==== Deployment @@ -186,29 +186,69 @@ image::Photos/itops-pizza_as_a_service.png[1000,800] ώστε να γνωρίζει το Heroku τι να μας προσφέρει. Αυτό επιτυγχάνεται με την αρχειοθέτηση αυτών σε ένα αρχείο ονόματι requirements.txt . +Το αρχείο που περιέχει όλα τα απαραίτητα modules για τον κώδικά μας είναι: + +[source, text] +---- +flask +flask_restful +flask_cors +gunicorn==19.9.0 +mysql-connector +---- + * Έπειτα την δημιουργία ενός αρχείου που περιγράφει το που βρίσκεται η κύρια συνάρτηση μας (main) για την έναρξη του process. Αυτό το αρχείο ονομάζεται Procfile . Στο αρχείο αυτό αναφέτεται ένα gunicorn module. Ο gunicorn είναι ένας Python HTTP WEB server. Αυτό ουσιαστικά είναι ο ο πυρήνας για την εκτέλεση του API μας. -* Έπειτα με μια απομακρυσμένη σύνδεση στη βάση μας της οποίας τα στοιχεία πρόσβασης γαίνονται στο Heroku, -πραγματοποιούμε μία σύνδεση και δημιουργούμε τον πίνακά μας για την αποθήκευση. +Το αρχείο αυτό έχει τη μορφή αυτή: + +[source, conf] +---- +web: gunicorn serv:app --preload --timeout 150000 +---- + +.Gunicorn +[NOTE] +==== +Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX. It's a pre-fork worker model. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy. + +Source: https://gunicorn.org +==== + +* Έπειτα με μια απομακρυσμένη σύνδεση στη βάση μας της οποίας τα στοιχεία πρόσβασης δίνονται από Heroku, +πραγματοποιούμε μία σύνδεση και δημιουργούμε τον πίνακά μας για την αποθήκευση των δεδομένων. ==== REST API Το REST API ουσιαστικά σηκώνει δύο υπηρεσίες. Αυτές είναι: -* / [GET]: που πας επιστρέφει για κάθε θέση του parking αν είναι διαθέσιμη ή όχι κωδικοποιημένα με 0 ή 1. -Στο response τα δεδομένα μας παίρνουν μορφή JSON. Τα δεδομένα που επιστρέφει γίνονται fetch από τη βάση δεδομένων. +* / [GET]: επιστρέφει ένα Array από JSON objects, ένα JSON για κάθε θέση του parking αν είναι διαθέσιμη ή όχι κωδικοποιημένα με 0 ή 1. +Τα δεδομένα που επιστρέφει γίνονται fetch από τη βάση δεδομένων. + +Για παράδειγμα: + +[source, json] +---- +[{"no": 1, "status": false}, {"no": 2, "status": false}, {"no": 3, "status": false}, {"no": 4, "status": true}, {"no": 5, "status": false}, {"no": 6, "status": false}, {"no": 7, "status": false}, {"no": 8, "status": false}] +---- + +* /parkingStatus [POST]: που μας επιτρέπει να αλλάξουμε την κατάσταση μίας θέσης parking. Στο POST τα δεδομένα +ορίζονται στο body σε αναπαράσταση JSON, έτσι ώστε ο Server να είναι ικανός να τα επεξεργαστεί και να τα αποθηκεύσει +στη βάση δεδομένων που χρησιμοποιούμε. + +Για παράδειγμα: -* /parkingStatus [POST]: που μας επιτρέπει να αλλάξουμε την κατάσταση μίας θέσης parking. Το POST των δεδομένων -στο body γίνεται με την JSON αναπαράστασή τους έτσι ώστε να μπορέσει ο Server να τα επεξεργαστεί, ο οποίος στη -συνέχεια αποθηκεύει την νέα θέση στη Βάση δεδομένων. +[source, json] +---- +{"no": 2, "status": false} +---- == Διεπαφή Χρήστη (4~ο~ μέρος) === Η διεπαφή του χρήστη -Η διεπαφή του χρήστη αποτελείται από μία HTML σελίδα η οποία ενσωματώνει και δύο JavaScript Processes. -Σκοπός αυτής είναι η ανααπαράσταση της κατάστασης του Parking. Η σελίδα λοιπόν ενσωματώνει για κάθε θέση -parking +Η διεπαφή του χρήστη αποτελείται από μία HTML σελίδα η οποία ενσωματώνει δύο JavaScript Processes. +Σκοπός αυτής είναι η αναπαράσταση της κατάστασης του Parking. Η σελίδα λοιπόν επεικονίζει για κάθε θέση +parking με χρώμα κόκκινο την "μη ελεύθεση" και με πράσινο την "ελεύθερη". == Autonomous Parking diff --git a/project.html b/project.html index 8c2c84a..9fee63f 100644 --- a/project.html +++ b/project.html @@ -756,9 +756,9 @@ REST API έτσι ώστε να μπορούν να επικοινωνούν ε
-

Για την διαδικασία του deployment εκτελούμε ένα σύνολο βημάτων τα οποία αποτελούνται από την αντιγραφή του κώδικα -σε ένα reposetory του GitHub και την δημιουργία ενός project στην πλατφόρμα για το -τρέξιμο του process. περισσότερα. Ακόμα +

Για το deployment εκτελούμε ένα σύνολο βημάτων τα οποία αποτελούνται από την ανάρτηση του κώδικα +σε ένα repository του GitHub και την δημιουργία ενός project στην πλατφόρμα Heroku. +, περισσότερα για το deployment εδώ. Ακόμα εγκαθισούμε στο project που μόλις φτιάξαμε μία MySQL βάση δεδομένων για να μπορούμε να αποθηκεύσουμε τα δεδομένα μας.

@@ -770,14 +770,60 @@ REST API έτσι ώστε να μπορούν να επικοινωνούν ε ώστε να γνωρίζει το Heroku τι να μας προσφέρει. Αυτό επιτυγχάνεται με την αρχειοθέτηση αυτών σε ένα αρχείο ονόματι requirements.txt .

+ +
+
+

Το αρχείο που περιέχει όλα τα απαραίτητα modules για τον κώδικά μας είναι:

+
+
+
+
flask
+flask_restful
+flask_cors
+gunicorn==19.9.0
+mysql-connector
+
+
+
+ +
+
+

Το αρχείο αυτό έχει τη μορφή αυτή:

+
+
+
+
web: gunicorn serv:app --preload --timeout 150000
+
+
+
+ + + + + +
+ + +
Gunicorn
+
+

Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy.

+
+
+

Source: https://gunicorn.org

+
+
+
+
+
@@ -790,16 +836,36 @@ REST API έτσι ώστε να μπορούν να επικοινωνούν ε
+
+
+

Για παράδειγμα:

+
+
+
+
[{"no": 1, "status": false}, {"no": 2, "status": false}, {"no": 3, "status": false}, {"no": 4, "status": true}, {"no": 5, "status": false}, {"no": 6, "status": false}, {"no": 7, "status": false}, {"no": 8, "status": false}]
+
+
+
+
+
+

Για παράδειγμα:

+
+
+
+
{"no": 2, "status": false}
+
+
@@ -917,7 +983,7 @@ SLOW SUCCESS BUILDS CHARACTER, FAST SUCCESS BUILDS EGO. diff --git a/serverNode/serv.py b/serverNode/serv.py index 2668b93..6673b67 100644 --- a/serverNode/serv.py +++ b/serverNode/serv.py @@ -62,7 +62,7 @@ class ParkingStatus(Resource):

Not get at '/parkingStatus'.

""" def post(self): - # Gets the data into a JSON Object. + # Gets the data into as a JSON Object from HTTP request. data = json.loads(request.data) # SQL get all Parking places status. diff --git a/webInterface/parking.html b/webInterface/parking.html index 405060f..9fd45e6 100644 --- a/webInterface/parking.html +++ b/webInterface/parking.html @@ -37,20 +37,22 @@ $(document).ready(function(){ $("tr#row0").append("
"); $("tr#row0").append("
"); $.each(resultData, function(key, val) { - console.log("Key " + key + ", val: " + val); + console.log("Parking No " + val.no + ", val: " + val.status); content = ""; - if (val == 0) { + key ++; + + if (val.status == true) { if (pos == "l") { - content = "No" + key + "
"; + content = "No" + val.no + "
"; } else { - content = "No" + key + "
"; + content = "No" + val.no + "
"; } } else { if (pos == "l") { - content = "No" + key + "
"; + content = "No" + val.no + "
"; } else { - content = "No" + key + "
"; + content = "No" + val.no + "
"; } } if (pos == "r") { @@ -79,11 +81,11 @@ $(document).ready(function(){ contentType: "application/json; charset=utf-8", success: function(resultData) { $.each(resultData, function(key, val) { - console.log(key + " -> " + val); - if (val == "1") - $("div#" + key).removeClass("full").addClass("empty"); - else if (val == "0") - $("div#" + key).removeClass("empty").addClass("full"); + console.log("Parking No " + val.no + " -> " + val.status); + if (val.status == false) + $("div#" + val.no).removeClass("full").addClass("empty"); + else if (val.status == true) + $("div#" + val.no).removeClass("empty").addClass("full"); }); }, error: function(jqXHR, testStatus, errorThrown) {