Το 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
2. Γιώργος Τεκελής Full-stack web developer / free lancer / SmartRue.gr
3. ένα πρωινό Δευτέρας...
4. “Θυμάσαι εκείνο το νέο project;”
5. “Ο πελάτης το θέλει...”
6. “...σε 12 μέρες”
8. paraithsh.doc
10. THE CASE
11. eCare Διαχείριση ενέργειας σε νησιά (περιοχές εκτός κεντρικού δικτύου διανομής ηλεκτρικής ενέργειας)
12. Specs Data visualization (Ιστορικά, real-time) Asset management (Θερμικές μονάδες) User management Consume 3rd party Rest APIs Reporting Logging CRUD
13. STATUS QUO
14. MVC Rest APIs React/Angular/Vue...
15. “YOU CAN’T STOP THE CHANGE” --Shmi Skywalker
16. Thinking in WordPress to develop web applications ...is the new black
17. FIRST STEPS
18. WordPress installation Manual installation
19. More than an installation Front end Admin panel
20. Theme Select a theme that suits your needs Create a child theme ASAP
21. DATA VISUALIZATION
22. Database Services / APIs UI
23. Data visualization Χρειαζόμαστε charts integration ώστε να γίνεται οπτικοποίηση δεδομένων weather forecasting καθώς και historical δεδομένων
24. Database Services / APIs UI
25. Data visualization Custom plugin
26. Data visualization Custom plugin
27. Data visualization Δεν φορτώνουμε άσκοπα libraries σε σελίδες που δεν χρειάζονται Φορτώνουμε Highcharts μόνο για συγκεκριμένο page template is_page_template() wp_enqueue_script() Custom plugin
28. Data visualization 1. Έχουν φορτωθεί τα libraries του chart (view code) 2. Έχει φορτωθεί το custom .js script που κάνει render το/τα σωστά charts ανάλογα με το/τα shortcodes της σελίδας Custom plugin
29. Data visualization 3. Έχει φορτωθεί το div element του shortcode (view code) Custom plugin
30. Data visualization
31. Data visualization
32. Data visualization
33. Shortcodes Data visualization
34. CHART DATA
35. Chart data Τα δεδομένα, στη συγκεκριμένη περίπτωση, ζουν σε ένα MSSQL Server
36. Database Services / APIs UI
37. Database Services / APIs UI AJAX JWT
38. Chart data 1. Έχουν φορτωθεί τα custom libraries για το συγκεκριμένο chart 2. Γίνεται η κλήση ajax 3. Τα δεδομένα που επιστρέφουν γίνονται bind στο chart 4. Γίνεται render το chart στη σελίδα
39. GUTENBERG
40. Gutenberg Columns Reusable blocks You name it...
41. Gutenberg Gutenberg / columns
42. Gutenberg Gutenberg / columns
43. Gutenberg Gutenberg / reusable blocks
44. ASSET MANAGEMENT
45. Asset management
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)
47. Asset management WP Rest API
48. Database Services / APIs UI AJAX CPT: Conventional Units WP REST API ACF Plugin Custom page template JWT
49. Asset management
50. Asset management Custom admin panel columns
51. Asset management Custom admin panel columns
52. Asset management 1. Απενεργοποιεί μονάδα στο UI 2. Αποστέλλεται μήνυμα σε RabbitMQ 3. Ο σταθμός κάνει consume το μήνυμα 4. Κλείνει την μονάδα Ενεργοποίηση/απενεργ. μονάδας Χειριστής προς Σταθμό
53. Asset management 1. π.χ. Ο Σταθμός της Χίου ενεργοποιεί τη μονάδα 2. Αποστέλλεται μήνυμα σε RabbitMQ 3. Η εφαρμογή μας κάνει consume το μήνυμα 4. Ενημερώνεται η WordPress βάση και ο MSSQL Ενεργοποίηση/απενεργ. μονάδας Σταθμός προς Χειριστή
54. Database Services / APIs UI AJAX CPT: Conventional Units WP REST API ACF Plugin Custom page template JWT Asset Management
55. USER MANAGEMENT
56. User/Access management User management plugin (Ultimate Member) Τα JWTs παράγονται από το plugin με λίγο custom κώδικα Μας προσφέρει features όπως roles Έτοιμες σελίδες Login, Logout, Sign up... Shortcodes
57. Database Services / APIs UI AJAX CPT: Conventional Units WP REST API ACF Plugin Custom page template JWT Asset Management User Management
58. LAST BUT NOT LEAST
59. Logging Reporting
60. Database Services / APIs UI AJAX CPT: Conventional Units WP REST API ACF Plugin Custom page template JWT Asset Management User Management Logging Reporting
61. SO…
62. Η ΕΦΑΡΜΟΓΗ ΗΤΑΝ ΕΤΟΙΜΗ...
63. ...σε 8 μέρες
64. ΣΑΣ ΕΥΧΑΡΙΣΤΩ! @gtekelis / george@georgetekelis.com