Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

December 15, 2018
Tweet

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
  62. None
  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