Mobile GIS DevelopmentRichland CountyElla LiProduct Manager, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS De...
• Introduction• Native Mobile App vs. Mobile Web App• Mobile App Development Languages• Comparison of the Mobile App Devel...
Richland CountyNative Mobile App vs. Mobile Web AppApp StoresInstallation / UpdateEasy to access device features(GPS, Came...
Mobile App Development PlatformsObjective C: iOS (iPad, iPhone)Java: AndroidC#: Windows Phone, Windows 8 TabletFlex Mobile...
PhoneGap – Apache Cordova• iOS• Android• Blackberry• Symbian• WebOS• Windows 8• Windows Phone 8/7• Bada• TizenRichland Cou...
Comparison of Mobile Dev. LanguagesObjective C: iOS (iPad, iPhone)Java: AndroidC#: Windows PhoneWindows 8 TabletWindows 8 ...
Flex vs. HTML5Perception is low right nowFlex  Flash, AIR, ipa, apkNo mobile browserYes Windows 8 pro tabletYes Desktop b...
Mobile App Access Device FeaturesPhoneGap Supported Features:Richland County Introduction
Mobile App Access Device FeaturesPhoneGap: GeoLocationRichland County Introduction
Mobile App Access Device FeaturesPhoneGap: CameraRichland County Introduction
Mobile App Access Device FeaturesFlex ActionScript Native Extension (ANE) :• code that executes outside the AIR runtime• E...
Richland CountyMobile GIS DevelopmentRichland CountyArcGIS Runtime SDKFor iOSFor AndroidFor Windows PhoneFlex Mobile and A...
ArcGIS API for FlexRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Flash Builder: Creating a New Flex ProjectRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for FlexFlex Project: Web or Desktop
Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for FlexFlex Mobile Project: Android, iOS, BlackBerry Tablet OS
Flex MobileRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Flex Mobile View StructureRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Flex Mobile ViewRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
include the agslib swc libraryin the build pathRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex• Download...
Overlay custom Control on top of <esri:Map>Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Mobile App Data Storage: SQLite• A complete SQL database with multipletables, indices, triggers, and views, is contained i...
Mobile App Data Storage: SQLite• A standard database in Adobe AIR• Internally within Adobe Reader• Apple adopted it as an ...
Mobile App Data Storage: SQLiteRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Mobile App Data Storage: SQLiteSQLConnectionRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Mobile App Data Storage: SQLiteAsync Execute SQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Mobile App Data Storage: SQLiteSyn Execute SQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Mobile App Data Storage: SQLiteSQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
Getting Started With Android Dev• Eclipse IDE (Helios+)• ADT plugin• Android SDK (Java)• Android NDK (C)• ArcGIS Runtime S...
Android Basics• Application Component is a point throughwhich the system can enter your application• Components are declar...
Android Application Components• Activities: Single screen with UI• Services: Component that runs in thebackground – No UI•...
Activities• Your application will consist of loosely coupledactivities that interact. Specify “main” activity• Each time n...
Android Activity LifecycleRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
Creating Activities• public class ExampleActivity extends Activity• onCreate()– You must implement this method. Within you...
User Interface• User interface for an activity is provided by ahierarchy of views• Android provides a number of ready-made...
LayoutsRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
UI Design ComponentsSpinnersTabsSingle line and multi lineRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, ...
MenusOptions MenuAction BarFloating contextmenu, Contextualaction menu –appear when userperforms long presson a ViewRichla...
ArcGIS Runtime SDK for Android• Maps and Layers– Native dynamic and cached map services support– Local caches on SDCARD al...
ArcGIS Layer TypesRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
Graphics LayerGraphics layers allow you to dynamically display graphics on a Map usingsymbols and RenderersRichland County...
Analysis: TasksTasks are wrappers around operations supported by ArcGISServer REST web services. Tasks take care of asynch...
Mobile UI Frameworks: Javascript• jQuery Mobile• Sencha• Dojo Mobile• Windows Store AppsRichland CountyMobile GIS Dev.: HT...
Javascript GIS APIs• Google Maps API• Bing Maps• ESRI Javascript API• OpenLayers• Leaflet• geoEXTRichland CountyMobile GIS...
ESRI Javascript APIRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
ESRI Javascript APIRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
Richland CountyResponsive Web DesignRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
•In your CSS:•@media screen and (min-width: 480px) {• .content { float: left; }• .social_icons { display: none }• // and s...
Responsive Web Boilerplate•HTML5 Boilerplate•Twitter Bootstrap•960gs, Adapt.js•320 and up - Mobile First•Gridless•Skeleton...
Richland CountyLive DemosRichland County
Thank You! & Questions?Richland CountyElla LiPresident, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS Develop...
Upcoming SlideShare
Loading in...5
×

Scarc2013 mobile

182

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Scarc2013 mobile"

  1. 1. Mobile GIS DevelopmentRichland CountyElla LiProduct Manager, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS Developer, Richland Countynarayanu@rcgov.us
  2. 2. • Introduction• Native Mobile App vs. Mobile Web App• Mobile App Development Languages• Comparison of the Mobile App Development Languages• Mobile App Access Device Features• Mobile GIS Development Frameworks• Flex Mobile and ESRI Flex API• ArcGIS Runtime SDK for iOS, Android and Windows Phone• HTML5 and ArcGIS JavaScript API• Live DemosRichland CountyOutlineRichland County
  3. 3. Richland CountyNative Mobile App vs. Mobile Web AppApp StoresInstallation / UpdateEasy to access device features(GPS, Camera, Recorder,Network Card, etc.)Objective C, Java, Flex, Html5, etc.Better User Experience(fast and polished)URL, Mobile BrowserNo InstallationW3C Device API Working GroupQualComm HTML5 Device API(Snapdragon, WebKit-based browsers)HTML5More and more mobile web appsIntroduction
  4. 4. Mobile App Development PlatformsObjective C: iOS (iPad, iPhone)Java: AndroidC#: Windows Phone, Windows 8 TabletFlex Mobile: iOS, Android, Blackberry PlaybookHTML5: HTML, CSS, JavaScriptNew elements: Canvas, Media, Forms, StructureWeb Worker: javascript running in the backgroundjQuery Mobile, Sencha Mobile, Dojo MobileNative Mobile Apps (PhoneGap) and Web Mobile AppsRichland County Introduction
  5. 5. PhoneGap – Apache Cordova• iOS• Android• Blackberry• Symbian• WebOS• Windows 8• Windows Phone 8/7• Bada• TizenRichland County Introduction
  6. 6. Comparison of Mobile Dev. LanguagesObjective C: iOS (iPad, iPhone)Java: AndroidC#: Windows PhoneWindows 8 TabletWindows 8 SDKFlex:HTML5:Support Single Mobile Operating System• Single Mobile Operating System• Better User Experience• Good for Products target at public users• Different languages on differentoperating systemsMultiple mobile operating system• Same languages on Multiple Mobile Operating System• Additional effort to Access mobile device featuresRichland County Introduction
  7. 7. Flex vs. HTML5Perception is low right nowFlex  Flash, AIR, ipa, apkNo mobile browserYes Windows 8 pro tabletYes Desktop browsersYes Native Mobile AppiOS, Android and Blackberry PlaybookStructured LanguageRobust platform for enterprise RIA developmentFlash Builder is an excellent IDEDoesn’t have to use Flash BuilderMost stable RIA solution available for the momentHTML5 is the silver-bullet for everythingKing for apps on the mobile browserPhoneGap, Native Apps on most mobileoperating systemsUnstructured LanguageLonger development time: 3 timesNot fully supported on all browsersBiggest nightmare: cross-browser issue30% of the project timeIDE not very goodTime for developers to investknowledge and practices in HTML5Richland County Introduction
  8. 8. Mobile App Access Device FeaturesPhoneGap Supported Features:Richland County Introduction
  9. 9. Mobile App Access Device FeaturesPhoneGap: GeoLocationRichland County Introduction
  10. 10. Mobile App Access Device FeaturesPhoneGap: CameraRichland County Introduction
  11. 11. Mobile App Access Device FeaturesFlex ActionScript Native Extension (ANE) :• code that executes outside the AIR runtime• Extensions are specific to a devices hardware platform• Android devices running Android 2.2 or a later version• iOS devices running iOS 4.0 or a later version• Many Free ANEs onlineRichland County Introduction
  12. 12. Richland CountyMobile GIS DevelopmentRichland CountyArcGIS Runtime SDKFor iOSFor AndroidFor Windows PhoneFlex Mobile and ArcGIS Flex API:HTML5 and ArcGIS JavaScript API
  13. 13. ArcGIS API for FlexRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  14. 14. Flash Builder: Creating a New Flex ProjectRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  15. 15. Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for FlexFlex Project: Web or Desktop
  16. 16. Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for FlexFlex Mobile Project: Android, iOS, BlackBerry Tablet OS
  17. 17. Flex MobileRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  18. 18. Flex Mobile View StructureRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  19. 19. Flex Mobile ViewRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  20. 20. include the agslib swc libraryin the build pathRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex• Download the latest agslib.swc from ESRI• Add SWC in Flex Build Path• Import the library in fx:Script
  21. 21. Overlay custom Control on top of <esri:Map>Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  22. 22. Mobile App Data Storage: SQLite• A complete SQL database with multipletables, indices, triggers, and views, is contained in a single diskfile• Sponsors: Bloomberg, Mozilla, Adobe, Oracle, Bentley• Small, Fast, Reliable, Cross-Platform• A popular choice as embedded database for local/client storageon both desktop and mobile operating system• Windows Phone• iOS (iPad, iPhone)• Android• BlackBerry• Symbian• Maemo• MeeGo• WebOS• NetBSDRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  23. 23. Mobile App Data Storage: SQLite• A standard database in Adobe AIR• Internally within Adobe Reader• Apple adopted it as an option in OS X’s Core Data API sinceMac OS X 10.4• Administration of videos and songs on the iPhone• Skype is on top of SQLite• Many More ……Richland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  24. 24. Mobile App Data Storage: SQLiteRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  25. 25. Mobile App Data Storage: SQLiteSQLConnectionRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  26. 26. Mobile App Data Storage: SQLiteAsync Execute SQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  27. 27. Mobile App Data Storage: SQLiteSyn Execute SQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  28. 28. Mobile App Data Storage: SQLiteSQL StatementsRichland CountyMobile GIS Dev.: Flex Mobile & ArcGIS API for Flex
  29. 29. Getting Started With Android Dev• Eclipse IDE (Helios+)• ADT plugin• Android SDK (Java)• Android NDK (C)• ArcGIS Runtime SDK for AndroidRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  30. 30. Android Basics• Application Component is a point throughwhich the system can enter your application• Components are declared in the Manifest file• Resources are separate from application codefor optimization on various device configsRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  31. 31. Android Application Components• Activities: Single screen with UI• Services: Component that runs in thebackground – No UI• Content providers: Component to manageaccess to structured data (file system, sqllite)• Broadcast receivers: Component thatresponds to system wide broadcast(Intents).No UI, can create status bar notificationsRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  32. 32. Activities• Your application will consist of loosely coupledactivities that interact. Specify “main” activity• Each time new activity starts, previous activityis stopped but system preserves the activity inthe “back stack”. Back button destroys thecurrrent activity and loads the top one in theback stackRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  33. 33. Android Activity LifecycleRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  34. 34. Creating Activities• public class ExampleActivity extends Activity• onCreate()– You must implement this method. Within your implementation, youshould initialize the essential components of your activity. Mostimportantly, this is where you must call setContentView() to define thelayout for the activitys user interface.• onPause()– The system calls this method as the first indication that the user isleaving your activity (though it does not always mean the activity isbeing destroyed). This is usually where you should commit anychanges that should be persisted beyond the current user session(because the user might not come back).Richland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  35. 35. User Interface• User interface for an activity is provided by ahierarchy of views• Android provides a number of ready-madeviews (Button, Text Field, Image)• Layouts derived from ViewGroup• Subclass View, ViewGroup to create your ownwidgets and layouts– Define in XML as well as CodeRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  36. 36. LayoutsRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  37. 37. UI Design ComponentsSpinnersTabsSingle line and multi lineRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  38. 38. MenusOptions MenuAction BarFloating contextmenu, Contextualaction menu –appear when userperforms long presson a ViewRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  39. 39. ArcGIS Runtime SDK for Android• Maps and Layers– Native dynamic and cached map services support– Local caches on SDCARD also supported– Supported runtime mobile projections• Graphics– Draw on map, renderers, information popups• Tasks– Query, Identify, Findaddresses, Geoprocessing, Routing, DatacollectionRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  40. 40. ArcGIS Layer TypesRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  41. 41. Graphics LayerGraphics layers allow you to dynamically display graphics on a Map usingsymbols and RenderersRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  42. 42. Analysis: TasksTasks are wrappers around operations supported by ArcGISServer REST web services. Tasks take care of asynchronouslysending the request, showing the network activityindicator, applying appropriate credentials to the networkresource and parsing the results.• Geocoding• Network Analysis• RoutingRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  43. 43. Mobile UI Frameworks: Javascript• jQuery Mobile• Sencha• Dojo Mobile• Windows Store AppsRichland CountyMobile GIS Dev.: HTML5 & ArcGIS API for JavaScript
  44. 44. Javascript GIS APIs• Google Maps API• Bing Maps• ESRI Javascript API• OpenLayers• Leaflet• geoEXTRichland CountyMobile GIS Dev.: HTML5 & ArcGIS API for JavaScript
  45. 45. ESRI Javascript APIRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
  46. 46. ESRI Javascript APIRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
  47. 47. Richland CountyResponsive Web DesignRichland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
  48. 48. •In your CSS:•@media screen and (min-width: 480px) {• .content { float: left; }• .social_icons { display: none }• // and so on...•}•On the header of your website:<link rel="stylesheet" href="this.css" media="(min-width:960px)">Richland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
  49. 49. Responsive Web Boilerplate•HTML5 Boilerplate•Twitter Bootstrap•960gs, Adapt.js•320 and up - Mobile First•Gridless•Skeleton (http://www.getskeleton.com/)Richland CountyMobile GIS Dev.:HTML5 & ArcGIS API for JavaScript
  50. 50. Richland CountyLive DemosRichland County
  51. 51. Thank You! & Questions?Richland CountyElla LiPresident, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS Developer, Richland Countynarayanu@rcgov.us

×