• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mse july13 (1/3)
 

Mse july13 (1/3)

on

  • 742 views

Mobile Software Engineering

Mobile Software Engineering

Statistics

Views

Total Views
742
Views on SlideShare
742
Embed Views
0

Actions

Likes
0
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mse july13 (1/3) Mse july13 (1/3) Presentation Transcript

    • Mobile SoftwareMobile Software EngineeringEngineering By Prof. Dr.Prof. Dr. O.P.VyasO.P.Vyas 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 Mobile Software EngineeringMobile Software Engineering 2 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps 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 Introduction to Mobile SoftwareIntroduction to Mobile Software nnNeed for Engineering approachNeed for Engineering approach nn Significant issues:Significant issues: nnMobile UX design, Information ArchitectureMobile UX design, Information Architecture 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
    • 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.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 4 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • SmartphonesSmartphones q Feature phones were initial model of Mobile phones and were superseded by Smartphones. q A Smartphone is a mobile phone that offers more advanced computing ability and connectivity than a contemporary basic feature phone. Oct. 2010 Feb. 2012 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • SmartphonesSmartphones q A smartphone allows the user to install and run more advanced applications based on a specific platform. q Smartphones run complete operating system software providing a platform for application developers. 6 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SoftwareMobile Software n A mobile application (or Mobile App) is software written for mobile devices that performs a specific task, such as a game, calendar, music player, etc. n While application development for mobile devices goes back at least 10 years, there has been exponential growth in mobile application development since the iPhoneiPhone AppStoreAppStore opened in July, 2008. n The term “AppApp" has become popular, and in 2010 was listedn The term “AppApp" has become popular, and in 2010 was listed as ""Word of the YearWord of the Year" by the American Dialect Society n Mobile App ranges from Game or Music to business processes as well. 7 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • With recentWith recent emergence ofemergence of Apple Apps Store,Apple Apps Store, Google Play (Google Play (known as Androidknown as Android Marketplace previouslyMarketplace previously), Nokia), Nokia OviOvi Store,Store,Store,Store, Windows Phone MarketplaceWindows Phone Marketplace andand Amazon App StoreAmazon App Store open up a hugeopen up a huge possibility for designers andpossibility for designers and developers alikedevelopers alike.. 8 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SoftwareMobile Software n Since 2008, device makers have created outlets for other mobile devices, including Android, BlackBerry, Nokia Ovi Windows Phone, and more. n A May 2012 study reported that during the previous quarter, more mobile subscribers used apps than browsed the web on their devices: 51.151.1% vs. 49.849.8% respectively. n Researchers found that usage of mobile applicationsn Researchers found that usage of mobile applications strongly correlates with user context and depends on user's location and time of the day. n Industry analysts estimate that there are more thanthan 250,000 applications available through the various stores and marketplaces, some of which are available for multiple types of devices. 9 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Mobile Apps are usually available through application distribution platforms, which are typically operated by the owner of the mobile operating system, such as the Apple App Store, Google Play, Windows Phone Store and BlackBerry App World. n Some Apps are free, while others must be bought. Usually, they are downloaded from the platform to a target device, such as an iPhone, BlackBerry, Android Mobile Apps & OS…..Mobile Apps & OS….. target device, such as an iPhone, BlackBerry, Android phone or Windows Phone, but sometimes they can be downloaded to laptops or desktops. n For apps with a price, generally a percentage, 20-30%, goes to the distribution provider (such as iTunes), and the rest goes to the producer of the app. 10 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SoftwareMobile Software Many comprehensive programming environments available for the major mobile platforms. Ø Apple’s iOS Dev Center offers the Xcode package, which includes an Interface Builder, an iPhone emulator, and a complete development environment that can be used across all Apple products. Ø For Android, developers can use the Android Development ToolsØ For Android, developers can use the Android Development Tools plug-in for the Eclipse programming environment. Ø For Windows Phone, developers can use a specialized version of Microsoft’s Visual Studio environment . Similarly, there are application development tools for BlackBerry, Symbian, and other platforms. 11 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SoftwareMobile Software In addition, there are now some cross-platform development tools, such as RhoMobile’s Rhodes and the open source PhoneGapPhoneGap, which can be used to create native applications on various brands of Smartphones. Similarly, Netbiscuits, Appcelerator, Kyte, and other companiesSimilarly, Netbiscuits, Appcelerator, Kyte, and other companies provides tools and frameworks to support the creation of mobile web and hybrid sites using their SDK or one of the previously mentioned environments. 12 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Windows Store: Windows 8Windows Store: Windows 8 n Microsoft confirmed that the Windows Store will be a platform for distributing Windows applications, both Metro-style and traditional apps, and the store will only support Windows 8 and above. n The Windows Store will be the primary means of distributing its namesake applications to users; the official reason is to allow Microsoft to scan apps for security flaws and malware. n Line of Business Metro-style apps can be installed from outside the Windows Store by an organization's IT department,outside the Windows Store by an organization's IT department, however. n The Windows Store will take a 30% cut of application sales. Once an application reaches $25,000 USD in revenue, the cut drops to 20%. Third-party transactions are also allowed, of which Microsoft does not take a cut. n Individual developers will be able to register for $49 USD, and $99 USD for companies. Developers from 120 countries can submit applications to Windows store. n similar platforms, such as the Mac App Store and Google Play 13 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile OS & Apps developmentMobile OS & Apps development Ø Mobile Apps are running on a specific OS but are being desired for various other OS ranging from Android OS, Apple iOS, and Windows 8, Blackberry as well. Ø But can we develop an App which runs wellruns well in all OS….? Ø How Mobile Apps are really different? 14 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile OS & Apps developmentMobile OS & Apps development n When you install an Android app onto an AndroidAndroid devicedevice, you are installing an app that was written specifically for the Android operating system. HH YouYou cancan installinstall AndroidAndroid appsapps ontoonto aa WindowsWindows computercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbutcomputercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbut onlyonly ifif thethe computercomputer isis runningrunning specialspecial softwaresoftware calledcalled anan AndroidAndroid emulatoremulator,, whichwhich createscreates aa virtualvirtual AndroidAndroid devicedevice onon youryour computer. 15 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • PlatformsPlatforms Language(s)Language(s) RemarksRemarks Android Java, C, C++ Open source OS (based on Linux) developerandroid.com bada C, C++ Samsung’s mobile platform running on Linux or real time OS developerbada.com Blackberry Java J2ME compatible, extensions Enable title integration me.blackberry.com/eng/developers iOS Objective-C, C Requires Apple Developer Account developer apple.com/iphone MeeGo Qt, Web Apps, C++ Intel and Nokia guided Open source OS (based onMeeGo Qt, Web Apps, C++ ,others Intel and Nokia guided Open source OS (based on Linux) meego.com/developers Symbian C, C++, Java, Qt, Web Apps , others Open Source OS built from the ground up for mobile devices www.forum.com/symbian WebOS HML, CSS, JavaScript, C Support widget style programming, (based on Linux) developer.palm.com Windows Mobile C#, C .NET, CF of Windows Mobile API, most devices ship with J2ME compatible JVM developer.windowsmobile.com Window Phone C#, VB.NET SilverLight, XNA Framework 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: How Mobile Software is differentMobile Software: How Mobile Software is different HH Cross Device ApplicationsCross Device Applications n Mobile Apps Characteristics & Issues Mobile Software EngineeringMobile Software Engineering 17 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps 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
    • What Makes Mobile Apps Different?What Makes Mobile Apps Different? n In many respects additional requirements that are less commonly found with traditional software applications, including: 1)Sensor handling – most modern mobile devices, e.g., “smartphones”, include an accelerometer that responds to device movement, a touch screen that responds to numerous gestures, along with real and/or virtual keyboards, a global positioning system, a microphone usable by applications otherpositioning system, a microphone usable by applications other than voice calls, one or more cameras, and multiple networking protocols 2) Potential interaction with other applications – most embedded devices only have factory-installed software, but mobile devices may have many applications from varied sources interacting 3) Native and Web (mobile web) applications 4) Families of hardware and software platforms Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile App is Embedded Software ?Mobile App is Embedded Software ? n In many respects, developing mobile applications is different from traditional software development H similar to embedded applications….Some differences also n Common issues include integration with device hardware, as well as traditional issues of security, performance, reliability, and storage limitations. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications Ø Most mobile devices employ touch screens, where users rely on gestures – in addition to simple interface elements – to interact with them. ØDoes it make significant change if software is to be developed for touch screens ? ØBecause of their smaller dimensions, we expect the content 20 ØBecause of their smaller dimensions, we expect the content structures to be simpler and smaller. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications ØAlso, because of their limited bandwidth and connectivity, mobile devices require designs to be optimized for loadingloading time,time, withwith reducedreduced datadata requirementrequirements. Øwe may use the device under difficult viewing conditions, or among a variety of distractions 21 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps development…Mobile Apps development… n More and more organizations aim at leveraging mobile devices and applications for their respective business…… n Mobile Apps development market is young and growing extremely fast paced……. The explosion of consumer appsapps can be seen in just about every industry, but here are a few of the more notable ones: Ø Retail: Location-intelligent mobile commerceØ Retail: Location-intelligent mobile commerce Ø Media: Magazines & newspapers going 100% digital Ø Travel: Mobile bookings, check-ins, maps, deals, etc. Ø Education: Tablets and apps in classrooms Ø Healthcare: Patient records, physician notes, etc. Ø Finance: Apps for real-time trading, portfolio analysis Ø Social: Games and social media platforms 22 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Business AppsMobile Business Apps n And Mobile Business Apps are running rampant in the B2BB2B worldworld as well, including spaces such as: Ø •Business Apps: CRM, ERP, HR systems Ø Productivity: Docs, spreadsheets, presentations Ø Collaboration: Email, IM, publishingØ Collaboration: Email, IM, publishing n Still think that mobile apps are for games, music and “entertainment purposes” only? n Do you really think that mobile applications won’t be relevant to a industry, a company, software teamrelevant to a industry, a company, software team and youryour career as Software Engineercareer as Software Engineer,, a year from now? H Think again. 23 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile AppsMobile Apps developementdevelopement n The high quality requirements of mobile business apps require them to be thoroughly engineered. n Unfortunately, today’s software engineering approaches are often too heavy-weight to allow developing high-quality mobile business apps in the context of mobile projects, which often face H small budgets,H small budgets, H extremely limited effort, and H short time-to-market requirements. 24 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n The key quality requirements include Mobile Business AppsMobile Business Apps H Driven by tough timetime--toto--marketmarket constraints, H Rapid ROI ( Return on Investment…) H Great user experience, H Security, H As well as flexibility with respect to future extensions n Can you start coding with #include <stdio.h> and get above mentioned results…. 25 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Pitfalls & OpportunitiesMobile Apps: Pitfalls & Opportunities 26 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SEMobile SE Week #2Week #2 27 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps Mobile Software EngineeringMobile Software Engineering 28 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps HH Mobile SE: SW Process ModelsMobile SE: SW Process Models 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Device Mobile Device CategoriesMobile Device Categories NonNon--PhonePhone 29 TabletsTabletsMobileMobile PhonesPhones Basic &Basic & FeatureFeature phonesphones SocialSocial PhonesPhones TVTV Android Based Apple iPhones NonNon--PhonePhone devicesdevices SmartphonesSmartphones Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile DevicesMobile Devices TabletsTablets MobileMobile PhonesPhones Basic Mobile Phones:Basic Mobile Phones: These are phones with call and SmartphonesSmartphones Data Mining FunctionalitiesData Mining Functionalities 30 These are phones with call and SMS support. They don’t have web browsers or Internet connectivity, and they don’t have any installation possibilities. ØThe Nokia 1100 is most widely distributed in the world, with over 250 million250 million sold since its launch in 2003. Feature Phones:Feature Phones: Feature phones, also known as low- end mobile devices, have a great advantage: they have web support. They typically have only a very basic browser, Nokia, Motorola, Kyocera, LG, Samsung, and Sony Mobile Social PhonesSocial Phones Android Based Apple iPhone Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile DevicesMobile Devices Mobile Device CategoriesMobile Device Categories Smartphones TabletsTablets Mobile Phones 31 Android based Apple iPhones Basic & Feature Phones Social PhonesSocial Phones ØSocial phones are also known as mid- range and/or high-end mobile devices. ØThe difference is that they are prepared for social users: apps such as Facebook, Twitter, and WhatsApp are always preinstalled and a minimum data plan is also usually included with the contract. Ødevices typically offer a mediuma medium--sizedsized screen, basic HTML browser support,screen, basic HTML browser support, sometimes 3G connectionsometimes 3G connection support, a decent camera, a music player, games, and application support Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • TabletsTablets Mobile Phones Smartphones Data MiningData Mining ØA tablet is a flat device that usually doesn’t fit in a pocket and that has a touch screen with a size ranging from 7 to 11 inches. Mobile DevicesMobile Devices 32 Feature Phones Social Phones Android based iPhones ranging from 7 to 11 inches. ØSometimes it uses a mobile operating system (such as iOS instead of Mac OS), & sometimes it uses a touch-optimized version of a desktop operating system (such as Windows for tablets instead of Windows Phone). ØTablets have the same functionalities as smartphones, including multitasking operating systems, installed applications, and full modern web browsers. Every tablet has WiFi support, and there are some with 3G or 4G connections. ØØSome devices are difficult toSome devices are difficult to categorizecategorize—for example, the Samsung Galaxy Note is a 4G phone with a 5.3” pointer- and finger-based touchscreen that can also be included in the tablet category. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Devices TabletsBasic & Feature Phones SmatphonesSmatphones Mobile DevicesMobile Devices 33 Phones Baisc Phones Social Phones A smartphone, as defined today, has a multitasking operating system, a full desktop browser, WiFi and 3G/4G connection support, a music player, and several features from following: ü GPS (Global Positioning System) or A-GPS (Assisted Global Positioning System) üDigital compass, Video-capable camera ü• Bluetooth, Touch support ü• 3D video acceleration ü• Accelerometer , Gyroscope ü• Magnetometer Smartphone Categories Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile devices SmartphonesSmartphones Mobile DevicesMobile Devices TabletsBasic & Feature Phones 34 Smartphones Features Currently, this category includes the Apple iPhone, every Android device (including the Samsung Galaxy series and the Sony Xperia series), the Nokia Lumia 920, and later BlackBerrys. Feature Phones Basic Phones Social Phones Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Cross Device ApplicationsMobile Apps: Cross Device Applications Ø Mobile Apps are no longer confined to Phones but are being developed for various other devices ranging from Digital TV , Tablet PC, and Home Consumer Electronics as well. Ø But can we develop an App which fits wellfits well in all devices….? 35 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Cross Device ApplicationsMobile Apps: Cross Device Applications 36 ØMany researchers have drawn parallel with Embedded SE with Mobile SE as well. ØCommon issues include integration with device hardware, as well as traditional issues of security, performance, reliability, and storage limitations. ØHowever, Mobile applications present some additional requirements that are less commonly found with traditional software applications. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Different Vendors, heterogeneous platforms but SE paradigmSE paradigm for one and all… n But OOSE ? Mobile Apps and SE…..Mobile Apps and SE….. 37 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Object OrientationObject Orientation is highly suitable foris highly suitable for Software ReSoftware Re--use Engineering…….use Engineering……. && ReRe--use Engineeringuse Engineering is key to meet toughis key to meet tough timetime--toto--marketmarket constraints,constraints, 38 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile AppsMobile Apps andand OOSE…..OOSE….. Ø Driven by tough timetime--toto-- marketmarket constraints, Ø The key quality Requirements include Ø Effective Software Re-use for saving time and money by using already developed & tested Codes, Structures. ØUse existing framework H User Interface Design H a great user experience, H security, H as well as flexibility with respect to future extensions 39 ØUse existing framework and APIs for GUI development Ø OCP Open Closed Principle for Software Designs…. OCPOCP: Software entities like classes, modules and functions should be open for extension but closed for modifications. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Pitfalls & OpportunitiesMobile Apps: Pitfalls & Opportunities 40 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Software & UI DesignMobile Software & UI Design Although UI Design is significant in all the Software but it is more in Mobile UI Design…. 41 UI Design may be dependent on various factors i.e. device size, particular platform , Native App or Web App……. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Pitfalls & OpportunitiesMobile Apps: Pitfalls & Opportunities 42 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Apps: Pitfalls & OpportunitiesMobile Apps: Pitfalls & Opportunities 43 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Large number ofLarge number of Mobile SoftwareMobile Software are failing to meetare failing to meet useruser expectationsexpectations…….……. 44 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • According to a recent studyAccording to a recent study, 60% of, 60% of mobile usersmobile users will abandon your app orwill abandon your app or site if it doesn’t loadsite if it doesn’t load within threewithin three seconds.seconds. Three seconds!Three seconds! Of those usersOf those users, 43% said they would, 43% said they would never return to your app or sitenever return to your app or site –– andand that’s just scratching the surface ofthat’s just scratching the surface of user expectations !!user expectations !! 45 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • SE for Mobile SoftwareSE for Mobile Software However, as mobile applications become more complex, moving beyond inexpensive recreational applications to more business critical uses, it will be essential to apply software engineering processes to assure the development of secure, highhigh-- quality mobilequality mobile applications. n Mobile business applications (Mobile Business Apps) bear huge potentials for increased work productivity, work comfort, and even sales if they are of high quality. n Developing application software for mobile devices requires considering the constraints of these devices. n Mobile Apps developers adhered to recommended sets of “best practices” but rarely used any formal development processes, and; n Developers did very little organized tracking of their development efforts and gathered few metrics. n As a result lot number of Apps are being withdrawn as they fail to meet user expectations… 46 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Failing Hurts …Why Failing Hurts … n Back in the day, one bad customer experience – whether it be with a business, service or product – would spread via word-of-mouth and reach a few prospective customers. n Thanks to social media platforms like Twitter, Facebook, Yelp and others, however, that same wordthat same word--ofof--mouth nowmouth now travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds, thousandsthousands, or even more users. n The other major difference is app store ratingsapp store ratings. H Imagine if a poor review were stamped directly on the packing of a product. H With app store ratings, that’s exactly what’s happening. 47 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Various Mobile AppsVarious Mobile Apps 1) Data Driven App – this is simple app except that the data is dynamic, either stored in a local (on the device) database, or retrieving the data from an external source. 2) Games – have you heard of Angry Birds? That is a game. Apparently, there are other games too. Games can range from the simple “thinking man’s game” through to the very complex “action” games. 3) Device App – a device app is an app that makes use of the hardware to provide its core functionality, i.e. something basedhardware to provide its core functionality, i.e. something based around the functionality of the camera, accelerometer, or GPS, etc. 4) Bespoke Functionality App – a bespoke functionality app an app that is designed to provide a solution to a specific need or problem. It would be an app that may include ‘data-driven‘ features, ‘device’ features, bells and whistles, but will also include very dedicated and specific features that will only be relevant to provide the solution to the defined problem. For example, if you wanted a Time Management style app, most of the features could be defined under the data-driven app type, but this app would also include very specific Time Engine functionality. 48 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Types of Mobile AppsTypes of Mobile Apps nn Native AppsNative Apps A native app as one that is specifically designed to run on a device’s operating system and machine firmware, and nn 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/20/2013 49 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Technical difference between the two?Technical difference between the two? n 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. n 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. n 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. n As a result, some of these apps are now referred to as hybrid apps. 8/20/2013 50 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: n For native apps, the advent of the Apple App Store was the game changer. n Native apps will remain preferred choice for heavy apps such as 3D gaming in the near future. Web:Web: n For mobile Web apps, notable developer interest emerged only in the last year or so after Google’s successful implementation of HTML5-based apps n Web useful for subscription - based services such as communications, news & weather, financial services, retail andfinancial services, retail and shopping. 8/20/2013 51 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Web Apps…..Why Web Apps….. Web Apps offer an architectural advantage when targeting a crossa cross--device launchdevice launch, where significantly less platform migration is required compared to native applications, Similar Platform independence paradigm of Java Technology… 8/20/2013 52 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Compile-time EnvironmentCompile-time Environment Java Java Source (.java) Java Just in Class Loader Bytecode Verifier Java Class Libraries How Platform independence in JAVA worksHow Platform independence in JAVA works Java Bytecodes move locally or through networkJava Compiler Java Bytecode (.class ) Java Interpreter Just in Time Compiler Runtime System Operating System Hardware Java Virtual machine Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Java’sJava’s Platform IndependencePlatform Independence Editor : 7 ; Source code Compiler : ; Bytecodes 3-54 7 K Hello.java ; Hello.class ; "Interpreter Hello, World! ¿ Interpreter Hello, World! : Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 55 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 56 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • ComparisionComparision…… 57 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 58 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Native or Web Apps?Native or Web Apps? 59 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 60 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • PlatformsPlatforms Language(s)Language(s) RemarksRemarks Android Java, C, C++ Open source OS (based on Linux) developerandroid.com bada C, C++ Samsung’s mobile platform running on Linux or real time OS developerbada.com Blackberry Java J2ME compatible, extensions Enable title integration me.blackberry.com/eng/developers iOS Objective-C, C Requires Apple Developer Account developer apple.com/iphone MeeGo Qt, Web Apps, C++ Intel and Nokia guided Open source OS (based onMeeGo Qt, Web Apps, C++ ,others Intel and Nokia guided Open source OS (based on Linux) meego.com/developers Symbian C, C++, Java, Qt, Web Apps , others Open Source OS built from the ground up for mobile devices www.forum.com/symbian WebOS HML, CSS, JavaScript, C Support widget style programming, (based on Linux) developer.palm.com Windows Mobile C#, C .NET, CF of Windows Mobile API, most devices ship with J2ME compatible JVM developer.windowsmobile.com Window Phone C#, VB.NET SilverLight, XNA Framework Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 62 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps Mobile Software EngineeringMobile Software Engineering 63 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps HH Mobile SE: SW Process ModelsMobile SE: SW Process Models 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Software Engineering Process ModelsSoftware Engineering Process Models 64 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 65 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Software Process modelsSoftware Process models ²² Waterfall modelWaterfall model § Plan-driven model. Separate and distinct phases of Software development. ² In practice, most large systems are developed using a process that incorporates elements from many process modelsprocess models but Waterfall models is still one of the most popular approach. Chapter 2 Software Processes Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • When to use the Waterfall ModelWhen to use the Waterfall Model n Requirements are very well known n Product definition is stable n Technology is understood n New version of an existing product n Porting an existing product to a new platform.n Porting an existing product to a new platform. HCan it be usable for Embedded Software or Mobile Software ? Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 68 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Fountain ModelFountain Model n The Fountain Model is a highly iterative approach that is well-suited to object-oriented software development. n The Fountain Model allows for the fact that there is considerable overlap of activities throughout the development cycle — although some activitiesthe development cycle — although some activities can't start before others. n Just as a fountain’s water rises up and falls backfountain’s water rises up and falls back to the pool belowto the pool below, in object-oriented software development, the general workflow from analysis through design to implementation is overlaid with iterative cycles across many phases. 69 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • The Fountain model is a logicalThe Fountain model is a logical 70 The Fountain model is a logicalThe Fountain model is a logical improvement to the Waterfallimprovement to the Waterfall model.model. The steps are still there, in theThe steps are still there, in the same sequencesame sequence, however at any, however at any step there can be a fallback tostep there can be a fallback to an earlier step.an earlier step. Moving through aMoving through a number ofnumber of steps and falling back one orsteps and falling back one or more stepsmore steps, performed, performed repeatedly, is far morerepeatedly, is far more flexibleflexible than the Waterfall model.than the Waterfall model. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 71 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 72 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 73 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Agile methodsAgile methods n Dissatisfaction with the overheads involved in software design methods of the 1980s and 1990s led to the creation of agile methods. These methods: HH Focus on the code rather than theFocus on the code rather than the designdesign HH Are based on an iterative approach to softwareAre based on an iterative approach to software developmentdevelopment HH Are intended to deliver working software quickly and evolveAre intended to deliver working software quickly and evolveHH Are intended to deliver working software quickly and evolveAre intended to deliver working software quickly and evolve this quickly to meet changing requirementsthis quickly to meet changing requirements.. n The aim of agile methods is to reduce overheads in the software process (e.g. by limiting documentation) and to be able to respond quickly to changing requirements without excessive rework. 74 Chapter 3 Agile software development Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Agile manifestoAgile manifesto n We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value: HH Individuals and interactionsIndividuals and interactions overover processesprocesses and tools,and tools, HH Working softwareWorking software overover comprehensivecomprehensiveHH Working softwareWorking software overover comprehensivecomprehensive documentation,documentation, HH Customer collaborationCustomer collaboration overover contractcontract negotiation,negotiation, HH Responding to changeResponding to change overover following a planfollowing a plan n That is, whilethere is value in the items on the right, we value the items on the left more. Chapter 3 Agile software development 75 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • PlanPlan--drivendriven andand agile specificationagile specification 76 Chapter 3 Agile software development Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Agile Vs Plan DrivenAgile Vs Plan Driven H What type of system is being developed? 4 Plan-driven approaches may be required for systems that require a lot of analysis before implementation (e.g. real-time system with complex timing requirements). H What is the expected system lifetime? 4 Long-lifetime systems may require more design documentation to communicate the original intentions of the system developers to the support team.the support team. H What technologies are available to support system development? 4 Agile methods rely on good tools to keep track of an evolving design H How is the development team organized? 4 If the development team is distributed or if part of the development is being outsourced, then you may need to develop design documents to communicate across the development teams. 77 Chapter 3 Agile software development 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps Mobile Software EngineeringMobile Software Engineering 78 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns 44 Mobile OS & PlatformsMobile OS & Platforms 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Process ModelsProcess Models for Mobile Softwarefor Mobile Software nn Waterfall ModelWaterfall Model nn Spiral ModelSpiral Model nn Agile ProcessAgile Process ModelModel H Scrum approach & other agile techniques, e.g., testdrivennn Fountain ModelFountain Model testdriven development, nn Mobile SoftwareMobile Software ModelModel HH MM--BusinessBusiness Procedure ModelProcedure Model (2005)(2005) HH mConcApptmConcAppt (2011)(2011) 79 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Mobile Software EngineeringWhy Mobile Software Engineering n Because mobile devices have fundamentally changed user expectations, it’s extremely important that we, as designers, follow a user-centered design process to arrive at our solutions. n The only problem is that our traditional best practices may notnot always apply. 80 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Software EngineeringMobile Software Engineering Characteristic IssuesCharacteristic Issues 81 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Information ArchitectureMobile Information Architecture 82 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps Mobile Software EngineeringMobile Software Engineering 83 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns 44 Mobile OS & PlatformsMobile OS & Platforms 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SoftwareMobile Software While some “classic” software engineering techniques may transfer to the mobile application domain with some minor changes, but 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 Mobile Information Architecture and Interaction Design are other areas of design, critical to success of Mobile Software 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 implementing the application; 84 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile SE & DesigningMobile SE & Designing How MobileMobile affects designers n 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;server; n Mobile’s differences directly impact all parts of the user- centred design process: H from user research to the final development and testing of the solution. H The biggest parts of the process it affects are our delivery methods and our information architecture. 85 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Information ArchitectureMobile Information Architecture n Developing a mobile and tablet friendly information architecture is just the first step in creating a great mobile experience. n Mobile devices have their own set of Information Architecture patterns, too. n This has to do with arranging the functionality andn This has to do with arranging the functionality and content into a logical structure to help users find information and complete tasks. This includes Hnavigation, search and labeling. n Some characteristic designs and patterns observed each for iOSiOS, AndroidAndroid and WindowsWindows phone.phone. 86 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Information ArchitectureMobile Information Architecture n Guidelines H Present links to the main features and content on the landing page, prioritized according to the user’s needs. H Mobile Design Pattern Gallery has examples of primary and secondary navigation patterns for mobile, many of which are vertical instead of horizontal as on desktopwhich are vertical instead of horizontal as on desktop websites. H Enable mobile users to navigate to the most important content and functionality in as few taps or key presses as possible. 87 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • User Navigation on MobileUser Navigation on Mobile H Navigation optimized for small screens is usually broad and shallow instead of deep. H While three clicks (or taps) is not the magic number, users need to be able to recognize that each tap is helping them complete their task. H Every additional level also means more taps, more waiting for a page to load and more bandwidthwaiting for a page to load and more bandwidth consumed. H Address the navigation needs of both touchscreen and non-touchscreen (Track Ball in Blackberry ) users. 4 When designing for touch, make sure the tap size of the navigation item is at least 30 pixels wide or tall. 4 Provide keypad shortcuts for feature phones, so that users can enter, say, a number (0 to 9) to quickly access a link. 88 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Navigation GuidelinesNavigation Guidelines n Provide navigational cues to let users know where they are, how to get back and how to jump back to the start. n Mobile breadcrumbs are often implemented by replacing the “Back” button with a label showing users the section or category that they came from. H For mobile websites, use standard conventions, such as a home icon that links back to the start screen,a home icon that links back to the start screen, especially when navigation is not repeated on every screen. H Use concise, clear, consistent and descriptive labels for navigation items and links. While always a good practice, it becomes even more important on tiny mobile devices. 89 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Today’sToday’s Solutions becomeSolutions become tomorrow’stomorrow’s Standards andStandards and Guidelines.Guidelines. 90 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Information ArchitectureMobile Information Architecture Mobile Information Architecture exhibits thethe Information deliveryInformation delivery patternspatterns for the Mobile devices 91 The Information delivery on Mobile can be planned in many possible ways and There is no single pattern can be said to be best for each & every case Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Information Architecture for UXInformation Architecture for UX 92 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile devices have theirMobile devices have their own set ofown set of Information Architecture patternsInformation Architecture patterns, too, too.. While the structure ofWhile the structure of a responsive sitea responsive site maymay follow morefollow more “standard”“standard” patterns,patterns, nativenative apps,apps, for example, often employfor example, often employapps,apps, for example, often employfor example, often employ navigational structures that are tabnavigational structures that are tab--based.based. Again, there’s noAgain, there’s no “right ““right “way to architect away to architect a mobile site or applicationmobile site or application 93 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Information Architecture PatternsInformation Architecture Patterns n While the structure of a responsive site may follow more “standard” patterns, native apps, for example, often employ navigational structures that are tab-based. n Again, there’s no “right “way to architect a mobile site or application. some of the most popular patterns: HH Hierarchy,Hierarchy, HH Hub & spoke,Hub & spoke,HH Hub & spoke,Hub & spoke, HH Nested doll,Nested doll, HH Tabbed view,Tabbed view, HH Bento box andBento box and HH Filtered view:Filtered view: 94 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Hierarchy PatternHierarchy Pattern The hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site you may be restricted to this, however introducing additional patterns could allow you to tailor the experience for mobile. 95 Ref:LukeRef:Luke Wroblewski’sWroblewski’s Mobile FirstMobile First approachapproach : features and user journeys that will help create great user experiences. Good forGood for Organising complicated site structures that need to follow a desktop site’s structure. Watch forWatch for Navigation. Multi-faceted navigation structures can present a problem to people using small screens. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Hub & SpokeHub & Spoke A hub and spoke pattern gives you a central index from which users will navigate out. It’s the default pattern on Apple’sApple’s iPhoneiPhone. Users can’t navigate betweencan’t navigate between spokes but must return to the hub, instead. This has historically been used on desktop where a workflow is restricted however 96 where a workflow is restricted however this is becoming more prevalent within the mobile landscape due to users being focused on one task, as well as the form factor of the device, making a global navigation more difficult to use. Good forGood for Multi-functional tools, each with a distinct internal navigation and purpose. Watch forWatch for Users that want to multi-task. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Nested DollNested Doll n The nested doll pattern leads users in a linear fashion ton The nested doll pattern leads users in a linear fashion to more detailed content. n When users are in difficult conditions this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back. 97 Good forGood for Apps or sites with singular or closely related topics. This can also be used as a sub section pattern inside other parent patterns, such as the standard hierarchy pattern or hub and spoke. Watch forWatch for Users won’t be able to quickly switch between sections so consider whether this will be suitable, rather than a barrier to exploring content. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Tabbed viewTabbed view n This is a pattern that regular app users will be familiarregular app users will be familiar with.n This is a pattern that regular app users will be familiarregular app users will be familiar with. n It’s a collection of sections tied together by a toolbarcollection of sections tied together by a toolbar menu. n This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened. 98 Good forGood for Tools based apps with a similar theme. Multi-tasking. Watch forWatch for Complexity. This pattern is best suited to very simple content structures. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Bento Box/DashboardBento Box/Dashboard n The bento box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content.content. n This pattern is more suited to tabletmore suited to tablet than mobile due to its complexity It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly. 99 Good forGood for Multi-functional tools and content-based tablet apps that have a similar theme. Watch foratch for The tablet screen gives you more space to utilize this pattern well, however it becomes especially important to understand how a user will interact with and between each piece of content, to ensure that app is easy, efficient and enjoyable to use. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Filtered viewFiltered view n A filtered view pattern allows the user to navigate within a set of data by selecting filter options to create an alternative view. n Filtering, as well as using faceted search methods, can be ansearch methods, can be an excellent way to allow users to explore content in a way that suits them. 100 Good for Apps or sites with large quantities of content, such as articles, images andarticles, images and videosvideos. Can be a good basis for magazine style apps or sites, or as a sub pattern within another navigational pattern. Watch for Mobile. Filters and faceted search can be difficult to display on a smaller screen due to their complexity. 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps Mobile Software EngineeringMobile Software Engineering 101 HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns 44 Mobile OS & PlatformsMobile OS & Platforms nn Why Mobile SE ? Mobile SE ApproachesWhy 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • UserUser--Centered Mobile Design Life cycleCentered Mobile Design Life cycle 102 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • What Is User Experience?What Is User Experience? User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application desktop software or Mobile Software and, in modern contexts, is generally denoted by some form of human- computer interaction (HCI). 103 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • User ExperienceUser Experience n The term “user experienceuser experience” was coined by Dr. DonaldDr. Donald NormanNorman, a cognitive science researcher who was also the first to describe the importance of user-centered design n Regardless of how much has changed in the development process, a Website’s success or a Mobile Phone’s success still hinges on just one thing: H How users perceive it.H How users perceive it. H “Does this website give me value? Is it easy to use? Is it pleasant to use?” H These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users. n User experience design is all about striving to make them answer “Yes” to all of those questions. 104 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • UX DesignUX Design n Those who work on UX (called UX designersUX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth. n UX designers also look at sub-systems and processes within a system. H For example, they might study the checkout process of an e-commerce website to seeprocess of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. H They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form. 105 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Is UX Important?Why Is UX Important? n Nowadays, with so much emphasis on user-centered design, describing and justifying the importance of designing and enhancing the user experience seems almost unnecessary. n We could simply say, “It’s important because it deals with our users’ needs — enough said,”. n However, those of us who worked in the Web design industry, Mobile Apps development industry prior to the codification of user-centered design, usability and Web accessibility woulduser-centered design, usability and Web accessibility would know that we used to make websites differently. 106 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Is UX Important?Why Is UX Important? n Before our clients (and we developers) understood the value of user-centered design, we made design decisions based on just two things: H what we thought was awesome and what the client wanted to see. n We built interaction based on what we thought worked — wen We built interaction based on what we thought worked — we designed for ourselves. n The focus was on aesthetics and the brand, with little to no thought of how the people who would use the website or Mobile would feel about it. n There was no science behind what we did. n We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted. 107 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • UX DesignUX Design 108 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Things To Know About UX DesignThings To Know About UX Design UX design is an amazing discipline, but it cannot, or will not, accomplish certain things. Ø UX Design Is Not One Size Fits All H User experience design won’t work in every situation for every user because, as human beings, we are all different. H What works for one person might have the opposite effect on another. H And just as we can’t design a user experience, we can’t replicateH And just as we can’t design a user experience, we can’t replicate the user experience for one website exactly on another website. User experiences will be different between websites or Mobile Software. a design must be tailored to the goals, values, production process and products of its website / Mobile Software. 109 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Things To Know About UX DesignThings To Know About UX Design Ø Can’t Be Directly Assessed With Traditional Metrics H You can’t determine the effectiveness of a user experience design based solely on statistics such as page views, bounce rates and conversion rates. We can make assumptions, and we can ask users for anecdotal evidence, but we can’t install an app (at least not yet) that automatically records user experience statistics directly.experience statistics directly. Ø Not the Same Thing as Usability H User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user- friendliness and efficiency of the interface. n Usability is big part of the user experience and plays a major role in experiences that are effective and pleasant, but then human factors science, psychology, information architecture and user- centered design principles also play major roles. 110 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Tasks And Techniques Of UX DesignersTasks And Techniques Of UX Designers n UX designers perform various tasks at various points in the process. Following are the few things that they deliver. Ø Evaluation of Current System Ø A/B Testing Ø User Surveys Ø Wireframes and Prototypes Ø User Flows Ø Storytelling Ø Design Patterns Ø User Profiles and Personas Ø Content Inventory Ø Content Style Guides 111 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • UX Design techniquesUX Design techniques n Evaluation of Current System n If a system already exists, a UX professional will holistically evaluate its current state. They will report issues and suggest fixes based on their analysis of research data. A/B Testing A UX specialist might devise a study to compare the effectiveness and quality of experience of different user interfaces. This is done by stating a hypothesis (e.g. “A green button is more attractive than a red button.”), proposing or creating multiple versions of a design, defining what a “better experience” means (e.g. “The green button is betterdata. 112 means (e.g. “The green button is better because users clicked it more.”) and then conducting the test. Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • User SurveysUser Surveys Wireframes and PrototypesWireframes and Prototypes n A UX designer could interview existing and potential users of the system to gain insight into what would be the most effective design. n Because the user’s experience is subjective, the best way to directly obtain information is by studying and interacting with users. n Based on their findings, UX specialists might develop wireframes of different layouts and perhaps also higher-fidelity prototypes. 113 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Tools Of UX designTools Of UX design n Few popular and easily accessible tools for UX professionals. Which aren’t exclusive to UX professionals; developers, designers and interaction designers, use them as well. Ø Wireframing and Prototyping Applications n Wireframing and prototyping can be done simply with pen and paper and also with Software. 114 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Wireframes &Wireframes & PrototypingPrototyping 115 ØPaper prototyping in particular, has many benefits, such as being inexpensive, conducive to group prototyping and quick and easy to produce. ØSome software-based Wireframing and Prototyping tools are: ØOmniGraffle ØBalsamiq Mockups ØMockingbird Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Elements of Mobile UXElements of Mobile UX n The mobile user experience encompasses the user’s perceptions and feelings before, during and afterbefore, during and after their interaction with your mobile presence H be it through a browser or an app H using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet.feature phone to high-definition tablet. n Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. n It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context. 116 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Elements of Mobile UX designElements of Mobile UX design 117 The relevance of these elements will change depending on the type of device (feature phone versus smartphone versus tablet) and the presentation interface (app versus Web). Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile UX Guidelines Functionality & GuidelinesMobile UX Guidelines Functionality & Guidelines n This has to do with tools and features that enable users to complete tasks and achieve their goals. n Guidelines n Prioritize and present core features from other channels that have especial relevance in a mobile environment. H For an airline, this includes flight statusesH For an airline, this includes flight statuses and flight check-ins. H For cosmetic chain Sephora, it includes supporting in-store shopping via easy access to product reviews on mobile devices. 118 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile UX GuidelinesMobile UX Guidelines n Offer relevant mobile-only functionality (like barcode scanning and image recognition), and enhance functionality using the capabilities of mobile devices where possible to engage and delight users.. n Ensure that fundamental features and content are optimized for mobile. H For example, make sure the store locator shows the nearest storesnearest stores based on the device’s location,the nearest storesnearest stores based on the device’s location, and H make the phone numbers click-to-call. n Include features that are relevant to the business category. For retail websites and apps, this would include product search, order status and shopping cart. n Offer key capabilities across all channels. Users who sign in should see their personalized settings, irrespective of the device or channel being used. If certain functionality is not offered on mobile, then direct users to the appropriate channel, 119 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Criticisms Of UX As A ProfessionCriticisms Of UX As A Profession Not everyone sees the value of having a UX designer on the team. Arguments against hiring UX specialists revolve around the perceived associated costs, redundancy in skill set and fear of change. Ø Yet Another Thing to Worry About n The traditional website / Mobile S/W developers especially at small companies and start-ups, whose resources aren’t as deepsmall companies and start-ups, whose resources aren’t as deep as they’d like, consists of one Web or Mobile Software designer and one Web or Mobile Software developer. n The Web or Mobile Software designer might be the one who develops the user experience, along with other tasks such as designing a wireframe and functional prototype, while the developer builds the production website as specified by the designer. A UX specialist only complicates this process. 120 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Criticisms Of UX As A ProfessionCriticisms Of UX As A Profession Too Far Removed From the Process n A few people in the business of building websites believe that UX designers are too far removed from the actual process. Ryan Carson, founder of Carsonified and a leading voice in the Web design industry, for example, has criticized UX professionals who aren’t “involved in the day-to-day process of designing, building, testing, marketing and updating a Web project.” n This view of the profession basically says that UX professionals with no background in the actual process of building websites can’t devise solutions as expertly as people who create the actual products. n However, many UX professionals do have a background in the build process; many were Web designers or developers who chose to specialize in this particular area of the production process. 121 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Interaction DesignMobile Interaction Design 122 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Interaction DesignInteraction Design n interaction design, often abbreviated IxD, is "about shapingabout shaping digital things for people’s usedigital things for people’s use", H Alternately defined as "the practice of designing interactive digital products, environments, systems, and services.“ H Like many other design fields interactionH Like many other design fields interaction design also has an interest in formform but its main focus is on behaviorbehavior. H It’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts. 123 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Mobile Interaction Design explores important issues relating to this ever-changing technology, including, developing interfaces and devices with a great deal ofinterfaces and devices with a great deal of sensitivitysensitivity to human needs, desires, and capabilities. touch screens; Mobile Interaction DesignMobile Interaction Design n Most modern, mobile devices employ touch screens; which provide their own set of opportunities and constraints. 124 We use touch screenstouch screens not only to view content, but also to interactinteract with that content. This forces designers to consider ergonomics, gestures,ergonomics, gestures, transitionstransitions, and finally, mobile-specific interaction patterns Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • ErgonomicsErgonomics n Designing for mobile ergonomics requires that we pay attention to device dimensions as well as the pragmatic concerns of touch screens. n The way a user holds a device and touches the screen, for example, influences how easy it is for that user to reach parts of the screen. H Hit areas, or “areas of the screen the user touches to activate something” require adequate space forto activate something” require adequate space for the user to accurately (and confidently) press. H The average fingertip is between one to two centimeters wide, which roughly correlates to somewhere between 44px and 57px44px and 57px on a standard screen and on a high-density (“retina”) screen. HH Nokia, AppleNokia, Apple andand MicrosoftMicrosoft each recommend slightlyeach recommend slightly different sizes to account for the nature ofdifferent sizes to account for the nature of touchscreenstouchscreens..125 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Interaction DesignMobile Interaction Design ErgonomicsErgonomics Ø Yet there are no hard and fast rules with regards to hit areas. Ø Instead of looking to the various standards for an answer, simply consider GesturesGestures n Gestures are Each part of a touchscreen dedicated to functionality precludes the display of content in that area, making gestures aanswer, simply consider what the user needs to achieve on the screen, how important that task is, and how quickly they need to complete it – then design accordingly. making gestures a crucial component of mobile interaction design. n All of the major touch operating systems employ them, including: Google’s Android, Apple’s iOS, and Microsoft’s Windows 8. 126 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • GesturesGestures PressPress Double Press Long Press 127 Small Swipe LargeSwipe Pinch / spreadPinch / spread Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • TransitionsTransitions n Transitions are interactions that smooth the boundaries betweeninteractions that smooth the boundaries between application statesapplication states, H helping to tell a story or (re)establish a gestural metaphor. H More generally, transitions help facilitate recall and prevent users from getting lost.recall and prevent users from getting lost. 128 Gesture TransitionGesture Transition Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Interaction DesignMobile Interaction Design n Grill et al. describe a pattern approach to mobile interaction designpattern approach to mobile interaction design. n The approach starts with the elicitation of requirements with a focus on the analysis of the mobile environment. n The mobile technology, the users, as well as data and information are parameters for the mobile environment. n After being elicited, the parameters are used in a second step as then After being elicited, the parameters are used in a second step as the basis for the upcoming interaction design process (IxDIxD--Process).Process). n The IxD-Process is iterative and consists of building numerous design drafts followed by a formative evaluation. 129 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Beneath common tools for interaction design like personaspersonas and scenariosscenarios, the interaction designer has tool-based access to a library of mobile interaction pattern. n Thus, the interaction designer is able to use common practices in the field of mobile interaction design to generate a design solution. n The evaluation of the interaction designs created in a tool has Mobile Interaction DesignMobile Interaction Design n The evaluation of the interaction designs created in a tool has shown that especially expert users of mobile devices have some trouble with the interaction because of their concrete experiences and expectations regarding interaction with a mobile device. 130 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Software ImplementationMobile Software Implementation TypesTypes ofof Mobile AppsMobile Apps :: Web AppWeb App VsVs Native AppNative App 131 TypesTypes ofof Mobile AppsMobile Apps :: Web AppWeb App VsVs Native AppNative App Does it make any differenceDoes it make any difference as Software Engineeras Software Engineer ?? Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Why Web Apps…..:Why Web Apps…..: Development ParadigmDevelopment Paradigm Web Apps offer an architectural advantage when targeting a crossa cross--device launchdevice launch, where significantly less platform migration is required compared to native applications, Similar Platform independence paradigm of Java Technology… 8/20/2013 132 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Compile-time EnvironmentCompile-time Environment Java Java Source (.java) Java Just in Class Loader Bytecode Verifier Java Class Libraries How Platform independence in JAVA worksHow Platform independence in JAVA works Java Bytecodes move locally or through networkJava Compiler Java Bytecode (.class ) Java Interpreter Just in Time Compiler Runtime System Operating System Hardware Java Virtual machine Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Java’sJava’s Platform IndependencePlatform Independence Editor : 7 ; Source code Compiler : ; Bytecodes 3-134 7 K Hello.java ; Hello.class ; "Interpreter Hello, World! ¿ Interpreter Hello, World! : Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Native AppNative App n An application specifically designed to run on a device’s operating system and machine firmware n It typically needs to be adapted/adjusted for Web AppWeb App n An application in which all or some parts of the software are downloaded from the Web each time it is run n •It can usually be accessed from all web-adapted/adjusted for different devices accessed from all web- capable mobile devices 8/20/2013 135 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Native:Native: n For native apps, the advent of the Apple App Store was the game changer. n Native apps will remain preferred choice for heavy apps such as 3D gaming in the near future. Web:Web: n For mobile Web apps, notable developer interest emerged only in the last year or so after Google’s successful implementation of HTML5-based apps n Web useful for subscription - based services such as communications, news & weather, financial services, retail andfinancial services, retail and shopping. 8/20/2013 136 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 137 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • MosyncMosync 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 138 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mosync SDKMosync SDK CrossCross--platform SDK and HTML5 tools for mobile app developmentplatform SDK and HTML5 tools for mobile app development Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mosync ReloadMosync Reload Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Working of PhoneGap Phonegap —— Inputs are Mobile Web Apps & Output is the Native Apps forInputs are Mobile Web Apps & Output is the Native Apps for chosen platformschosen platforms Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Web AppWeb App toto Native AppNative App n The Tools and Frameworks are making it possible to do the transformation, n core features and functionality of the PhoneGapPhoneGap framework 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 Software: Cross Device ApplicationsMobile Software: Cross Device Applications n Mobile Apps Characteristics & Issues HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps Mobile Software EngineeringMobile Software Engineering 143 HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps 44 Mobile OS & Platforms: Developing Native AppsMobile OS & Platforms: Developing Native Apps 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 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Platforms & VendorsMobile Platforms & Vendors 144 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Mobile Platforms & VendorsMobile Platforms & Vendors n To discuss about brands and models is very difficult. The market changes a lot every year. n In fact, during the months while I was preparing this material, I had to update this information several times. n So, I’ll be general here and aim to give you not only an idea of what’s out there now, but also of how to understand new devices that may appear on the market.that may appear on the market. n We will see the developing and working of a Native App for one of the most popular Mobile platform 145 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • AppleApple iOSiOS nn Apple,Apple, is significance in Mobile world not because the greatest market share, but as Apple has caused a revolution in the market. n It changed the way userschanged the way users see mobile devices and mobile web browsing, and it is the reason why many developers (web or not) have turned their attention to the mobile world. n Apple, known desktop computer company,n Apple, known desktop computer company, entered the mobile world with a revolutionary device: thethe iPhoneiPhone. nn iPod touchiPod touch continued the iPhone revolution with a similar device without phone capabilities. n All of Apple’s small mobile devices are quite similar. They have aa multitouchmultitouch screen, a 3.5”screen, a 3.5” screen with medium or ultrascreen with medium or ultra--high resolution orhigh resolution or a 4” screen with ultraa 4” screen with ultra--high resolution,high resolution, WiFiWiFi connections, and Safariconnections, and Safari on iOS as browser. 146 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n The iPad series added a 9.7” screen size (medium and high resolution), with almost the same other features as the iPod touch and iPhone. n As of June 2012, Apple had sold over 400 million iOS devices, including iPhones, iPod touches, and iPads n Apple’s devices have a great feature: an operating system called iOS (formerly iPhone OS) that is based on Mac OS X (a Unix- AppleApple iOSiOS iOS (formerly iPhone OS) that is based on Mac OS X (a Unix- based desktop OS). n Usually, the last hardware versions of the iPhone can be upgraded to the latest operating system version. n By default, the iPhone, iPad, and iPod touch are charged using a USB adapter; when you charge your device, iTunes (the Apple software for managing your device’s content and music) will detect automatically if an OS update is available for your device, and you can install the update in minutes without any technical skill needed. 147 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Starting withwith iOSiOS 5.05.0, the device can upgrade itself over the air (OTA), just using your wireless connection. n That is why today, for a mobile web developer, it’s more important to know what OS version an Apple devicewhat OS version an Apple device has installed than which device it is. n For those of us whose aim is to create great web experiences for the iPhone, it doesn’t matter if the device is an iPhone (the AppleApple iOSiOS the iPhone, it doesn’t matter if the device is an iPhone (the original phone), an iPhone 4S (the S stands for speed). n So, the important thing is to know which OS version a device that accesses your website is running. It may be iOS 1.0, 2.2, 3.0, 3.2, 4.0, 5.0, 6.0, or newer (although versions 1.0 to 3.2 are rarely seen on devices in use today, so we can safely work with versions 4.0 and beyond). nn Up to version 4.0,Up to version 4.0, iOSiOS was calledwas called iPhoneiPhone OSOS. Every version has upgrades in the browser—for example, the Gmail version for the iPhone is different if you have an iPhone running OS 2.2 or 6.0—and is backward compatible.. 148 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • iPhonesiPhones 149 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Same Gmail account accessed fromSame Gmail account accessed from anan iPhoneiPhone running OS 2.0running OS 2.0 andand one running 6.0——the latter provides a more rich and contextual experiencethe latter provides a more rich and contextual experience for the userfor the user 150 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Android OSAndroid OS && Application DevelopmentApplication Development 151 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • AndroidAndroid n Android is a platform, not a manufacturer. Therefore, it may not seem to fit in this list. n It does, though—if we are developing a website for an Android device, we don’t need to bother too much about who the manufacturer is. n This is because the Android platform is powerful enough to leave the brand and model in second place when we are talking aboutthe brand and model in second place when we are talking about developer features. n Android is an open source, Linux-based operating system created and maintained by a group of software and hardware companies and operators called the Open Handset Alliance. n Google mainly maintains it, so it is sometimes known as the “Google Mobile Operating System.” 152 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Android VersionsAndroid Versions 153 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n As with any open source software, any manufacturer could theoretically remove all the Google-specific stuff from the operating system before installing it on its devices. n However, as of this writing no vendor has done this, which is why every Android device is very “Google friendly.” AndroidAndroid n According to official Google data, as of July 2012 there were 400 million Android devices in use and 1 million new devices activating every day. n Android is a software stack including a Linux-core, multitasking operating system based on the concept of a virtual machine that executes bytecode, similar to .NET or JVM (Java Virtual Machine). n Google chose Java as the main language to compile (not compatible with Java ME) with web users in mind. 154 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • n Android includes a bunch of Google services, such as Google Maps, Google Calendar, Gmail, and an email client, and provides connections to many free Google web services. It’s not an obligation, but as of every Android device is touch-based, and many of them have a QWERTY physical keyboard, GPS, a digital compass, and an accelerometer. n Today, HTC, Motorola, Samsung, LG, Acer, Asus, and Sony AndroidAndroid n Today, HTC, Motorola, Samsung, LG, Acer, Asus, and Sony Mobile make Android devices. n There are also some nonphone devices, such as tablets, that use Android. There are even some personal video-playing glasses that use Android, and Google TVGoogle TV, an interactive television platform, is based on this mobile operating system. 155 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • AndroidAndroid n An Android device usually comes with the Google Play Store (previously known aspreviously known as Android MarketAndroid Market), the official platform store for Android apps, music, books, and other multimedia content, preinstalled. Some Android-based vendors replace this or add their own stores, such as the Amazon Appstore or Samsung Apps. n Android is the mobile platform with the most choices when talking about mobile browsers. From the default Android browsertalking about mobile browsers. From the default Android browser available before Android 4.1, to Firefox, Google Chrome, Opera Mobile, Opera Mini, UCWeb, and many others, there are multiple options available to download and install for free. n Android 3.0 was the first version supporting large screens and tablets. n However, you can find lots of 7” tablets—such as the first generation of Samsung Galaxy Tabs—and some 10” tablets from low-budget manufacturers using Android 2.2 and Android 2.3 sold before 2012. 156 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • The Galaxy from Samsung and RZR from Motorola are the most famous Android device series; here you can see the Galaxy SIII and the RZR M. 157 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Google’s Nexus devicesGoogle’s Nexus devices n In 2011, Google acquired Motorola Mobility, the well-known mobile device manufacturer. n This means that Google is now itself a manufacturer of mobile devices—including the well-known tablet Motorola Xoom and the Motorola Droid series—and Motorola is still working as a separate company under its own name. n While Google has promised that Android will continue itsn While Google has promised that Android will continue its current open source.Despite its link with Motorola, Google has some devices that it identifies as key devices—examples of the best hardware for every Android version. n Different vendors, such as HTC, Asus, and Samsung, manufacture these devices without any customization (pure Android), and they are usually very high-end devices, mostly acquired by developers. n These Google key devices are under the Nexus series name; they include the Nexus One, Nexus S, Galaxy Nexus, and the multimedia home player Nexus Q. 158 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • FragmentationFragmentation n One of the big problems of Android from a developer’s perspective is its fragmentation. n Which means the diversity of manufacturers and devices on the market, from very low-end cheap hardware to very expensive high-end hardware, and from really small screens and resolutions to high-definition devices with large screens. n Compared toto iOSiOS, where every device is basically the same, where every device is basically the samen Compared toto iOSiOS, where every device is basically the same, where every device is basically the same with a few hardware improvements, the difference is huge. n The openness of Android makes it the perfect platform for customization. n That is why you will find lots of Android devices with different user interfaces (UIs), and even with different mobile browsers. For example, Samsung adds its own UI layer to the basic n Android interface on some devices, and there are also some tablets with a complete layer over the Android UI. Amazon has released tablets under the series name Kindle Fire that are Android devices with a different user interface; 159 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • Android Application developmentAndroid Application development 160 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 44DalvikDalvik Virtual MachineVirtual Machine 44How to develop Android ApplicationsHow to develop Android Applications 161 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 162 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 and can recomponents and can 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 photos.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. 163 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 a programmern 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. 164 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, son 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. 165 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 let youADT extends the capabilities of Eclipse to let you quickly set up new Android projects,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 get startedrecommended and is the fastest way to get started.. n ADT is a set of components (plug-ins) which extend the Eclipse IDE with Android development capabilities. 166 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 virtualn They also allow the developer to create and start Android 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 167 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • DalvikDalvik Virtual MachineVirtual 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 DalvikDalvik bytecodebytecode format. E d i t o r C o m p i le r 168 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 169 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 inH 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. 170 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) performs thisn 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. 171 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. 172 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India
    • 173 Mobile Software Engineering Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India