ArcGIS API for JavaScript: Building Native Apps using ... API for JavaScript: Building Native Apps using PhoneGap and JQuery Author Esri Subject 2015 Esri International Developer Summit Presentation Keywords ArcGIS API for JavaScript: Building Native Apps using PhoneGap ...

  • Published on
    30-Apr-2018

  • View
    217

  • Download
    4

Embed Size (px)

Transcript

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

    Andy Gup, Lloyd Heberlie

  • Agenda

    Getting to know PhoneGap jQuery and jQuery mobile overview jQuery and ArcGIS API for JavaScript Putting it all together Additional information

  • Technical workshops at Dev Summit

    Web- Building Mobile Web Apps with the ArcGIS API for JavaScript

    Hybrid- You are here!

    Native- Search the agenda for Runtime SDK

  • Application comparison: Native vs. Web

    ArcGIS Runtime SDK for Android https://developers.arcgis.com/android/guide/native-vs-web.htm ArcGIS Runtime SDK for iOS https://developers.arcgis.com/ios/objective-c/guide/native-vs-web.htm

    https://developers.arcgis.com/android/guide/native-vs-web.htmhttps://developers.arcgis.com/ios/objective-c/guide/native-vs-web.htm

  • Lloyd Heberlie

    Hello Cordova and Resources

  • Enable Safari remote web inspection

  • What is PhoneGap?

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

    PhoneGap

  • PhoneGap architecture

    PhoneGapPlugins

    PhoneGap ApplicationCode

    NativeApp

  • PhoneGap Plugins

  • PhoneGap Plugin options

  • Setup a developer machine

    Source Control

    Code quality and verification

    web server

  • Preparing for PhoneGap

  • Installing PhoneGap and Apache Cordova

  • Check versions of PhoneGap and Apache Cordova

  • Updating PhoneGap and Apache Cordova

  • Creating your first PhoneGap CLI project

    phonegap create path/to/my-app "com.example.app" "My App"

  • Lloyd Heberlie

    Hello Cordova (cont.)

  • PhoneGap: Featured Apps

  • Featured Apps: Tripcase, Untappd

  • Agenda

    Getting to know PhoneGap

    jQuery and jQuery mobile overview jQuery and ArcGIS API for JavaScript Putting it all together Additional information

  • Theme roller

  • data-attributes

  • Selections and filtering

  • Events

  • Dynamic content

  • jQuery mobile page lifecycle

  • Application lifecycle

    phone OS nativeapplication

    Esrimap

    Esrimap

    layers

    3rd party +Esri JS

  • Lloyd Heberlie

    jQuery mobile lifecycle

  • LifeCycleApplication

    3rd Party JS

    Map

    Layers

    Phone OS

  • jQuery and ArcGIS API for JavaScriptAndy Gup

  • Jquery Mobile + ArcGIS

    Page-based approach versus responsiveSingle page map appMultiple page map app

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

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

  • Single Page view

    Page Structure

    Apply CSS, roles and themes

  • Viewport meta tag

  • Single Page Map - HTML

  • Single Page Map - HTML

  • Single Page Map - HTML

  • Single Page Map - CSS

  • Andy Gup

    Single page app

  • Multi Page View

    Set up additional pages

    Set up page navigation

    Additional CSS

  • Multi Page View

  • Multi Page View

  • Multi Page app Page 2 HTML

  • Multi Page app Page 2 HTML

  • Multi Page app Page 2 HTML

  • Multi Page app Page 2 HTML

  • Multi Page app Page 2 CSS

  • Andy Gup

    Multi-page map app

  • Page Transitions & Orientation Change

    Page and Orientation life cycle

    Map destruction and resizing

    Use jQueryHelper.js!https://github.com/Esri/quickstart-map-phonegaphttps://github.com/Esri/jquery-mobile-map-js

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

  • Page Transitions

    Page 1 Page 2

    ~250 ms

  • Events: leaving page

    pagebeforechangepagechangepagechangefailed

    http://api.jquerymobile.com/category/events/

    http://api.jquerymobile.com/category/events/

  • Events: entering page

    pagebeforeshow

    pageshow

    pagechangefailed

    http://api.jquerymobile.com/category/events/

    http://api.jquerymobile.com/category/events/

  • Page Transitions & Orientation Change

    Page 1 Page 2 Page 2

  • The following wont work in all use cases:

    map.reposition();map.resize();

  • Use Case - Recenter the map

  • jQuery Helper library

    Page rotation landscape/portraitAuto-recenteringMultiple views

    var helper = new jQueryHelper(map);

    https://github.com/Esri/jquery-mobile-map-jshttps://github.com/Esri/quickstart-map-phonegap

    https://github.com/Esri/jquery-mobile-map-jshttps://github.com/Esri/quickstart-map-phonegap

  • Auto-recenter after orientation change

  • Multiple page app Map Life CycleListen for helper-map-loaded event

  • Putting it all togetherPhoneGap + jQuery + ArcGIS

    Andy Gup

  • Andy Gup

    Quickstart-map-phonegap

  • JavaScript API Web Optimizer

    http://jso.arcgis.comCreates a single fileCDN hosted or downloadCustom modules

    Optimizer session Thurs 10am, Primrose B!- Optimizing your JavaScript app performance

    http://jso.arcgis.com

  • Andy Gup

    ArcGIS Web Optimizer

    jso.arcgis.com

  • Going Offline with JavaScript

    Mobile web map used in areas of intermittent or no internet

    Ability to reload or restart web map in areas of intermittent or no internet

    Lightweight cross-browser functionality

    Github.com/esri/Offline-editor-js (Experimental)

    https://github.com/Esri/offline-editor-js

  • Want a full feature, robus offline solution?

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

    Includes integrated support for offline editing and synchronization.

    Offline routing!

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

  • What does offline JavaScript mean?

    Take map tiles offlineStoring/syncing feature editsLimited storing/syncing attachmentsView TPKs

    These work in browser and with PhoneGap!

  • What does offline JavaScript mean?

    How much storage?- Limited by the browser!- Depends on device- How many browser tabs open- ~100MB to 500MB

    Runtimes can store much more data!

  • Offline Demos

  • Working with GPS

    Exact same Geolocation APISame coding pattern!

    May require geolocation plugin

  • $ plugman search geolocation

  • Does it use device GPS

    Yes!! but it depends.

    If GPS is enabledMay also use WiFi and cell triangulation

  • Working with GPS

  • Recap!

    Install Cordova command lineUse jQuery Mobile for AppStore/Google PlayOn github.com/esri > PhoneGap & jQueryWorks with GeolocationLimited offline tiles and feature support

  • Rate This Sessionwww.esri.com/RateMyDevSummitSession

  • Questions?

    Andy GupDeveloper Evangelist Teamagup@esri.com@agup

    Lloyd HeberlieJavaScript API Teamlheberlie@esri.com@lheberlie

    mailto:agup@esri.commailto:lheberlie@esri.com

  • Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuerySlide Number 2Technical workshops at Dev SummitApplication comparison: Native vs. WebHello Cordova and ResourcesEnable Safari remote web inspectionWhat is PhoneGap?PhoneGap architecturePhoneGap PluginsPhoneGap Plugin optionsSetup a developer machinePreparing for PhoneGapInstalling PhoneGap and Apache CordovaCheck versions of PhoneGap and Apache CordovaUpdating PhoneGap and Apache CordovaCreating your first PhoneGap CLI projectHello Cordova (cont.)PhoneGap: Featured AppsFeatured Apps: Tripcase, UntappdSlide Number 20 Theme rollerdata-attributesSelections and filteringEventsDynamic contentjQuery mobile page lifecycleApplication lifecyclejQuery mobile lifecycleLifeCyclejQuery and ArcGIS API for JavaScriptJquery Mobile + ArcGISSingle Page viewViewport meta tagSingle Page Map - HTMLSingle Page Map - HTMLSingle Page Map - HTMLSingle Page Map - CSSSingle page appMulti Page ViewMulti Page ViewMulti Page ViewMulti Page app Page 2 HTMLMulti Page app Page 2 HTMLMulti Page app Page 2 HTMLMulti Page app Page 2 HTMLMulti Page app Page 2 CSSMulti-page map appPage Transitions & Orientation ChangePage TransitionsEvents: leaving pageEvents: entering pagePage Transitions & Orientation ChangeSlide Number 54Slide Number 55Slide Number 56Use Case - Recenter the mapjQuery Helper libraryAuto-recenter after orientation changeMultiple page app Map Life CyclePutting it all togetherPhoneGap + jQuery + ArcGISQuickstart-map-phonegapJavaScript API Web OptimizerArcGIS Web OptimizerGoing Offline with JavaScript Want a full feature, robus offline solution? What does offline JavaScript mean?What does offline JavaScript mean?Offline DemosWorking with GPSSlide Number 71Does it use device GPSWorking with GPSRecap!Rate This SessionQuestions?Slide Number 78