SYST35300 Hybrid Mobile Application Development

SYST35300 Hybrid Mobile Application Development

Native, Web and Hybrid applications Hybrid Applications: Frameworks

Native, Web and Hybrid Applications

Mobile application development is the process by which application software is developed for small low-power handheld devices such as e phones. These applications are either pre-installed on phones during manufacturing, or downloaded by customers from various mobile software distribution platforms.

VoIP Access Camera Audio Processing Video Processing App-Store Presence

Symbian OS Nokia s Cell Phone operating system Android OS Google s free, open-source cellphone operating system iphone OS (ios ) Apple s mobile operating system BlackBerry OS Proprietary mobile operating system, developed by Research In Motion for its BlackBerry Windows Phone 7 ( Windows Mobile ) Mobile operating system developed by Microsoft Palm OS (Garnet OS)- mobile operating system initially developed by Palm Palm webos Mobile operating system from HP/Palm Bada - Mobile operating system developed by Samsung Electronics Maemo OS from Nokia (open source, GPL) MeeGo OS from Nokia and Intel (open source, GPL)

A native application works only on the platform for which it was created. Native apps were originally developed by Apple, which had various programs built in Objective C to run specifically on their mobile OS. Later, Android developed their native apps in Java, which worked only on the Android platform.

Device determination Constraints and features of the device run on battery have less powerful processors have more features such as location detection and cameras Building and testing issues Budget Emulators Good User interface (UI) design is essential User is the focus, and the app s design is the interface to the device Limited attention span Various form factors How can we build a mobile application for ALL the major platforms?

Due to each mobile platform s different OS, consider the following: you have to set up different environments for each platform you need a bit of expertise with each respective OS (long learning curve) different programming languages are required for different mobile platforms you need to be familiar with the features supported by each mobile platform Do you know any other market fragmentations? Browsers!

File System (on Mobile Device) Native App (Java/Obj-C/C#) Mobile OS

Mobile Browser Web App (HTML, CSS, JS) Web Server Mobile OS 1

ios5 Android 2.2, 2.3 WinPhone 7.5 Canvas Audio Local Storage Geolocation Video CSS3 borders, anim Web Applications SVG Elements CSS3 position:fixed Drag & Drop Files WebGL IndexedDB, WebSQL Desktop: html5test

Combine HTML/CSS/JS with native code User interface in HTML/CSS Logic and interaction in JS Special functions written in platform-specific native code Advantages Portability Reuse of existing skills Access to device APIs App-store presence

Native Container File System (on Mobile Device) HTML, CSS, JS Mobile OS

Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Hybrid Full Native Speed as Necessary Reasonable Available Low Overhead Web Partial Fast Reasonable Not Available None

Hybrid Applications: Frameworks

} Developers write their mobile applications using HTML, JavaScript and CSS. } These assets run in a WebView inside a native application container on the target platform. } a web application packaged within a native application container where JavaScript has access to device-level APIs that normal web applications would not

Native container: Creates instance of UIWebView / android.webkit.webview / etc. Navigates to main html file Implements listener/handler for requests coming from JS code Activates JavaScript code when necessary HTML5/CSS3/JS code: Implements UI and app logic Activates native handlers through OS-specific mechanism (custom URL scheme) Receives responses through JS handlers HTML resources can be packaged into downloadable app for performance boost

} Open source framework for quickly building cross-platform mobile apps } Uses HTML5, Javascript and CSS } Originally created by Nitobi } the name was changed to Apache Cordova when it was donated to the Apache Software Foundation } Adobe purchased Nitobi including rights to the PhoneGap name and now distributes Cordova under that name } Installs just like a native application, and is able to leverage app store discoverability } Follows a plugin architecture } access to native device APIs can be extended in a modular way. } Build in the cloud (Phonegap Build, Icenium, Kendo UI Mobile) } Integrates into known IDE s as Brackets and Dreamweaver } Improvements in device hardware and WebView implementations have improved performance

Appcelerator s Titanium provides a unified (across devices) JavaScript API, coupled with native-platformspecific features Developers write JavaScript and utilize a UI abstraction (the Alloy MVC framework) that results in the use of native UI components. Developer is required to manage target platform SDKs locally Is it better than PhoneGap? http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/ 23

Sencha Touch is an HTML5 mobile application framework for building web applications that look and feel like native applications Apps built with Sencha Touch or Sencha Architect either will package the application in a native container and enable access to select device-level APIs unavailable to traditional web apps Sencha products deploy web applications to mobile devices, tablets, and desktops. Requires custom plug-ins 24

Install and develop using Phonegap CLI (Command line) Phonegap Desktop Test using Phonegap Developer App Phonegap Desktop is an easy way to create an app and start the testing emulator (Phonegap Developer) Download from www.phonegap.com Click the Plus sign to create the App Scaffold Using your favorite editor, code your app It reloads your app Starts a phonegap server for testing We'll discuss all the details later on!!! For now let's focus on Application: HTML5/CSS/JS

Focus of this course! Phonegap is a wrapper around the app that talks to the mobile device - enables access to device capabilities, such as the accelerometer, camera and local storage, that are not accessible in Mobile websites

A Hybrid application basically has two interfaces User Interface (UI) Also known as web view Written in html,css, javascript Can use third party frameworks Device interface Also known as the native view Provides connectivity to the mobile devices features First part of the course User Interface

Mobile Angular UI Google - uses HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly Ionic HTML5 mobile app development framework targeted at building hybrid mobile apps Uses Angular Kendo UI Mobile ($$$$) Build mobile app experiences using HTML and JavaScript that automatically adapt to the native lookand-feel of different mobile platforms jquery Mobile An HTML5/CSS3-based user interface system designed to make responsive web sites and apps