Σωτήριος. Β. Χαρισόπουλος Ινστιτούτο Πυρηνικής Φυσικής, ΕΚΕΦΕ «Δημόκριτος»
Σωτήριος Αγγελής
Transcript of Σωτήριος Αγγελής
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών
ΑΓΓΕΛΗΣ ΣΩΤΗΡΙΟΣ
Υπό την επίβλεψη του
Ανδρέα Λ. Συμεωνίδη
Θεσσαλονίκη,
Οκτώβριος 2016
Σχεδίαση και υλοποίηση εργαλείου αυτόματης ανάπτυξης προσαρμόσιμων διεπαφών χρήστη για RESTful web APIs
Interact 2
Σκοπός διπλωματικής εργασίας Η δημιουργία ενός εργαλείου αυτόματης παραγωγής
γραφικού περιβάλλοντος διεπαφής χρήστη για την αξιοποίηση RESTful web APIs.
API Response Show Options
HTTP Request User Action
Interact 3
Διαδικτυακή υπηρεσία είναι ένα λογισμικό που εξυπηρετεί την επικοινωνία μεταξύ των υπολογιστών και την ανταλλαγή δεδομένων
μέσω του πρωτοκόλλου HTTP για την λειτουργία μιας εφαρμογής.
Web Service
Interact 4
Rest web api είναι μια διαδικτυακή υπηρεσία που υπακούει σε ένα σύνολο κανόνων που
καθορίζονται από την Representational state transfer (REST) αρχιτεκτονική.
REST Web API
Interact 5
Κάθε αντικείμενο θα πρέπει να είναι προσβάσιμο
μέσα από ένα μοναδικό αναγνωριστικό. Αυτό
επιτυγχάνεται με χρήση των URIs
Addressability
REST PRINCIPLES
Έγκειται στην μορφή αναπαράστασης των
πληροφοριακών πόρων, που αιτούνται και
ανταλλάσσονται μεταξύ πελάτη και εξυπηρετητή. Στα
πλαίσια της υλοποίησης, χρησιμοποιείται η
αναπαράσταση JSON
Representation Oriented
Χρήση πεπερασμένου συνόλου των μεθόδων
που προσφέρει το πρωτόκολλο HTTP με τον
απλούστερο δυνατό τρόπο και για τη λειτουργία
που αυτές έχουν ορισθεί.
The Uniform, Constrained Interface
Interact 6
Hypermedia As The Engine of Application State
Κάθε client πρέπει να αλληλεπιδρά με την web
εφαρμογή, αποκλειστικά μέσω hypermedia που
παρέχονται δυναμικά από το API του server.
HATEOAS
Παντελής έλλειψη πληροφοριών από
προηγούμενη επικοινωνία μεταξύ πελάτη και
εξυπηρετητή. Ο εξυπηρετητής παρέχει μόνο την
πληροφορία κατάστασης για τους πόρους που
διαθέτει εκείνη την στιγμή.
Communicate Statelessly
Interact 7
• Το S-CASE παρέχει στους μηχανικούς λογισμικού μία σειρά από
υπηρεσίες και εργαλεία, προκειμένου να αναπτύσσουν
γρήγορα υπηρεσίες λογισμικού υψηλής ποιότητας.
• Διαθέτει μια πληθώρα υπηρεσιών και εργαλείων που
αποσκοπούν στην επιτάχυνση της διαδικασίας ανάπτυξης
RESTful Web APIs
• Παρέχει τα RESTful Web APIs για τα οποία δημιουργούνται οι
διεπαφές χρήστη από το INTERACT
S-CASE
Interact 8
Μοτίβο JSON απόκρισης
Χαρακτηριστικά Πόρου LinkList ID πόρου
ID Type linkType linkRel linkUri linkVerb
Interact 9
Οντολογία του API
Αρχεία YamlΚαλύπτουν την ανάγκη για
γνώση των χαρακτηριστικών και των ιδιοτήτων των πόρων
του εκάστοτε API εκ των προτέρων.
Interact 10
Ανάλυση πόρου στο Yaml αρχείο
Resource Name
CRUD Activities
HasEmbedded
Objects
Embedded Type
EmbeddedProperty
Name Type Unique Required Naming Property
Properies
Interact 11
Frameworks που χρησιμοποιήθηκαν
Angular Js Bootstrap
Interact 12
HTML – CSS VIEWS & ANGULAR DIRECTIVES
ANGULAR CONTROLLERS &
SERVICES
REST API
Δομικά στοιχεία εφαρμογής
Η εφαρμογή έχει αναπτυχθεί με βάση το πρότυπο σχεδίασης MVC και δομείται από διακριτά στοιχεία που μπορούν να λειτουργήσουν αυτόνομα.
Interact 13
Σχηματική απεικόνιση εφαρμογής
Interact 14
Έλεγχοι σε κάθε στάδιο της εφαρμογής
Επιλογή Ελεγκτή
Εύρεση Χαρακτηριστικών
Στοιχείο προς ενσωμάτωση
Λίστα επιλογών
Εύρεση παιδιών
Κατάσταση επιστροφής
Interact 15
. Είσοδος Χρήστη στο
σύστημα
Εγγραφή νέου χρήστη
Δημιουργία Headers για τα http requests
παράληψη αν δεν υποστηρίζεται authentication
SignIn & SignIn Controller
Interact 16
Main & Main Controller
. Ανάκτηση και
προβολή ομάδας πόρων
Εμφάνιση εικόνων ή
λεπτομερειών πόρων
Εμφάνιση επιλογών στο χρήστη
Δύο υλοποιημένα πρότυπα όψεων
Interact 17
. Ανάκτηση και
προβολή λεπτομερειών πόρων
Εμφάνιση στοιχείου προς
ενσωμάτωση
Εμφάνιση επιλογών στο χρήστη
Εμφάνιση παιδιών σε κατηγορίες
View & View Controller
Interact 18
Edit & Edit Controller
. Δυναμική δημιουργία
φορμών
Form Validation
Δημιουργία και επεξεργασία πόρων
Εμφάνιση ενημερωτικών μηνυμάτων
Interact 19
Ευχαριστώ για την προσοχή σας!
Interact 20
Interact 21
Ερωτήσεις;
Ο κώδικας του INTERACT βρίσκεται στο GitHub στη διεύθυνση : github.com/sotirisAng/Interact