Σωτήριος Αγγελής

21
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών ΑΓΓΕΛΗΣ ΣΩΤΗΡΙΟΣ Υπό την επίβλεψη του Ανδρέα Λ. Συμεωνίδη Θεσσαλονίκη, Οκτώβριος 2016 Σχεδίαση και υλοποίηση εργαλείου αυτόματης ανάπτυξης προσαρμόσιμων διεπαφών χρήστη για RESTful web APIs

Transcript of Σωτήριος Αγγελής

Page 1: Σωτήριος Αγγελής

ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ

Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών

ΑΓΓΕΛΗΣ ΣΩΤΗΡΙΟΣ

Υπό την επίβλεψη του

Ανδρέα Λ. Συμεωνίδη

Θεσσαλονίκη,

Οκτώβριος 2016

Σχεδίαση και υλοποίηση εργαλείου αυτόματης ανάπτυξης προσαρμόσιμων διεπαφών χρήστη για RESTful web APIs

Page 2: Σωτήριος Αγγελής

Interact 2

Page 3: Σωτήριος Αγγελής

Σκοπός διπλωματικής εργασίας Η δημιουργία ενός εργαλείου αυτόματης παραγωγής

γραφικού περιβάλλοντος διεπαφής χρήστη για την αξιοποίηση RESTful web APIs.

API Response Show Options

HTTP Request User Action

Interact 3

Page 4: Σωτήριος Αγγελής

Διαδικτυακή υπηρεσία είναι ένα λογισμικό που εξυπηρετεί την επικοινωνία μεταξύ των υπολογιστών και την ανταλλαγή δεδομένων

μέσω του πρωτοκόλλου HTTP για την λειτουργία μιας εφαρμογής.

Web Service

Interact 4

Page 5: Σωτήριος Αγγελής

Rest web api είναι μια διαδικτυακή υπηρεσία που υπακούει σε ένα σύνολο κανόνων που

καθορίζονται από την Representational state transfer (REST) αρχιτεκτονική.

REST Web API

Interact 5

Page 6: Σωτήριος Αγγελής

Κάθε αντικείμενο θα πρέπει να είναι προσβάσιμο

μέσα από ένα μοναδικό αναγνωριστικό. Αυτό

επιτυγχάνεται με χρήση των URIs

Addressability

REST PRINCIPLES

Έγκειται στην μορφή αναπαράστασης των

πληροφοριακών πόρων, που αιτούνται και

ανταλλάσσονται μεταξύ πελάτη και εξυπηρετητή. Στα

πλαίσια της υλοποίησης, χρησιμοποιείται η

αναπαράσταση JSON

Representation Oriented

Χρήση πεπερασμένου συνόλου των μεθόδων

που προσφέρει το πρωτόκολλο HTTP με τον

απλούστερο δυνατό τρόπο και για τη λειτουργία

που αυτές έχουν ορισθεί.

The Uniform, Constrained Interface

Interact 6

Page 7: Σωτήριος Αγγελής

Hypermedia As The Engine of Application State

Κάθε client πρέπει να αλληλεπιδρά με την web

εφαρμογή, αποκλειστικά μέσω hypermedia που

παρέχονται δυναμικά από το API του server.

HATEOAS

Παντελής έλλειψη πληροφοριών από

προηγούμενη επικοινωνία μεταξύ πελάτη και

εξυπηρετητή. Ο εξυπηρετητής παρέχει μόνο την

πληροφορία κατάστασης για τους πόρους που

διαθέτει εκείνη την στιγμή.

Communicate Statelessly

Interact 7

Page 8: Σωτήριος Αγγελής

• Το S-CASE παρέχει στους μηχανικούς λογισμικού μία σειρά από

υπηρεσίες και εργαλεία, προκειμένου να αναπτύσσουν

γρήγορα υπηρεσίες λογισμικού υψηλής ποιότητας.

• Διαθέτει μια πληθώρα υπηρεσιών και εργαλείων που

αποσκοπούν στην επιτάχυνση της διαδικασίας ανάπτυξης

RESTful Web APIs

• Παρέχει τα RESTful Web APIs για τα οποία δημιουργούνται οι

διεπαφές χρήστη από το INTERACT

S-CASE

Interact 8

Page 9: Σωτήριος Αγγελής

Μοτίβο JSON απόκρισης

Χαρακτηριστικά Πόρου LinkList ID πόρου

ID Type linkType linkRel linkUri linkVerb

Interact 9

Page 10: Σωτήριος Αγγελής

Οντολογία του API

Αρχεία YamlΚαλύπτουν την ανάγκη για

γνώση των χαρακτηριστικών και των ιδιοτήτων των πόρων

του εκάστοτε API εκ των προτέρων.

Interact 10

Page 11: Σωτήριος Αγγελής

Ανάλυση πόρου στο Yaml αρχείο

Resource Name

CRUD Activities

HasEmbedded

Objects

Embedded Type

EmbeddedProperty

Name Type Unique Required Naming Property

Properies

Interact 11

Page 12: Σωτήριος Αγγελής

Frameworks που χρησιμοποιήθηκαν

Angular Js Bootstrap

Interact 12

Page 13: Σωτήριος Αγγελής

HTML – CSS VIEWS & ANGULAR DIRECTIVES

ANGULAR CONTROLLERS &

SERVICES

REST API

Δομικά στοιχεία εφαρμογής

Η εφαρμογή έχει αναπτυχθεί με βάση το πρότυπο σχεδίασης MVC και δομείται από διακριτά στοιχεία που μπορούν να λειτουργήσουν αυτόνομα.

Interact 13

Page 14: Σωτήριος Αγγελής

Σχηματική απεικόνιση εφαρμογής

Interact 14

Page 15: Σωτήριος Αγγελής

Έλεγχοι σε κάθε στάδιο της εφαρμογής

Επιλογή Ελεγκτή

Εύρεση Χαρακτηριστικών

Στοιχείο προς ενσωμάτωση

Λίστα επιλογών

Εύρεση παιδιών

Κατάσταση επιστροφής

Interact 15

Page 16: Σωτήριος Αγγελής

. Είσοδος Χρήστη στο

σύστημα

Εγγραφή νέου χρήστη

Δημιουργία Headers για τα http requests

παράληψη αν δεν υποστηρίζεται authentication

SignIn & SignIn Controller

Interact 16

Page 17: Σωτήριος Αγγελής

Main & Main Controller

. Ανάκτηση και

προβολή ομάδας πόρων

Εμφάνιση εικόνων ή

λεπτομερειών πόρων

Εμφάνιση επιλογών στο χρήστη

Δύο υλοποιημένα πρότυπα όψεων

Interact 17

Page 18: Σωτήριος Αγγελής

. Ανάκτηση και

προβολή λεπτομερειών πόρων

Εμφάνιση στοιχείου προς

ενσωμάτωση

Εμφάνιση επιλογών στο χρήστη

Εμφάνιση παιδιών σε κατηγορίες

View & View Controller

Interact 18

Page 19: Σωτήριος Αγγελής

Edit & Edit Controller

. Δυναμική δημιουργία

φορμών

Form Validation

Δημιουργία και επεξεργασία πόρων

Εμφάνιση ενημερωτικών μηνυμάτων

Interact 19

Page 20: Σωτήριος Αγγελής

Ευχαριστώ για την προσοχή σας!

Interact 20

Page 21: Σωτήριος Αγγελής

Interact 21

Ερωτήσεις;

Ο κώδικας του INTERACT βρίσκεται στο GitHub στη διεύθυνση : github.com/sotirisAng/Interact