Το WordPress ως Application Development Framework - Γιώργος Τεκελής

WordCamp Thessaloniki 2019

Το WordPress, είναι αρκετά περισσότερα από ένα CMS για δημιουργία
ιστοσελίδων. Μπορούμε πλέον να το προσεγγίζουμε ως ένα Application
Development Platform. Η ίδια η αρχιτεκτονική του καθώς και τα APIs του,
μας επιτρέπουν να το προσαρμόσουμε και να το επεκτείνουμε ώστε να
αναπτύξουμε εφαρμογές για κάθε πιθανό σενάριο. Αυτές οι εφαρμογές
μπορούν να έχουν ως κέντρο το ίδιο το WordPress και να είναι
ανεπτυγμένες εξ ολοκλήρου επάνω σε αυτό η να αποτελεί ένα μέρος της
γενικής αρχιτεκτονικής.
Στην παρουσίαση θα δούμε:

– Πώς χρησιμοποιήσαμε το WordPress στο εργαστήριο για να υλοποιήσουμε μία σημαντική εφαρμογή

– Πώς κάνουμε ανάλυση και υλοποίηση της εφαρμογής ώστε να εκμεταλλευτούμε τα APIs και τις δυνατότητες του WordPress

– Integrations με ήδη υπάρχοντα APIs

– Τα πολλά οφέλη από την χρήση του και γιατί από εδώ και πέρα θα είναι
σημαντικό κομμάτι του workflow ανάπτυξης εφαρμογών στο εργαστήριο μας

Συνήθως χρησιμοποιούμε το WordPress για να δημιουργήσουμε όμορφα και λειτουργικά websites. Όμως μας παρέχει όλα τα εργαλεία ώστε να το χρησιμοποιήσουμε και ως μία πλατφόρμα ανάπτυξης εφαρμογών. Οι εφαρμογές αυτές μπορεί να είναι στημένες εξ’ ολοκλήρου στο WordPress είτε να αποτελούν μέρος ενός οικοσυστήματος.
Θα δούμε, μεταξύ άλλων, το γιατί και σε ποιες περιπτώσεις να χρησιμοποιήσουμε WordPress για ανάπτυξη εφαρμογών, ποια πλεονεκτήματα μας παρέχει και πώς να αναλύσουμε ένα project με στόχο την υλοποίηση σε WordPress.
Όλα τα παραπάνω θα τα πλαισιώσουμε με παραδείγματα από ένα πραγματικό project που υλοποιήσαμε στο ΕΜΠ.

Transcript

1. AS AN APPLICATION
   DEVELOPMENT
   FRAMEWORK
   WORDCAMP THESSALONIKI 2019
   

   View Slide

2. Γιώργος Τεκελής
   Full-stack web developer / free lancer / SmartRue.gr
   

   View Slide

3. ένα πρωινό Δευτέρας...
   

   View Slide

4. “Θυμάσαι εκείνο το νέο
   project;”
   

   View Slide

5. “Ο πελάτης το θέλει...”
   

   View Slide

6. “...σε 12 μέρες”
   

   View Slide

7. View Slide

8. paraithsh.doc
   

   View Slide

9. View Slide

10. THE CASE
    

    View Slide

11. eCare
    Διαχείριση ενέργειας σε νησιά
    (περιοχές εκτός κεντρικού
    δικτύου διανομής ηλεκτρικής
    ενέργειας)
    

    View Slide

12. Specs
    Data visualization (Ιστορικά, real-time)
    Asset management (Θερμικές μονάδες)
    User management
    Consume 3rd party Rest APIs
    Reporting
    Logging
    CRUD
    

    View Slide

13. STATUS QUO
    

    View Slide

14. MVC
    Rest APIs
    React/Angular/Vue...
    

    View Slide

15. “YOU CAN’T
    STOP THE
    CHANGE”
    --Shmi Skywalker
    

    View Slide

16. Thinking in WordPress
    to develop web applications
    ...is the new black
    

    View Slide

17. FIRST STEPS
    

    View Slide

18. WordPress installation
    Manual installation
    

    View Slide

19. More than an installation
    Front end
    Admin panel
    

    View Slide

20. Theme
    Select a theme that suits your needs
    Create a child theme ASAP
    

    View Slide

21. DATA
    VISUALIZATION
    

    View Slide

22. Database Services / APIs UI
    

    View Slide

23. Data visualization
    Χρειαζόμαστε charts integration ώστε να
    γίνεται οπτικοποίηση δεδομένων weather
    forecasting καθώς και historical δεδομένων
    

    View Slide

24. Database Services / APIs UI
    

    View Slide

25. Data visualization
    Custom plugin
    

    View Slide

26. Data visualization
    Custom plugin
    

    View Slide

27. Data visualization
    Δεν φορτώνουμε άσκοπα libraries σε
    σελίδες που δεν χρειάζονται
    Φορτώνουμε Highcharts μόνο για
    συγκεκριμένο page template
    is_page_template()
    wp_enqueue_script()
    Custom plugin
    

    View Slide

28. Data visualization
    1. Έχουν φορτωθεί τα libraries του chart (view code)
    2. Έχει φορτωθεί το custom .js script που κάνει
    render το/τα σωστά charts ανάλογα με το/τα
    shortcodes της σελίδας
    Custom plugin
    

    View Slide

29. Data visualization
    3. Έχει φορτωθεί το div element του shortcode (view code)
    Custom plugin
    

    View Slide

30. Data visualization
    

    View Slide

31. Data visualization
    

    View Slide

32. Data visualization
    

    View Slide

33. Shortcodes
    Data visualization
    

    View Slide

34. CHART DATA
    

    View Slide

35. Chart data
    Τα δεδομένα, στη συγκεκριμένη
    περίπτωση, ζουν σε ένα MSSQL
    Server
    

    View Slide

36. Database Services / APIs UI
    

    View Slide

37. Database Services / APIs UI
    AJAX
    JWT
    

    View Slide

38. Chart data
    1. Έχουν φορτωθεί τα custom libraries
    για το συγκεκριμένο chart
    2. Γίνεται η κλήση ajax
    3. Τα δεδομένα που επιστρέφουν
    γίνονται bind στο chart
    4. Γίνεται render το chart στη σελίδα
    

    View Slide

39. GUTENBERG
    

    View Slide

40. Gutenberg
    Columns
    Reusable blocks
    You name it...
    

    View Slide

41. Gutenberg
    Gutenberg / columns
    

    View Slide

42. Gutenberg
    Gutenberg / columns
    

    View Slide

43. Gutenberg
    Gutenberg / reusable blocks
    

    View Slide

44. ASSET
    MANAGEMENT
    

    View Slide

45. Asset management
    

    View Slide

46. Asset management
    1. Χρήση custom page template
    2. Custom post type, ίδια πεδία με table στη βάση
    3. Loop όλα τα “Conventional Units” custom posts
    και render λίστα με τις μονάδες
    4. Κλήση WP Rest API και επιστροφή των custom
    fields όλων των μονάδων (json)
    5. Με κλικ σε κάθε μονάδα, filter το json και bind τα
    πεδία της συγκεκριμένης στο view (details)
    

    View Slide

47. Asset management
    WP Rest API
    

    View Slide

48. Database Services / APIs UI
    AJAX
    CPT: Conventional Units
    WP REST API
    ACF Plugin
    Custom page template
    JWT
    

    View Slide

49. Asset management
    

    View Slide

50. Asset management
    Custom admin panel columns
    

    View Slide

51. Asset management
    Custom admin panel columns
    

    View Slide

52. Asset management
    1. Απενεργοποιεί μονάδα στο UI
    2. Αποστέλλεται μήνυμα σε RabbitMQ
    3. Ο σταθμός κάνει consume το μήνυμα
    4. Κλείνει την μονάδα
    Ενεργοποίηση/απενεργ. μονάδας
    Χειριστής προς Σταθμό
    

    View Slide

53. Asset management
    1. π.χ. Ο Σταθμός της Χίου ενεργοποιεί τη μονάδα
    2. Αποστέλλεται μήνυμα σε RabbitMQ
    3. Η εφαρμογή μας κάνει consume το μήνυμα
    4. Ενημερώνεται η WordPress βάση και ο MSSQL
    Ενεργοποίηση/απενεργ. μονάδας
    Σταθμός προς Χειριστή
    

    View Slide

54. Database Services / APIs UI
    AJAX
    CPT: Conventional Units
    WP REST API
    ACF Plugin
    Custom page template
    JWT
    Asset Management
    

    View Slide

55. USER
    MANAGEMENT
    

    View Slide

56. User/Access management
    User management plugin (Ultimate Member)
    Τα JWTs παράγονται από το plugin με λίγο
    custom κώδικα
    Μας προσφέρει features όπως roles
    Έτοιμες σελίδες Login, Logout, Sign up...
    Shortcodes
    

    View Slide

57. Database Services / APIs UI
    AJAX
    CPT: Conventional Units
    WP REST API
    ACF Plugin
    Custom page template
    JWT
    Asset Management
    User Management
    

    View Slide

58. LAST BUT NOT
    LEAST
    

    View Slide

59. Logging
    Reporting
    

    View Slide

60. Database Services / APIs UI
    AJAX
    CPT: Conventional Units
    WP REST API
    ACF Plugin
    Custom page template
    JWT
    Asset Management
    User Management
    Logging
    Reporting
    

    View Slide

61. SO…
    

    View Slide

62. Η ΕΦΑΡΜΟΓΗ
    ΗΤΑΝ ΕΤΟΙΜΗ...
    

    View Slide

63. ...σε 8 μέρες
    

    View Slide

64. ΣΑΣ ΕΥΧΑΡΙΣΤΩ!
    @gtekelis / george@georgetekelis.com
    

    View Slide