Geospatial Research & Solutions GIS.ASU.EDU

Cross Platform Mobile GIS applications Using QT and ESRI Geospatial Research & Solutions GIS.ASU.EDU Ayan Mitra is an application developer in the Geospatial Reseach & Solutions Group at Arizona State University. He specializes in developing data driven, interactive GIS applications. He also likes the finer things in life, like beer and chicken wings.

Make me a mobile App! Step 1: Hell Yeah! Step 2: Define Requirements. Step 3: Pick a SDK ( Hyperventilation + Light crying ).

Cross Platform Mobile Development with ESRI Do you need to support only IOS OR Android (use the corresponding Esri runtime SDK) Do you need to support BOTH IOS AND Android (use Cross Platform App Frameworks) QT Xamarin Phonegap

WHY QT Supports IOS, Android, Windows, OSX, Linux Code compiled natively for each platform but shares the same codebase More performant than hybrid / Html frameworks such as Phonegap Lets you use Javascript to write UI & business logic More mature technology than Xamarin (as far as the ESRI SDK’s are concerned) As of 2016 supports the largest number of OS, compared to Esri’s Xamarin SDK Arrghh….working with Beta Software sucks! (Esri Xamarin SDK is in beta) Top notch for building Fluid responsive user interfaces

WHY TO NOT USE QT You need to support only 1 OS (Like Ios OR Android) You don’t need offline capabilities (such as large tile caches, lots of offline data) (use hybrid frameworks like Phonegap or maybe just a Mobile web version of your app) You are a Microsoft Shop / Invested in Visual Studio (use Xamarin)

Introduction to Esri & QT: Two ways to build your app Esri QT SDK (QML Version) QML, Javacript Esri QT SDK (C++ Version) C++ QML / JS – Easier to work with. QML is the markup language to instantiate pre-existing components (Like HTML or MXML). Use JS to build user interaction and business logic. (for Flex developers this is similar to using MXML and Actionscript). C++ - More complexity. Gives you full use of the local server. Example - lets you run custom geoprocessing services offline on device.

Anatomy of a QML App Programming Languages & IDE QML – QT meta language – A markup language (like html) that lets you reuse pre-created user interface objects (like buttons, drop-down menus). JavaScript – Used to write code for user interface interactions and custom business logic. (optional ) C++ - can optionally use C++ to extend components (ie create a custom C++ class that runs an algorithm and trigger that class from QML UI) IDE – QT Creator. I also had to get comfortable with Xcode (To troubleshoot for IOS builds).

Anatomy of a QML App Sample QML Code QML Component Name Rectangle Component QT supports reactive programming When the Data model that is bound to a UI object changes, the UI changes automatically. Rectangle { id: sprite ; width: 25; height: 25; x: 50; y: 15 ; onXChanged: console.log("x property changed, emitted xChanged signal") onYChanged: console.log("y property changed, emitted yChanged signal") } Defining Properties Id (unique) Width, height and Position (x,y) Signals & Signal Handlers (event handling) Inline Javascript Code in the signal handler. Run when x or y properties change.

Event-Driven Programming QML Signal and Handler Event System Signals provide a way to notify other objects when an event has occurred. Connect Signals to other signals or methods (slots) Signals and slots are loosely coupled and are type safe. This is very similar – dojo’s event handlers/ signals & slots implementation is based off the same concept.

QML Application Development Development Workflow Overview Create your application user interface using QML If you need custom user interface components, string existing QML components to do that Create custom javascript code that drive your applications business logic Define your event handling (using signals & slots) For Ios, make sure the appropriate Xcode developer components are installed. Then build and test on simulator. Build and test with device (Ipad, Iphone, etc). Sign app and deploy to test devices (Internal deployments or TestFlight). Finally when done with Testing, deploy to app store for approval.

Prepping Data for Runtime SDK applications Operational vector data – created from mxd document Customize > ArcMap Options > Sharing > Enable ArcGIS Runtime Tools Then Open Arcmap, prep your data and then pick File > Share As > ArcGIS Runtime Content. Copy over your runtime content to your mobile device (for Ios use itunes) For debugging on your workstation, copy over the Arcgis runtime content to the appropriate location https://developers.arcgis.com/qt/qml/guide/deploy-local-offline-data-with-your-app.htm Stored as .geodatabase extension ( based on sqlite ) Tiled Basemaps Create tile packages (.tpk) files and copy to appropriate location

Questions Geospatial Research & Solutions GIS.ASU.EDU Ayan.Mitra@asu.edu