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

Nikolaos Giannopoulos - Offline Hybrid Application with Wordpress - WordCamp Athens 2016

Nikolaos Giannopoulos - Offline Hybrid Application with Wordpress - WordCamp Athens 2016

WordPress Greek Community

November 19, 2016
Tweet

More Decks by WordPress Greek Community

Other Decks in Programming

Transcript

  1. Offline Hybrid Application
    with Wordpress
    Nikolaos Giannopoulos
    @gnnpls

    View full-size slide

  2. Design & Development
    Located in Corfu
    Co-Founder
    UX/UI
    motivar.io

    View full-size slide

  3. Information Architecture
    Hybrid Application Development
    Sync Content in Offline Application
    Sync Analytics Data

    View full-size slide

  4. Real Case Scenario

    View full-size slide

  5. Scenario
    Travel Guide

    View full-size slide

  6. Travel Guide No Digital Content
    Scenario

    View full-size slide

  7. iOS / Android
    Offline Application

    View full-size slide

  8. CMS
    Design
    Develop

    View full-size slide

  9. CMS
    Design
    Develop

    View full-size slide

  10. Design
    Develop
    CMS

    View full-size slide

  11. Design
    Develop

    View full-size slide

  12. WordPress Admin
    Simple Use of Posts
    Content in Categories
    Image Gallery

    View full-size slide

  13. keep in mind...

    View full-size slide

  14. I don’t ask why patients lie
    I just assume they all do
    Dr. House

    View full-size slide

  15. so do editors!

    View full-size slide

  16. Custom Fields
    Strict Content Restrictions
    Use of necessary fields
    Input Guides

    View full-size slide

  17. Display Errors

    View full-size slide

  18. Design
    Develop

    View full-size slide

  19. Team Facts
    Native Experience == false
    Specialized Partners == false
    Challenge Mode == true

    View full-size slide

  20. so we searched...

    View full-size slide

  21. Hybrid Application Development
    Hybrid Application Development

    View full-size slide

  22. Native Applications

    View full-size slide

  23. Web Applications

    View full-size slide

  24. Hybrid = Native + Web

    View full-size slide

  25. Hybrid Frameworks
    Ionic
    http://ionicframework.com/
    Onsen Ui
    https://onsen.io/
    Cordova / Phonegap
    https://cordova.apache.org/
    Jquery Mobile
    https://jquerymobile.com/

    View full-size slide

  26. Hybrid Frameworks
    Ionic
    http://ionicframework.com/
    Onsen Ui
    https://onsen.io/
    Jquery Mobile
    https://jquerymobile.com/
    Cordova / Phonegap
    https://cordova.apache.org/

    View full-size slide

  27. REST API
    Advantages
    Frequent Updates
    Use Cache to Save Data
    Drawbacks
    No Web no Content
    Bad Local network

    View full-size slide

  28. Save Data on Device
    Advantages
    Offline Access
    Control over Content
    Drawbacks
    No Frequent Updates
    Time Consuming Uploads

    View full-size slide

  29. #drawbacks
    {
    transform: advantages;
    }

    View full-size slide

  30. Launch Versions
    Export Content to JSON
    Export Images to ZIP
    Create Update Token

    View full-size slide

  31. Export JSON to SQLite
    Register Device on WP
    Use of Local Storage
    Sync Update Tokens

    View full-size slide

  32. SQLite Content

    View full-size slide

  33. Corfu Summer News

    View full-size slide

  34. iOS / Android
    Card Design
    Newspaper

    View full-size slide

  35. Search Function
    Hamburger Menu
    Nearest Articles

    View full-size slide

  36. Categories
    Subcategories
    Articles Counter

    View full-size slide

  37. SlideShow
    Title & Headline
    Content

    View full-size slide

  38. Calls to Action
    Custom Fields
    Consistency

    View full-size slide

  39. GPS on demand
    Google Maps
    Directions Api

    View full-size slide

  40. Performance First
    Target more than 4000 Devices
    Limit Queries to SQLite
    Call Scripts on Demand

    View full-size slide

  41. Data Mapping

    View full-size slide

  42. Libraries & Tools
    Jquery
    https://jquery.com/
    Velocity.js
    http://velocityjs.org/
    Materialize.css
    http://materializecss.com/
    FastClick
    https://github.com/ftlabs/fastclick
    GapDebug
    https://www.genuitec.com/products/gapdebug/

    View full-size slide

  43. The price of light is less than
    the cost of darkness
    Arthur C. Nielsen

    View full-size slide

  44. Statistics
    Content
    Geo-Location
    Call to Action

    View full-size slide

  45. Solutions
    Store Analytics
    Google Analytics SDK
    Multiple SDKs

    View full-size slide

  46. Project Status
    Last Minute Delivery == true
    Offline App Experience == false
    Code Transformation Needed == true

    View full-size slide

  47. Custom Solution

    View full-size slide

  48. SQLite & Local Storage
    Article & Call to Action
    Geo Stats

    View full-size slide

  49. Online Connection
    Confirm Device ID
    Store Analytics & Sweep

    View full-size slide

  50. User Journey

    View full-size slide

  51. User Journey

    View full-size slide

  52. Various True Facts

    View full-size slide

  53. 3,000 total Downloads

    View full-size slide

  54. 23% Downloads before Trip

    View full-size slide

  55. 17% Asked for Directions

    View full-size slide

  56. 14% Converged

    View full-size slide

  57. 650% Profit Increase
    in 2 Years

    View full-size slide

  58. Expand in Ionian Islands

    View full-size slide

  59. Useful Links
    Building a PhoneGap App with WordPress
    http://bit.ly/2eHI5vo
    Creating a Mobile App for your WordPress Site
    http://bit.ly/2eNpKeW
    PhoneGap Tips
    http://bit.ly/2dSzjLX
    Top 10 Performance Techniques for Hybrid Apps
    http://bit.ly/2eCKmaz

    View full-size slide

  60. not always works like a charm

    View full-size slide

  61. but don’t worry

    View full-size slide

  62. challenge == true
    && devotion == true
    && comfortZone == false
    {
    progress = true;
    }

    View full-size slide

  63. Thanks
    Nikolaos Giannopoulos
    [email protected]
    @gnnpls

    View full-size slide