Σχεδιαση και αναπτυξη διαδικτυακης εφαρμογης πελατη για διαδικτυακες υπηρεσιεσ τυπου REST

1. Μιχαηλίδου Ναταλία Δήμητρα
Α.Ε.Μ.: 6863
Επιβλέποντες:
Επίκουρος Καθηγητής Ανδρέας Λ. Συμεωνίδης
Υποψήφιος Διδάκτωρ Χριστόφορος Ζολώτας
Τμήμα Ηλεκτρολόγων Μηχανικών
και Μηχανικών Υπολογιστών
Εργαστήριο Επεξεργασίας
Πληροφορίας και Υπολογισμών

2. Δομή Παρουσίασης
AUTOMATED CLIENT
ENGINE2

3. Στόχος Διπλωματικής Εργασίας
Αυτοματοποιημένη παραγωγή web client
applications
• Χρήση της MDE τεχνολογίας
• Δημιουργία ενός PSM to Text μετασχηματισμού
• Χρήση των παραγόμενων RESTful Web Services του S-
CASEAUTOMATED CLIENT
ENGINE3

4. ROA και REST Resource Oriented
Architecture
• Resource
• URI
• Hypermedia Links
• Resource Representation
• HTTP
Representational State
Transfer
• Stateless
• Addressability
• Uniform Interface
• ConnectednessAUTOMATED CLIENT
ENGINE4

5. Η αυξανόμενη ζήτηση για web APIs
69%
22%
5% 2%
Τεχνολογίες για την ανάπτυξη web
APIs
REST SOAP JavaScript XML-RPC
AUTOMATED CLIENT
ENGINE5

6. MDE πλεονεκτήματα
• Αυτοματοποιημένη παραγωγή κώδικα
• Ποιοτικό λογισμικό
• Φθηνότερη παραγωγή λογισμικού
• Σχεδιασμός προσανατολισμένος στο
αντικείμενο του προβλήματος
• Διευκόλυνση μεταφοράς λογισμικού σε
άλλες πλατφόρμες
AUTOMATED CLIENT
ENGINE6

7. MDA αρχιτεκτονική
MOF πρότυπο
Μετασχηματισμοί μοντέλων
Πληθώρα MDA εργαλείων
AUTOMATED CLIENT
ENGINE7

8. MDA μοντέλα και
μετασχηματισμοί
Transformations
Models
Model to Model
Model to Text
Computational Independent
Model
Platform Independent Model
Platform Specific Model
AUTOMATED CLIENT
ENGINE8

9. Υλοποίηση της
Automated Client
EngineAUTOMATED CLIENT
ENGINE9

10. Η ACE σε σχέση με το S-CASE project
AUTOMATED CLIENT
ENGINE10

11. Σχεδιαστικοί Στόχοι για τις
παραγόμενες εφαρμογές πελάτη
 REST αρχιτεκτονικό στυλ
 MVC πρότυπο
 Εμφάνιση πολλαπλών πόρων στην αρχική σελίδα
 Υλοποίηση συγκεκριμένων μεθόδων για κάθε πόρο
 Authentication
 UI/UX στοιχεία
 Δημιουργία κενών αρχείων για μετέπειτα επεξεργασία τους
AUTOMATED CLIENT
ENGINE11

12. Η αρχιτεκτονική των παραγόμενων clients
Main
Folder
js
App.js
Services.
js
ResourceC
trl .js
FrontCtrl.
js
LoginCtrl.
js
Index.ht
ml
views
Resource
.hmtl
Front.htm
l
SignIn.ht
ml
dev Algorithmi
c
Resource.h
tml
• Αρχεία Javascript
• Αρχεία HTML
• Κενά αρχεία για την παρέμβαση
προγραμματιστή
AUTOMATED CLIENT
ENGINE12

13. Απαιτούμενη πληροφορία από το PSM μοντέλο του
S-CASE
AnnotationStack
ServicePSM
AuthenticationLayerPSM AuthenticationPerformer
AUTOMATED CLIENT
ENGINE13

14. Το ServicePSM στοιχείο
AUTOMATED CLIENT
ENGINE14

15. PSM to Text Acceleo μετασχηματισμός
• Υποστηρίζει τα MDA πρότυπα
• Παραγωγή πηγαίου κώδικα
μέσω templates
• Χρήση στατικού κειμένου και
Acceleo εκφράσεων σε OCL
γλώσσα
Acceleo Model-To-Text
transformation language
[for ( c: PSMComponentProperty | p.JavaRModelHasProperty )]
[if ( c.type.startsWith('String') )]
<label>[c.name.toUpperFirst()/]
<input type=“[if ( c.name = 'password‘ )] password [else] text [/if]"
name="input[c.name.toUpperFirst()/]“
ng-model="[p.parentName/].[c.name/]">
</label>
[lineSeparator()/]
[/if]
[/for]
AUTOMATED CLIENT
ENGINE15

16. Επισκόπηση των Acceleo templates και queries
Template Είσοδος
Τύπος αρχείου
εξόδου
Πολλαπλότητα
εξόδου
Acceleo Queries
Generate AnnotationStack - - 7
Index AnnotationStack HTML 1..2 40
Views AnnotationStack HTML 1..* 35
Ctrls AnnotationStack JS 1..* 136
Services AnnotationStack JS 1 25
App AnnotationStack JS 1 15
Auth AnnotationStack JS, HTML 2 53
Dev AnnotationStack HTML 0..* 1
AUTOMATED CLIENT
ENGINE16

17. User Interface/User Experience στοιχεία
• Μηνύματα επιβεβαίωσης
• Μηνύματα
επιτυχίας/αποτυχίας
Pop-up windows
• Προεπιλογή
• Φιλικό προς άτομα με
προβλήματα όρασης
CSS styling
AUTOMATED CLIENT
ENGINE17

18. WapoAdminToolApi με authentication
AUTOMATED CLIENT
ENGINE18

19. Συγκριτικά αποτελέσματα
921
568
761
2512
2967
2
3
11
13
0 500 1000 1500 2000 2500 3000 3500
ACE
eBucks
RESTMarks
WSAT
WapoAdminToolApi
AUTOMATED CLIENT
ENGINE19

20. Demo video
AUTOMATED CLIENT
ENGINE20

21. Ερωτήσεις;
THANK
YOU!
AUTOMATED CLIENT
ENGINE21