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

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

• Andy Gup, Lloyd Heberlie

2
Agenda

• Intro to PhoneGap
• Esri PhoneGap Quickstart
• Putting it all together
• Native build environment
• Additional information

3
Why PhoneGap?

• Mobile cross-browser access to these and more
• SDCard
• Camera
• Accelerometer
• Contacts
• Battery status
• Ability to put JavaScript app in Google Play, App
  Store and Windows Phone Store

4
Basic PhoneGap app

• Lloyd Heberlie

5
What is PhoneGap?

• Application container technology
• Core engine is 100 open source
• Web view container, plus JS API
• HTML5, CSS3, JS Native App

PhoneGap
6
PhoneGap architecture
PhoneGap Plugins
PhoneGap
Application Code
Native App
7
Setup a developer machine
8
PhoneGap Quickstart

• Lloyd Heberlie

9
Debugging
10
Putting it all togetherPhoneGap, jQuery and
ArcGIS API for JavaScript

• Andy Gup

11
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

12
Single Page Map - HTML
13
Single Page Map - HTML
14
Single Page Map - HTML
15
Single Page Map - CSS
16
Single page app

• Andy Gup

17
Auto-recenter after orientation change
18
jQuery Helper library

• Recentering on device rotation
• Multiple view mapping apps
• var helper new jQueryHelper(map)
• https//github.com/Esri/jquery-mobile-map-js

19
Auto-recenter after orientation change
20
A quick lookAndroid native build environment
21
assets/www/
22
Host JS libs locally(if possible)
23
Set PhoneGap config.xml
24
Native wrapper
25
Putting it all together

• Andy Gup

26
GPS Best Practices - Android
27
GPS Best Practices - Android
28
GPS Best Practices - iOS
29
GPS Best Practices Windows Phone
30
Geolocation API same as always!
31
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

32
Offline JS Use Cases

• Viewing simple maps
• Lighweight data collection
• VGI
• Simple editing
• Devices
• laptop
• smartphone / tablet

33
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.

34
Offline Demo trailyelper
35
Questions?

• Andy Gup
• Developer Evangelist Team
• agup_at_esri.com
• _at_agup
• Lloyd Heberlie
• JavaScript API Team
• lheberlie_at_esri.com
• _at_lheberlie

36
(No Transcript)