building native apps with arcgis api for javascript using phonegap and jquery

36
Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery Andy Gup, Lloyd Heberlie

Upload: gamba

Post on 20-Jan-2016

55 views

Category:

Documents


0 download

DESCRIPTION

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery. Andy Gup, Lloyd Heberlie. Agenda. Intro to PhoneGap Esri PhoneGap Quickstart Putting it all together Native build environment Additional information. Why PhoneGap?. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Andy Gup, Lloyd Heberlie

Page 2: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Agenda

Page 3: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Why PhoneGap?

Page 4: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Lloyd Heberlie

Basic PhoneGap app

Page 5: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

What is PhoneGap?

• Application container technology

• Core engine is 100% open source

• Web view container, plus JS API

• HTML5, CSS3, JS = Native App

PhoneGap

Page 6: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

PhoneGap architecture

PhoneGapPlugins

PhoneGap ApplicationCode

NativeApp

Page 7: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Setup a developer machine

Source Control

Code quality and verification

web server

Page 8: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Lloyd Heberlie

PhoneGap Quickstart

Page 9: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Debugging

Page 10: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Putting it all togetherPhoneGap, jQuery and ArcGIS API for

JavaScript

Andy Gup

Page 11: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Single Page view

Set up page structure

Apply CSS, roles and themes

https://github.com/Esri/quickstart-map-phonegap

https://github.com/Esri/jquery-mobile-map-js

Page 12: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Single Page Map - HTML

Page 13: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Single Page Map - HTML

Page 14: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Single Page Map - HTML

Page 15: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Single Page Map - CSS

Page 16: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Andy Gup

Single page app

Page 17: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Auto-recenter after orientation change

Page 18: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

jQuery Helper library

Recentering on device rotation

Multiple view mapping apps

var helper = new jQueryHelper(map);

https://github.com/Esri/jquery-mobile-map-js

Page 19: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Auto-recenter after orientation change

Page 20: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

A quick look:Android native build environment

Page 21: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

assets/www/

Page 22: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Host JS libs locally(if possible)

Page 23: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Set PhoneGap config.xml

Page 24: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Native wrapper

Page 25: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Andy Gup

Putting it all together

Page 26: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

GPS Best Practices - Android

Page 27: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

GPS Best Practices - Android

Page 28: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

GPS Best Practices - iOS

Page 29: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

GPS Best Practices – Windows Phone

Page 30: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Geolocation API – same as always!

Page 31: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Requirements for offline?

App usage in areas of intermittent or no internet

Ability to reload or restart app in areas of intermittent

or no connectivity

Lightweight cross-browser functionality

Github.com/esri/Offline-editor-js

Page 32: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Offline JS Use Cases

• Viewing simple maps

• Lighweight data collection- VGI- Simple editing

• Devices- laptop- smartphone / tablet

Page 33: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Need a full featured, robust offline solution?

ArcGIS Runtimes for iOS, Android, Qt and .NET!

Includes integrated support for offline editing and synchronization.

Also fully supports related tables, sub-types, domains and much more.

Page 34: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Offline Demo – trailyelper

Page 35: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Questions?

Andy GupDeveloper Evangelist [email protected]@agup

Lloyd HeberlieJavaScript API [email protected]@lheberlie

Page 36: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery