27.10.2017 MTAT.03.262

Multi-platform Mobile App. Development with Apache Cordova

MTAT.03.262 2017 Fall

Jakob Massjakob.mass@ut.ee

27.10.2017 MTAT.03.262

Introduction● Fragmented market● Developers have limited resources

Platform Market Capture*

Language IDE Market Platform

Android 85% Java, Kotlin Android Studio Google Play Store

iOS 14.7% Objective-C, Swift XCode iTunes App Store

Windows Phone 0.1% C# with .NET Visual Studio Windows Phone Store

Others 0.1% - - -

* Q1 2017, according to IDC 2

27.10.2017 MTAT.03.262

Cross-Platform Development Principle

● The alternative to native app development● Cross-Platform Tools (CPT)● Share a code base between platforms

○ As large as possible

develop once, run anywhere

● Thus, decrease dev. and maintenance cost of applications

Can you name any well-known multiplatform technologies?

3

27.10.2017 MTAT.03.262

Web-based CPT● UI implemented with HTML + CSS● Functionality with Javascript

Two hosting/deployment strategies:

● “Normal webpage” scenario:○ Load the application from

a remote webserver

● Hybrid Application:○ Webpage contained locally on the device, using a web-to-native wrapper○ Uses Platform’s built-in browser engine○ Can be distributed on the platform’s application markets

4

27.10.2017 MTAT.03.262

Alternative CPT approachesWhile Web-based approach is the most widely used, there are lots of alternative:

● Interpreted Approach○ (e.g. Titanium)

● Cross compiled ○ (e.g. Xamarin, Mono)

● others [1]

[1] El-Kassas, Wafaa S., et al. "Taxonomy of cross-platform mobile applications development approaches." Ain Shams Engineering Journal 8.2 (2017): 163-190.

Table: Ciman, M. et al. “An empirical analysis of energy consumption of cross-platform frameworks for mobile development”, In Pervasive and Mobile Computing, Volume 39, 2017

5

27.10.2017 MTAT.03.262

Comparison of CPT-s Over 100 existing CPT-s ! [2] ...Which are the best?

● Development time consumption, learning curve

● How many platforms does it support?● Feature/functionality support and coverage

○ Gestures○ Native API-s

● Application performance, UI responsiveness● UX, conformance to “Native design

experience”[2] Vision Mobile. Cross-platform developer tools 2012: Bridging the worlds of mobile apps and the web.February, 2012.

1. Dhillon, Sunny & Mahmoud, Qusay. (2013). An Evaluation Framework for Cross-Platform Mobile Application Development Tools. Software: Practice and Experience. 45

2. Matteo Ciman, Ombretta Gaggi, An empirical analysis of energy consumption of cross-platform frameworks for mobile development, In Pervasive and Mobile Computing, Volume 39, 2017, Pages 214-230

3. Xanthopoulos, Spyros, and Stelios Xinogalos. "A comparative analysis of cross-platform development approaches for mobile applications." Proceedings of the 6th Balkan Conference in Informatics.

6

27.10.2017 MTAT.03.262

Apache Cordovaaka Phonegap

● Open-source● HTML5, CSS3, and JavaScript

○ You can also use all the common web development libraries such as AngularJS, jQuery, jQuery mobile

○ Additionally, numerous community-created Cordova plugins �

● Applications○ execute within wrappers targeted to each platform○ rely on standards-compliant API bindings to access each device's capabilities such as sensors,

data, network status, etc.

● Large community● Contributors to the Apache Cordova project include Adobe, Blackberry,

Google, IBM, Intel, Microsoft, Mozilla, ... 7

27.10.2017 MTAT.03.262

Apache Cordova Platform Support-

https://cordova.apache.org/docs/en/latest/guide/support/index.html 8

27.10.2017 MTAT.03.262Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html 9

27.10.2017 MTAT.03.262

Web AppContains:

● Project files● config.xml

○ information about the app and specifies parameters affecting how it works, such as whether it responds to orientation shifts

Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html 10

27.10.2017 MTAT.03.262Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

Plugins● provide an interface for

Cordova and native components to communicate with each other and bindings to standard device APIs

● Core Plugins○ Maintained by the project

● 3rd party Plugins○

11

27.10.2017 MTAT.03.262Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

Plugins● provide an interface for

Cordova and native components to communicate with each other and bindings to standard device APIs

● Core Plugins○ Maintained by the project

● 3rd party Plugins○

12

27.10.2017 MTAT.03.262

Cordova Development Workflows● 2 Approaches:● Cross-platform workflow

○ Minimize platform-specific development○ CLI tool automates a low of tasks for, such as generating the app. binaries for each platform○ Recommended unless you have a specific need for platform-oriented functionalities

● Platform-centered workflow○ Gives you more control per-platform.○ Enables mixing custom native components with the web-based Cordova components○ As a downside, you have to manage the build cycles of the platform again!

● In the following, we will use the first (CLI) approach!

13

27.10.2017 MTAT.03.262

Cordova Dev. EnvironmentPrerequisites:

● Node.js and NPM installed● Cordova CLI:

○ npm install -g cordova

● SDKs of the platforms you want to build for:- Android SDK

- As of 26.10.2017, Cordova supports up to Android API v25- Android Emulator for testing

- iOS SDK + Xcode- only runs on the OS X operating system!

- For more details:- https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html- https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html

on Mac you also need:

xcode-select --install

npm install -g ios-deploy

14

27.10.2017 MTAT.03.262

Create an Android App$cordova create myApp com.myCompany.myApp myApp

$ cordova platform add android

$ cordova emulate android

● Project Structure -->

15

27.10.2017 MTAT.03.262

Let’s re-create HA1 ● Slightly simplified● Display contacts, send them e-mails

First, on Android..

Since we want some functionality that relates to the smartphone platform API (contacts, e-mails), we should incorporate those using plugins.

$ cordova plugin add cordova-plugin-contacts

$ cordova plugin add cordova-plugin-email

16

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/

https://www.npmjs.com/package/cordova-plugin-email

27.10.2017 MTAT.03.262

..on iOS

17

27.10.2017 MTAT.03.262

Conclusion● Great for UI-driven applications without complex, smartphone-oriented

functionality● Proficiency with web technologies is a must● Even with the multi-platform cordova workflow, always be alert for

platform-specific quirks○ not all plugins behave the same on all platforms!

● CPT-s are still an actively evolving scene!○ Ionic

18

27.10.2017 MTAT.03.262

Going Further● Ionic - platform based around

Cordova● Packages a lot of useful tools

and libraries○ AngularJS, Cloud Designer

https://www.safaribooksonline.com/library/view/learning-ionic/9781783552603/apas02.html 19

27.10.2017 MTAT.03.262

Thanks for your attention!

20