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

Transcript

1. Offline Hybrid Application
   with Wordpress
   Nikolaos Giannopoulos
   @gnnpls
   

   View Slide

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

   View Slide

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

   View Slide

4. Real Case Scenario
   

   View Slide

5. Scenario
   Travel Guide
   

   View Slide

6. Travel Guide No Digital Content
   Scenario
   

   View Slide

7. iOS / Android
   Offline Application
   

   View Slide

8. View Slide

9. CMS
   

   View Slide

10. CMS
    Design
    Develop
    

    View Slide

11. CMS
    Design
    Develop
    

    View Slide

12. Solutions
    

    View Slide

13. Design
    Develop
    CMS
    

    View Slide

14. Design
    Develop
    

    View Slide

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

    View Slide

16. keep in mind...
    

    View Slide

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

    View Slide

18. so do editors!
    

    View Slide

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

    View Slide

20. Display Errors
    

    View Slide

21. Design
    Develop
    

    View Slide

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

    View Slide

23. so we searched...
    

    View Slide

24. Hybrid Application Development
    Hybrid Application Development
    

    View Slide

25. Native Applications
    

    View Slide

26. Web Applications
    

    View Slide

27. Hybrid = Native + Web
    

    View Slide

28. View Slide

29. Build
    

    View Slide

30. Build
    

    View Slide

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

    View Slide

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

    View Slide

33. View Slide

34. View Slide

35. Solutions
    

    View Slide

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

    View Slide

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

    View Slide

38. #drawbacks
    {
    transform: advantages;
    }
    

    View Slide

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

    View Slide

40. Export UI
    

    View Slide

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

    View Slide

42. SQLite Content
    

    View Slide

43. View Slide

44. Corfu Summer News
    

    View Slide

45. Life@Corfu
    

    View Slide

46. iOS / Android
    Card Design
    Newspaper
    

    View Slide

47. Search Function
    Hamburger Menu
    Nearest Articles
    

    View Slide

48. Categories
    Subcategories
    Articles Counter
    

    View Slide

49. SlideShow
    Title & Headline
    Content
    

    View Slide

50. Calls to Action
    Custom Fields
    Consistency
    

    View Slide

51. GPS on demand
    Google Maps
    Directions Api
    

    View Slide

52. Code Layout
    

    View Slide

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

    View Slide

54. HTML5
    

    View Slide

55. Data Mapping
    

    View Slide

56. 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 Slide

57. Done?
    

    View Slide

58. not yet!
    

    View Slide

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

    View Slide

60. Analytics
    

    View Slide

61. View Slide

62. Statistics
    Content
    Geo-Location
    Call to Action
    

    View Slide

63. Solutions
    Store Analytics
    Google Analytics SDK
    Multiple SDKs
    

    View Slide

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

    View Slide

65. Custom Solution
    

    View Slide

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

    View Slide

67. Online Connection
    Confirm Device ID
    Store Analytics & Sweep
    

    View Slide

68. Device List
    

    View Slide

69. User Journey
    

    View Slide

70. User Journey
    

    View Slide

71. Various True Facts
    

    View Slide

72. 3,000 total Downloads
    

    View Slide

73. 23% Downloads before Trip
    

    View Slide

74. 17% Asked for Directions
    

    View Slide

75. 14% Converged
    

    View Slide

76. 650% Profit Increase
    in 2 Years
    

    View Slide

77. Expand in Ionian Islands
    

    View Slide

78. Summary
    

    View Slide

79. View Slide

80. 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 Slide

81. remember..
    

    View Slide

82. not always works like a charm
    

    View Slide

83. but don’t worry
    

    View Slide

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

    View Slide

85. Thanks
    Nikolaos Giannopoulos
    n.giannopoulos@motivar.io
    @gnnpls
    

    View Slide