Mobile SoftwareMobile Software
EngineeringEngineering
By
Prof. Dr.Prof. Dr. O.P.VyasO.P.Vyas
DAAD Fellow (Germany), AOTS Fellow (Japan)DAAD Fellow (Germany), AOTS Fellow (Japan)
Indian Institute of Information TechnologyIndian Institute of Information Technology
AllahabadAllahabad
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

n Mobile Software: Evolution or Revolution
HH Smartphone Vs Other Mobile DevicesSmartphone Vs Other Mobile Devices
HH Mobile OS: Android OS, Windows Phone,Mobile OS: Android OS, Windows Phone, iOSiOS
HH Mobile Software: Cross Device ApplicationsMobile Software: Cross Device Applications
n Mobile Apps Characteristics & Issues
HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps
HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns
Mobile Software EngineeringMobile Software Engineering
2
HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns
n Why Mobile SE ? Mobile SE Approaches
HH Mobile SE trends : Usability Lifecycle & UX DesignMobile SE trends : Usability Lifecycle & UX Design
HH Mobile Interaction Design: MobileMobile Interaction Design: Mobile IxDIxD PatternsPatterns
HH Mobile Software Testing : Native & Web AppsMobile Software Testing : Native & Web Apps
n Mobile Web & Responsive Web Design
nn Implementation issuesImplementation issues:: Software ProjectsSoftware Projects
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Our Approach …Our Approach …
nn Concepts of Mobile Software & need for EngineeringConcepts of Mobile Software & need for Engineering
approachapproach
nn Significant issues: Mobile UX design, InformationSignificant issues: Mobile UX design, Information
ArchitectureArchitecture
nn Implementations: Mobile Apps Design & DevelopmentImplementations: Mobile Apps Design & Development
nn Responsive Web DesignResponsive Web Designnn Responsive Web DesignResponsive Web Design
nn Tools & Frameworks:Tools & Frameworks: PhonegapPhonegap,, MosyncMosync && jQueryjQuery
HH Modeling with UMLModeling with UML
HH Tools & TechniquesTools & Techniques
4Overview of Mobile Platform:
– Writing codes: Implementing using Tools & Framework
4Tools : J2ME, Javascript, jQuery, HTML5,….. 3
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Types of Mobile Apps
•• Native AppsNative Apps
A native app as one that is
specifically designed to
run on a device’s
operating system and
machine firmware, and
•• Web AppsWeb Apps
A Web app, or browser
application, is one in
which all or some parts
of the software are
downloaded from themachine firmware, and
typically needs to be
adapted for different
devices.
Ex. Address book,Address book,
calendar andcalendar and
calculatorcalculator
downloaded from the
Web each time it is run.
Ø It can usually be
accessed from all Web-
capable mobile devices.
Ex. Weather Widgets,Weather Widgets,
Social Networking andSocial Networking and
Online GamesOnline Games.
8/29/20134
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Technical difference between the two?
• For instance, a native
application developed for
the iPhone will need to run
on its proprietary iOS
platform, or on Symbian
for many Nokia devices,
and so forth.
• One interesting point to note
is that while architectural
differences will likely remain
between a native and Web
application for some time, the
user experiences provided by
both interfaces are
increasingly blurred, as most
native apps utilize real-time
and so forth.
• A Web app, however, is
typically coded in a
browser-rendered
language such as HTML
combined with
JavaScript.
native apps utilize real-time
Web connectivity and Web
apps provide offline modes
that can be accessed without
network connectivity.
• As a result, some of these
apps are now referred to as
hybrid apps.
8/29/2013
5
Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Native:Native:
• For native apps, the advent
of the Apple App Store was
the game changer.
• Native apps will remain
preferred choice for heavy
apps such as 3D gaming in
the near future.
Web:Web:
• For mobile Web apps, notable
developer interest emerged only in
the last year or so after Google’s
successful implementation of
HTML5-based apps
• Web useful for subscription -
based services such as
communications, news & weather,
financial services, retail andfinancial services, retail and
shopping.
8/29/20136
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Why Web Apps…..
Web Apps offer an architectural advantagearchitectural advantage
when targeting a crossa cross--device launchdevice launch, where significantly less
platform migrationplatform migration is required compared to native applications,
Similar Platform independence paradigm of Java TechnologyJava Technology…
8/29/2013
7
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Helpful Developer ToolsHelpful Developer Tools
n Mobile developers aren’t just looking into coding and
design resources.
n There is also a high demand for software tools and
IDEs, not to mention powerful mobile frameworks.
n Mobile Software development is a difficult task which
requires quite a bit of dedication, but utilizing
additional tools will make your job a whole lot easier.additional tools will make your job a whole lot easier.
H jQuery is a multi-browser JavaScript library
designed to simplify the client-side scripting of
HTML.
H jQuery Mobile: Touch-Optimized Web
Framework for Smartphones & Tablets. A
unified, HTML5, HTML5--based user interfacebased user interface system for all
popular mobile device platforms,
nn Mobile Software Testing: SeleniumMobile Software Testing: Selenium
8
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

9
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

jQueryjQuery
n jQuery is a multi-browser JavaScript library designed toJavaScript library designed to
simplify the clientsimplify the client--side scriptingside scripting of HTML.
n Free, Open Source Software, was released in January 2006 by
John Resig.
n jQuery greatly simplifies JavaScript programming
n It is currently developed by a team of developers led by Dave
Methvin.Methvin.
n Used by over 65% of the 10,000 most visited websites, jQuery
is the most popular JavaScript library in use today.
10
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

jQuery MobilejQuery Mobile
n jQuery Mobile: Touch-Optimized Web Framework for
Smartphones & Tablets
H A unified, HTML5, HTML5--based user interfacebased user interface
system for all popular mobile device
platforms,
H built on the rock-solid jQueryjQuery andand jQueryjQuery UIUIH built on the rock-solid jQueryjQuery andand jQueryjQuery UIUI
foundation.
n Its lightweight code is built with
H progressive enhancement, and has a
flexible, easily themeable design.
n Latest stable version - 1.3.1
nn URL: http://jquerymobile.com/URL: http://jquerymobile.com/ 11
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

PhoneGapPhoneGap
n There haven’t been many APIs developed over HTML5 to
build solid mobile applications. Notably the mobile
landscape has been lacking these types of websites, which
is exactly why PhoneGap fills the niche so well. Their
platform lets you easily construct HTML5-based apps as native
applications on 6 different platforms.
n The process works by first compressing your code and
passing it through PhoneGap’s application framework. Frompassing it through PhoneGap’s application framework. From
there your apps can reach a large portion of the mobile
marketplace including Android, iOS, Windows Phone 7, and
BlackBerry
12
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

MoSyncMoSync
n MoSync is a free and open source software development kit
(SDK) for mobile applications.
n It is integrated with the Eclipse development environment
and is provided under a dual license scheme; a commercial
license and an open source GPL version 2 license.
n The framework produces native mobile applications for
multiple platforms using C/C++, html5 scripting and anymultiple platforms using C/C++, html5 scripting and any
combination thereof. The target group for MoSync are both
web developers looking to enter the mobile space, as well
as the ordinary PC/Mac desktop developer with knowledge
in C/C++ development
13
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mosync
nn MoSyncMoSync is ais a free and open source software development kitfree and open source software development kit
(SDK)(SDK) for mobile applications.for mobile applications.
nn It is integrated with theIt is integrated with the Eclipse development environmentEclipse development environment,,
and is provided under a dual license scheme; a commercialand is provided under a dual license scheme; a commercial
license and an open source GPL version 2 license.license and an open source GPL version 2 license.
nn The framework producesThe framework produces native mobile applications fornative mobile applications for
multiple platforms using C/C++, html5 scriptingmultiple platforms using C/C++, html5 scripting and anyand anymultiple platforms using C/C++, html5 scriptingmultiple platforms using C/C++, html5 scripting and anyand any
combination thereof.combination thereof.
nn The target group forThe target group for MoSyncMoSync are both web developersare both web developers
looking to enter the mobile space, as well as the ordinarylooking to enter the mobile space, as well as the ordinary
PC/Mac desktop developer with knowledge in C/C++PC/Mac desktop developer with knowledge in C/C++
developmentdevelopment
14
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile Device
Mobile Devices & PlatformsMobile Devices & Platforms
15
TabletsTabletsMobileMobile
PhonesPhones
Basic &Basic &
FeatureFeature
phonesphones
SocialSocial
PhonesPhones
TVTV
Android
Based
Apple
iPhones
SmartphonesSmartphones
NonNon--PhonePhone
Smart TVSmart TV
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Developing Native AppsDeveloping Native Apps
ØØiPhoneiPhone AppsApps
H iOS
H Objective-C, C
H Requires Apple Developer Account
H developer apple.com/iPhone
ØØAndroid AppsAndroid Apps
H Android
H Java, C, C++
H Open source OS (based on Linux)
H developerandroid.com
ØØWindows AppsWindows Apps
ØØBlackBerryBlackBerry
16
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Windows AppsWindows Apps
nn Windows MobileWindows Mobile
H C#, C
H .NET, CF of Windows Mobile API,
H most devices ship with J2ME compatible
JVMJVM
H developer.windowsmobile.com
nn Window PhoneWindow Phone
H C#, VB.NET
H SilverLight, XNA Framework
17
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

WindowsWindows
Microsoft has been trying to enter the
mobile space as a big player for
years. Windows Mobile was its
main platform, until it decided to
start from scratch: Windows Phone
was the result, leading to Windows
8 on the desktop and tablets later.
A new mobile operating systemmobile operating system,
developed from the ground up with
a unique user interface (originallya unique user interface (originally
called Metro), it provides a different
experience than the other main
platforms.
Both Windows Phone and the
Windows tablet and desktop
versions (from version 8) include an
official Windows store for
applications and content.
NokiaNokia LumiaLumia 820 with Windows Phone 8 installed820 with Windows Phone 8 installed
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Windows PhoneWindows Phone
Microsoft launched its new operating system with companies suchnew operating system with companies such
as HTC, LG, and Samsungas HTC, LG, and Samsung, but it didn’t get too much market
share.
A special agreement with Nokia changed this, providing much wideragreement with Nokia changed this, providing much wider
Windows Phone distributionWindows Phone distribution worldwide starting in 2012.
Most independent analysts conclude that in the following years iOSiOS,,
Android, and Windows PhoneAndroid, and Windows Phone are likely to be the main threeAndroid, and Windows PhoneAndroid, and Windows Phone are likely to be the main three
platforms in the market.
The first version of the Windows Phone OS was 7.0Windows Phone OS was 7.0 (following on
from Windows Mobile 6.5). This was followed by the first big
step: Windows Phone 7.5, also known as Mango, which
supported multitasking and HTML5 in Internet Explorer 9.
Windows Phone devices include Microsoft-related services and
applications, such as Office, Internet Explorer, and Bing services.
Applications on Windows Phone devices can only be installed
through the official Windows store.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

WindowsWindows
The second generation of this platform, known as Windows PhoneWindows Phone
88, is not compatible with devices sold with 7.x, although these
devices were upgraded to Windows Phone 7.8, which includes
some of the new features of the second-generation platform
(such as a new Home screen with tiles).
Windows Phone 8 includes a new architecture and an optimized UInew architecture and an optimized UI
for better customization,for better customization, including Kid’s Corner, which provides a
worry-free way for your kids to play with your phone.worry-free way for your kids to play with your phone.
All Windows Phone 8 devices include the Windows Phone Store,Windows Phone Store,
formerly known as Windows Marketplace, for native app
distribution
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Windows 8
Windows Phone is not intendedis not intended for tablets because Windows 8—the
big version—is prepared for bigger touch devices.
Windows 8 includes the same user interfacesame user interface that appeared first in the
phone version of Microsoft’s mobile operating system.
Windows 8 is included with many tablets on the market, including
Microsoft’s own devices and those from different vendors, and
every version supports Windows 8 Store apps
—fullfull--screen applications created with HTML5 or .NETscreen applications created with HTML5 or .NET—fullfull--screen applications created with HTML5 or .NETscreen applications created with HTML5 or .NET
The operating system includes an official Windows StoreWindows Store for the first
time, for app distribution.
This operating system is optimized for desktops, notebooks, and
tablet devices. For tablets, it is available in two main versions:
Ø Windows 8 Pro and Windows 8 RT.
Ø The first version is the “classicclassic” Intel chipset–based version, and it
supports every Windows Vista or legacy Windows XP application
in a “Desktop” mode.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Windows for MobileWindows for Mobile
Microsoft originally named the Windows Phone and Windows 8 user
interface Metro, but a trademark dispute forced it to drop this name.
It is now called the “Windows 8–style UI” or “Windows Store UI.”
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Windows Phone & NokiaWindows Phone & Nokia
• In late 2011, Nokia began using Windows Phone as the main
smartphone platform in devices released under the marketing
series name LumiaLumia.
• These devices are replacing Symbian devices as Nokia’s main
high-end line and will coexist with them for a couple of years.
• Nokia Lumia phones have Windows Phone 7.x, 8.0, or later and
include Microsoft and Nokia software such as Internet Explorer,
Bing, Nokia Maps, Nokia Drive, and the Windows Phone Store.Bing, Nokia Maps, Nokia Drive, and the Windows Phone Store.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

BlackBerryBlackBerry
• Research in Motion (RIMRIM) was the Canadian manufacturer of the
BlackBerryBlackBerry devices, mobile devices focused on being “alwaysalways
connectedconnected” with push technologies.
• The company was renamed “BlackBerry” in early 2013, dropping the
RIM name for the future.
• Early adopters were primarily corporate users who needed to remain
connected to intranets and corporate networks; then the devices
appeared in new markets, becoming popular with teenagers and instant
messaging fans.messaging fans.
• RIM used to call all its devices “smartphones,” but others did not always
consider them as falling into that category
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

BlackBerryBlackBerry
• For years RIM had few devices aimed at the mass market; most of them
had QWERTY keyboards and were not designed for gaming.
• Many of these devices had proprietary input devices, like a scroll wheelproprietary input devices, like a scroll wheel
or a touchpador a touchpad, although some touch-enabled devices were launched in
the last few years, giving users more multimedia and gaming support.
• Until 2012 all BlackBerry smartphones shipped with the BlackBerry OSBlackBerry OS,
a proprietary operating system compatible with Java MEJava ME with
extensions, and, of course, a mobile browsermobile browser.extensions, and, of course, a mobile browsermobile browser.
• We can categorize the devices by operating system version. The
versions available on the market in 2012 were 4.7, 5.0, 6.0, 7.0, 7.1,
and the new BB10 platform.
• Versions 4.7 and 5.0 should be considered legacy platforms; however,
there are still some old devices in some markets working with these
(more than three-year-old) versions.
• All the BlackBerry devices support App World, the BlackBerry
application store.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile manufacturer and platform developerMobile manufacturer and platform developer
websiteswebsites
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Smart TVSmart TV Platforms
• You’re thinking: my TV is not too mobile! Well, you’re right. We
are not going to talk too much about TVs in this discussion, but
it’s important to give them a mention.
• Why?
– Because interactive TV systems are usinginteractive TV systems are using
web technologiesweb technologies, and most of them areweb technologiesweb technologies, and most of them are
imported from mobile operating systems.
– While TVs are not mobile, they usually
have web browsers and engines similar to
those of mobile devices.
• And mobile web developers usually are the
first group of professionals to be called when
a company needs a TV-based application.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Smart TVSmart TV
• At the time of this writing, interactive TV platforms are divided
into native platforms and set-top box (STB) platforms.
1) The first group includes companies that are delivering thedelivering the
interactive platform with the TVinteractive platform with the TV itself,
2) While the latter are just setset--top boxestop boxes that you can buy and
attach to any HDMI-based TV.
• As with smartphones and tablets, we can find low-end TVs and• As with smartphones and tablets, we can find low-end TVs and
high-end TVs on the market, with radical differences in the
engines behind them.
• Interactive TV platforms typically include a web browser andweb browser and
native web or widget appsnative web or widget apps that can be attached to the TV home
screen or even to a live channel to follow the video streaming.
• On the market today we can find AndroidAndroid--based,based, OperaOpera--basedbased,
and custom based TVcustom based TV platforms.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Application developmentAndroid Application development
29
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Application Development on AndroidApplication Development on Android
n Android Software Environment
HH Linux KernelLinux Kernel
HH Libraries & DVMLibraries & DVM
HH Application FrameworkApplication Framework
HH ApplicationsApplicationsHH ApplicationsApplications
n Development Tools
HH Android SDKAndroid SDK
44Android SDKAndroid SDK
44Android Development ToolsAndroid Development Tools
44Dalvik Virtual MachineDalvik Virtual Machine
44How to develop Android ApplicationsHow to develop Android Applications
30
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

31
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Application developmentAndroid Application development
n Android applications consist of different components andcomponents and
can recan re--use componentsuse components of other applications.
n This leads to the concept of a tasktask in Android; an application
can re-use other Android components to archive a task.task.
H For example you can trigger from your
application another application which has itself
registered with the Android system to handleregistered with the Android system to handle
photos.
H In this other application you select a photo and
return to your application to use the selected
photo.
n The Android system supports background processing,
provides a rich user interface library, supports 2-D and 3-D
graphics using the OpenGL libraries, access to the file
system and provides an embedded SQLite database.
32
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Google Play (Android Market)Google Play (Android Market)
Google offers the Google Play service in which
programmers can offer their Android application to
Android users.
Google phones include the Google Play application
which allows to install applications.
n Google Play also offers an update service, e.g. if an Google Play also offers an update service, e.g. if a
programmer uploads a new version of his application to
Google Play, this service will notify existing users that an
update is available and allow to install it.
n Google Play used to be called Android Market.
33
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Development ToolsAndroid Development Tools
nn Android SDKAndroid SDK
n The Android Software Development Kit (Android SDK)
contains the necessary tools to create, compile and package
Android application. Most of these tools are command line
based. he primary way to develop Android applications is
based on the Java programming language.
n The Android SDK also provides an Android device emulator,n The Android SDK also provides an Android device emulator,
so that Android applications can be tested without a real
Android phone. You can create Android virtual devices
(AVD) via the Android SDK, which run in this emulator.
n The Android SDK contains the Android debug bridge (adb)
tool which allows to connect to an virtual or real Android
device.
34
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Development ToolsAndroid Development Tools
n Google provides tools based on the Eclipse and IntelliJ IDE
to develop new applications.
n The Android Development Tools (ADT) are based on Eclipse
to develop Android applications.
HH ADT extends the capabilities of Eclipse to letADT extends the capabilities of Eclipse to let
you quickly set up new Android projects,you quickly set up new Android projects,
HH Developing inDeveloping in Eclipse with ADTEclipse with ADT is highlyis highly
recommended and is the fastest way to getrecommended and is the fastest way to get
started.started.
n ADT is a set of components (plug-ins) which extend the
Eclipse IDE with Android development capabilities.
35
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

ADTADT
n Google also supports an IDE called the Android Studio for
creating Android applications. This IDE is based on the
IntelliJ IDE.
n Both tools contains all required functionalities to create,
compile, debug and deploy Android applications from the IDE.
n They also allow the developer to create and start Android
virtual devices for testing.virtual devices for testing.
n Both tools provide specialized editors for resources files,
e.g. layout files. These editors allow to switch between the
XML representation of the file and a preview mode of the
user interface
36
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

First things firstFirst things first
•Get Eclipse with ADT plug -in (other IDE is also applicable)
1. Select Help > Software Updates > Find and Install … from within Eclipse.
2. In the resulting dialog box, choose Search for new features to install.
3. Select New Remote Site, and enter the following address into the dialog box:
https://dl-ssl.google.com/android/eclipse/
4. The new site you entered should now be checked. Click Finish.
5. Eclipse will now download the plug-in. When it’s fi nished, select Android Plugin > Developer5. Eclipse will now download the plug-in. When it’s fi nished, select Android Plugin > Developer
Tools from the resulting Search Results dialog box, and click Next.
6. Read and then Accept the terms of the license agreement, and click Next and then Finish. As
the ADT plug-in is not signed, you’ll be prompted before the installation continues.
7. When complete, you’ll have to restart Eclipse and update the ADT preferences. Restart and
select Window Preferences … (or Eclipse > Preferences for the Mac OS).
8. Then select Android from the left panel.
9. Click Browse …, and navigate to the folder into which you unzipped the Android SDK; then click
Apply and OK.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Dalvik Virtual MachineDalvik Virtual Machine
n The Android system uses a special virtual machine, i.e. the
Dalvik Virtual Machine to run Java based applications.
n Dalvik uses an own bytecode format which is different from
Java bytecode.
n Therefore you cannot directly run Java class files on Android,
they need to get converted in the Dalvik bytecodeDalvik bytecode format.
E d i t o r C o m p i le r
38
E d i t o r
:
7
K H e l lo .j a v a
;
S o u rc e
c o d e
C o m p i le r
:
H e ll o . c la s s
;
B y t e c o d e s
"In t e r p r e t e r 0 1
H e l l o ,
W o r l d !
¿
In t e r p r e t e r 0 2
H e l l o ,
W o r l d !
:
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

JVM Vs DVMJVM Vs DVM
39
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

How to develop Android ApplicationsHow to develop Android Applications
n Android applications are primarily written in the Java
programming language.
n The Java source files are converted to Java class files by the
Java compiler.
n The Android SDK contains a tool called dxdx which converts Java
class files into a .dex (Dalvik Executable) file.
H All class files of one application are placed in oneH All class files of one application are placed in one
compressed .dex file.
H During this conversion process redundant
information in the class files are optimized in the
.dex file.
40
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Developing Android ApplicationDeveloping Android Application
n These dex files are therefore much smaller in size than the
corresponding class files.
n The .dex file and the resources of an Android project, e.g.
the images and XML files, are packed into an .apk (Android
Package) file.
n The program aapt (Android Asset Packaging Tool) performsn The program aapt (Android Asset Packaging Tool) performs
this packaging.
n The resulting .apk file contains all necessary data to run the
Android application and can be deployed to an Android
device via the adb tool.
n The Android Development Tools (ADT) performs these steps
transparently to the user.
n If you use the ADT tooling you press a button the whole
Android application (.apk file) will be created and deployed. 41
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Basic Building BlocksAndroid Basic Building Blocks
•Activities - UI component typically corresponding to one screen.
Android uses a special class called anAndroid uses a special class called an IntentIntent to move from screento move from screen
to screen.to screen.
An intent describes what an application wants done.An intent describes what an application wants done.
There is a related class called an IntentFilter. It is a description of
what intents an activity (or BroadcastReceiverBroadcastReceiver) is capablewhat intents an activity (or BroadcastReceiverBroadcastReceiver) is capable
of handling.
•Broadcast Intent Receiver- a way to respond to an external event like
notifications or alarm.
•Services – Faceless tasks that run in the background.
•Content Providers – Enable applications to share data.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Understanding the Anatomy of an AndroidUnderstanding the Anatomy of an Android
ApplicationApplication
ContextContext
ActivityActivity
IntentIntent
ServiceService
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Important terminologyImportant terminology
ContextContext
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

ActivityActivity
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

IntentIntent
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

ServiceService
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Using the application contextUsing the application context
nn The context can be used to manage applicationThe context can be used to manage application--
specific configuration details as well as applicationspecific configuration details as well as application
wide operations and data.wide operations and data.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android Application & ActivityAndroid Application & Activity
n Unlike other programming paradigms in which apps are
launched with a main() method,
H the Android system initiates code in an
Activity instance by invoking specific
callback methods that correspond to
specific stages of its lifecycle.specific stages of its lifecycle.
H There is a sequence of callback
methods that start up an activity and a
sequence of callback methods that tear
down an activity.
49
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Android LifecycleAndroid Lifecycle
n As a user navigates through, out of, and back to your app,
the Activity instances in your app transition between
different states in their lifecycle.
HH For instance, when your activity starts for theFor instance, when your activity starts for the
first time, it comes to the foreground of thefirst time, it comes to the foreground of the
system and receives user focus.system and receives user focus.
HH During this process, the Android system calls aDuring this process, the Android system calls a
series ofseries of lifecycle methodslifecycle methods on the activity inon the activity in
which you set up the user interface and otherwhich you set up the user interface and other
components.components.
HH If the user performs an action thatIf the user performs an action that startsstarts
another activityanother activity or switches to another app, theor switches to another app, the
system calls another set of lifecycle methodssystem calls another set of lifecycle methods
on your activity as it moves into theon your activity as it moves into the
backgroundbackground
50
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Activity LifecycleActivity Lifecycle
51
During the life of an activity, the system calls a core set of lifecycle methodsset of lifecycle methods in a
sequence similar to a step pyramidstep pyramid.
That is, each stage of the activity lifecycle is a separate step on the pyramid.
As the system creates a new activity instance, each callback method moves the activity
state one step toward the top.
The top of the pyramid is the point at which the activity is running in the foreground and
the user can interact with it.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Core files and directories of the AndroidCore files and directories of the Android
ApplicationApplication
AndroidManifest.xml • Global application description file.
• Defines application’s capabilities and
permissions and how it runs
Default.properties • Automatically created project file.
• Defines your application’s build target
and other build system options.and other build system options.
src folder • All source code resides
src/package name/.java file • core source file that defines the entry
point of Android application.
gen foldergen folder •• Autogenerated resource files reside.Autogenerated resource files reside.
gen/package name/R.java • Application resource management
source file
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Core files and directories of the AndroidCore files and directories of the Android
ApplicationApplication
res folder • All application resources are
managed.
res/drawable-*/icon.png • different resolutions of the
application icon.
res/layout/main.xml • single screen layout file
res/values/strings.xml • Application string resources.
assets folder • application assets are pieces of
application data (files,directories) that
should not be managed as application
resources
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

n Mobile Software: Mobility or Ubiquity
HH Mobile Web & Responsive WebsitesMobile Web & Responsive Websites
n Why Mobile Web ?
nn Significant Issues inSignificant Issues in SmartphonesSmartphones, Tablet & Smart TV, Tablet & Smart TV
Mobility & Mobile WebMobility & Mobile Web
54
n Responsive Website Characteristics
HH R W Design : Developing Mobile Web AppsR W Design : Developing Mobile Web Apps
HH HTML5 ,HTML5 , jQueryjQuery
n Mobile SE Implementations
HH Mobile SE trends :Mobile SE trends : PhonegapPhonegap && MosyncMosync
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

SQLite DatabasesSQLite Databases
forforforfor
Storing StructuredStoring Structured
DataData
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile Software EngineeringMobile Software Engineering
BlackBerryBlackBerry
Apps BehaviorApps BehaviorApps BehaviorApps Behavior
inin
AndroidAndroid
iOSiOS
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

BlackBerryBlackBerry
Mobile App developmentMobile App developmentMobile App developmentMobile App development
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

BlackBerryBlackBerry
• Research in Motion (RIMRIM) was the Canadian manufacturer of the
BlackBerryBlackBerry devices, mobile devices focused on being “alwaysalways
connectedconnected” with push technologies.
• The company was renamed “BlackBerry” in early 2013, dropping the
RIM name for the future.
• Early adopters were primarily corporate users who needed to remain
connected to intranets and corporate networks; then the devices
appeared in new markets, becoming popular with teenagers and instant
messaging fans.messaging fans.
• RIM used to call all its devices “smartphones,” but others did not always
consider them as falling into that category
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

BlackBerryBlackBerry
• For years RIM had few devices aimed at the mass market; most of them
had QWERTY keyboards and were not designed for gaming.
• Many of these devices had proprietary input devices, like a scroll wheelproprietary input devices, like a scroll wheel
or a touchpador a touchpad, although some touch-enabled devices were launched in
the last few years, giving users more multimedia and gaming support.
• Until 2012 all BlackBerry smartphones shipped with the BlackBerry OSBlackBerry OS,
a proprietary operating system compatible with Java MEJava ME with
extensions, and, of course, a mobile browsermobile browser.extensions, and, of course, a mobile browsermobile browser.
• We can categorize the devices by operating system version. The
versions available on the market in 2012 were 4.7, 5.0, 6.0, 7.0, 7.1,
and the new BB10 platform.
• Versions 4.7 and 5.0 should be considered legacy platforms; however,
there are still some old devices in some markets working with these
(more than three-year-old) versions.
• All the BlackBerry devices support App World, the BlackBerry
application store.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile manufacturer and platform developerMobile manufacturer and platform developer
websiteswebsites
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile AppsMobile Apps BehaviourBehaviour
Ø How App can be limitedlimited to Mobile Context?
Ø How the Phone features are saved from getting.
Ø How can we explain Life Cycle of an App ?
ØØAre there different Lifecycle for Android App orAre there different Lifecycle for Android App or
iOSiOS App?App?
ØØWhat is the role ofWhat is the role of UkitUkit inin iOSiOS ??
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile Software & PhoneMobile Software & Phone
• Smartphones are communications devices, so making phone
calls is their most basic functionmost basic function.
• It is imperative that any Mobile Software should not ‘disturb’ any
of the basic phone functions of the Smartphone's.
• For Mobile Website, while mobile platforms place manymobile platforms place many
limitations on design and contentlimitations on design and content, they also open up new
opportunities that traditional Web sites cannot provide.opportunities that traditional Web sites cannot provide.
– For example, there is better integration withbetter integration with
phone functionsphone functions such as direct calling and
text messaging, which lets mobile sites
facilitate ordering products by phone.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Life Cycle of Mobile AppLife Cycle of Mobile App
What is the Life Cycle on iOS / Android
How to have efficient Memory ManagementHow to have efficient Memory Management
Apps onApps on iPhonesiPhones
&&
Life Cycle ofLife Cycle of iOSiOS AppsApps
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

App on iOS
• The application life cycle constitutes the sequence of events that
occurs between the launch and termination of application. In iOS,
the user launches application by tapping its icon on the Home
screen. Shortly after the tap occurs,
–– System displays some transitional graphicsSystem displays some transitional graphics
–– Proceeds to launch your application by calling its main functionProceeds to launch your application by calling its main function
–– From this point on, the bulk of the initialization work is handed overFrom this point on, the bulk of the initialization work is handed over
toto UIKitUIKit,, which loads the application’s user interface and starts itswhich loads the application’s user interface and starts itstoto UIKitUIKit,, which loads the application’s user interface and starts itswhich loads the application’s user interface and starts its
event loop.event loop.
–– There is a predefined sequence of events that occurs from the timeThere is a predefined sequence of events that occurs from the time
of application start up to the time it quits.of application start up to the time it quits.
–– At key points in the application’s life,At key points in the application’s life, UIKitUIKit sends messages to thesends messages to the
Third Party application's delegate object to let it know what isThird Party application's delegate object to let it know what is
happening.happening.
•• TheThe UIKitUIKit framework provides the classes needed to construct andframework provides the classes needed to construct and
manage an application’s user interface formanage an application’s user interface for iOSiOS. It provides an. It provides an
application object, event handling, drawing model, windows,application object, event handling, drawing model, windows,
views, and controls specifically designed for a touch screenviews, and controls specifically designed for a touch screen
interfaceinterface
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

App Life Cycle in iOS4
• Because of background applications support in iOS 4, following are
the possible state of any third party application:
– Not running: The application has not been launched.
– Inactive: The application is running in background but not receiving
events.
– Active: The application is running in foreground and is receiving events.
– Background: Most applications enter this state briefly on their way to
being suspended. However, an application that requests extra executionapplication that requests extra execution
time may remain in this statetime may remain in this state for a period of time. In addition, an
application being launched directly into the background enters this state
instead of the inactive state.
– Suspended: The application is in the background but is not executing
code. The system moves application to this state automatically and at
appropriate times. While suspended, an application is essentially freeze-
dried in its current state and does not execute any code. During low-
memory conditions, the system purges suspended applications without
notice to make more space for the foreground application.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

App Life cycle on iOS
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Life Cycle of Mobile AppsLife Cycle of Mobile Apps
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobility & Mobile WebMobility & Mobile Web
68
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile WebMobile Web
n The Mobile Web refers to access to the world wide web, i.e. the
use of browser-based Internet services, from a handheld mobile, from a handheld mobile
device,device, such as a smartphone, a feature phone or a tablet
computer, connected to a mobile network or other wireless
network.
n Traditionally, access to the Web has been via fixed-line services
on large-screen laptops and desktop computers.on large-screen laptops and desktop computers.
n However, the Web is becoming more accessible by portable and
wireless devices.
n Mobile devices are available in areas of the World where
computers and fixed Internet access won’t be available for long if
ever;
69
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile WebMobile Web
Ø An early 2010 ITU (International Telecommunication
Union) report said that with the current growth rates,
web access by people on the go — via laptops and
smart mobile devices – is likely to exceed web access
from desktop computers within the next five years.
Ø “Accessing the Web from mobile devices is on track to
surpass desktop usage in a just a year or two.” ( June
2013).
ØMobile Web would require optimization of
content and user navigation for effective
interaction.
70
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile WebMobile Web
n With the surge of powerful mobile devices , the role of the Web as
a platform for content, applications and services on these devices
is increasingly important
n Mobile devices with slower download request / response times, the
latency of over-the-air data transmission, with "high-latency
connections, slower CPUs, and less memory" force developers to
rethink Web applications created for desktops with "wired
connections, fast CPUs, and almost endless memory
n The shift to Mobile Web access has been accelerating with the
rise since 2007 of larger multitouch smartphones, and of multitouch
tablet computers since 2010.
n Both platforms provide better Internet access, screens, and mobile
browsers- or application-based user Web experiences than
previous generations of mobile devices have done.
n Web designers may work separately on such pages, or pages
may be automatically converted as in Mobile Wikipedia.
71
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile WebMobile Web
n The term “Mobile Web” (although often criticized) is
commonly used to describe accessing the internet using a
mobile device.
n This definition is broad enough to cover everything from using
a browser on a phone, to using highly customized apps ona browser on a phone, to using highly customized apps on
smartphones or tablets.
72
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile BrowserMobile Browser
n A mobile browser, also called a
microbrowser, minibrowser, or wireless
internet browser (WIB), is a web browser
designed for use on a mobile device
such as a mobile phone or PDA.
n Mobile browsers are optimized so as to
display Web content most effectively
for small screens on portable devices.for small screens on portable devices.
Mobile browser software must be small
and efficient to accommodate the low
memory capacity and low-bandwidth of
wireless handheld devices.
n Typically they were stripped-down web
browsers, but as of 2006 some mobile
browsers can handle more recent
technologies like CSS 2.1, JavaScript,
and Ajax. 73
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile BrowsersMobile Browsers
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile WebMobile Web
n Websites designed for access from Web browsers are referred to
as wireless portals or collectively as the Mobile Web.
n They may automatically create "mobile" versions of each page,
n “There’s an app for that” has made device-specific applications
the rage of the day, with some companies starting off backwards
with “we need an iPhone app”
H instead of first understanding what their users actually need whenH instead of first understanding what their users actually need when
they are mobile, the devices that they use, and then deciding the
best approach for going mobile, which may not be an app,app, but could
be a mobile website instead.
H Mobile websites are universally accessible, less expensive to
develop and maintain, and can be searched and accessed by most
mobile phones.
75
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile Apps & Traditional WebsiteMobile Apps & Traditional Website
76
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

“Applike” Website“Applike” Website
Ø In a more applikeapplike
modelmodel, the client tends to
play a bigger role.
Ø Reusable markup,
77
Ø Reusable markup,
code, and assets can be
stored locally.
ØRequesting only relevant
pieces of content and not
reloading the entire page
reduces bandwidth and
processing, and improves
the sense of interactivity.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile Software:Mobile Software: Mobile delivery methodsMobile delivery methods
n Unlike traditional websites, there are following popular mobile
delivery methods.
H Mobile users that choose to view content in
their browser are best served with either a
mobile-specific site – optimized for mobile
devices –
H OrOr a responsive site – which re-orients /
arranges itself for mobile devices.
n Each delivery method has different pros and cons.
n Responsive sites are more easily indexed in search engines.
n We have to choose what’s right based on our project’s design
context.
78
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Issues in Mobile Web designIssues in Mobile Web design
Aspect ratioAspect ratio
A device’s aspect ratio is the ratio between its longer and shorterratio between its longer and shorter dimensions.
There are vertical (or portrait) devices whose displays are taller than they are
wide, there are horizontal (or landscape) devices whose displays are wider than
they are tall, and there
are also some square screens.
Our websites need to be aware of
this and offer a good experience in both orientations.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Aspect RatioAspect Ratio
•• If there is one thing mobile handset producers cannot agree on, it’sIf there is one thing mobile handset producers cannot agree on, it’s
Aspect RatioAspect Ratio..
•• For years mobile devices and mobile TV options have been all over theFor years mobile devices and mobile TV options have been all over the
map.map.
•• Many started with aMany started with a 4:3 aspect4:3 aspect ratio, the same as television used forratio, the same as television used for
decades before switching todecades before switching to 16:9 widescreen16:9 widescreen..
•• But there could be a change in the air as mobile companies see thatBut there could be a change in the air as mobile companies see that
16:9 may be16:9 may be the aspect of choice in the years to come.the aspect of choice in the years to come.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Aspect RatioAspect Ratio
• The traditional aspect ratio of 4:3 is fairly square; it’s been the
standard go-to format for many tablets and smartphones for
several years now.
• Thousands of apps have been developed on multiple platformsdeveloped on multiple platforms
to closelyto closely adhere to the 4:3 aspect ratioadhere to the 4:3 aspect ratio, beginning with the
iPhone and then with various Android variants.
• The problem has been when mobile video comesmobile video comes into the
picture. With older programming, such as a lot of the catalog ofpicture. With older programming, such as a lot of the catalog of
content like Netflix streaming, the 4:3 ratio has not been much of
a problem.
• The older-style program fits better within the 4:3 framing. But
widescreen content, in the form of network television shows and
widescreen movies, have been a bit more of a challenge. Until
now the widescreen content has had to be shrunk down to the
4:3 format, causing the 16:9 format to be displayed on a 4:3
screen, with the result being black bars on the top and the
bottom of the mobile device screen.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Aspect Ratio: Phones & TV
• Although mobile TV video is the biggest benefit of the
acceptance of 16:9 aspect ratios, mobile devices do so much
more, so apps and software must be reengineered to accept
these new dimensions.
• Apple’s next move is the rumored iPad mini, a iPad in the 7in
realm. Although recent tablets have moved close to the 16:9tablets have moved close to the 16:9
format, such as the Kindle Fire HDformat, such as the Kindle Fire HD which comes in at 16:10 and
1280x800, it will be interesting to see which way Apple moves1280x800, it will be interesting to see which way Apple moves
with the new iPad.
–– Although theAlthough the future of television may well be 16:9future of television may well be 16:9
aspectaspect, the huge landscape of mobile, the huge landscape of mobile smartphonesmartphone
and tablets for mobile content is a lot less clear.and tablets for mobile content is a lot less clear.
–– But there seems to be some unity happening andBut there seems to be some unity happening and
it looks like theit looks like the standard of 16:9 could also bestandard of 16:9 could also be
coming to mostcoming to most, if not all, mobile devices in the, if not all, mobile devices in the
coming year or two.coming year or two.
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

ØØMake the page and its structural elementsMake the page and its structural elements
fit withinfit within 320 pixels320 pixels.
ReduceReduce three columnsthree columns to ato a single columnsingle column..
In the original, desktop layout, three columns feltIn the original, desktop layout, three columns felt
“crunched” on a mobile screen“crunched” on a mobile screen
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Responsive Web DesignResponsive Web Design
RWD is a set of techniquesset of techniques championed by web designer Ethan
Marcotte.
Ø Sites designed with this approach adapt their layouts according
to the environment of the user’s browser, in large part by doing
some nifty things with CSSwith CSS.
Ø Depending on the current value of certain browser conditions like
window size, device orientation, or aspect ratio, we can applywindow size, device orientation, or aspect ratio, we can apply
different CSS in different circumstances.
Ø By rethinking the way we do page layouts, we can make formerly
one-size-fits-all column and grid layouts flow more naturally
across a continuum of browser window sizes.
84
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Responsive Web DesignResponsive Web Design
85
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

Mobile SoftwareMobile Software
While many “classic” software engineering techniques may transfer
easily to the mobile application domain, there are other areas
having bonafide issues for new research and development.
H Usability and User eXperience, in particular, are among
the key quality attributes.
H Most of the applications were relatively small, averaging
several thousand lines of source code, with one or two
developers responsible for conceiving, designing, anddevelopers responsible for conceiving, designing, and
implementing the application;
H Sharp divide between “native” applications, those that run
entirely on the mobile device, and web applications,
which have a small device-based client with execution
occurring on a remote server;
86
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

87
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India