Introduction to mobile application development using iOS, Android, HTML5 and PhoneGap

1. Introduction to
Mobile Development
By Pragnesh Vaghela
Technology Three
March 2012

2. 2
Agenda
 Mobile Matters
 iOS 5
 Android
 When a Native Application makes sense?
 Mobile Web Applications
 Sencha Touch 2
 jQuery Mobile
 PhoneGap
 Design Considerations for Building Mobile Applications
 Demos

3. 3
Mobile Matters - Growth is explosive

4. 4
Selling Like Hot Cakes

5. 5
Understand the medium and the context
Features What it means:
GPS Location-Aware
Touch Intimate and Interactive
Physical
Sensors (A/V)
Intelligence
Contacts Personal and Social
Relevant at Point of
Portability
Consideration

6. 6
Native Application

7. 7
Mobile OS
 iOS – iPhone, iPad and iPods
 Android – Smartphones, Laptops, Netbooks, eBook
Readers, Google TV
 BlackBerry – Smartphones and PlayBook
 Microsoft – Windows Phones and Windows 8 for
Desktops and Tablets
 HP webOS – Smartphones and HP TouchPad tablet
 Symbian – Maintained by Accenture till 2016
 Mobile Web Applications – HTML 5, CSS & JavaScript

8. 8
What is iOS 5?
 Apple OS
 Objective-C
 Devices:
 iPhone 3GS and above
 iPod Touch 3rd Gen and above
 All iPads
 200+ new features, including
 iCloud, iMessage, Notification Center
 Newsstand, Reminders
 Siri (voice dictation, commands) for iPhone 4Ss
 PC Free
 No longer requires a computer for Activation,
Upgrades, Backups via Wi-Fi

9. 9
iOS 5 Enterprise Features
 Core iOS Apps
 Sync MobileMe Mail, Contacts, and Calendars across devices
 Sync Reminders, Bookmarks, Notes
 Photo Stream
 Automatically uploads pictures taken to iCloud
 Syncs to all devices
 Stores last 1000 photos taken on any device
 Document Sync
 For apps that use iCloud, synchronizes docs across all devices including Macs/PCs
 iWork will be the first mainstream app using iCloud
 Data (Key/Value) Sync
 Synchronizes key/value pair information within an app
 Generally used for settings, state information, etc.
 Backup
 Over the air backup of device, using Wi-Fi

10. 10
iOS 5 Development & Deployment
 Xcode for Lion (OSX)
 Free to download
 Complete Xcode developer toolset for Mac, iPhone, and iPad.
 It includes the Xcode IDE, iOS Simulator, and all required tools and frameworks for building OS X and
iOS apps.
 iOS Developer Program ($99 / year)
 Develop your application with the iOS SDK and wealth of technical resources in the iOS Dev Center
 Test and debug your code on iPad, iPhone and iPod Touch
 Distribute your apps on the App Store via iTunes
 Technical Support includes 2 incidents with Apple engineers
 iOS Developer Enterprise Program ($299 / year)
 Distribute your in-house iOS apps to employees of your organization
 Test and Debug your application by directly installing and testing on the iPad, iPhone and iPod Touch
 Technical Support includes 2 incidents with Apple engineers per membership year
 iOS Developer University Program (Free)
 Degree granting higher education institution offering iOS development curriculum

11. iOS Testing
11
 The Xcode unit-testing environment is based on the
open-source SenTestingKit framework
 Xcode offers two types of unit tests: logic tests and
application tests
 Logic tests - These tests check the correct functionality of
a unit of code by itself (not in an app). You can also use
logic tests to perform stress-testing of your code.
 Application tests - These tests check units of code in the
context of your app. You can use these tests to perform
hardware testing, such as getting the location of the
device on which your app is running.
 Logic tests run only in simulators

12. 12
Android
 Android is a Linux-based operating system for mobile
devices that includes an operating system,
middleware and key applications
 It
is developed by the Open Handset Alliance led by
Google
 Google releases the Android code as open-source,
under the Apache License
 The Android Open Source Project (AOSP) is tasked
with the maintenance and further development of
Android

13. 13
Android Features
 Handset layouts
 The platform is adaptable to larger, VGA, 2D graphics library, 3D graphics library based on OpenGL
ES 2.0 specifications, and traditional smartphone layouts.
 Storage
 SQLite, a lightweight relational database, is used for data storage purposes.
 Connectivity
 Android supports connectivity technologies including GSM/EDGE, IDEN, CDMA, EV-
DO, UMTS, Bluetooth, Wi-Fi, LTE, NFC and WiMAX.
 Messaging
 SMS and MMS are available forms of messaging, including threaded text messaging and now
Android Cloud To Device Messaging (C2DM) is also a part of Android Push Messaging service.
 Multiple language support
 Android supports multiple languages.[42]
 Web browser
 The web browser available in Android is based on the open-source WebKit layout engine, coupled
with Chrome's V8 JavaScript engine. The browser scores 100/100 on the Acid3 test on Android 4.0.
 Java support
 While most Android applications are written in Java, there is no Java Virtual Machine in the platform
and Java byte code is not executed. Java classes are compiled into Dalvik executables and run on
Dalvik, a specialized virtual machine designed specifically for Android and optimized for battery-
powered mobile devices with limited memory and CPU. J2ME support can be provided via third-
party applications.

14. 14
Android Features
 Media support
 Streaming media support
 Additional hardware support
 Multi-touch
 Bluetooth
 Video calling
 Multitasking
 Voice based features
 Tethering
 Screen capture
 External storage

15. 15
Android Architecture

16. Android Development
16
 Development Requirements
 Java
 Android SDK
 Eclipse (optional)
 Programming Language(s)
 Java – officially supported
 C/C++ – also possible but not supported
 IDE and Tools
 Android SDK
 Class Library
 Developer Tool:
 dx – Dalvik Cross-Assembler
 aapt – Android Asset Packaging Tool
 adb – Android Debug Bridge
 ddms – Dalvik Debug Monitor Service
 Emulator and System Images
 Documentation and Sample Code
 Eclipse IDE + ADT (Android Development Tools)
 Reduces Development and Testing Time
 Makes User Interface-Creation easier
 Makes Application Description Easier

17. 17
Android Testing
 The Android development environment includes an integrated testing framework that helps you test all
aspects of your application
 The Android testing API is based on the JUnit API and extended with a instrumentation framework and
Android-specific testing classes
 Android instrumentation is a set of control methods or "hooks" in the Android system. These hooks control
an Android component independently of its normal lifecycle. They also control how Android loads
applications
 The SDK tools for building and tests are available in Eclipse with ADT and also in command-line form
 The SDK also provides monkeyrunner, an API testing devices with Python programs, and UI/Application
Exerciser Monkey, a command-line tool for stress-testing UIs by sending pseudo-random events to a
device
 A key feature of the Android testing framework is its component-specific test case classes:
 Activity Testing - Input validation, Lifecycle events, Intents, Runtime configuration changes, Screen
sizes and resolutions
 Content Provider Testing - business logic, resolver methods, public provider as a contract
 Service Testing - onCreate(), onDestroy(), correctly handles multiple calls from Context.startService(),
startService() calls don't nest, business logic that your Service implements

18. 18
Android Deployment
 Google Play is a digital content service from Google
which includes an online store for music, movies,
books, and Android apps and games, as well as a
cloud media player
 Service is accessible from the web, the Android app,
or Google TV
 Content is instantly available across all of these
devices after purchase
 Before
you can publish software on the Google Play,
you must do 3 things:
 Create a developer profile
 Agree to the Google Play Developer Distribution Agreement
 Pay a registration fee ( $25.00) with your credit card (using Google
Checkout)

19. 19
iOS vs Android
iOS Android
Buy a Mac, download the free Xcode download the SDK, setup Eclipse and
Installer from the Mac App Store, and install Google‟s ADT Plugin
start writing code
development is done in Objective-C development is done in Java or C/C++
deploy costs $99/yr and app has to pass Google simple takes a $25 flat fee to
a screening process shelf your apps
iOS “Simulator” - runs native code Android Emulator - runs on a virtual
machine
Debug takes 5 seconds on the iOS Debug takes about 30 seconds to
Simulator redeploy and start up in the Emulator on
a perfectly-modern machine
has Interface Builder create UI layouts in XML
Devices have known screen dimensions suffers from fragmentation - many
and hardware versions of the OS and Devices on the
market

20. 20
Reasons for Native Applications
 Performance
 Offline
Mode
 Findability
 Device Attributes
 Monetization

21. 21
Mobile Web Application
HTML5 & JavaScript frameworks

22. 22
Reasons for Mobile Web Applications
 Native not for all applications
 Good enough for many applications
 JavaScript performance improving
 HTML 5
 CSS 3
 Modern Browsers
 Easy to Deploy and Maintain

23. 23
When does an App Make Sense?
 Interactivity/Gaming – for interactive games (think Angry Birds) an app is almost always
going to be your best choice
 Regular Usage/Personalization – If your target users are going to be using your app in a
personalized fashion on a regular basis (think EverNote) then an app provides a great way
to do that.
 Complex Calculations or Reporting – If you need something that will take data and allow
you to manipulate it with complex calculations, charts or reports (think banking or
investment) an app will help you do that very effectively.
 Native Functionality or Processing Required - if you need to access a user's camera or
processing power an app will still do that much more effectively.
 No connection Required – If you need to provide offline access to content or perform
functions without a network/wireless connection then an app makes sense.

24. 24
Mobile JavaScript Libraries
 jQueryMobile
 Sencha Touch 2 uses Ext JS 4
 PhoneGap

25. 25
Sencha Touch 2 - Mobile JavaScript
 uses Ext JS 4 framework
 Sencha Touch is licensed under free commercial and open source licenses for application development,
and a paid commercial license for OEM uses.
 High-performance HTML5 mobile application framework that enables developers to build fast and
impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more.
 Sencha SDK Tools give you the best of both worlds, providing a way to seamlessly “wrap” your web app
in a native shell. Whether you‟re on Mac or Windows, you‟re one command away from deploying to the
Apple App Store or Google Play
 Sencha Touch Charts with natural gestures visualizing and understanding complex datasets is effortless.
Pinch-to-zoom, swipe-to-pan across data, and tap for deep dives. Data flows come to life with every tap,
pinch, and swipe.
 Features
 AJAX - Sencha Touch provides full AJAX support, including CORS and JSON-P
 DOM manipulation - Full DOM manipulation support available
 Feature Detection - Automatically detects the presence of features like geolocation, canvas and
orientation support
 Geolocation - Provides a simple wrapper around geolocation on devices that support it
 Icons - 300 icons included
 Example apps - 8 full example apps included
 Touch events - Provides a full range of touch events and gestures like tap, swipe and pinch

26. 26
jQuery - Mobile JavaScript
 Touch-Optimized Web Framework for Smartphones & Tablets
 A very popular Open Source JavaScript library
 jQuery Mobile has broad support for the vast majority of all
modern desktop, smartphone, tablet, and e-reader platforms
 Simplifies HTML document traversing, event handling,
animating and Ajax interactions
 Cross browser compatibility
 CSS3 selectors compliant
 Fast and Small footprint
 Tons on plugins
 jQuery UI
 jQuery Mobile

27. 27
PhoneGap - Mobile JavaScript
 PhoneGap is an open-source project that has been
moved to the Apache Software Foundation
 Get cross-platform mobile apps in three easy steps
 Write your app using HTML, CSS and JavaScript
 Upload it to the PhoneGap Build service
 Get back app-store ready apps for Apple iOS, Google
Android, Palm, Symbian, Blackberry and more

28. 28
PhoneGap Features
 PhoneGap provides a basic JavaScript API (interface) to your device and allows you to do much
more than a standard mobile website. These features include the following:
 Accelerometer enables you to track the relative motion of the physical device
 Camera provides full support for both taking pictures and working with existing pictures
 Capture helps you capture both audio and video
 Compass allows you to tap into the compass of the device
 Connection tells you if the device is connected and how it is connected
 Contacts offers full support for searching the user's contact database as well as adding new contacts
 Device provides basic information about the device, including the device's operating system
 Events detects various device-specific events, including resume, and is useful when a phone call interrupts
your application
 File delivers basic file read and write operations for the device
 Geolocation tracks where the device is
 Media provides basic audio playback features
 Notification offers a richer notification system than the basic alerts and confirmation screens most mobile
browsers provide
 Storage provides access to a SQLite database for your application and provides much richer support for data
storage

29. PhoneGap Features
29

30. 30
PhoneGap Pricing

31. 31
Analytics
 Google Analytics for Mobile Apps SDKs provide an
interface for tracking activity within mobile apps and
reporting that activity to Google Analytics
 Google Analytics SDKs for iOS and Android
 Usethe mobile tracking SDK to track your phone
applications with the following Analytics interaction
types:
 Pageview Tracking
 Event Tracking
 Ecommerce Tracking
 Custom Variables
 Mobile ads for your app (Android only)

32. 32
Design Considerations for Building Mobile Applications
 Decide on the Application type - Native, Web or Hybrid
 Security - store data in encrypted form on the local device or access it real time
 Storage - Use the phone‟s data memory judiciously
 Connection & bandwidth - Understand that the users pay for every byte transmitted and
received. Before you open up a data connection or before you start downloading that
large piece of data from a service, warn the user
 Handle system interrupts effectively - When your application is pushed to the
background, pause those game timers, disable those animations, and save the state of
your application
 Memory usage - Limited memory so code wisely
 Battery - is very important. if you are building a location-aware application, do not query
the GPS sensor every few milliseconds.
 Graphics - What differentiates your application from the „other‟ applications is UI
responsiveness and graphics. Spend more time in formulating the UI.
 Sync - understand the synchronous and asynchronous way of interacting with the remote
services. How will you handle push messages? How will you sync the local data store with
the remote store?
Finally, do not just build applications. Build solutions.

33. 33
Reference
 https://developer.apple.com/
 http://developer.android.com/
 https://play.google.com
 http://phonegap.com/
 http://jquerymobile.com/
 http://www.sencha.com/
 http://code.google.com/apis/analytics/docs/mobile/overview
.html
 http://www.slideshare.net/jeremiah_owyang/developing-a-
mobile-strategy

34. Thank You
Pragnesh Vaghela
pragnesh@technologythree.com
@technologythree
http://www.technologythree.com
34