Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

Transcription

1 Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Kelly Hutchins, Lloyd Heberlie Esri UC 2014 Technical Workshop

2 Welcome Introductions Expectations Agenda

3 Why are we here?

4 Mobile resources in the API Kelly Hutchins

5 Mobile resources in the API

6 ArcGIS for Developers website Kelly Hutchins Esri UC 2014 Technical Workshop Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

7 Designing for mobile Lloyd Heberlie

8 Touch aware map

9 HTML 5 input types

10 Geocoder, HomeButton esri/dijit/geocoder esri/dijit/homebutton

11 Popup Mobile esri/dijit/popupmobile

12 Basemap Gallery esri/dijit/basemapgallery

13 Basemap Toggle esri/dijit/basemaptoggle

14 Custom components Custom basemap switcher

15 Designing for mobile Lloyd Heberlie Esri UC 2014 Technical Workshop Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

16 Productivity and code management Kelly Hutchins

17 Setup a developer machine Code quality and verification web server Source Control

18 Code formatting and management

19 Automation and continuous integration

20 Code validation JSLint JSHint

21 CSS preprocessors

22 Productivity and code management Lloyd Heberlie Esri UC 2014 Technical Workshop Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

23 Debugging and testing for mobile Kelly Hutchins

24 Emulators / Simulators Opera Mobile Emulator ios Simulator * Windows Phone Emulator * Android Emulator

25 Physical devices

26 Browser based testing

27 Remote debugging Safari Web Inspector Remote Google Chrome remote debugging Adobe Edge Inspect - Synchronized screen capture, device details - Node.js (weinre local) Web Inspector Remote (weinre)

28 Enable Safari remote web inspection

29 Safari remote debugging

30 Safari remote debugging

31 Chrome remote debugging

32 Chrome remote debugging

33 Adobe Edge Inspect

34 Adobe Edge Inspect

35 Adobe Edge Inspect device_model = iphone device_res = 1136x640 orientation = portrait os_name = ios os_version = pixel_density = 326 ppi device_model = LGE Nexus 5 device_res = 1080x1776 orientation = portrait os_name = Android os_version = pixel_density = 480 dpi device_model = ipad device_res = 1024x768 orientation = landscape os_name = ios os_version = pixel_density = 132 ppi

36 Debugging mobile Lloyd Heberlie Esri UC 2014 Technical Workshop Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

37 Optimizing for mobile Lloyd Heberlie

38 HTML manifest

39 HTML manifest on device

40 File compression and caching headers

41 Dealing with high density resolution

42 ios network simulation

43 Android network speed emulation command Option <speed> kilobits/sec emulator -netspeed <named value> emulator -netspeed <num> (both) emulator -netspeed <up>:<down> emulator -netspeed gsm emulator -netspeed emulator -netspeed 40.0

44 Other network simulation options Fiddler (Windows) Charles Network Debugging proxy Network Link Conditioner (Mac OS) Dummynet

45 Additional resources Esri resources Esri resource proxy

46 Thank you Please fill out the session survey: First Offering ID (Tuesday): 1255 Second Offering ID (Thursday): 1366 Online Paper pick up and put in drop box

47

48