1 / 36

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. Agenda. Intro to PhoneGap Esri PhoneGap Quickstart Putting it all together Native build environment Additional information. Why PhoneGap?.

gamba
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • Intro to PhoneGap • Esri PhoneGapQuickstart • 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 web server Source Control Code quality and verification

  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 look:Android 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@esri.com @agup Lloyd Heberlie JavaScript API Team lheberlie@esri.com @lheberlie

More Related