WordPress, more than a CMS – Expand with REST - Νίκος Γιαννόπουλος

WordCamp Thessaloniki 2018

H παρουσίαση του έχει ως στόχο την ανάδειξη της δυναμικής του WordPress για γρήγορο, εύκολο prototyping νέων υπηρεσιών καθώς και την συνύπαρξη του με άλλα συστήματα σε ασυνήθιστες συνθήκες. Πιο συγκεκριμένα, θα μας αναλύσει γιατί το WP REST api είναι πολύ σημαντικό και πως μπορούμε να το εκμεταλλευτούμε και γιατί το WordPress σαν μέρος μιας υπηρεσίας αποτελεί σημαντική προσθήκη. Θα μας μιλήσει ακόμη για τα μειονεκτήματα και τα πλεονεκτήματα της χρήσης του WordPress για την ανάπτυξη υπηρεσιών, αναφέροντάς μας ακόμη μερικά no label παραδείγματα χρήσης του WordPress σε μη συνηθισμένες εργασίες.

His presentation aims to highlight the dynamics of WordPress for fast, easy prototyping of new services as well as coexistence with other systems in unusual conditions. More specifically, he will analyze why WP REST api is very important and how we can take advantage of it and why WordPress as part of a service is an important addition. He will also talk to us about the disadvantages and benefits of using WordPress to develop services, even mentioning some non-label examples of using WordPress in unusual tasks.

Transcript

1. Nikolaos T. Giannopoulos Product developer, Software engineer, UI/UX Konnect, Motivar, Wibee Corfu, Greece @gnnpls WordPress more than a CMS - Expand with Rest
2. WordPress for Offline Phonegap Hybrid Mobile Application with Geo Sniffing Custom solution No clue of REST API Discussion wrap up - use of REST API WordCamp Athens 12/2016
3. Create 3 different Brands, Corfu based 15+ team members 100+ client database worldwide Participate in game software Create property management software - PMS Handle 1500+ bookings over the last 6 months Hospitality Technology Innovation -London 2018 Evolving with REST
4. Information Architecture WordPress basics REST basics Use case 1: Online gaming platform Use case 2: WiFi Landing Pages Wrap up WordPress more than a CMS - Expand with Rest
5. Content Management System WordPress basics
6. Content WordPress basics
7. Content Post type = Human WordPress basics
8. Content Post type = Human Category = Genre WordPress basics
9. Content Post type = Human Category = Genre Metadata = weight / height WordPress basics
10. Content Post type = Human Category = Genre Metadata = weight / height Tags = tall, short, funny, strange WordPress basics
11. Content Post type = Human Category = Genre Metadata = weight / height Tags = tall, short, funny, strange Complete information architecture system WordPress basics
12. Management WordPress basics
13. Management Create/update content Trash/ untrash content Create/update/delete user Different user capabilities Frontend/ Backend WordPress basics
14. System WordPress basics
15. System Online administration Plugins’ marketplace Themes’ marketplace Security updates Web standard updates WordPress basics
16. Representational State Transfer Official release 4.4 (codename “Clifford”) 12/2015 API endpoints for WordPress data types Interact remotely by sending and receiving JSON JSON looks like Objects do in JavaScript Create, read and update WordPress client-side WP Rest basics
17. WP Rest basics - Example Link: WordPress.org/wp-json/
18. WP Rest basics - Example Settings - /wp/v2/settings Content - /wp/v2/posts Users - /wp/v2/users Media - /wp/v2/media Post types - /wp/v2/types (more) Link: WordPress.org/wp-json/
19. Extending the REST API with WP Creation of custom endpoints Routes for custom post types, custom taxonomies Modify responses WP Rest extend
20. Fully-featured application platform WP Rest extend
21. Fully-featured application platform Devs can access of WP’ native functions True backend for native mobile apps Use other languages than PHP IoT integration WP Rest extend
22. Overview September 2016, Corfu UK based client Christmas learning game for staff Transform flash version to html version Static solution - no need for dynamic content Defined as frontend project Use case 1: Web based game
23. Technologies used HTML5 SCSS, CSS jQuery Stage 1: Look and feel Like Scenario Body. Introduction text to the game the process of transforming the proceeds of crime and corruption into ostensibly legitimate assets. In a number of legal and regulatory systems, however, the term money laundering has become conflated with other forms sometimes used more generally to (involving things such as securities, digital currencies, credit cards, and traditional currency), including terrorism sanctions. Most anti-money laundering laws openly conflate money laundering (which is concerned with source of is concerned with destination of funds) Scenario image 12:30 <New player popup before 1st game> Take the Challenge! New Player You have a total of 5 tickets Each gameplay costs you 1 ticket x 5 Choose your avatar Play 1
24. Technologies used HTML5 SCSS, CSS jQuery Stage 1: Look and feel 999 Abcdeabcdeab 993 998 Abcdeabcdeab 994 997 Abcdeabcdeab 995 996 Abcdeabcdeab 996 995 Abcdeabcdeab 997 88 Abcdeabcdeab 998 8 Abcdeabcdeab 999 8 Abcdeabcdeab 999 Share! 12:30 <Leaderboards> Total Score High Score
25. Technologies used HTML5 SCSS, CSS jQuery JSON configuration Stage 1: Look and feel 999 Abcdeabcdeab 993 998 Abcdeabcdeab 994 997 Abcdeabcdeab 995 996 Abcdeabcdeab 996 995 Abcdeabcdeab 997 88 Abcdeabcdeab 998 8 Abcdeabcdeab 999 8 Abcdeabcdeab 999 Share! 12:30 <Leaderboards> Total Score High Score
26. Context storage in static JSON file Colors Texts Icons Images Parsed with jQuery Stage 1: JSON changed the plan 999 Abcdeabcdeab 993 998 Abcdeabcdeab 994 997 Abcdeabcdeab 995 996 Abcdeabcdeab 996 995 Abcdeabcdeab 997 88 Abcdeabcdeab 998 8 Abcdeabcdeab 999 8 Abcdeabcdeab 999 Share! 12:30 <Leaderboards> Total Score High Score
27. Stage 2: From static to dynamic Title Description Featured image Custom fields: Questions, true/false answer etc Register custom post type - Scenario Scenario 1 Question 1 Question 2
28. Stage 2: From static to dynamic Scenario images Scenario Heading Scenario Body. Money laundering is the process of transforming the proceeds of crime and corruption into ostensibly legitimate assets. In a number of legal and regulatory systems, however, the term money laundering has become and business crime, and is sometimes used more generally to include misuse such as securities, digital currencies, credit cards, and traditional currency), evasion of international sanctions. Pick a question 4 3 2 1 99999 12:30 <Scenario> Scenario 1 Question 1 Question 2
29. Stage 2: From static to dynamic Scenario images Scenario Heading Scenario Body. Money laundering is the process of transforming the proceeds of crime and corruption into ostensibly legitimate assets. In a number of legal and regulatory systems, however, the term money laundering has become and business crime, and is sometimes used more generally to include misuse such as securities, digital currencies, credit cards, and traditional currency), evasion of international sanctions. FALSE TRUE is a method of placement whereby cash is broken into smaller deposits of money. 4 3 2 1 99999 12:30 <Question> Scenario 1 Question 1 Question 2
30. Stage 2: From static to dynamic Custom fields: Scenario IDs, timer, point system, enable leaderboard, date period, enable analytics, public login, login type, change labels / icons Register custom post type - Game Game Scenario 2 Scenario 2
31. Stage 2: From static to dynamic 12:30 <Player Dashboard> Tickets spent 1/5 Test player "Player 1" Play again 1 28 My high score 32 Leader 26 My Score Answer 20 questions correctly 5/20 My Challenge 148 My total score 300 Leader See more stats Game Scenario 2 Scenario 2
32. Creating custom REST endpoints Get game information - Scenarios, settings Register/edit player information Update player progress depending gameplays Update analytics December 2016 Stage 3: Putting all together - v1
33. Change all URLs to https Add Google Analytics dashboard inside wp-admin Duplicate games/scenarios/etc Different capabilities for user roles Hide WordPress backend link Make texts multilingual Stage 4: Extend with WP plugins
34. Traction and new demands Create frontend analytics page Obscurify links - totally hide WP IDs Widgetize register form Create client entity Create departments Stage 5: Multiple installations
35. Stage 5: Clients Custom fields: Colours Texts Avatars Departments Users Register custom post type - Clients Client Department 1 Department 2
36. Stage 5: Clients 12:30 <Player Dashboard> Tickets spent 1/5 Test player "Player 1" Play again 1 28 My high score 32 Leader 26 My Score Answer 20 questions correctly 5/20 My Challenge 148 My total score 300 Leader See more stats Client Game 1 Game 2
37. Stage 5: Clients 12:30 <Player Dashboard> Tickets spent 1/5 Test player "Player 1" Play again 1 28 My high score 32 Leader 26 My Score Answer 20 questions correctly 5/20 My Challenge 148 My total score 300 Leader See more stats
38. Monitor and educate staff through online games Customizable product for businesses Increase brand awareness internally Personalization for end user Gamification for end user Easy administration for managers Easy administration for editors The result: Product wise
39. More than 25.000 users in less than 13 months More than 1.000.000 questions answered Used by 4 large enterprises in UK More than 100 scenarios created The result: Usage wise
40. The result: Usage wise
41. Overview May 2016, Corfu WiFi landing pages without user actions Alternative to captive portal Use case 2: Re-inventing the wheel
42. WiFi Guest Connect to the network Securely browse the web No need to check-in or perform social interactions Be aware of the host’s brand Stage 1: Define Why
43. WiFi Host Provide stable WiFi to guests Provide unlimited WiFi to staff Optimize network bandwidth Easy network administration Enhance brand awareness Connect with clients Stage 1: Define Why
44. IT Manager - Distributor Configure all installation from one place Knowledge of installation problem Keep log files online Added value to clients (businesses) Increase revenue Stage 1: Define Why
45. Vision: The product Administration Distributor Business Owner Business owner Distributor Different capabilities One administration B2B sales different user roles
46. Vision: The product SSID (Network name) change Password change Set up free usage time limit Landing page changes Redirect page change Software updates Device functions Frontend layout Router Administration Guest
47. Software download from administration Plug ‘n’ play device 2 different networks for guests and staff Remote control from administration Security pre-installed features Network stabilization pre-installed features Vision: The device setup
48. WordPress installation Custom post types Custom fields and terms Different role capabilities Subscriptions system monitoring Implementation: Administration
49. On load ajax call to administration Implementation: The connection - try 1
50. On load ajax call to administration Too slow responses Use of device browser - difficult debug Old devices and old mobile operating systems “Heavy load” to local network - big images Implementation: The connection - try 1
51. Store json data on router Implementation: The connection - try 2
52. Store json data on router Too slow responses Use of device browser - difficult debug Old devices and old mobile operating systems “Heavy load” to local network Problems with encoding Implementation: The connection - try 2
53. Go back to basics Implementation: The connection - try 3
54. Go back to basics Remove all libraries Use only Vanilla JavaScript Minify images Rename images (only numbers) Create the html in the backend Implementation: The connection - try 3
55. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
56. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
57. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
58. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
59. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
60. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
61. Create the html in the backend Create templates Split template to several php files Use of apply_filters for customization if needed Parse all CSS files in header Parse all JS files before </body> No external calls Implementation: The connection - try 3
63. Network connection Web browsing Brand awareness Easy administration Customization Personalization Remember products’ Why
64. One dedicated server for WP administration AWS for images to optimize delivery for routers External server for network stabilization Implementation: The devices
65. Machine to machine communication Implementation: The connection
66. Machine to machine communication Cron job to REST endpoint from Router to WP Check for updates Get the html files Get the system functions Get images from AWS if new Implementation: The connection
67. Add Google Analytics dashboard inside wp-admin Duplicate hotspots Different capabilities for user roles Hide WordPress backend link Make texts multilingual Plugin to minify images Plugin to rename images (only numbers) Integrations with Slack e-Shop & subscriptions automation Email marketing automation Implementation: Inside WP
68. 2 Continents Europe: Greece, UK Current state: Distributing
69. 2 Continents Europe: Greece, UK Asia: India Current state: Distributing
70. Drawbacks WP as a fully-featured application platform
71. Drawbacks Responsive administration problems Performance issues (low cost hosting) Security issues WP as a fully-featured application platform
72. Advantages WP as a fully-featured application platform
73. Advantages Flexible - Plugins Marketplace Developer friendly REST API available Huge knowledge database Integration ready WP as a fully-featured application platform
74. Tips for your next project / plugin
75. Check if exist Tips for your next project / plugin
76. Check if exist Check if exist again Tips for your next project / plugin
77. Check if exist Check if exist again Ask if exist! Tips for your next project / plugin
78. Check if exist Check if exist again Ask if exist! Check if you can combine tools Tips for your next project / plugin
79. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Tips for your next project / plugin
80. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Think all user roles Tips for your next project / plugin
81. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Think all user roles Make their why valuable! Tips for your next project / plugin
82. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Think all user roles Make their why valuable! Be part of a team Tips for your next project / plugin
83. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Think all user roles Make their why valuable! Be part of a team Work hard Tips for your next project / plugin
84. Check if exist Check if exist again Ask if exist! Check if you can combine tools Painkiller or a vitamin? Think all user roles Make their why valuable! Be part of a team Work hard Work hard Tips for your next project / plugin
85. Nikolaos T. Giannopoulos Product developer, Software engineer, UI/UX nikos@gnnpls.com | @gnnpls Konnect, Motivar, Wibee Corfu, Greece Thanks for your attention