develop offline hybrid mobile applications with wordrpess and phonegap
TRANSCRIPT
Design & DevelopmentLocated in Corfu
Co-FounderUX/UI
motivar.io
Information Architecture
Hybrid Application DevelopmentSync Content in Offline Application
Sync Analytics Data
Real Case Scenario
Scenario
Travel Guide
Travel Guide No Digital Content
Scenario
iOS / Android
Offline Application
CMS
CMS
DesignDevelop
CMS
DesignDevelop
Solutions
DesignDevelop
CMS
DesignDevelop
WordPress Admin
Simple Use of PostsContent in Categories
Image Gallery
keep in mind...
I don’t ask why patients lieI just assume they all do
Dr. House
so do editors!
Custom Fields
Strict Content RestrictionsUse of necessary fields
Input Guides
Display Errors
DesignDevelop
Team Facts
Native Experience == falseSpecialized Partners == false
Challenge Mode == true
so we searched...
Hybrid Application DevelopmentHybrid Application Development
Native Applications
Web Applications
Hybrid = Native + Web
Build
Build
Hybrid Frameworks
Ionichttp://ionicframework.com/
Onsen Uihttps://onsen.io/
Cordova / Phonegaphttps://cordova.apache.org/
Jquery Mobilehttps://jquerymobile.com/
Hybrid Frameworks
Ionichttp://ionicframework.com/
Onsen Uihttps://onsen.io/
Jquery Mobilehttps://jquerymobile.com/
Cordova / Phonegaphttps://cordova.apache.org/
Solutions
REST API
AdvantagesFrequent Updates
Use Cache to Save Data
DrawbacksNo Web no ContentBad Local network
Save Data on Device
AdvantagesOffline Access
Control over Content
DrawbacksNo Frequent Updates
Time Consuming Uploads
#drawbacks { transform: advantages; }
Launch VersionsExport Content to JSONExport Images to ZIPCreate Update Token
Export UI
Export JSON to SQLiteRegister Device on WPUse of Local StorageSync Update Tokens
SQLite Content
Corfu Summer News
Life@Corfu
iOS / AndroidCard DesignNewspaper
Search FunctionHamburger MenuNearest Articles
CategoriesSubcategoriesArticles Counter
SlideShowTitle & HeadlineContent
Calls to ActionCustom FieldsConsistency
GPS on demandGoogle MapsDirections Api
Code Layout
Performance First
Target more than 4000 DevicesLimit Queries to SQLiteCall Scripts on Demand
HTML5
Data Mapping
Libraries & ToolsJquery
https://jquery.com/
Velocity.jshttp://velocityjs.org/
Materialize.csshttp://materializecss.com/
FastClickhttps://github.com/ftlabs/fastclick
GapDebughttps://www.genuitec.com/products/gapdebug/
Done?
not yet!
The price of light is less than the cost of darkness
Arthur C. Nielsen
Analytics
Statistics
ContentGeo-LocationCall to Action
Solutions
Store AnalyticsGoogle Analytics SDK
Multiple SDKs
Project Status
Last Minute Delivery == trueOffline App Experience == false
Code Transformation Needed == true
Custom Solution
SQLite & Local StorageArticle & Call to ActionGeo Stats
Online ConnectionConfirm Device IDStore Analytics & Sweep
Device List
User Journey
User Journey
Various True Facts
3,000 total Downloads
23% Downloads before Trip
17% Asked for Directions
14% Converged
650% Profit Increase in 2 Years
Expand in Ionian Islands
Summary
Useful Links
Building a PhoneGap App with WordPresshttp://bit.ly/2eHI5vo
Creating a Mobile App for your WordPress Sitehttp://bit.ly/2eNpKeW
PhoneGap Tipshttp://bit.ly/2dSzjLX
Top 10 Performance Techniques for Hybrid Appshttp://bit.ly/2eCKmaz
remember..
not always works like a charm
but don’t worry
challenge == true && devotion == true && comfortZone == false { progress = true; }