Offline Hybrid Application with Wordpress

Nikolaos Giannopoulos@gnnpls

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; }

Thanks

Nikolaos Giannopoulosn.giannopoulos@motivar.io

@gnnpls