Creating Hybrid Mobile GIS Apps using HTML5, jQuery & PhoneGap
Ayan Mitra
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona September 25-27, 2013
Introduction
•
•
Ayan Mitra
GIS Programmer at Institute for Social Science Research, ASU
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Why Mobile
• Because its Cool!!!
• Mobile devices are great for content
consumption.
• Mobile User base is increasing VERY rapidly.
• They have GPS, awesome for location based
apps.
• Consistent experience across devices.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Mobile Implementation Strategies
1. Native Applications Built using IOS, Android,
Win 8 SDK, etc.
2. Hybrid Applications – Created using html
and PhoneGap or AppCelerator.
3. Mobile Web Application – Created using
html,css, js and third party frameworks.
Responsive design.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Mobile Implementation Strategies
•
•
•
•
•
Advantages of Native Apps and Hybrid Apps
Faster than mobile web apps
App store for discovery and updates.
No web browser needed.
Standardized User Interface elements and
SDK.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Mobile Implementation Strategies
• Disadvantages of Native Apps and Hybrid
Apps
• More expensive to develop.
• Multiple code bases.
• App store approval processes and updates.
• If you are monetizing, potentially lose a
larger chunk of revenue.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Mobile Implementation Strategies
• Advantages of Mobile Web Applications
• Common code base across all platforms
• No approval process or additional app
signing requirements.
• Your users always have the most recent
version.
• Shorten development time by reusing
existing web assets.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Mobile Implementation Strategies
•
•
•
•
Disadvantages of Mobile Web Applications
Can’t access all of the device’s features.
Supporting multiple web browsers.
Lack of centralized app store makes it
harder to find your app.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Case Study – Gricua Application
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Case Study – Gricua Application
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating responsive gis web
applications
• Esri Javascript API
• Should work on IOS, Android and Windows
Surface Tablets.
• Jquery Mobile
• Bootstrap
• Note for Windows Surface Tablets you must
use V 3.6 of the Esri Javascript API.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating responsive gis web
applications
• Jquery Mobile – Touch Optimized Javascript
Library. Mainly Targeted to Mobile
Applications for Tablets & Phones.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating responsive gis web
applications
•
•
•
•
Twitter Bootstrap.
LESS
HTML5Shiv
Respond.js
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating hybrid gis applications
• PhoneGap
• PhoneGap Build
• Appcelerator
• Lots more available, but make sure that
Apple does not reject applications created
using the tool.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating hybrid gis applications
Demo –Install PhoneGap
http://phonegap.com/install/
EPIC FAIL (at least on windows).
Actual steps to get a working phonegap
install for android.
• Install node, Java sdk, Apache Ant, Android
SDK + IDE (bundled).
•
•
•
•
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Creating hybrid gis applications
• Demo – Use PhoneGap to build a simple
html application.
• Emulate – emulate.phonegap.com
• Requires Ripple Emulator and Chrome.
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013
Questions
• Ayan.mitra@asu.edu
• Jana.Hutchins@asu.edu
• Code Files and Install Documentation will be
posted tomorrow at
https://issrweb.asu.edu/demoAgic2013
AGIC 2013 GIS Education & Training Symposium
Prescott, Arizona
September 25-27, 2013