• Save
Scarc2013 mobile
Upcoming SlideShare
Loading in...5
×
 

Scarc2013 mobile

on

  • 360 views

 

Statistics

Views

Total Views
360
Views on SlideShare
360
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Scarc2013 mobile Scarc2013 mobile Presentation Transcript

  • Mobile GIS DevelopmentRichland CountyElla LiProduct Manager, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS Developer, Richland Countynarayanu@rcgov.us
  • • 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
  • 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
  • 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
  • PhoneGap – Apache Cordova• iOS• Android• Blackberry• Symbian• WebOS• Windows 8• Windows Phone 8/7• Bada• TizenRichland County Introduction
  • 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
  • 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
  • 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• 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
  • Richland CountyMobile GIS DevelopmentRichland CountyArcGIS Runtime SDKFor iOSFor AndroidFor Windows PhoneFlex Mobile and ArcGIS Flex API:HTML5 and ArcGIS JavaScript API
  • 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 the latest agslib.swc from ESRI• Add SWC in Flex Build Path• Import the library in fx:Script
  • 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 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
  • 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
  • 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 SDK for AndroidRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  • 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
  • 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
  • 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
  • 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 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
  • 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
  • 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, iOS, Windows Phone
  • MenusOptions MenuAction BarFloating contextmenu, Contextualaction menu –appear when userperforms long presson a ViewRichland CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  • 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
  • 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 CountyMobile GIS Dev.: ArcGIS Runtime SDK for Android, iOS, Windows Phone
  • 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
  • Mobile UI Frameworks: Javascript• jQuery Mobile• Sencha• Dojo Mobile• Windows Store AppsRichland CountyMobile GIS Dev.: HTML5 & ArcGIS API for JavaScript
  • Javascript GIS APIs• Google Maps API• Bing Maps• ESRI Javascript API• OpenLayers• Leaflet• geoEXTRichland CountyMobile GIS Dev.: HTML5 & ArcGIS API for JavaScript
  • 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 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
  • 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
  • Richland CountyLive DemosRichland County
  • Thank You! & Questions?Richland CountyElla LiPresident, ZillionInfoella.li@zillioninfo.comUjjwal NarayanSenior GIS Developer, Richland Countynarayanu@rcgov.us