strategies for building mobile apps using arcgis api for ... · agenda mobile web has differences 5...
TRANSCRIPT
![Page 1: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/1.jpg)
Strategies for Building Mobile Apps Using ArcGIS API for
JavaScript
Andy Gup, Lloyd Heberlie
![Page 2: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/2.jpg)
AgendaMobile web has differences5 Steps for building awesome mobile appsBootstrapjQuery MobileGeolocationOffline
![Page 3: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/3.jpg)
![Page 4: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/4.jpg)
Default Behavior
![Page 5: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/5.jpg)
Default Behavior
![Page 6: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/6.jpg)
Default Behavior
![Page 7: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/7.jpg)
Apps specifically built for mobile
![Page 8: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/8.jpg)
Apps specifically built for mobileField data collectionDeploy to App Store, Google PlayCitizen 411Finder appsOffline maps
![Page 9: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/9.jpg)
Demo
![Page 10: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/10.jpg)
Touch-aware map
![Page 11: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/11.jpg)
esri/dijit/PopupMobile
![Page 12: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/12.jpg)
Custom basemap switcher
![Page 13: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/13.jpg)
Geolocation
![Page 14: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/14.jpg)
Mobile devices are different
Physical device
Screen size
Button sizes
![Page 15: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/15.jpg)
User interactions are different
TouchOrientationOnscreen keyboardVoice
![Page 16: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/16.jpg)
Design pattern are different
Fits smaller screensScreen orientation can rotateMobile popups and overlaysTouch-based navigation
![Page 17: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/17.jpg)
Think mobile first!
320px
![Page 18: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/18.jpg)
Mobile in 5 Steps
![Page 19: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/19.jpg)
STEP 1
Get your data in order
![Page 20: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/20.jpg)
STEP 2
Sketch, mockup, UI design
![Page 21: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/21.jpg)
STEP 3
Choose web, hybrid or native
![Page 22: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/22.jpg)
STEP 4
Choose a UX frameworkSingle page, multiple page?
![Page 23: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/23.jpg)
STEP 5
Iterate/CollaborateBuild > Test > Repeat
![Page 24: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/24.jpg)
Step #1Get your data in order
![Page 25: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/25.jpg)
Get your data in order
Develop a schemaDesign tables and relationshipsClean the dataTest, test, test
![Page 26: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/26.jpg)
Mobile ready data?
Test query payload sizeSimplify polygons!Remove unneeded attributesGzip-enabled web server
![Page 27: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/27.jpg)
Step #2Sketch, mockup, design
![Page 28: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/28.jpg)
Sketch, mockup, UI design
![Page 29: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/29.jpg)
Sketch, mockup, UI design
Think mobile firstSimplified menusSmaller mapMap primary or secondary?
![Page 30: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/30.jpg)
Step #3Web, hybrid or native?
![Page 31: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/31.jpg)
Web, hybrid or native?
Native = Objective C, Java or C#
Compiled to run on device OSAccesses device directly via native API
![Page 32: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/32.jpg)
Web
JavaScript, CSS skillsCross-browser, cross-deviceNo special access needed to sensorsNo special storage needs
![Page 33: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/33.jpg)
Web
Web = Browser-based onlyHTML, CSS, JavaScript
Access device via browser APIs
![Page 34: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/34.jpg)
Hybrid
Hybrid = Native Chrome-less browser plusHTML, CSS, JavaScriptExample: PhoneGap/Cordova
Compiled as a native applicationAccesses device via browser APIs & plug-ins
![Page 35: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/35.jpg)
Hybrid
JavaScript, CSS skillsCross-browser, cross-deviceSome special access needed to sensorsSome special storage needsApp Store and/or Google Play
![Page 36: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/36.jpg)
Native
Native = Objective C, Java or C#
Compiled to run on device OSAccesses device directly via native API
![Page 37: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/37.jpg)
Native
Objective C, Java and/or C# skillsHigh-performance requirementsSpecial access needed to sensorsSpecial storage needsOffline related tables, domains and subtypes
![Page 38: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/38.jpg)
Native
Better memory managementControl over battery lifeApp Store and/or Google Play
![Page 39: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/39.jpg)
Step #4Choose a UI framework
![Page 40: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/40.jpg)
Choose a UI framework
Single view• Responsive design pattern
Multiple views• Fixed layout design pattern
![Page 41: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/41.jpg)
Responsive Design• Single web app that works well across a
variety of devices/screen sizes
• Re-use content and software
• Considers– Device limitations– User’s behavior
![Page 42: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/42.jpg)
1. Fluid Grid System2. CSS Media Queries3. HTML5, CSS & JavaScript
Responsive Design
![Page 43: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/43.jpg)
Fluid Grid System
• Layout adapts to different screen sizes
• Based on percentages• 12 column / 960px
![Page 45: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/45.jpg)
CSS Media Queries• Detect device screen size and orientation• Apply CSS at specific break points• Typical: 480px, 768px, 1024px, 1280px
![Page 46: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/46.jpg)
CSS Media Queries
![Page 48: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/48.jpg)
Bootstrap Fluid Grid CSS
<div class="col-xs-12 col-sm-8>
Define Column
Device Size
Number of Columns
![Page 49: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/49.jpg)
Responsive Grid Layouts
![Page 50: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/50.jpg)
Large: 3 Rows - 3 Columns
>= 1280px
![Page 51: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/51.jpg)
Medium: 2 Columns
1024 - 1280px
![Page 52: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/52.jpg)
Small: Single Column
768 - 1024px
![Page 53: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/53.jpg)
Extra Small: 1 Column, Minimized
=< 768px
![Page 54: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/54.jpg)
Responsive Application
![Page 55: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/55.jpg)
How-toBuild a responsive app
![Page 57: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/57.jpg)
Hello World
![Page 58: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/58.jpg)
Add package path
![Page 59: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/59.jpg)
Add jQuery & bootstrap.js
![Page 60: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/60.jpg)
Add JS API and BootstrapMap
![Page 61: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/61.jpg)
![Page 62: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/62.jpg)
How-toBuild a Multiple-view app
![Page 63: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/63.jpg)
Multiple-View Design• Framework for single page apps with
multiple views• Similar to native look, feel and
behavior• Cross-browser
![Page 64: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/64.jpg)
Desktop vs. Device
![Page 65: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/65.jpg)
Desktop vs. Device
![Page 66: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/66.jpg)
VIEW 1 VIEW 2
![Page 67: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/67.jpg)
<html>
<div data-role=“page” id=“page1”>
</div>
<div data-role=“page” id=“page2”>
</div>
</html>
One HTML page
Multiple Views
![Page 68: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/68.jpg)
![Page 69: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/69.jpg)
![Page 70: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/70.jpg)
Get jquery-mobile-map-js
https://github.com/Esri/jquery-mobile-map-js
![Page 71: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/71.jpg)
Add Some CSS
![Page 72: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/72.jpg)
Add a little more CSS
![Page 73: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/73.jpg)
Add 2 pages
![Page 74: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/74.jpg)
Add jQuery & bootstrap.js
![Page 75: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/75.jpg)
Add jQuery & ArcGIS JS API
![Page 76: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/76.jpg)
Add the map
![Page 77: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/77.jpg)
VIEW 1 VIEW 2
![Page 78: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/78.jpg)
Step #5Build > test > repeat
![Page 79: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/79.jpg)
Build > test > repeat
Optimize CSSConcatenate JS filesUse ArcGIS Web OptimizerMinify & gzip
![Page 80: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/80.jpg)
Geolocation
![Page 81: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/81.jpg)
GeolocationWorks online and offlineApproximate location Always requires user opt-in
![Page 82: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/82.jpg)
Offline JS
![Page 83: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/83.jpg)
Offline JSIntermittent or no internet
Ability to reload or restart app offline
Lightweight cross-browser functionality
Github.com/esri/Offline-editor-js
![Page 84: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/84.jpg)
Offline JSOffline tiled maps for small areas
Offline editing and basic attachments
Offline TPKs (Tile Packages)
Github.com/esri/Offline-editor-js
![Page 85: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/85.jpg)
Offline JSNeed a full features, robust offline solution?• ArcGIS Runtime SDKs• Integrated offline support for editing and sync• Support for related tables, domains, subtypes
and more.
![Page 86: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/86.jpg)
Wrap-upMobile web has differences5 Steps for building awesome mobile appsBootstrapjQuery MobileGeolocationOffline
![Page 87: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/87.jpg)
Resourcesgithub.com/lheberlie/mobile-webapps-js/blob/develop/Resources.mdgithub.com/lheberlie/phonegap-jquerym-js
![Page 88: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/88.jpg)
Related SessionsOptimizing your JavaScript App for PerformanceDemo Theater 7Wed. 4:30pm
![Page 90: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/90.jpg)
Thank you…
• Please fill out the session survey in your mobile app• Select Strategies for Building Mobile Apps Using ArcGIS
API for JavaScript in the Mobile App- Use the Search Feature to quickly find this title
• Click “Technical Workshop Survey”• Answer a few short questions and enter any comments
![Page 91: Strategies for Building Mobile Apps Using ArcGIS API for ... · Agenda Mobile web has differences 5 Steps for building awesome mobile apps. Bootstrap. jQuery Mobile. Geolocation](https://reader030.vdocument.in/reader030/viewer/2022011901/5f081d017e708231d4206742/html5/thumbnails/91.jpg)