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

Transcript

1. Offline Hybrid Application with Wordpress Nikolaos Giannopoulos @gnnpls

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

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

   Sync Analytics Data

4. Real Case Scenario

5. Scenario Travel Guide

6. Travel Guide No Digital Content Scenario

7. iOS / Android Offline Application

8. None

9. CMS

10. CMS Design Develop

11. CMS Design Develop

12. Solutions

13. Design Develop CMS

14. Design Develop

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

    Gallery

16. keep in mind...

17. I don’t ask why patients lie I just assume they

    all do Dr. House

18. so do editors!

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

    Guides

20. Display Errors

21. Design Develop

22. Team Facts Native Experience == false Specialized Partners == false

    Challenge Mode == true

23. so we searched...

24. Hybrid Application Development Hybrid Application Development

25. Native Applications

26. Web Applications

27. Hybrid = Native + Web

28. None

29. Build

30. Build

31. Hybrid Frameworks Ionic http://ionicframework.com/ Onsen Ui https://onsen.io/ Cordova / Phonegap

    https://cordova.apache.org/ Jquery Mobile https://jquerymobile.com/

32. Hybrid Frameworks Ionic http://ionicframework.com/ Onsen Ui https://onsen.io/ Jquery Mobile https://jquerymobile.com/

    Cordova / Phonegap https://cordova.apache.org/
33. None
34. None

35. Solutions

36. REST API Advantages Frequent Updates Use Cache to Save Data

    Drawbacks No Web no Content Bad Local network

37. Save Data on Device Advantages Offline Access Control over Content

    Drawbacks No Frequent Updates Time Consuming Uploads

38. #drawbacks { transform: advantages; }

39. Launch Versions Export Content to JSON Export Images to ZIP

    Create Update Token

40. Export UI

41. Export JSON to SQLite Register Device on WP Use of

    Local Storage Sync Update Tokens

42. SQLite Content

43. None

44. Corfu Summer News

45. Life@Corfu

46. iOS / Android Card Design Newspaper

47. Search Function Hamburger Menu Nearest Articles

48. Categories Subcategories Articles Counter

49. SlideShow Title & Headline Content

50. Calls to Action Custom Fields Consistency

51. GPS on demand Google Maps Directions Api

52. Code Layout

53. Performance First Target more than 4000 Devices Limit Queries to

    SQLite Call Scripts on Demand

54. HTML5

55. Data Mapping

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/

57. Done?

58. not yet!

59. The price of light is less than the cost of

    darkness Arthur C. Nielsen

60. Analytics

61. None

62. Statistics Content Geo-Location Call to Action

63. Solutions Store Analytics Google Analytics SDK Multiple SDKs

64. Project Status Last Minute Delivery == true Offline App Experience

    == false Code Transformation Needed == true

65. Custom Solution

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

    Stats

67. Online Connection Confirm Device ID Store Analytics & Sweep

68. Device List

69. User Journey

70. User Journey

71. Various True Facts

72. 3,000 total Downloads

73. 23% Downloads before Trip

74. 17% Asked for Directions

75. 14% Converged

76. 650% Profit Increase in 2 Years

77. Expand in Ionian Islands

78. Summary

79. None

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

81. remember..

82. not always works like a charm

83. but don’t worry

84. challenge == true && devotion == true && comfortZone ==

    false { progress = true; }

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