Multi-platform Mobile App. Development with Apache Cordova

Size: px

Start display at page:

Download "Multi-platform Mobile App. Development with Apache Cordova"

Ira Gilmore
5 years ago
Views:

1 Multi-platform Mobile App. Development with Apache Cordova MTAT Fall Jakob Mass MTAT

2 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 MTAT

3 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? MTAT

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

4 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 MTAT

5 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): 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, MTAT

6 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, Dhillon, Sunny & Mahmoud, Qusay. (2013). An Evaluation Framework for Cross-Platform Mobile Application Development Tools. Software: Practice and Experience 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 Xanthopoulos, Spyros, and Stelios Xinogalos. "A comparative analysis of cross-platform development approaches for mobile applications." Proceedings of the 6th Balkan Conference in Informatics MTAT

platform rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.

7 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, MTAT

8 Apache Cordova Platform Support MTAT

9 Image: MTAT

10 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: MTAT

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: MTAT

Plugins Maintained by the project 3rd party Plugins Image:

12 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: MTAT

13 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! MTAT

2017, Cordova supports up to Android API v25 - Android Emulator for testing - ios SDK + Xcode - only runs on the OS X operating system!

14 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 , 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: on Mac you also need: xcode-select --install npm install -g ios-deploy MTAT

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

16 Let s re-create HA1 Slightly simplified Display contacts, send them s First, on Android.. Since we want some functionality that relates to the smartphone platform API (contacts, s), we should incorporate those using plugins. $ cordova plugin add cordova-plugin-contacts $ cordova plugin add cordova-plugin MTAT

17 ..on ios MTAT

18 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 MTAT

19 Going Further Ionic - platform based around Cordova Packages a lot of useful tools and libraries AngularJS, Cloud Designer MTAT

20 Thanks for your attention! MTAT

Mobile Development June 2015, TEIATH, Greece

Mobile Development June 2015, TEIATH, Greece Presentation Overview 1. Introduction 2. Mobile Application Development 3. Cordova / Phonegap 4. Development Framework 5. Examples 1. INTRODUCTION Introduction