Building Native Mapping Apps with PhoneGap: Advanced Techniques

Slides:

Advertisements

Similar presentations

Developing downloadable mobile apps using HTML5 and PhoneGap Apache Callback Ron Perry, CTO, Worklight Inc.

Advertisements

UNIT-e futures and UNIT-e Mobile Ben Potter Systems Architect.

HTML5 That’s What You Need to Know Today Ingo Rammer | thinktecture |

Mobile App Development Using: Presented by Tyler Richey Images from

Developing HTML5 Application using MVVM pattern Pekka Ylenius.

Building Mobile Apps in the Cloud – Comparing Approaches.

Amanda Silver Director of Program Management Visual Studio Tools for Client Applications Cross-Platform Development using Visual Studio.

Building and Deploying Safe and Secure Android Apps for Enterprise Presented by Technology Consulting Group at Endeavour Software Technologies.

Mercator/Coronelli ArcGIS Server 9.3 Data Management GIS Web Services Mapping Application Developer Tools Spatial Analysis Publishing to Clients Image.

HTML5 That’s what you need to know today Ingo Rammer, thinktecture

J2ME Prepared by: - Gaery- Ronny - Alan- Andy. Why Technology for Mobile Devices? The nature of wireless devices is changing Old devices: All the software.

WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.

Platform Independent Frameworks Contents Mobile App Developer’s challenges Platform Independent solutions – Mobile Web Based Apps – Cross.

Development of mobile applications using PhoneGap and HTML 5

Creation of hybrid portlet application for file download using IBM Worklight and IBM Rational Application Developer v9 Gaurav Bhattacharjee Lakshmi Priya.

Sharing Geographic Content

Technical Workshops | Esri International User Conference San Diego, California ArcGIS Viewer for Flex – Advanced Topics Lloyd Heberlie Björn Svensson July.

Tips for working with disconnected web mapping apps Andy Gup, Javier Abadia.

VMM Based Rootkit Detection on Android Class Presentation Pete Bohman, Adam Kunk, Erik Shaw.

Lightning Talk Fred Rodriguez Nguyen Do CPSC 473 May 6, 2012.

Title slide to be used at the start of a module. Developing Mobile Apps Roland Guijt

Introduction CIS 136 Building Mobile Apps 1. What is a mobile app? 2  Computer program  Designed for small devices  Smartphones  Tablets  Other handhelds.

Java Mobile Apps with GWT & PhoneGap Josh Marinacci, webOS Developer Advocate.

Developing Windows Desktop and Device Apps with the ArcGIS Runtime SDK for.NET Rex Hansen Thad Tilton.

ANDROID Presented By Mastan Vali.SK. © artesis 2008 | 2 1. Introduction 2. Platform 3. Software development 4. Advantages Main topics.

Building Offline Apps With the ArcGIS Runtime SDKs

“A Project Managers Perspective” Presented by: Brian Fischer Houston Engineering, Inc. WLIA Conference, 02/14/2013 A JOURNEY THRU MOBILE APP DEVELOPMENT.

HTML5 for Mobile Andrew Kinai. HTML vs HTML5 HTML:A language that describes documents' formatting and content, which is basically composed of static text.

Beyond the Browser: HTML5 and the Evolving Mobile Web Chris Smith & Laurent Hasson Research In Motion.

Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie.

ArcGIS Runtime SDK for iOS: Debugging Offline Feature Editing Garima Bradley &)&) &)&)

Mobile web Sebastian Lopienski IT Technical Forum 29 June 2012.

VMM Based Rootkit Detection on Android Class Presentation Pete Bohman, Adam Kunk, Erik Shaw.

Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University

Esri UC 2014 | Technical Workshop | Developing Offline Apps with ArcGIS Runtime SDKs Euan Cameron Justin Colville Will Crick.

GeoGebra on mobile devices GeoGebraMobile, the JavaScript version of GeoGebra. Gabor Ancsin (this man =>)

Putting Performance Best Practices Together to Create the Perfect SPA Chris Love2Dev.com.

Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.

Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 1.

The way of hybrid mobile development Hybrid Mobile Applications Telerik Software Academy

 Phone Gap is a mobile application development frame work based upon the open source apache cordova project. Developed by Nitobi software Bought by Adobe.

KAASHIV INFOTECH Presents INTEL XDK For Inplant Training / Internship, please download the "Inplant training registration form" from our website

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery Andy Gup, Lloyd Heberlie.

Developing Cross Platform Apps with the ArcGIS Runtime SDK for Qt

Make Mobile Work For You Dave Lewis. Why Mobile GIS? Key Business Drivers for Field Operations Empowering Field Operations with Data Replace paper maps.

Rich Internet Applications 9. HTML 5 and RIAs. HTML 5 Standard currently under development by W3C Aims to improve the language with support for the latest.

If you are thinking about developing mobile application for your customer, this is an important aspect to consider the platform.

Citrix ShareFile. Instant file access from any device Sharing and collaboration—with anyone Easy & Familiar (love Dropbox) USERS DEMAND Security Control.

Best 5 Mobile App Development Tools for Developer's to think beyond the Limitation.

丁建文國立高雄應用科大資管系副教授兼任計網中心軟體發展組組長跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.

COMPARING CROSS-PLATFORM DEVELOPMENT APPROACHES FOR MOBILE APPLICATIONS Henning Heitkötter, Sebastian Hanschke and Tim A. Majchrzak Department of Information.

JavaScript 사용현황 김민철. Table of contents  1. Mobile  WAC  PhoneGap  AppsPresso  2. TV  Samsung Smart TV  KT IPTV  3. 기타  node.js 2.

INTRODUCING HYBRID APP KAU with MICT PARK IT COMPANIES Supported by KOICA

APP DESIGN AND DEVELOPMENT WITH THE IONIC FRAMEWORK Chuck Leone

Agenda Steps of App Building The Runtime Environment Managing App Data Debug and Test an App Validate an App Publish an App to a Store Packaging Apps.

Phonegap API & Phonegap Bridge CIS 136 Building Mobile Apps 1.

Build Cross-Platform Mobile Apps Using Visual Studio A Telerik webinar by Jeffrey T. Fritz March 27, 2014 AND.

PhoneGap. web-based mobile development framework, based on the open-source Cordova project. use standard web technologies such as HTML5, CSS3, and JavaScript.

PhoneGap Cross-Platform Development Company India

跨平台 Hybrid App 開發簡介 - 使用 Visual Studio Tool for Apache Cordova + HTML/JavaScript 陳葵懋（Ian）

Mobile App Development Using:

PhoneGap, Processing.

ET-570 Smart Phone Apps.

Apache Cordova Overview

What web developers need to know when building Metro style apps

Myth Busting: Hosted Web Apps

Who Am I? appMobi's lead HTML5 game developer / evangelist

Office 365 Development.

Office 365 Development.

Presentation transcript:

Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy Gup @agup

Agenda Application life-cycle Working with UI frameworks Security Geolocation Offline

Expectations Experience with PhoneGap and/or Cordova Intermediate/Advanced JS, CSS Mobile JS debugging skills Native app debugging skills

Requirements ArcGIS JS API v3.10 – v3.14 PhoneGap/Cordova 5.x Latest gen iPhone and/or Android

Caveats PhoneGap/Cordova not officially supported There may be hidden gotchas Best practices will minimize gotchas

quickstart-map-phonegap github.com/Esri/quickstart-map-phonegap Samples Best practices

PhoneGap Application Lifecycle

Lifecycle Native HTML, CSS, JS PhoneGap Application ArcGIS JS API Map Layers

Lifecycle Part 1 Native PhoneGap Application

Lifecycle Part 2 Native HTML, CSS, JS PhoneGap Application Native WebView <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map</title> </head> <body> . . . </body> </html>

Lifecycle Part 3 Native HTML, CSS, JS PhoneGap Application ArcGIS JS API

Lifecycle Part 4 Native HTML, CSS, JS PhoneGap Application ArcGIS JS API Map

Lifecycle Part 5 Native HTML, CSS, JS PhoneGap Application ArcGIS JS API Map Layers

UX Frameworks

UX Frameworks + Maps Some considerations: Do view transitions cache pages? Does map get re-created after transition? Map widgets work portrait & landscape? Gracefully handle loss of internet?

Bootstrap-map-js github.com/Esri/bootstrap-map-js Auto-resize map Auto-center map Not PhoneGap tested

Jquery-mobile-map-js github.com/Esri/jquery-mobile-map-js Auto-resize map Auto-center map

View-based Approach Single page, single view Single page, multi-view Multi-page

VIEW 1 VIEW 2

JS library loading Synchronous vs Asynchronous

Synchronous vs async Trade-offs in map load performance Dependencies between libs? Synchronous forces life cycle management Consider concatenating JS libs

Synchronous Time (milliseconds)  map.css jquery.css gp.js

Async Time (milliseconds)  map.css jquery.css gp.js

Host files locally HTML, CSS, JS, images Significantly faster load times! Security (no interceptions)

ArcGIS Web Optimizer One JS library file! http://jso.arcgis.com/

Security Whitelisting (as of Cordova 4.0) Content Security Policy (CSP) iOS 4.0.0 + Android 4.0.0 +

Security Mitigate XSS attacks Data injection attacks Unauthorized images

config.xml - Navigation Whitelist

config.xml - Intent Whitelist

Content Security Policy (CSP)

Content Security Policy (CSP) Directives

Geolocation with PhoneGap

Geolocation with PhoneGap Same coding pattern. Works online and offline Approximate location Still always requires user opt-in.

Geolocation with PhoneGap Can allow for passive location Does not increase accuracy Does not speed up acquisitions times Outdoors – turn off WiFi! github.com/Esri/html5-geolocation-tool-js

Geolocation (online) Online location Location Service (Google, Microsoft, Apple) WiFi info GPS Cell network info

Geolocation (offline) Offline location determination GPS only!!

Offline JS

Bad pattern!

Good pattern!

Offline JS Intermittent or no internet Ability to reload or restart app offline Lightweight cross-browser functionality Github.com/esri/Offline-editor-js

Offline JS Offline tiled maps for small areas Offline editing and basic attachments Offline TPKs (Tile Packages) Github.com/esri/Offline-editor-js

Offline JS – detect network status github.hubspot.com/offline cordova-plugin-network-information

cordova-plugin-network-information

cordova-plugin-network-information Caveats: Use in addition to Offline.js Mainly benefits Android users iOS can’t detect connection type Emulators may return Connection.UNKNOWN

Offline JS More good info: slides.com/andyg/offline-js andygup.net/web-mobile/

Offline JS Need a full features, robust offline solution? ArcGIS Runtime SDKs Integrated offline support for editing and sync Support for related tables, domains, subtypes and more.

Best practices Monitor & handle offline conditions Protect all HTTP requests Host HTML, CSS, JS and images locally Cache resources when feasible

Use as little memory as possible

Bonus slide – Debugging! Chrome and Safari remote debugging

Andy Gup agup@esri.com @agup