mse august13 (2/3)

Mobile Software Mobile Software EngineeringEngineering

By

Prof. Dr. Prof. Dr. O.P.VyasO.P.VyasDAAD Fellow (Germany), AOTS Fellow (Japan)DAAD Fellow (Germany), AOTS Fellow (Japan)

Indian Institute of Information Technology Indian Institute of Information Technology AllahabadAllahabad

Mobile Software Engineering

Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

n Mobile Software: Evolution or RevolutionHH 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 Applications Mobile Software: Cross Device Applications

n Mobile Apps Characteristics & IssuesHH 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 ApproachesHH Mobile SE trends : Usability Lifecycle & UX Design Mobile SE trends : Usability Lifecycle & UX Design

HH Mobile Interaction Design: Mobile Mobile 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



Our Approach …Our Approach …

nn Concepts of Mobile Software & need for Engineering Concepts of Mobile Software & need for Engineering approachapproach

nn Significant issues: Mobile UX design, Information Significant 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



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 the machine firmware, and

typically needs to be adapted for different devices.

Ex. Address book, Address book, calendar and calendar 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 and Social Networking and Online GamesOnline Games.

8/29/20134



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/20135

Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/



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 and financial services, retail and shopping.

8/29/20136



Why Web Apps…..

Web Apps offer an architectural advantagearchitectural advantagewhen targeting a crossa cross--device launchdevice launch, where significantly less

platform migration platform migration is required compared to native applications,

Similar Platform independence paradigm of Java TechnologyJava Technology…

8/29/20137



Helpful Developer ToolsHelpful Developer Toolsn 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 interface based user interface system for all popular mobile device platforms,

nn Mobile Software Testing: SeleniumMobile Software Testing: Selenium8



9



jQuery jQuery

n jQuery is a multi-browser JavaScript library designed to JavaScript library designed to simplify the clientsimplify the client--side scripting side 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, jQueryis the most popular JavaScript library in use today.

10



jQuery MobilejQuery Mobile

n jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

H A unified, HTML5, HTML5--based user interface based user interface system for all popular mobile device platforms,

H built on the rock-solid jQueryjQuery and and jQueryjQuery UI UI H built on the rock-solid jQueryjQuery and and jQueryjQuery UI UI 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



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. From passing 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



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 any multiple 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



Mosync

nn MoSyncMoSync is a is a free and open source software development kit free and open source software development kit (SDK)(SDK) for mobile applications. for mobile applications.

nn It is integrated with the It is integrated with the Eclipse development environmentEclipse development environment, , and is provided under a dual license scheme; a commercial and 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 produces The framework produces native mobile applications for native mobile applications for multiple platforms using C/C++, html5 scripting multiple platforms using C/C++, html5 scripting and any and any multiple platforms using C/C++, html5 scripting multiple platforms using C/C++, html5 scripting and any and any combination thereof. combination thereof.

nn The target group for The target group for MoSyncMoSync are both web developers are both web developers looking to enter the mobile space, as well as the ordinary looking 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 Device

Mobile Devices & PlatformsMobile Devices & Platforms

15

TabletsTabletsMobile Mobile

PhonesPhones

Basic & Basic & FeatureFeaturephonesphones

Social Social PhonesPhones

TVTV

Android Based

Apple iPhones

SmartphonesSmartphones

NonNon--PhonePhoneSmart TVSmart TV



Developing Native AppsDeveloping Native AppsØØiPhoneiPhone AppsAppsH iOS

H Objective-C, C

H Requires Apple Developer Account

H developer apple.com/iPhone

ØØAndroid AppsAndroid AppsH Android

H Java, C, C++

H Open source OS (based on Linux)

H developerandroid.com

ØØWindows AppsWindows AppsØØBlackBerryBlackBerry

16



Windows AppsWindows Apps

nn Windows MobileWindows Mobile

H C#, C

H .NET, CF of Windows Mobile API,

Hmost devices ship with J2ME compatible JVMJVM

H developer.windowsmobile.com

nn Window PhoneWindow Phone

H C#, VB.NET

H SilverLight, XNA Framework

17



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 (originally a 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.

Nokia Nokia LumiaLumia 820 with Windows Phone 8 installed820 with Windows Phone 8 installed



Windows PhoneWindows Phone

Microsoft launched its new operating system with companies such new 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 wider agreement with Nokia changed this, providing much wider Windows Phone distribution Windows Phone distribution worldwide starting in 2012.

Most independent analysts conclude that in the following years iOSiOS, , Android, and Windows Phone Android, and Windows Phone are likely to be the main three Android, and Windows Phone Android, and Windows Phone are likely to be the main three platforms in the market.

The first version of the Windows Phone OS was 7.0 Windows 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.



WindowsWindows

The second generation of this platform, known as Windows Phone Windows 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 UI new 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



Windows 8Windows Phone is not intended is not intended for tablets because Windows 8—the

big version—is prepared for bigger touch devices.

Windows 8 includes the same user interface same 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 .NET screen applications created with HTML5 or .NET —fullfull--screen applications created with HTML5 or .NET screen applications created with HTML5 or .NET

The operating system includes an official Windows Store Windows 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.



Windows for MobileWindows for Mobile

Microsoft originally named the Windows Phone and Windows 8 userinterface Metro, but a trademark dispute forced it to drop this name.

It is now called the “Windows 8–style UI” or “Windows Store UI.”



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.



BlackBerryBlackBerry• Research in Motion (RIMRIM) was the Canadian manufacturer of the

BlackBerryBlackBerry devices, mobile devices focused on being “always always 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



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 wheel proprietary 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 ME Java 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 manufacturer and platform developer Mobile manufacturer and platform developer websiteswebsites



Smart TV Smart 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 using interactive TV systems are using web technologiesweb technologies, and most of them are web 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.



Smart TV Smart 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 the delivering the interactive platform with the TVinteractive platform with the TV itself,

2) While the latter are just setset--top boxes top 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 and web browser and native web or widget apps native 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 TV custom based TV platforms.



Android Application developmentAndroid Application development

29



Application Development on AndroidApplication Development on Android

nAndroid Software Environment

HH Linux KernelLinux Kernel

HH Libraries & DVMLibraries & DVM

HH Application FrameworkApplication Framework

HH ApplicationsApplicationsHH ApplicationsApplications

nDevelopment Tools

HH Android SDKAndroid SDK

44Android SDKAndroid SDK

44Android Development ToolsAndroid Development Tools

44Dalvik Virtual MachineDalvik Virtual Machine

44How to develop Android Applications How to develop Android Applications 30



31



Android Application developmentAndroid Application development

n Android applications consist of different components and components 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 handle registered 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



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 a n 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



Android Development Tools Android Development Tools

nn Android SDK Android 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



Android Development Tools Android 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 let ADT extends the capabilities of Eclipse to let you quickly set up new Android projects,you quickly set up new Android projects,

HH Developing in Developing in Eclipse with ADT Eclipse with ADT is highly is highly recommended and is the fastest way to get recommended 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



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



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 > DeveloperTools 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. Asthe 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 andselect 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 clickApply and OK.



Dalvik Virtual Machine Dalvik 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 bytecode Dalvik 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 r c e c o d e

C o m p i le r

:

H e l l 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 !

:



JVM Vs DVMJVM Vs DVM

39



How to develop Android Applications How 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 one H 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



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) performs n 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



Android Basic Building BlocksAndroid Basic Building Blocks

•Activities - UI component typically corresponding to one screen.

Android uses a special class called an Android uses a special class called an IntentIntent to move from screen to 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 ofwhat intents an activity (or BroadcastReceiverBroadcastReceiver) is capablewhat intents an activity (or BroadcastReceiverBroadcastReceiver) is capableof 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.



Understanding the Anatomy of an Android Understanding the Anatomy of an Android ApplicationApplication

ContextContext

ActivityActivity

IntentIntent

ServiceService



Important terminologyImportant terminology

ContextContext



ActivityActivity



IntentIntent



ServiceService



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 application specific configuration details as well as application wide operations and data.wide operations and data.



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



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 the For instance, when your activity starts for the first time, it comes to the foreground of the first 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 a During this process, the Android system calls a series of series of lifecycle methods lifecycle methods on the activity in on the activity in which you set up the user interface and other which you set up the user interface and other components. components.

HH If the user performs an action that If the user performs an action that starts starts another activityanother activity or switches to another app, the or switches to another app, the system calls another set of lifecycle methodssystem calls another set of lifecycle methodson your activity as it moves into the on your activity as it moves into the backgroundbackground

50



Activity Lifecycle Activity Lifecycle

51

During the life of an activity, the system calls a core set of lifecycle methods set 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.



Core files and directories of the Android Core 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



Core files and directories of the Android Core 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



n Mobile Software: Mobility or UbiquityHH Mobile Web & Responsive WebsitesMobile Web & Responsive Websites

n Why Mobile Web ?

nn Significant Issues in Significant 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 ImplementationsHH Mobile SE trends : Mobile SE trends : PhonegapPhonegap & & MosyncMosync



SQLite DatabasesSQLite Databases

forforforfor

Storing Structured Storing Structured DataData



Mobile Software EngineeringMobile Software Engineering


Apps Behavior Apps Behavior Apps Behavior Apps Behavior inin

AndroidAndroidiOSiOS




Mobile App developmentMobile App developmentMobile App developmentMobile App development



BlackBerryBlackBerry• Research in Motion (RIMRIM) was the Canadian manufacturer of the

BlackBerryBlackBerry devices, mobile devices focused on being “always always 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




• 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 wheel proprietary 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 ME Java 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 manufacturer and platform developer Mobile manufacturer and platform developer websiteswebsites



Mobile Apps Mobile Apps BehaviourBehaviour

ØHow App can be limited limited 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 or Are there different Lifecycle for Android App or iOSiOS App?App?

ØØWhat is the role of What is the role of UkitUkit in in iOSiOS ??



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 many mobile 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 with better integration with phone functions phone functions such as direct calling and text messaging, which lets mobile sites facilitate ordering products by phone.



Life Cycle of Mobile AppLife Cycle of Mobile App

What is the Life Cycle on iOS / AndroidHow to have efficient Memory ManagementHow to have efficient Memory Management

Apps on Apps on iPhonesiPhones

& &

Life Cycle of Life Cycle of iOSiOS AppsApps



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 graphics System 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 over From this point on, the bulk of the initialization work is handed over to to UIKitUIKit,, which loads the application’s user interface and starts its which loads the application’s user interface and starts its to to UIKitUIKit,, which loads the application’s user interface and starts its which loads the application’s user interface and starts its event loop.event loop.

–– There is a predefined sequence of events that occurs from the time There 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 the sends messages to the Third Party application's delegate object to let it know what is Third Party application's delegate object to let it know what is happening. happening.

•• The The UIKitUIKit framework provides the classes needed to construct and framework provides the classes needed to construct and manage an application’s user interface for manage 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 screen views, and controls specifically designed for a touch screen interfaceinterface



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 execution application that requests extra execution time may remain in this state time 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.



App Life cycle on iOSMobile Software Engineering


Life Cycle of Mobile AppsLife Cycle of Mobile AppsMobile Software Engineering


Mobility & Mobile WebMobility & Mobile Web

68



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




Ø 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 WebMobile Webn With the surge of powerful mobile devices , the role of the Web as

a platform for content, applications and services on these devicesis 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




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 on a browser on a phone, to using highly customized apps on smartphones or tablets.

72



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 BrowsersMobile BrowsersMobile Software Engineering



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 when H 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 Apps & Traditional WebsiteMobile Apps & Traditional Website

76



“Applike” Website“Applike” Website

Ø In a more applike applike 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: 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



Issues in Mobile Web designIssues in Mobile Web design

Aspect ratioAspect ratioA 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 ofthis and offer a good experience in both orientations.



Aspect RatioAspect Ratio•• If there is one thing mobile handset producers cannot agree on, it’s If 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 the For years mobile devices and mobile TV options have been all over the map. map.

•• Many started with a Many started with a 4:3 aspect 4:3 aspect ratio, the same as television used for ratio, the same as television used for decades before switching to decades before switching to 16:9 widescreen16:9 widescreen. .

•• But there could be a change in the air as mobile companies see that But there could be a change in the air as mobile companies see that 16:9 may be 16:9 may be the aspect of choice in the years to come.the aspect of choice in the years to come.



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 platforms developed 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 comes mobile video comes into the picture. With older programming, such as a lot of the catalog of picture. 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.



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:9 tablets have moved close to the 16:9 format, such as the Kindle Fire HD format, such as the Kindle Fire HD which comes in at 16:10 and 1280x800, it will be interesting to see which way Apple moves 1280x800, it will be interesting to see which way Apple moves with the new iPad.

–– Although the Although the future of television may well be 16:9 future of television may well be 16:9 aspectaspect, the huge landscape of mobile , the huge landscape of mobile smartphonesmartphoneand 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 and But there seems to be some unity happening and it looks like the it looks like the standard of 16:9 could also be standard 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.



ØØMake the page and its structural elementsMake the page and its structural elementsfit within fit within 320 pixels320 pixels.

Reduce Reduce three columns three columns to a to 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



Responsive Web DesignResponsive Web Design

RWD is a set of techniques set 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 apply window 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



Responsive Web DesignResponsive Web Design

85



Mobile SoftwareMobile SoftwareWhile many “classic” software engineering techniques may transfer

easily to the mobile application domain, there are other areashaving 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, and developers 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



87



mse august13 (2/3)

Education