Lecture Presentation

Lecture Presentation


  • Native Applications Overview
  • Android SDK and Tools
  • PhoneGap
    • For the course, we're just taking the overview of PhoneGap not digging deeper into its APIs and the possibilities it opens to develop any advanced mobile application.

Native applications

  • An application built with the platform specific tools and technologies
    • Every platform has an SDK - Software Development Kit for developing native applications.
  • Applications available to sell in platform app store
  • Positive
    • Performance - no extra layer between your code and the platform
    • Features - access to everything the platform has to offer
  • Negative
    • Difficult - no use of prior webdev knowledge
    • Time consuming - little in common for cross platform applications

Hybrid applications

  • Two different approaches
    • Compile to native
      • Use a better known language and possibly also way to define user interface etc. When building, everything becomes native.
    • Use a WebView
      • All platforms have the ability to display html/web inside of a native application using a WebView (or similar). Build and run all user interface and code as HTML, CSS and JavaScript.
  • Both approaches means
    • Applications available to sell in platform app store
    • Limited to common features on all (targeted) platforms

iOS SDK from Apple

  • Xcode
    • Xcode is the development environment where you write your code and build your apps. Xcode is only supported on Mac OS X (Snow Leopard and later).
  • Objective-C
    • The programming language is Objective-C, a language more or less only used by Apple for building iOS and Mac OS X applications. Backwards compatible with C and to some extent C++, but added dynamic features are very different from those languages.
  • User interface specification
    • Pixel-placed graphical elements and controls in visual editor

Selling iOS apps

  • iTunes App Store
  • Becoming a publisher
    • Requires yearly membership of $99/year. Can register as either private person or a company. Will need to fax authenticity document(s).
  • Control
    • All submitted apps are carefully investigated and verified by Apple. This process usually takes 1-2 weeks from submitting a finished app until it's available in the store.

Android SDK from Google

  • Eclipse
    • Although possible to build Android apps with any text editor and the SDK, the recommended development environment is the open source project Eclipse with is not limited to Android development. Both Android SDK and Eclipse are supported on Windows, Mac OS X and Linux.
  • Java
    • The programming language is Java, a language in the same family as C, C++, C# and JavaScript but besides basic structures such as if- and for-statements it has little common with JavaScript.
  • Layout Xml
    • User interface layouts are specified as xml elements in text files. This makes the philosophy quite similar to html, but the elements and their attributes are totally different and the styling system has less capabilities than css.

Selling Android apps

  • Google Play Store
    • Previously named "Android Market"
  • Becoming a publisher
    • Requires a one time fee of $29
  • Control
    • Google scans the store for malicious apps but other than that all submitted applications are immediately available to users. No rejection process. If malicious apps are found they can be remotely wiped from users' devices.

Hybrid solutions

  • Monotouch/Monodroid
    • Uses the open source parts of .NET/C#. Compiles to native. Not that focused on cross platform applictions. Does not hide the user interface building differences. License costs.
  • Appcelerator Titanium
    • Uses JavaScript and custom user interface libray to compile to native. Free and commercial licenses.
  • PhoneGap
    • Uses WebView. Open source project. Injects JavaScript code into your WebView to give access to features not otherwise available to web applications. Build service is commercial.
  • appMobi, Sensa Touch, ...
    • Also based on WebView. Free and commercial licenses.


  • Started as community driven open source project
  • Bought by Adobe, handed over to Apache as Cordova
  • Project files for each platform
    • Prepared for packaging a WebView inside of a native application. You must use the same tools as is used for native development on the specific platform.
  • Build service
    • Or pay to use a build service where project files are uploaded and their servers build your app for each platform.

Getting started with PhoneGap

  • Install SDK and tools for the chosen platform(s)
  • Make a copy of the project files for the platform (different for iOS, Android etc)
  • Open project in the development environment
  • Modify the HTML and add CSS, JavaScript etc to develop your application
    • This is more or less the same on all platforms, but browser differences might still need to be taken into consideration.
  • Build and run as native application (with a WebView as main user interface)

Getting started with Android SDK and development environment

Android Emulator

  • Start the Android Device Manager (AVD)
  • Create a virtual device
  • Start the Android Emulator

Your first PhoneGap (Cordova) project

Contents of a PhoneGap project (for Android)

  • AndroidManifest.xml
    • Main description of application, its name, settings and so on. Might need tweaking regarding permissions.
  • src directory
    • Contains the (native) Java code to start the application and load the WebView. Should not need to do anything here for PhoneGap-only applications.
  • res/drawable and similar directories
    • Images and other graphical resources used by the native parts. Most importantly, the icon of the application after installation.
  • assets/www directory
    • Main directory for all PhoneGap code. Look at it as a complete web site with HTML, CSS and JavaScript files. Also contains some default code that PhoneGap needs to inject its APIs into the WebView.

Test the application

  • Debug in Android Emulator
    • First time, Eclipse usually works best if you right click on the project and select "Debug As, Android Application". After that, you can use keyboard F11 key or toolbar button.
  • Eclipse starts emulator and installs app
    • Starting the emulator will be slow! Keep it running and it will be faster when you change your code and want to run it again. Eclipse can loose track of the emulator and start a new one. Then you'll need to close and start again (even Eclipse at times).

Android Application Binary

  • Resulting, complete, application is stored in an ".apk" file
  • The apk file can be put on web site and downloaded and installed to any device
    • The only requirement is that users need to allow installing applications from other sources than Google Play Store, a check box in Settings.
  • Submitting app to Google Play Store requires membership
    • One time fee of $29.

Android Permission System

  • Permissions declared in AndroidManifest.xml file
    • An application declares required permissions and the user can see/confirm them on installation. All or nothing - if one permission is not liked by user, the application can't be installed.
  • Common permissions
    • Getting access to the contacts list of the device
    • Communicating over the network
    • Accessing the camera

What does PhoneGap really give us?

  • Package as a native application
  • Network access without limitations (cross origin requests works without JSONP)
  • New APIs otherwise not available in HTML5
    • Access to hardware like camera, compass, accelerometer. Access to local SQLite database (Storage in PhoneGap). Access to local file system in device (on iOS too, although fully isolated between apps there). Documentation at http://docs.phonegap.com/en/2.2.0/index.html
  • Native extensibility
    • Possible to add libraries built on the platform SDK for other features still not in PhoneGap.

iOS Development

  • Not part of the course since Mac OS X is required
  • Download and install Xcode from the App Store
    • Everything for iOS development is included in the same application (iOS SDK, a simulator, the development environment Xcode etc).
  • PhoneGap steps more or less the same
  • Running in simulator possible for everyone
  • Running on a real device requires membership in iOS Developer Program ($99/year)
    • After membership payed, you will create your own certificate(s) and an iOS Provisioning Profile that is installed on the device where your app then can be installed. 100 devices can install the applications you create without putting it in iTunes App Store (only for testing purposes).