Αυτόματη παραγωγή διεπαφών χρήστη (user interfaces) για διαδικτυακές υπηρεσίες τύπου REST (RESTful web services)

1. Αυτόματη παραγωγή
διεπαφών χρήστη για
διαδικτυακές
υπηρεσίες τύπου REST
Κουιρουκίδου Μαρία
Α.Ε.Μ: 7557
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΑΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών
Επιβλέποντες:
Επίκουρος Καθηγητής Ανδρέας Λ. Συμεωνίδης
Υποψήφιος Διδάκτωρ Χριστόφορος Ζολώτας
Θεσσαλονίκη, 29-06-2017

2. Client for RESTful API
Αutomated Engine
2 | 27

3. Δομή Παρουσίασης
3 | 27
Ορισμός του Προβλήματος1
Στόχος της Διπλωματικής2
Υπόβαθρο3
Υλοποίηση4
Αποτελέσματα Συμπεράσματα5
Demo Video6

4. Ορισμός του
Προβλήματος
Ποια είναι η κατάσταση σήμερα και
ποιες ανάγκες προκύπτουν;
4 | 27
1

5. Αυξανόμενη Τάση για WEB / RESTful APIs
5 | 27
That’s a lot of WEB
APIs
And a lot of RESTful
APIs
>17,000 WEB APIs
84%
1. Ορισμός του προβλήματος
Ανάγκη για:
▰Ποιοτικότερο λογισμικό στο web
▰Ελαχιστοποίηση χρόνου - κόστους
“To API είναι η
ψηφιακή κόλλα που
κρατά τον κόσμο μας
ενωμένο”

6. Στόχος της
διπλωματικής
Ποιος είναι ο σκοπός της
διπλωματικής εργασίας;
6 | 27
2

7. “Η δημιουργία μίας μηχανής
αυτόματης παραγωγής web client
applications για την αξιοποίηση
RESTful διαδικτυακών υπηρεσιών.
77 | 27

8. Σχεδιαστικοί Στόχοι
▰REST αρχιτεκτονικό στυλ
▰MVC πρότυπο
▰Ταυτοποίηση χρήστη (authentication)
▰Αναζήτηση στην βάση δεδομένων (Database
Searching)
▰Επικοινωνία με εξωτερικές διαδικτυακές υπηρεσίες
(External Service Compositions)
▰UI/UX χαρακτηριστικά
8 | 27
2. Στόχος της διπλωματικής

9. Υπόβαθρο
Θεωρητικό και τεχνολογικό
υπόβαθρο
9 | 27
3

10. REST Principles
10 | 27
3. Υπόβαθρο
Addressability
Κάθε αντικείμενο –resource - θα
πρέπει να είναι προσβάσιμο από
ένα μοναδικό αναγνωριστικό URI
Statelessness
Δεν υπάρχει πληροφορία από
προηγούμενη επικοινωνία μεταξύ
πελάτη και εξυπηρετητή.
Connectedness
Κάθε αναπαράσταση ενός πόρου
πρέπει να περιέχει συνδέσμους που
έχουν τα URIs προς τους επόμενους
πιθανούς πόρους.
Uniform Interface
Xρήση του πρωτόκολλου
επικοινωνίας HTTP. 4 μεθόδους
για τις 4 πιο κοινές λειτουργίες
GET-POST-PUT-DELETE
Resource
Representation
Μορφή αναπαράστασης των
πληροφοριών του πόρου. Πχ
JSON

11. RESTful WEB API
RESTful WEB API
Διαδικτυακή υπηρεσία που
υπακούει στο σύνολο κανόνων
της REST αρχιτεκτονικής
11 | 27
GET
/someresource
200 OK
Hello World
!
Request
Response
3. Υπόβαθρο

12. MDE & MDA
12 | 27
Model Driven Engineering
▰Συστηματική χρήση των
μοντέλων
▰Χρήση μετασχηματισμών και
γεννητριών παραγωγής κώδικα
Πλεονεκτήματα:
+ Αυτοματοποιημένη παραγωγή κώδικα
+ Φθηνό & ποιοτικό λογισμικό
+ Φορητότητα
+ Συντήρηση
3. Υπόβαθρο

13. MDE & MDA
13 | 27
Model Driven Architecture
▰Τρία επίπεδα μοντελοποίησης – MOF πρότυπο
▰Πληθώρα MDA εργαλείων
▰Μετασχηματισμοί (M2M, M2T)
Code
3. Υπόβαθρο

14. Υλοποίηση
Παρουσίαση της Μεθοδολογίας
14 | 27
4

15. Υλοποίηση
▰Χρήση της MDE Τεχνολογίας
▰Εφαρμογή ενός Model to Text
μετασχηματισμού
▰Χρήση των διαδικτυακών υπηρεσιών που
παράγονται από το S-CASE
15 | 27
4. Υλοποίηση

16. Η CREATE σε σχέση με το S-CASE project
16 | 27
4. Υλοποίηση

17. Model to Text Μετασχηματισμός Acceleo
17 | 27
M2T
ΜετασχηματισμόςΕίσοδος: Μοντέλο Έξοδος: Κώδικας
Είσοδος: PSM μοντέλα του S-CASE
▰AnnotationStack PSM
▰RestfulService PSM
▰Authentication PSM
▰Database Searching PSM
▰External Service Composition PSM
4. Υλοποίηση

18. Όνομα Είσοδος Έξοδος
Πολλαπλότητα
Εξόδου
Acceleo Queries
Generate AnnotationStack Όχι 0 8
Index AnnotationStack HTML 2..3 36
Controllers AnnotationStack JS 1..* 103
Views AnnotationStack HTML 1..* 120
Services AnnotationStack JS 1..2 11
App AnnotationStack JS 1 20
Auth AnnotationStack JS HTML 2 24
Search AnnotationStack JS HTML 2..* 47
ExternalService AnnotationStack JS HTML 2..* 21
Επισκόπηση των Acceleo Templates
18 | 27
4. Υλοποίηση

19. Επισκόπηση Δομής Εξόδου
19 | 27
▰Αρχεία JavaScript
▰Αρχεία HTML
▰Documentation
Παράγονται:
ServiceNameClient
jstemplates
controllers services
Index.html
resource.ht
ml
searchReso
urce.html
resource.co
ntroller.js
searchResour
ce.controller.js
services.js
authentication.s
ervice.js
app.js
4. Υλοποίηση

20. Place your screenshot here
20 | 27
Ταυτοποίηση Χρήστη
Είσοδος χρήστη στο
σύστημα
Παραλείπεται αν δεν
υποστηρίζεται
authentication
4. Υλοποίηση

21. Place your screenshot here
21 | 27
UI/UX Στοιχεία
Ανάκτηση και προβολή
λεπτομερειών πόρου
Εμφάνιση εικόνων
Εμφάνιση επιλογών
στον χρήστη
Αναδυόμενα μηνύματα
ειδοποίησης
4. Υλοποίηση

22. Place your screenshot here
22 | 27
Αναζήτηση στην
βάση δεδομένων
Πολλαπλή επιλογή
ιδιοτήτων για αναζήτηση
Πολλαπλή εμφάνιση
αποτελεσμάτων
4. Υλοποίηση

23. Place your screenshot here
23 | 27
Επικοινωνία με
εξωτερικά services
Αποστολή query
παραμέτρων
Εμφάνιση των
ιδιοτήτων της απόκρισης
που μας ενδιαφέρουν
4. Υλοποίηση

24. Συμπεράσματα
Στατιστικά αποτελέσματα από τις
παραγόμενες εφαρμογές
24 | 27
5

25. Συμπεράσματα – Αποτελέσματα
25 | 27
0 200 400 600 800 1000 1200 1400
Yummy
RESTBook
Yummy RESTBook
Comment Lines 679 153
Source code lines JS 1050 270
Source code lines HTML 1267 363
Comment Lines Source code lines JS Source code lines HTML5. Συμπεράσματα

26. Demo Video
Επίδειξη λειτουργίας της
παραγόμενης εφαρμογής
26 | 27
6

27. Demo Video
27 | 27
6. Demo Video

28. Ευχαριστώ!
Ερωτήσεις?