Agenda Goal: You’ll get an A to Z mobile web primer Why build mobile map apps? 3 Approaches Frameworks CSS3 & HTML5 Hybrid...
Who are your presenters?   Antoon Uijtdehaag, Esri Nederland   Technical Consultant   Email: auijtdehaag@esri.nl   Twitter...
Who are you?
Why mobile?
Demo
Mobile usage stats for my website?Web Server logsWeb analytic tools
Sample web-site stats from esri.com
Your 3 Approaches                        Web app     1.                     +                    Native mobile app        ...
Many different screen sizes and pixel densities                            1920x1080
Wait…how do I pan and zoom the map??
Hmmm…how many map layers do I load?                     VS.       1 GB RAM                   16 GB RAM
How come my map loads so slooow?                        VS.     Mostly connected              Always connected
My survey crews use GPS heavily…                       VS.     Limited battery               Unlimited power
resources.arcgis.com      1440 x 900       480 x 800 hdpi
Mobile app – flip view port easily   Portrait                          Landscape
Desktop app on smartphone
ArcGIS API for JavaScript - Compact          http://esriurl.com/compactJS<script type="text/javascript"    src="http://ser...
Why use the compact library?         32 modules vs. 80 modules                    Size   Latency        Compact        Full
Many mobile frameworks, such as…The challenge
Mobile frameworks help with…           Views           Visual Components           Themes
Views        Image courtesy Dojo
Views<div id="mapView" dojoType="dojox.mobile.View“        style="width:100%;height:100%;">    <h1 dojoType="dojox.mobile....
Visual Components<div dojoType="dojox.charting.widget.Chart2D"     theme="dojox.charting.themes.Claro" id="viewsChart"    ...
Themes<!--Legend Dialog--><div data-role="dialog" id="legendDialog"  data-theme="f">  <div data-role="header">    <h1>Lege...
The view port
Setting the mobile view port<meta name="viewport" content="width=device-width,   initial-scale=1, maximum-scale=1, user-sc...
Setting the mobile view port                             Minimum view port<meta name="viewport" content="width=device-widt...
No viewport   With viewport
Map touch events               No Change!function init() {        var map = new esri.Map(...);        dojo.connect(map, "o...
Styling via resolution & rotation          CSS3 Media Queries
CSS3 Media QueriesTarget specific devices by screen width@media screen and (min-device-width:768px) and (max-device-width:...
Listen for device rotationvar supportsOrientationChange = "onorientationchange" in window,        orientationEvent =      ...
Responsive Frameworks…(partial list)                        The Boiler   Boostrap                       Less+             ...
DemoPutting it all together
Hybrid Web Apps   Wrap your app with native framework.   Deploy to multiple platforms!
Hybrid Web Apps
Hybrid Web Apps                  Direct access to:                  GPS                  Camera                  Storage  ...
Examples of Hybrid Web Apps        http://www.phonegap.com/app
build.phonegap.com
DemoPhonegap build
HTML5        HTML + CSS3 + JavaScript                                   HTML5 Logo by W3C
HTML5 APIs•   Several new APIs    -   Drag and drop API    -   FileSystem API(s)    -   Geolocation API    -   Web Storage...
Web Storage API•   5 MB limit vs. 4 KB per regular cookie•   Stores key/value pairs•   localStorage and sessionStorage// P...
Geolocation API•   Provides user’s approximate location•   Opt-in only!navigator.geolocation.getCurrentPosition(    zoomTo...
Geolocation API
Understanding browsers          !=         !=
caniuse.com
Feature detection patternuseLocalStorage = supports_local_storage();function supports_local_storage() {   try {     return...
Test on different devices
Antoon Uijtdehaag, Esri NederlandTechnisch Consultantauijtdehaag@esri.nl@esrinederlandAndy Gup, EsriTech Lead for Web APIs...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag
Upcoming SlideShare
Loading in …5
×

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

5,995 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,995
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
105
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Demographics app
  • http://www.esri.com/site/pdfs/visitorprofile_q3_2011.pdf
  • http://mobile.businessweek.com/articles/2012-09-13/the-4g-era-arrives-how-much-will-you-pay
  • Arcgis.com
  • Arcgis.comhttp://help.arcgis.com/en/webapi/javascript/arcgis/index.htmlhttp://help.arcgis.com/en/webapi/javascript/arcgis/mobile/index.html&lt;Ctrl&gt;+&lt;PageUp&gt;&lt;Ctrl&gt;+&lt;PageDown&gt;&lt;Crtl&gt;+&lt;Shift&gt;+M
  • http://esriurl.com/compactJSIf your are building Mobile Apps using the ArcGIS Api for Javascript. You can go for the compact build of the serverapi.This compact version of the JavaScript API was designed for building applications where slower internet speeds and network latency is an issue.For example, on a 3G mobile device, where you want the smallest possible download. This compact build is also a great option if you want to leverage a JavaScript toolkit other than Dojo.To use the compact build, add the following script tag to your application.
  • What are the primary differences between compact build and standard build.The compact build removes the dependency on the dijit namespace upon initial download, meaning that if you don&apos;t need the dojo dijits they won&apos;t be loaded. A side-effect of this is that a new info window and slider are provided.The compact build includes 32 of the commonly used modules (compared to 80 in the standard). If your application requires objects from modules not included in the compact build you will need to load them using dojo.require. For example, if you want to perform geoprocessing with the compact build you will need to add the following dojo.require statement to your application.dojo.require(&quot;esri.tasks.gp&quot;);These two features reduce the size of the build by 53 Kb gzipped. Less JavaScript code to execute means less work the browser has to do.
  • To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript frameworks you can take advantage of.Some common characteristics of JavaScript mobile web development frameworks:Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/http://www.sencha.com/http://jquerymobile.com/http://dojotoolkit.org/features/mobile
  • http://dojotoolkit.org/reference-guide/1.8/dojox/mobile.htmlhttp://docs.sencha.com/touch/2-0/#!/api
  • jQuery
  • Locks entire window. Focuses pinch zoom on components (e.g. map).Pinch zoom not available on Android 3+ until ArcGIS API for JavaScript v3.2
  • https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
  • Andy
  • http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
  • http://edn1.esri.com/jsdevstarter/device_sim/index.html
  • Let’s talk about building Hybrid Web App. You can wrap your Javascriptapp with a native framework. And deploy it to multiple platforms, like iOS, Android and Windows Phone.
  • You can do the same thing with iOSAntoon
  • http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/From the outside a hybrid app acts like a native app. Once build the app acts as native app and can be sold or given away in the various app stores.
  • http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/Big advantage of using a hybrid framework is that its enables you to access device specific features. Like the Camera or Gallery. Direct access to storage of even use notifications.
  • http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering/#s:1-linkedin-ipadhttp://www.mobilemarketer.com/cms/news/software-technology/13786.htmlOne of the frameworks out there is PhoneGap.PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.There are a lot of apps out there using this Hybrid technology. But recently facebook decided to redesign their apps and go native. Not an easy path to go.
  • Theres a cloud based solution for packaging your apps is called PhoneGap build.WithPhoneGap build, the packaging process can be done in the cloud.Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and they do the work of compiling for you.
  • http://edn1.esri.com/jsdevstarter/device_sim/index.html
  • Andy
  • Modernizr
  • Be careful when reusing desktop content on the mobile web
  • Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

    1. 1. Agenda Goal: You’ll get an A to Z mobile web primer Why build mobile map apps? 3 Approaches Frameworks CSS3 & HTML5 Hybrid Map apps
    2. 2. Who are your presenters? Antoon Uijtdehaag, Esri Nederland Technical Consultant Email: auijtdehaag@esri.nl Twitter @uijtdehaag Andy Gup, Esri Tech Lead for Web APIs and Android Esri Developer Network Email: agup@esri.com Twitter: @agup
    3. 3. Who are you?
    4. 4. Why mobile?
    5. 5. Demo
    6. 6. Mobile usage stats for my website?Web Server logsWeb analytic tools
    7. 7. Sample web-site stats from esri.com
    8. 8. Your 3 Approaches Web app 1. + Native mobile app Web app 2. + Web mobile app (a.k.a Hybrid) 3. Web app only (Responsive)
    9. 9. Many different screen sizes and pixel densities 1920x1080
    10. 10. Wait…how do I pan and zoom the map??
    11. 11. Hmmm…how many map layers do I load? VS. 1 GB RAM 16 GB RAM
    12. 12. How come my map loads so slooow? VS. Mostly connected Always connected
    13. 13. My survey crews use GPS heavily… VS. Limited battery Unlimited power
    14. 14. resources.arcgis.com 1440 x 900 480 x 800 hdpi
    15. 15. Mobile app – flip view port easily Portrait Landscape
    16. 16. Desktop app on smartphone
    17. 17. ArcGIS API for JavaScript - Compact http://esriurl.com/compactJS<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact">
    18. 18. Why use the compact library? 32 modules vs. 80 modules Size Latency Compact Full
    19. 19. Many mobile frameworks, such as…The challenge
    20. 20. Mobile frameworks help with… Views Visual Components Themes
    21. 21. Views Image courtesy Dojo
    22. 22. Views<div id="mapView" dojoType="dojox.mobile.View“ style="width:100%;height:100%;"> <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="mainView"> 5 + 10 minute Drive Times </h1> <div id="map“ style="width:100%; height:100%;“/></div>
    23. 23. Visual Components<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;"> <!-- Pie Chart: add the plot --> <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div> <!-- pieData is the data source --> <div class="series" name="Last Weeks Visits" array="chartData"> </div></div>
    24. 24. Themes<!--Legend Dialog--><div data-role="dialog" id="legendDialog" data-theme="f"> <div data-role="header"> <h1>Legend</h1> </div> <div data-role="content" > <div id="legendDiv"></div> </div></div>
    25. 25. The view port
    26. 26. Setting the mobile view port<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    27. 27. Setting the mobile view port Minimum view port<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>Zoom level on page load Force map to scale - not the page
    28. 28. No viewport With viewport
    29. 29. Map touch events No Change!function init() { var map = new esri.Map(...); dojo.connect(map, "onClick", myClickHandler);}
    30. 30. Styling via resolution & rotation CSS3 Media Queries
    31. 31. CSS3 Media QueriesTarget specific devices by screen width@media screen and (min-device-width:768px) and (max-device-width:1024px) {/* styles go here */}Apply styles by device orientation@media (orientation: landscape) {/* styles go here */}Target high density screens such as iPhone 4@media (-webkit-min-device-pixel-ratio: 2) {/* high resolution device styles go here */}
    32. 32. Listen for device rotationvar supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, dojo.hitch(this,function(){ //... TODO this.orientationChanged = orientationChanged; }), false );
    33. 33. Responsive Frameworks…(partial list) The Boiler Boostrap Less+ Wirefy Foundation 3 Titan Susy Skeleton IngridLess Framework 4 jQuery
    34. 34. DemoPutting it all together
    35. 35. Hybrid Web Apps Wrap your app with native framework. Deploy to multiple platforms!
    36. 36. Hybrid Web Apps
    37. 37. Hybrid Web Apps Direct access to: GPS Camera Storage Notification
    38. 38. Examples of Hybrid Web Apps http://www.phonegap.com/app
    39. 39. build.phonegap.com
    40. 40. DemoPhonegap build
    41. 41. HTML5 HTML + CSS3 + JavaScript HTML5 Logo by W3C
    42. 42. HTML5 APIs• Several new APIs - Drag and drop API - FileSystem API(s) - Geolocation API - Web Storage: localStorage/sessionStorage - Web Workers (threaded JavaScript!) - Cross-Origin Resource Sharing (CORS) - Browser History
    43. 43. Web Storage API• 5 MB limit vs. 4 KB per regular cookie• Stores key/value pairs• localStorage and sessionStorage// Put the object into storagelocalStorage.setItem(“address”, someAddress);// Retrieve the object from storagevar userAddress = localStorage.getItem(“address”);// Save data to a the current sessions storesessionStorage.setItem("username", "John");// Access some stored datavar userName = sessionStorage.getItem("username"));
    44. 44. Geolocation API• Provides user’s approximate location• Opt-in only!navigator.geolocation.getCurrentPosition( zoomToLocation, locationError);watchId = navigator.geolocation.watchPosition( updateLocation, locationError);
    45. 45. Geolocation API
    46. 46. Understanding browsers != !=
    47. 47. caniuse.com
    48. 48. Feature detection patternuseLocalStorage = supports_local_storage();function supports_local_storage() { try { return localStorage in window && window[localStorage] !== null; } catch( e ){ return false; }}function doSomething() { if(useLocalStorage == true){ //write to local storage } else { //degrade gracefully }}
    49. 49. Test on different devices
    50. 50. Antoon Uijtdehaag, Esri NederlandTechnisch Consultantauijtdehaag@esri.nl@esrinederlandAndy Gup, EsriTech Lead for Web APIs and AndroidEsri Developer Networkagup@esri.comhttp://blog.andygup.net@agup

    ×