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
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
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