Multi-platform Mobile App. Development with Apache Cordova

Multi-platform Mobile App. Development with Apache Cordova MTAT.03.262 2017 Fall Jakob Mass jakob.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 27.10.2017 MTAT.03.262 2

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? 27.10.2017 MTAT.03.262 3

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 27.10.2017 MTAT.03.262 4

Alternative CPT approaches While Web-based approach is the most widely used, there are lots of alternative: Interpreted Approach (e.g. Titanium) Cross compiled others [1] (e.g. Xamarin, Mono) [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 27.10.2017 MTAT.03.262 5

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. 27.10.2017 MTAT.03.262 6

Apache Cordova aka Phonegap Open-source HTML5, CSS3, and JavaScript Applications You can also use all the common web development libraries such as AngularJS, jquery, jquery mobile Additionally, numerous community-created Cordova plugins 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,... 27.10.2017 MTAT.03.262 7

Apache Cordova Platform Support - https://cordova.apache.org/docs/en/latest/guide/support/index.html 27.10.2017 MTAT.03.262 8

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

Web App Contains: 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 27.10.2017 MTAT.03.262 10

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 Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html 27.10.2017 MTAT.03.262 11

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 Image: https://cordova.apache.org/docs/en/latest/guide/overview/index.html 27.10.2017 MTAT.03.262 12

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! 27.10.2017 MTAT.03.262 13

Cordova Dev. Environment Prerequisites: 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 27.10.2017 MTAT.03.262 14

Create an Android App $cordova create myapp com.mycompany.myapp myapp $ cordova platform add android $ cordova emulate android Project Structure --> 27.10.2017 MTAT.03.262 15

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 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 16

..on ios 27.10.2017 MTAT.03.262 17

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 27.10.2017 MTAT.03.262 18

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 27.10.2017 MTAT.03.262 19

Thanks for your attention! 27.10.2017 MTAT.03.262 20