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

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

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

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

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

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

Οκτώβριος 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