85
Offline Hybrid Application with Wordpress Nikolaos Giannopoulos @gnnpls

Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Embed Size (px)

Citation preview

Page 1: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Offline Hybrid Application with Wordpress

Nikolaos Giannopoulos@gnnpls

Page 2: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Design & DevelopmentLocated in Corfu

Co-FounderUX/UI

motivar.io

Page 3: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Information Architecture

Hybrid Application DevelopmentSync Content in Offline Application

Sync Analytics Data

Page 4: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Real Case Scenario

Page 5: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Scenario

Travel Guide

Page 6: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Travel Guide No Digital Content

Scenario

Page 7: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

iOS / Android

Offline Application

Page 8: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 9: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

CMS

Page 10: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

CMS

DesignDevelop

Page 11: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

CMS

DesignDevelop

Page 12: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Solutions

Page 13: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

DesignDevelop

CMS

Page 14: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

DesignDevelop

Page 15: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

WordPress Admin

Simple Use of PostsContent in Categories

Image Gallery

Page 16: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

keep in mind...

Page 18: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

so do editors!

Page 19: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Custom Fields

Strict Content RestrictionsUse of necessary fields

Input Guides

Page 20: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Display Errors

Page 21: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

DesignDevelop

Page 22: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Team Facts

Native Experience == falseSpecialized Partners == false

Challenge Mode == true

Page 23: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

so we searched...

Page 24: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Hybrid Application DevelopmentHybrid Application Development

Page 25: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Native Applications

Page 26: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Web Applications

Page 27: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Hybrid = Native + Web

Page 28: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 29: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Build

Page 30: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Build

Page 31: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Hybrid Frameworks

Ionichttp://ionicframework.com/

Onsen Uihttps://onsen.io/

Cordova / Phonegaphttps://cordova.apache.org/

Jquery Mobilehttps://jquerymobile.com/

Page 32: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Hybrid Frameworks

Ionichttp://ionicframework.com/

Onsen Uihttps://onsen.io/

Jquery Mobilehttps://jquerymobile.com/

Cordova / Phonegaphttps://cordova.apache.org/

Page 33: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 34: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 35: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Solutions

Page 36: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

REST API

AdvantagesFrequent Updates

Use Cache to Save Data

DrawbacksNo Web no ContentBad Local network

Page 37: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Save Data on Device

AdvantagesOffline Access

Control over Content

DrawbacksNo Frequent Updates

Time Consuming Uploads

Page 38: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

#drawbacks { transform: advantages; }

Page 39: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Launch VersionsExport Content to JSONExport Images to ZIPCreate Update Token

Page 40: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Export UI

Page 41: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Export JSON to SQLiteRegister Device on WPUse of Local StorageSync Update Tokens

Page 42: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

SQLite Content

Page 43: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 44: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Corfu Summer News

Page 45: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Life@Corfu

Page 46: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

iOS / AndroidCard DesignNewspaper

Page 47: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Search FunctionHamburger MenuNearest Articles

Page 48: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

CategoriesSubcategoriesArticles Counter

Page 49: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

SlideShowTitle & HeadlineContent

Page 50: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Calls to ActionCustom FieldsConsistency

Page 51: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

GPS on demandGoogle MapsDirections Api

Page 52: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Code Layout

Page 53: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Performance First

Target more than 4000 DevicesLimit Queries to SQLiteCall Scripts on Demand

Page 54: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

HTML5

Page 55: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Data Mapping

Page 56: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Libraries & ToolsJquery

https://jquery.com/

Velocity.jshttp://velocityjs.org/

Materialize.csshttp://materializecss.com/

FastClickhttps://github.com/ftlabs/fastclick

GapDebughttps://www.genuitec.com/products/gapdebug/

Page 57: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Done?

Page 58: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

not yet!

Page 59: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

The price of light is less than the cost of darkness

Arthur C. Nielsen

Page 60: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Analytics

Page 61: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 62: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Statistics

ContentGeo-LocationCall to Action

Page 63: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Solutions

Store AnalyticsGoogle Analytics SDK

Multiple SDKs

Page 64: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Project Status

Last Minute Delivery == trueOffline App Experience == false

Code Transformation Needed == true

Page 65: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Custom Solution

Page 66: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

SQLite & Local StorageArticle & Call to ActionGeo Stats

Page 67: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Online ConnectionConfirm Device IDStore Analytics & Sweep

Page 68: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Device List

Page 69: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

User Journey

Page 70: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

User Journey

Page 71: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Various True Facts

Page 72: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

3,000 total Downloads

Page 73: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

23% Downloads before Trip

Page 74: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

17% Asked for Directions

Page 75: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

14% Converged

Page 76: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

650% Profit Increase in 2 Years

Page 77: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Expand in Ionian Islands

Page 78: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

Summary

Page 79: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap
Page 80: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

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

Page 81: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

remember..

Page 82: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

not always works like a charm

Page 83: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

but don’t worry

Page 84: Develop Offline Hybrid Mobile Applications with Wordrpess and Phonegap

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