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
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
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/
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
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
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
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