Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Μαρία Κουιρουκίδου

95 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Μαρία Κουιρουκίδου

  1. 1. Αυτόματη παραγωγή διεπαφών χρήστη για διαδικτυακές υπηρεσίες τύπου REST Κουιρουκίδου Μαρία Α.Ε.Μ: 7557 ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΑΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Εργαστήριο Επεξεργασίας Πληροφορίας και Υπολογισμών Επιβλέποντες: Επίκουρος Καθηγητής Ανδρέας Λ. Συμεωνίδης Υποψήφιος Διδάκτωρ Χριστόφορος Ζολώτας Θεσσαλονίκη, 29-06-2017
  2. 2. Client for RESTful API Αutomated Engine 2 | 27
  3. 3. Δομή Παρουσίασης 3 | 27 Ορισμός του Προβλήματος1 Στόχος της Διπλωματικής2 Υπόβαθρο3 Υλοποίηση4 Αποτελέσματα Συμπεράσματα5 Demo Video6
  4. 4. Ορισμός του Προβλήματος Ποια είναι η κατάσταση σήμερα και ποιες ανάγκες προκύπτουν; 4 | 27 1
  5. 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. Στόχος της διπλωματικής Ποιος είναι ο σκοπός της διπλωματικής εργασίας; 6 | 27 2
  7. 7. “Η δημιουργία μίας μηχανής αυτόματης παραγωγής web client applications για την αξιοποίηση RESTful διαδικτυακών υπηρεσιών. 77 | 27
  8. 8. Σχεδιαστικοί Στόχοι ▰REST αρχιτεκτονικό στυλ ▰MVC πρότυπο ▰Ταυτοποίηση χρήστη (authentication) ▰Αναζήτηση στην βάση δεδομένων (Database Searching) ▰Επικοινωνία με εξωτερικές διαδικτυακές υπηρεσίες (External Service Compositions) ▰UI/UX χαρακτηριστικά 8 | 27 2. Στόχος της διπλωματικής
  9. 9. Υπόβαθρο Θεωρητικό και τεχνολογικό υπόβαθρο 9 | 27 3
  10. 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. 11. RESTful WEB API RESTful WEB API Διαδικτυακή υπηρεσία που υπακούει στο σύνολο κανόνων της REST αρχιτεκτονικής 11 | 27 GET /someresource 200 OK Hello World ! Request Response 3. Υπόβαθρο
  12. 12. MDE & MDA 12 | 27 Model Driven Engineering ▰Συστηματική χρήση των μοντέλων ▰Χρήση μετασχηματισμών και γεννητριών παραγωγής κώδικα Πλεονεκτήματα: + Αυτοματοποιημένη παραγωγή κώδικα + Φθηνό & ποιοτικό λογισμικό + Φορητότητα + Συντήρηση 3. Υπόβαθρο
  13. 13. MDE & MDA 13 | 27 Model Driven Architecture ▰Τρία επίπεδα μοντελοποίησης – MOF πρότυπο ▰Πληθώρα MDA εργαλείων ▰Μετασχηματισμοί (M2M, M2T) Code 3. Υπόβαθρο
  14. 14. Υλοποίηση Παρουσίαση της Μεθοδολογίας 14 | 27 4
  15. 15. Υλοποίηση ▰Χρήση της MDE Τεχνολογίας ▰Εφαρμογή ενός Model to Text μετασχηματισμού ▰Χρήση των διαδικτυακών υπηρεσιών που παράγονται από το S-CASE 15 | 27 4. Υλοποίηση
  16. 16. Η CREATE σε σχέση με το S-CASE project 16 | 27 4. Υλοποίηση
  17. 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. 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. Επισκόπηση Δομής Εξόδου 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. 20. Place your screenshot here 20 | 27 Ταυτοποίηση Χρήστη Είσοδος χρήστη στο σύστημα Παραλείπεται αν δεν υποστηρίζεται authentication 4. Υλοποίηση
  21. 21. Place your screenshot here 21 | 27 UI/UX Στοιχεία Ανάκτηση και προβολή λεπτομερειών πόρου Εμφάνιση εικόνων Εμφάνιση επιλογών στον χρήστη Αναδυόμενα μηνύματα ειδοποίησης 4. Υλοποίηση
  22. 22. Place your screenshot here 22 | 27 Αναζήτηση στην βάση δεδομένων Πολλαπλή επιλογή ιδιοτήτων για αναζήτηση Πολλαπλή εμφάνιση αποτελεσμάτων 4. Υλοποίηση
  23. 23. Place your screenshot here 23 | 27 Επικοινωνία με εξωτερικά services Αποστολή query παραμέτρων Εμφάνιση των ιδιοτήτων της απόκρισης που μας ενδιαφέρουν 4. Υλοποίηση
  24. 24. Συμπεράσματα Στατιστικά αποτελέσματα από τις παραγόμενες εφαρμογές 24 | 27 5
  25. 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. 26. Demo Video Επίδειξη λειτουργίας της παραγόμενης εφαρμογής 26 | 27 6
  27. 27. Demo Video 27 | 27 6. Demo Video
  28. 28. Ευχαριστώ! Ερωτήσεις?

×