1 / 91

Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

Strategies for Building Mobile Apps Using ArcGIS API for JavaScript. Andy Gup, Lloyd Heberlie. Agenda. Mobile web has differences 5 Steps for building awesome mobile apps Bootstrap jQuery Mobile Geolocation Offline. Default Behavior. Default Behavior. Default Behavior.

albertg
Download Presentation

Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

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. Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie

  2. Agenda Mobile web has differences 5 Steps for building awesome mobile apps Bootstrap jQuery Mobile Geolocation Offline

  3. Default Behavior

  4. Default Behavior

  5. Default Behavior

  6. Apps specifically built for mobile

  7. Apps specifically built for mobile Field data collection Deploy to App Store, Google Play Citizen 411 Finder apps Offline maps

  8. Demo

  9. Touch-aware map

  10. esri/dijit/PopupMobile

  11. Custom basemap switcher

  12. Geolocation

  13. Mobile devices are different Physical device Screen size Button sizes

  14. User interactions are different Touch Orientation Onscreen keyboard Voice

  15. Design pattern are different Fits smaller screens Screen orientation can rotate Mobile popups and overlays Touch-based navigation

  16. Think mobile first! 320px

  17. Mobile in 5 Steps

  18. STEP 1 Get your data in order

  19. STEP 2 Sketch, mockup, UI design

  20. STEP 3 Choose web, hybrid or native

  21. STEP 4 Choose a UX framework Single page, multiple page?

  22. STEP 5 Iterate/Collaborate Build > Test > Repeat

  23. Step #1Get your data in order

  24. Get your data in order Develop a schema Design tables and relationships Clean the data Test, test, test

  25. Mobile ready data? Test query payload size Simplify polygons! Remove unneeded attributes Gzip-enabled web server

  26. Step #2Sketch, mockup, design

  27. Sketch, mockup, UI design

  28. Sketch, mockup, UI design Think mobile first Simplified menus Smaller map Map primary or secondary?

  29. Step #3Web, hybrid or native?

  30. Web, hybrid or native? Native = Objective C, Java or C# Compiled to run on device OS Accesses device directly via native API

  31. Web JavaScript, CSS skills Cross-browser, cross-device No special access needed to sensors No special storage needs

  32. Web Web = Browser-based only HTML, CSS, JavaScript Access device via browser APIs

  33. Hybrid Hybrid = Native Chrome-less browser plus HTML, CSS, JavaScript Example: PhoneGap/Cordova Compiled as a native application Accesses device via browser APIs & plug-ins

  34. Hybrid JavaScript, CSS skills Cross-browser, cross-device Some special access needed to sensors Some special storage needs App Store and/or Google Play

  35. Native Native = Objective C, Java or C# Compiled to run on device OS Accesses device directly via native API

  36. Native Objective C, Java and/or C# skills High-performance requirements Special access needed to sensors Special storage needs Offline related tables, domains and subtypes

  37. Native Better memory management Control over battery life App Store and/or Google Play

  38. Step #4Choose a UI framework

  39. Choose a UI framework Single view • Responsive design pattern Multiple views • Fixed layout design pattern

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

  41. Responsive Design Fluid Grid System CSS Media Queries HTML5, CSS & JavaScript

  42. Fluid Grid System Layout adapts to different screen sizes Based on percentages 12 column / 960px

  43. DemoBootstrap Fluid Grid

  44. CSS Media Queries Detect device screen size and orientation Apply CSS at specific break points Typical: 480px, 768px, 1024px, 1280px

  45. CSS Media Queries

  46. http://getbootstrap.com/css/

  47. Bootstrap Fluid Grid CSS <div class="col-xs-12 col-sm-8> Number of Columns Define Column Device Size

  48. Responsive Grid Layouts

  49. Large: 3 Rows - 3 Columns >= 1280px

More Related