0% found this document useful (0 votes)
451 views534 pages

Mobile Application Development

This document provides an overview of different types of mobile applications: 1) SMS applications are best for small amounts of text like marketing or billing updates as they can reach all phones. However, they have limited capabilities and cannot access phone features. 2) HTML5 applications are mobile-optimized websites that are cross-platform but require data and cannot access device features. 3) Native applications are designed specifically for each platform and can fully utilize phone capabilities but must be developed separately for each platform.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
451 views534 pages

Mobile Application Development

This document provides an overview of different types of mobile applications: 1) SMS applications are best for small amounts of text like marketing or billing updates as they can reach all phones. However, they have limited capabilities and cannot access phone features. 2) HTML5 applications are mobile-optimized websites that are cross-platform but require data and cannot access device features. 3) Native applications are designed specifically for each platform and can fully utilize phone capabilities but must be developed separately for each platform.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 534

MOBILE APPLICATION

DEVELOPMENT
Instructor Guide
Application
Development
Instructor
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

SYNOPSIS
This module covers the types of mobile applications that can be used to design
an application.

THEMES
Strategy, Applications

MODULE LEARNING OBJECTIVES


The learning objectives for this module are:
1. Introduce four kinds of mobile application concepts
2. Discuss the pros and cons of each type of applications

CONTENT
This is Management Module number six.
This module covers four mobile application techniques. Designing for mobile
comes with advantages and disadvantages.
Each type of mobile application also has both benefits and disadvantages.

GLOSSARY
Mobile Application: A computer program designed to run on mobile devices,
such as smartphones and tablets

4
Module 1: Mobile Applications Concepts & Techniques

Mobile Application
Concepts And
Techniques

5
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the advantages and disadvantages for designing for mobile
applications.

INSTRUCTOR GUIDANCE
• Instructors will use the slide text to guide them.
• Emphasize the features that come with mobile devices.
• Begin a general discussion about how designing for traditional
desktop models didn‟t have to consider things like battery.
• Changes the elements of design strategy from the very first steps.

CONTENT
When designing for mobile, there are both advantages and disadvantages.
Designing for mobile differs from the previous approach of designing for
traditional desktop devices.

Some of the advantages of designing for mobile include the inclusion of


advanced location features, such as GPS. Applications can now benefit from
the GPS feature. Additionally, mobile devices have access to motion sensors,
cameras, and microphones. Additionally, there is a greater market adoption of
standardized equipment.

On the contrary, there are also disadvantages to designing for mobile. For
example, resources are precious and limited, such as the battery. When
designing an application, designers must consider how much power is required
for the features they hope to include.

6
Module 1: Mobile Applications Concepts & Techniques

Designing for Mobile


Advantages:
• Advanced location features such as GPS
• Motion sensors
• Camera/Microphone
• Greater market adoption of
standardized equipment
Disadvantages:
• Resources are limited
• Not always connected
• Less processing power
• Battery/power concerns

Content
Additionally, unlike a desktop PC, a mobile device is not always connected to the
internet, therefore, designers should consider what sort of internet connection
may be required for their application to be successful.
Mobile devices currently also have less processing power than desktops.

GLOSSARY
SMS: Short Message Service

7
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Define SMS.
2. Understand the benefits of SMS.

INSTRUCTOR GUIDANCE

• Instructors will use the slide text to guide them.


• Instructors should emphasize that every mobile device can receive SMS.
• This makes it important if an organization needs to reach as many customers
as possible.

CONTENT

SHORT MESSAGE SERVICE, usually known simply as SMS, is a short number text
messaging service component. It is used to exchange short text messages and
is one of the most widely used data applications in the world. However, with the
development of other messaging tools, SMS becomes increasingly challenged by
competition.
In the meantime, SMS still remains a viable means of communication. But, when
is it appropriate?

SMS is best used for transmitting small amounts of text data. Limited data for
purposes such as marketing a product or sending a business update are served
well by SMS. Additionally, customers benefit from SMS for things such as checking
balances on accounts or paying bills.

8
Module 1: Mobile Applications Concepts & Techniques

SMS - Short Message Service

This module covers the types of mobile applications that can be used to design
an application.

• What is SMS?
• A “phone number” which is shorter; easy to remember
For example, in UAE, these are in use:
7275 – Dubai mParking
4488 – Dubai Smart Government Pull Service
When is it appropriate?

• Limited data submission/transmission


Pay bills
Get balances
• Marketing/Coupon Services/Surveys
• Information Distribution Lists
• SMS CAN REACH EVERY MOBILE PHONE

GLOSSARY
SMS: Short Message Service

9
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES

1. Understand the advantages and disadvantages for SMS.

INSTRUCTOR GUIDANCE

• Instructors will use the slide text to guide them.


• Review pros and cons of SMS

CONTENT
One very important thing to note about SMS is that every mobile phone can
receive SMS. This becomes ideal when an organization needs to reach as many
customers as possible. While there is no easy way to confirm that a message has
been received, chances are high that the target audience will be reached.
SMS does have a couple of disadvantages, including that it is not available on
non-cellular devices, such as tablets or laptops. Additionally, SMS has limited
capabilities when compared to other application types. SMS also cannot access
a mobile phone‟s features like GPS or the camera.

10
Module 1: Mobile Applications Concepts & Techniques

SMS - Short Message Service


• Advantages

• Available on all mobile phones

• Available even if data services are not

• Disadvantages

• Not available to non-cellular devices (tablets , laptops)

• Very limited capabilities compared to other apps

• Cannot use device features (GPS, Camera, etc.)

11
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES

1. Define HTML 5 Web Applications.


2. Understand pros and cons of HTML 5.

INSTRUCTOR GUIDANCE
• Instructors will use the slide text to guide them.
• Introduce HTML5 web applications.

GLOSSARY
HTML5 Web Application: A mobile version of a website.
Platform: The operating system for a web application, i.e., Android or iOS.

CONTENT
HTML5 mobile applications are mobile versions of web pages. They are accessed
through the device‟s web browser and deployed over the internet.

When designing a HTML5 application, only one application needs to be designed


for all phone platforms, therefore making it a cross-platform mobile application.
This provides uniformity across all platforms, and because updates to the
application are technically updates to the website, they happen almost instantly.

12
Module 1: Mobile Applications Concepts & Techniques

HTML5 ( Web ) Applications


• HTML5 Mobile Applications are mobile versions of web pages

• Accessed through the web browser

• Deployed over Internet

• Can develop/design one application for all platforms

• A cross-platform mobile application

• Provides uniformity across all platforms

• Near-instant updates

• Updates to the application are actually updates to the website,

happening on the back-end

13
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES

• Understand the advantages and disadvantages for HTML5.

INSTRUCTOR GUIDANCE

• Instructors will use the slide text to guide them.


• Review pros and cons of HTML5.

CONTENT
As all mobile applications, HTML5 applications have advantages and disadvantages.
Advantages of HTML5 include the ability to create just one application that will
appear uniform across all devices. This saves a tremendous amount of time and
money for an organization. Also, because updates happen on the back-end,
updates appear nearly instantly on the mobile application.
Conversely, HTML5 can only work when there is wireless data coverage. It also
cannot access most of the features on a mobile device, such as sensors, GPS,
camera, etc. Additionally, HTML5 places heavy resource demands on servers.

14
Module 1: Mobile Applications Concepts & Techniques

HTML5 ( Web ) Applications

• Advantages

• Uniform appearance on all devices

• Instantly applied updates

• Disadvantages

• Only works with wireless data coverage

• Cannot access most device sensors/resources/features

• Large resource demands on servers

15
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Define native applications.
2. Understand how a native application works.

INSTRUCTOR GUIDANCE

• Instructors will use the slide text to guide them .


• Review the definition of native applications .

CONTENT
Native mobile applications are coded in a unique programming language, specific
to an operating system. Native applications are therefore tied to one operating
system. A native application will be specific to a platform, such as Android or iOS.
A native application “lives” on the device and is installed through an app store.
Native applications are feature rich, meaning they can accomplish more, are
more sophisticated, and can access all of a phone‟s features such as the phone
and camera. Native apps are also known to have a high degree of reliability.

16
Module 1: Mobile Applications Concepts & Techniques

Native Applications
• Native Mobile Applications are coded in a unique programming

language, specific to an operating system.

• Native applications are therefore tied to one operating system .

• Native Apps live on the device; installed through an app store

• Feature rich – can accomplish more

• Access to phone‟s features – phone, camera, etc.

• Fast performance; high degree of reliability

17
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the advantages and disadvantages for Native
Applications.

INSTRUCTOR GUIDANCE
• Instructors will use the slide text to guide them.
• Review pros and cons of Native Apps.

CONTENT
Native applications shift most of the resource requirements to the user devices
and therefore the application benefits from access to the device features like
sensors, microphone, camera, etc. This makes the application very feature-rich.
However, sometimes an application‟s function may be restricted by app store
requirements. Each app store has its own requirements.
Additionally, because updates happen through the device, it requires the user to
take action to update. In this manner, there is no guarantee that the user will
update when updates become available.
Most notable, native applications are expensive to create. Because each platform
requires a separate application, organizations have the requirement to design for
multiple platforms. This increases costs and uses a lot of resources.

Test Questions
1. Native applications are designed for specific mobile platforms and therefore
will appear differently on different devices.
a. TRUE (correct)
b. False

18
Module 1: Mobile Applications Concepts & Techniques

Native Applications
• Advantages

• Shifts most resource requirements to user devices

• Application can access device resources

• Sensors, microphone, camera, etc.

• Feature-rich; Fast

• Disadvantages

• Function may be restricted

by App Store requirements

• Cannot guarantee updates

• Expensive to create

• Mobile security concerns

19
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
• Introduce hybrid applications

INSTRUCTOR GUIDANCE
• Instructors will use the slide text to guide them.
• Introduce hybrid mobile applications.

CONTENT
You are probably familiar with the term hybrid when applied to cars. The concept
here is the same; this is a combination of two things.
Hybrid applications combine both native and web application technologies in
order to benefit from each.
Because they include some native application features, controls will appear
differently across platforms, but a near-uniform appearance can be achieved.
Hybrid apps can provide a native app experience while minimizing the platform-
specific design requirements.

20
Module 1: Mobile Applications Concepts & Techniques

Hybrid Mobile Applications

• Hybrid applications combine native and web application technologies

in order to benefit from each.

• Controls will differ across platforms, but a near-uniform appear-

ance can be achieved

• Can provide a native application experience but minimize plat-

form-specific design requirements

• Updates to one (HTML5 or Native) may need to coincide with

updates to the other

21
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the advantages and disadvantages for hybrid applications

INSTRUCTOR GUIDANCE

• Instructors will use the slide text to guide them.


• Review pros and cons of hybrid applications .

CONTENT
As with the other application types, hybrid applications also have advantages and
disadvantages.
The major advantage of hybrid applications is that they combine all the benefits
of native and HTML5 applications into a single application type.
The disadvantage of hybrid applications is that development requires both a
HTML5 application AND a native application and therefore, version and design
control for both. Hybrid applications are therefore expensive and time consuming
to develop.

22
Module 1: Mobile Applications Concepts & Techniques

Hybrid Applications
• Advantages

• Combines all the advantages and

benefits of Native and HTML5 applications

into a single application type

• Disadvantages

• Development requires both a HTML5 and a Native application;

therefore, version and design control for both

• Combines all the problems of Native and HTML5 applications into

a single application type

• Expensive and time consuming to develop

23
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES

1. Understand the points of the mobile application decision tree.

INSTRUCTOR GUIDANCE

• Instructors will use the graphic to guide this discussion.


• Walk students through each step of the mobile app decision tree.

CONTENT
This chart is called a “decision tree.” It grows taller with the addition and inclusion
of features.
This decision tree may help determine how apps should be designed. As the
application design and requirements grow, so too does time and budget.
Every organization has the option to start simple and start small. If the goals
of the organization and application can be reached by simply using SMS, then
perhaps an organization does not need to invest anything more. If there are
more requirements, then we must consider the next step.

24
Module 1: Mobile Applications Concepts & Techniques

Mobile App Decision Tree

NATIVE APP
REQUIRED

BUDGET (how much will it cost?)


Dose the data in
the service need to
Y
be searchable?

Do O support
more than 2
Y
platforms?
Monthly
release cycle Y N
or longer? Maybe Hybrid/
Web can work?

Is offline data
necessary?
Y N
Maybe Hybrid/

Are device
sensors
Y N Web can work?

necessary? Maybe Hybrid/


Web can work?

Do I need Y N
more than Maybe Hybrid/
Web can work?
SMS?
N
Outsourced
SMS Service
Platform

TIME (how long will the development take?)

25
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review your


knowledge
of this material

Quiz – Question 1

1. What does it mean to say that resources are


precious and limited?

a. Resources are too expensive to purchase and download


b. Items such as battery life are limited on mobile devices
and should be taken into account when designing for mobile
c. Batteries in mobile devices have unlimited power supply
d. Power sources for mobile devices are like precious jewelry

26
Module 1: Mobile Applications Concepts & Techniques

Quiz – Question 2

2. What is the most important feature of SMS?

a. SMS uses six digits so it easy to remember.


b. Users can program their phones to only use SMS.
c. Every single mobile phone can receive SMS which is
important if the application needs to reach many users.
d. SMS is not important to mobile application development.

Quiz – Question 3

3. Native applications are designed for specific mobile


platforms and therefore will appear differently on different
devices.

a. TRUE
b. FALSE

27
End of Module
mGovernment 29
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
1. Applications.

CONTENT
Synopsys of this Module.

30
Module 2: Understanding Mobile Devices

Understanding
Mobile Devices

mGovernment 31
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Recognize the differences between “mobile devices” and portable devices
(laptops).
2. Understand new factors affecting the mobile audience.
3. Defining “Smartphone” vs. “Feature Phone”.

32
Module 2: Understanding Mobile Devices

Objectives

• Recognize the differences between “mobile devices” and portable

devices (laptops).

• Understand new factors affecting the mobile audience.

• Defining “Smartphone” vs. “Feature Phone”.

GLOSSARY
Smartphone: Smartphones are a handheld device that integrates
mobile phone capabilities with the more common features of a handheld
computer or PDA.

Feature Phone: A mobile phone without any of the common properties of


a smartphone. Usually capable of SMS and phone calls only.

33
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate some of the advantages of new capabilities and technologies
that exist with mobile devices.

INSTRUCTOR GUIDANCE
• This is one of several slides meant to make students begin to understand the
core differences between mobile devices, and non-mobile devices. For this
slide, specifically, the advantages that mobile devices offer.

CONTENT
When people think of “mobile devices”, they usually think of small items that
they can easily carry around. In reality, a mobile device is much more than this. It
is a small device that offers an array of functionality that can be easily and rapidly
accessed, sometimes even with only one hand. Compare that to a netbook, and
it‟s easy to understand the difference.

The additional functionality offered by mobile devices continues to evolve.


Currently, there are a multitude of functions we can use to our advantage. Just
to name a few, we have constant access to data, location services through GPS,
hardware sensory data, as well as visual and auditory inputs through cameras and
microphones.

34
Module 2: Understanding Mobile Devices

Mobile Advantages

• Consistent data sharing.

Advanced location awareness

through multiple means, GPS,

Wi-Fi, as well as IP/DNS.

• Motion sensors.

• Camera/Microphone.

• Greater market adoption

of consistent standardized

equipment.

35
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Wi-Fi: Wi-Fi is the name of a popular wireless networking technology that uses
radio waves to provide wireless high-speed Internet and network connections.
Internet Protocol (IP): Internet Protocol (IP) specifies the format of packets and
the addressing scheme. Most networks combine IP with TCP, which establishes a
connection between a destination and a source.
DNS: Short for Domain Name System (or Service or Server), an Internet service
that translates domain names into IP addresses. Because domain names are
alphabetic, they‟re easier to remember. The Internet however, is really based on
IP addresses. Every time you use a domain name, therefore, a DNS service must
translate the name into the corresponding IP address. For example, the domain
name www.example.com might translate to 198.105.232.4. The DNS system
is, in fact, its own network. If one DNS server doesn‟t know how to translate
a particular domain name, it asks another one, and so on, until the correct IP
address is returned.

GPS: Short for Global Positioning System, a worldwide MEO satellite navigational
system formed by 24 satellites orbiting the earth and their corresponding
receivers on the earth. The satellites orbit the earth at approximately 12,000
miles above the surface and make two complete orbits every 24 hours.

36
Module 2: Understanding Mobile Devices

Mobile Advantages

• Consistent data sharing.

Advanced location awareness

through multiple means, GPS,

Wi-Fi, as well as IP/DNS.

• Motion sensors.

• Camera/Microphone.

• Greater market adoption

of consistent standardized

equipment.

SOURCES

Flickr “Current Location” image: Self-produced


Smartphone axis: http://www.mindtreatstudios.com/wp-content/up-
loads/2012/05/device_axes.png

37
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate some of the disadvantages and limitations that exist with mobile
devices.

INSTRUCTOR GUIDANCE
• This is one of several slides meant to make students begin to understand the
core differences between mobile devices, and non-mobile devices.
For this slide, specifically, the disadvantages that mobile devices must
endure, and developers must overcome.

CONTENT
While there are many advantages to mobile devices, these advantages come
at a price. Primarily, the price we pay is a sacrifice of equivalent capability to
larger, non-portable devices. For example, resources are much more limited on
mobile devices – processors and memory will never match their non-mobile
counter parts due to size and space constraints, as well as factors such as heat. A
processor operating at a high temperature is acceptable in a computer or server,
but not in the palm of your hand.

Likewise, because the device is mobile, we cannot always rely on it being


connected to the internet – wireless connectivity cannot be guaranteed in all
locations. Smaller screen sizes are necessary for these devices to be portable,
so we have a limitation on the visual output of the device, but perhaps the
greatest disadvantage of all, is the mobile device‟s power source. This was never

38
Module 2: Understanding Mobile Devices

Mobile Disadvantages

• Resources are precious & limited.

• Device is not always connected.

• Screen is smaller.

• Less processing power.

• Battery means power longevity concerns.

39
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
a concern for non-mobile devices, as they either had a permanently connected
power cable, or a large battery.

Mobile devices must be small to be portable, so their batteries must be small.


Smaller batteries mean less power resources – something we must keep in mind
when we are creating our mobile applications.

SOURCES
Intel Core i7 picture: http://static.bootic.com/_pictures/1595239/intel-core-i7-
2617m.jpg
Apple A7 picture: https://upload.wikimedia.org/wikipedia/commons/7/7f/
Apple_A7_chip.jpg
Power Cable picture: http://www.jacarem.co.uk/images/cables/uk-power-cord-
(3amp)-to-iec.jpg
RAM picture: http://bim9.com/wp-content/uploads/2012/01/RAM_SM.png
Hard drive picture: https://upload.wikimedia.org/wikipedia/commons/
thumb/f/f8/Laptop-hard-drive-exposed.jpg/800px-Laptop-hard-drive-exposed.
jpg
Monitor picture:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/LG_L194WT-
SF_LCD_monitor.jpg/800px-LG_L194WT-SF_LCD_monitor.jpg

40
Module 2: Understanding Mobile Devices

Mobile Disadvantages

• Resources are precious & limited.

• Device is not always connected.

• Screen is smaller.

• Less processing power.

• Battery means power longevity concerns.

41
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate that 2014 is the expected year where there will be more
mobile devices, than non-mobile devices, online.

INSTRUCTOR GUIDANCE
• This slide is meant to underscore the importance of targeting a mobile
device audience, as it demonstrates that there will soon be, if not already,
more mobile devices using the internet than there are non-mobile devices.

CONTENT
It is important to understand the fundamental differences between mobile and
non-mobile devices because it is expected that very soon, if it has not already
occurred, we will have more mobile user devices connected to the internet than
we do non-mobile devices. Since the mobile experience is so fundamentally
different from the non-mobile experience, it is incumbent upon us as developers
to target these different devices with different strategies, and to now begin to
prioritize mobile devices over non-mobile.

42
Module 2: Understanding Mobile Devices

Mobile vs. Desktop Users

SOURCES

Graph source: http://awa-digital.com/blog/wp-content/uploads/2013/01/


image003.png

(Note that the image includes the original data source)

43
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To ask the viewer to review the displayed devices and debate which of them
are smartphones, or not, and why.

INSTRUCTOR GUIDANCE
• Engage the attendees by asking them to identify if each of the phones
displayed, one by one, is a smartphone or not. Some are obvious, but the one
in the upper-left corner is not. Its status as a smartphone is debatable due to
sharing many capabilities of modern phones, but having older hardware and
an antiquated operating system.
• Situational Awareness: Watch, and listen, for looks of confusion, or vocal tones
of uncertainty when asking the class about each displayed device‟s status as
a smartphone (if it is, or not).

CONTENT
Although it is not limited to this category, when people think of mobile devices
they typically think of mobile phones – specifically, smartphones. But what
is a smartphone? Is it easy to create or embrace a clear definition for what a
smartphone really is? Is this even necessary for something that seems so simple
and intuitive? In some cases, the answer is clear.

However, there are many devices that might intuitively appear as smartphones,
but lack many capabilities. Are these smartphones or not? Take a moment to
look at the phones presented on this screen and ask yourself if each device is a
smartphone or not.

44
Module 2: Understanding Mobile Devices

Define “Smartphone”

45
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

SOURCES
Nokia E61 picture: http://static.trustedreviews.
com/94/976c86/1155/3093-1.jpg

Nokia 100 picture (slightly altered in slide from source):


https://4.bp.blogspot.com/-TMchVxnZkq0/UBuYKAzGUfI/AAAAAAAAB78/iH-
ju4cwWBbo/s1600/Nokia+100+(Ocean+Bluee.jpg

Android picture: http://theexaminer.com/sites/default/files/blog/sam-


sung-galaxynexus-veriz-angle-lg.jpg

Motorola Razr picture: http://welectronics.com/gsm/Motorola/motorolav3_


black.jpg

BlackBerry Z30 picture: http://www.comparephonemarket.co.uk/images/


phones/XL/MobilePhonesDirectZ30.png

iPhone 5S picture: http://cdn.iphonehacks.com/wp-content/up-


loads/2013/09/iPhone-5S-gold.jpg

Samsung E1200 picture:


https://www.samsung.com/ie/consumer-images/product/mo-
bile-phones/2013/GT-E1200IBIVDI/features/GT-E1200IBIVDI-93-0.png

Nokia Lumia 900 picture:


http://www.askmeprice.com/assets/images/prods/m/6_7.jpg

46
Module 2: Understanding Mobile Devices

Define “Smartphone”

47
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate some of the fundamental hardware differences between feature
phones and smartphones.

INSTRUCTOR GUIDANCE
• The improvement of hardware is what drives all technological
advancements. It is important that students understand the fundamental
hardware differences between Smartphones and Feature Phones, as that is
part of what differentiates the two.

CONTENT
How do we begin to explain what separates smartphones from non-
smartphones, which are also known as “Feature Phones”? One place to
begin is where our eyes first land when we evaluate phones – the hardware itself.

It‟s rather obvious, considering the two pictures on this slide, what is a smartphone
and what is not.

So let‟s begin here. Let‟s consider the hardware that creates these devices, and
their performance capabilities. We‟ll notice that the smartphone can achieve
significantly more than the feature phone. But hardware requires something
to help us interact with it – that‟s where the next category comes into
consideration.

48
Module 2: Understanding Mobile Devices

Hardware Architecture

• Feature Phone
• Display – Small screen, low resolution
• Usually around 100x100 pixels
• Processor – Low speed, low resource
• Clock rate measured in MHz
• Memory – Low speed, low capacity
• Measured in MB
• Storage – Low capacity, if even available
Usually expansion storage isn‟t available (microSD card, etc.)
• Smartphone
• Display – Large screen, high resolution
High hundreds – iPhone 5S measures 640x1136
• Processor – High speed, high resource
Clock rate measured in GHz, sometimes
multi-core
• Memory – High speed, high capacity
Measured in GB
• Storage – High capacity
Commonly found with expansion storage options (microSD card, etc.)

49
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Megahertz (MHz): One MHz represents one million cycles per second.
The speed of microprocessors, called the clock speed, is measured in megahertz.

Megabyte (MB): When used to describe data storage, 1,048,576 (2 to the 20th
power) bytes. Megabyte is frequently abbreviated as M or MB.

iPhone 5S: An improved version of Apple‟s iPhone 5 that adds a number of key
new features while retaining the iPhone 5‟s 4-inch display.

microSD: microSD is a kind of removable flash memory card used for storing
information. SD is an abbreviation of Secure Digital. The cards are used in mobile
phones. They are also used in newer types of handheld GPS devices, portable
media players, digital audio players, expandable USB flash drives, Nintendo DS
flashcards, and digital cameras.

Gigahertz (GHz): One GHz represents 1 billion cycles per second. The speed of
microprocessors, called the clock speed, often is measured in gigahertz.

Gigabyte (GB): 2 to the 30th power (1,073,741,824) bytes. One gigabyte is equal
to 1,024 megabytes.

50
Module 2: Understanding Mobile Devices

Hardware Architecture

• Feature Phone
• Display – Small screen, low resolution
• Usually around 100x100 pixels
• Processor – Low speed, low resource
• Clock rate measured in MHz
• Memory – Low speed, low capacity
• Measured in MB
• Storage – Low capacity, if even available
Usually expansion storage isn‟t available (microSD card, etc.)
• Smartphone
• Display – Large screen, high resolution
High hundreds – iPhone 5S measures 640x1136
• Processor – High speed, high resource
Clock rate measured in GHz, sometimes
multi-core
• Memory – High speed, high capacity
Measured in GB
• Storage – High capacity
Commonly found with expansion storage options (microSD card, etc.)

51
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate the fundamental differences in operating systems between
feature phones and smartphones.

INSTRUCTOR GUIDANCE
• As hardware improves, Operating Systems improve to take advantage of new
features that these hardware improvements offer. This slide helps illustrate
the difference between Operating Systems that are accepted as de-facto
Smartphone Operating Systems, and those that are not.

CONTENT
Operating systems evolve to keep up with hardware improvements and
advancements. If we didn‟t have touchscreens or color displays, there wouldn‟t
be iPhones or Androids, as we understand these phones today.

So now let‟s consider what we uncovered in the previous slide. The Operating
Systems listed at the top of the slide were either once considered the equivalent
of what we understand to be a “smartphone”, or they walk a very fine line
between “Feature Phone” and “Smartphone” today. How users interact with
these operating systems, and their limitations, are also listed.

Compare that to the operating systems listed at the bottom of the slide, how
users interact with them, and what their capabilities are. There is a noticeable
difference between the two.

52
Module 2: Understanding Mobile Devices

Operating Systems

• Feature Phone.

• Symbian, Palm OS, Nokia Series 40 (S40), etc.

• Single-purpose or task-at-a-time oriented.

• List driven interface.

• Smartphone.

• Android, iOS, Windows, BlackBerry.

• Multipurpose, multitask oriented.

• Search & Icon driven interface.

GLOSSARY
Symbian: Symbian is a mobile operating system (OS) targeted at mobile
phones that offers a high-level of integration with communication and personal
information management (PIM) functionality. Symbian OS combines middleware
with wireless communications through an integrated mailbox and the integration
of Java and PIM functionality (agenda and contacts).

Palm OS:Palm OS is an operating system that is made to work on small computer


devices, mostly Personal Digital Assistants. Palm OS was first released in 1996,
when the Palm 1000 was released.

53
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Nokia Series 40: Series 40, often shortened as S40, is a software platform and
application user interface (UI) software on Nokia‟s broad range of mid-tier feature
phones, as well as on some of the Vertu line of luxury phones.

Android: The Android platform is Google Inc.‟s open and free software stack that
includes an operating system, middleware and also key applications for use on
mobile devices, including smartphones. Android is an Open Handset Alliance
Project.

iOS: Apple‟s mobile operating system for its iPhone, iPod touch, iPad, Apple TV
and similar devices. iOS was originally called the iPhone OS but was renamed
in 2010 to reflect the operating system‟s evolving support for additional Apple
devices.

BlackBerry: BlackBerry is a line of mobile e-mail devices and services from


Research In Motion (RIM). BlackBerry is a complete package that includes airtime,
software and choice of BlackBerry mobile device.

Windows Phone: A mobile operating system for smartphones and mobile


devices that serves as the successor to Microsoft‟s initial mobile OS platform
system.

Multitasking: The ability to execute more than one task at the same time, a task
being a program.

54
Module 2: Understanding Mobile Devices

Operating Systems

• Feature Phone.

• Symbian, Palm OS, Nokia Series 40 (S40), etc.

• Single-purpose or task-at-a-time oriented.

• List driven interface.

• Smartphone.

• Android, iOS, Windows, BlackBerry.

• Multipurpose, multitask oriented.

• Search & Icon driven interface.

55
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To compare and contrast several elements of what separates feature phones
from smartphones, and summarize the experience.

INSTRUCTOR GUIDANCE
• The table provided summarizes some of the key differences between
Smartphones and Feature Phones. While the line separating these two can
be difficult to identify, usually the best way to define a Smartphone is by the
user‟s perception of the device when they use it. Perhaps the best way to
identify a Smartphone is that users will simply know it when they see it.

CONTENT
Although we still cannot create a strict definition for what a smartphone really is,
we now have a better understanding of what qualities one has. What you should
notice is that these qualities have changed over time. Hardware improves,
causing operating systems to improve, causing user experience to improve. A
smartphone today, might be considered a feature phone in several years time.

Ultimately, despite the subjectivity of defining a smartphone, what ultimately


defines it is what we started with – the user‟s perception. If it seems that we have
only a phone in our hands, it is probably what most people would call a feature
phone. However, if it feels like we have a small computer in our hand, that‟s what
most people would consider to be the definition of a smartphone.

56
Module 2: Understanding Mobile Devices

Define “Smartphone”

Typical Mobile Device Features


Feature Phone Smart Phone

No Multi-Protocol? Yes
3G, Bluetooth, Wi-Fi, NFC, etc.

No Multi-Sensor? Yes
Orientation, touch, compass, pressure,
etc.

Simple CPU Capability? Advanced


Low Storage High
Capacity?
Low Available Apps? High
No Multitask? Yes
No Computer Sync? Yes
No Account Sync? Yes
Lower Expense? Higher
Phone It feels just like Computer
a…

57
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
3G (Third Generation):3G is an ITU specification for the third generation of
mobile communications technology.

Central Processing Unit (CPU): CPU (pronounced as separate letters) is the


abbreviation for central processing unit. Sometimes referred to simply as the
central processor, but more commonly called processor, the CPU is the brains
of the computer where most calculations take place. In terms of computing
power, the CPU is the most important element of a computer system.

Bluetooth: Bluetooth is defined as being a short-range radio technology (or


wireless technology) aimed at simplifying communications between devices
and the Internet.

Near Field Communication (NFC): Abbreviated as NFC, Near Field


Communication is a standards-based, short-range wireless connectivity
technology that enables convenient short-range communication between
electronic devices. The underlying layers of NFC technology are ISO, ECMA, and
ETSI standards.

58
Module 2: Understanding Mobile Devices

Define “Smartphone”

Typical
Feature Mobile
Phone Device Features
Smart Phone

No Multi-Protocol? Yes
3G, Bluetooth, Wi-Fi, NFC, etc.

No Multi-Sensor? Yes
Orientation, touch, compass, pressure,
etc.

Simple CPU Capability? Advanced


Low Storage High
Capacity?
Low Available Apps? High
No Multitask? Yes
No Computer Sync? Yes
No Account Sync? Yes
Lower Expense? Higher
Phone It feels just like Computer
a…

SOURCES

Picture sources cited on Slide 6 (above).

59
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Recognize the differences between “mobile devices” and portable devices
(laptops).
2. Understand new factors affecting the mobile audience.
3. Defining “Smartphone” vs. “Feature Phone”.

CONTENT
Review the Objectives (re-read the slide).

60
Module 2: Understanding Mobile Devices

Review

• Objectives

• “Mobile devices” present a new array of sensors and data to interact

with users.

• Device resource limitations present unique challenges to the

mobile landscape.

• Hardware and Operating Systems define the differences between

“Smartphones” and “Feature Phones”.

61
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

62
Module 2: Understanding Mobile Devices

Quiz – Question 1

• Battery life is a major concern with mobile devices.

a. True
b. False

Quiz – Question 2

• There is no clear, universal definition for what is a “smartphone”,


in part because the technology is always changing and
improving.

a. True
b. False

63
End of Module
mGovernment 65
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

SYNOPSIS
• This module covers past and current statistics of mobile use in the UAE.

THEMES
• Strategy, Architecture, Applications.

LEARNING OBJECTIVES
• The learning objectives for this module are:
• Review the current state of mobile in the UAE.
• Compare previous quarters with the most current statistics.

CONTENT
This is Management Module #5.
This module covers the current state of mobile in the UAE. This module compares
previous statistics with the most current information about mobile device use.

GLOSSARY
Market share: the portion of a market controlled by a particular company
or product.

66
Module 3: Current State of Mobile in UAE

Current State
of
Mobile in UAE

mGovernment 67
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Define smartphone.

INSTRUCTOR GUIDANCE
• Instructors will use this slide to introduce this module.
• Begin the discussion with a general intro to “what is a smartphone?”
• Is there one true definition?

CONTENT
Previously is was difficult to exactly define “smartphone.”
As technology advances, defining what a smartphone is becomes easier.

A smartphone is a mobile phone that is able to perform many of the functions


of a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.

68
Module 3: Current State of Mobile in UAE

Define “Smartphone”

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.

69
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Compare smartphones to feature phones.
2. Identify the differences between smartphones and feature phones.

INSTRUCTOR GUIDANCE
• Instructors will use this slide to guide this discussion.
• Instructors will be able to do a simple compare and contrast of these two
types of phones.

CONTENT
When comparing feature phones to smart phones, we can see the main
differences in four specific areas: display, processor, memory and storage.

70
Module 3: Current State of Mobile in UAE

Compare

• Feature Phone

• Display – Small screen, low resolution.

• Processor – Low speed, low resource.

• Memory – Low speed, low capacity.

• Storage – Low capacity, if even available.

• Smartphone

• Display – Large screen, high resolution

• Processor – High speed, high resource

• Memory – High speed, high capacity

• Storage – High capacity

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.

71
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Use the side-by-side chart to review the contrast of feature phones and
smart phones.

INSTRUCTOR GUIDANCE
• Instructors will use this slide to introduce this module.
• Instructors, reinforce the ideas from the previous slide.

CONTENT
This side-by-side comparison introduces a few more characteristics to compare
between these two types of devices, including the ability to multitask, sync, and
the availability of applications.

In conclusion, we know a feature phone feels like a phone, but a smart phone
feels much more like a computer.

72
Module 3: Current State of Mobile in UAE

Side-by-Side

Typical Mobile Device Features


Feature Phone Smart Phone

No Multi-Protocol Yes
3G, Bluetooth, Wi-Fi, NFC, etc.

No Multi-Sensor Yes
Orientation, touch, compass, pressure,
etc.

Simple CPU Capability Advanced

Low Storage Capacity High

Low Available Apps High

No Multitask Yes

No Computer Sync Yes

No Account Sync Yes

Lower Expense Higher

Phone It’s like a Computer

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.

73
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about
the changing composition of the mobile market in the UAE. Of great
importance is the change of balance between feature phones and smart
phones between Q3 and Q4 in 2013. Smart phone use increased by 5% in
just a three month period.

CONTENT
On this slide you will see that in the 3rd quarter of 2013, in the UAE, the
percentage of feature phones to smart phones was 54% to 46%.

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

74
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

UAE Q3 2013 Mobile Phone


Market
July – September

Smart
Feature Phones
Phones 46%
54%

SOURCES

http://www.tra.gov.ae/news_TRA_Reveals_Data_for_Fourth_Quarter_of_2013_
on_UAE_Market_Shares_of_Mobile_Handsets

Test Questions
• As of the 3rd quarter of 2013, what was the percentage of feature phones to
smart phones?

75
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about
the changing composition of the mobile market in the UAE. Of great
importance is the change of balance between feature phones and smart
phones between Q3 and Q4 in 2013. Smart phone use increased by 5% in
just a three month period.

CONTENT
This chart presents the percentage of ALL SMART PHONES during 3rd quarter
2013.
Note that iPhone holds three of the top five spots.

GLOSSARY

Smartphone: a mobile phone that is able to perform many of the functions of


a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

76
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

UAE Q3 2013 Top


Smartphones
2.8 Percentage of all UAE mobile
% 2.5
% 2.3 phones
% 1.85%
1.8 1.6
% % 1.2 1.1 1.0
% % %

SOURCES

http://www.tra.gov.ae/news_TRA_Reveals_Data_for_Fourth_Quarter_of_2013_
on_UAE_Market_Shares_of_Mobile_Handsets

77
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about
the changing composition of the mobile market in the UAE. Of great
importance is the change of balance between feature phones and smart
phones between Q3 and Q4 in 2013. Smart phone use increased by 5% in
just a three month period.

CONTENT
In this chart we can see that the market changed between the 3rd and 4th
quarters of 2013.

Note the increase in smart phone usage. In the 4th quarter, the balance shifted
to feature phones with only 49% and smart phones with 51%. As of 4th quarter
2013, smart phones were the majority of mobile phones in use in the UAE.

Note this is a fairly dramatic shift in just one quarter – and increase of 5% in just
three months.

78
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics


UAE Q4 2013 Mobile Phone
Market October –
December

Feature
Phones Smart
49% Phones
51%

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_Fourth_Quarter_of_2013_
on_UAE_Market_Shares_of_Mobile_Handsets

79
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about
the changing composition of the mobile market in the UAE. Of great
importance is the change of balance between feature phones and smart
phones between Q3 and Q4 in 2013. Smart phone use increased by 5% in
just a three month period.

CONTENT
Here is the 4th quarter information for the top smart phones. There is not such
a dramatic shift here. iPhone still holds three of the top five spots.

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

80
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

UAE Q4 2013 Top


Smartphones
Percentage of all UAE mobile
3.0
% 2.6 phones
% 2.3
% 1.8 1.7 1.7
% % % 1.5
% 1.2
% 0.9
%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_Fourth_Quarter_of_2013_
on_UAE_Market_Shares_of_Mobile_Handsets

81
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about the
changing mobile phone environment.
• Here begins the presentation of Q1 2014 information. Instructors should
demonstrate the dramatic shift between Q3 and Q4 in 2013, but then a
much less dramatic increase into Q1 of 2014

CONTENT
Here we begin with the data for Q1 2014. As the chart demonstrates, smart
phones again increased, however, this quarter, only by an additional 1%. This is
a much less dramatic increase from the previous increase.
What reasons may there be for the less aggressive growth?
What reasons may there be for a less aggressive decrease in feature phone use?

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

82
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

UAE Q1 2014 Mobile Phone


Market
January -
March

Feature
Phones Smartphon
48% es
52%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

83
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors should use the next series of slides to present a story about the
changing mobile phone environment.
• This chart also shows Q1 2014. iPhone still holds three of top five.
• Here begins the presentation of Q1 2014 information. Instructors should
demonstrate the dramatic shift between Q3 and Q4 in 2013, but then a
much less dramatic increase into Q1 of 2014.

CONTENT
This chart also shows Q1 statistics.
iPhone is still holding three of the top five spots for smart phones.

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

84
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

UAE Q1 2014 Top


Smartphones
2.8 2.7 Percentage of all UAE mobile
% % 2.5 phones
% 2.1
% 1.8 1.7
% 1.6
% % 1.4
% 1.0 0.9 0.8
% % %

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

85
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors will use this slide to compare three quarters of information
regarding the smart phone use.
• Note that two new devices are included in Q1 2014 – Samsung grand and
Samsung Note 3.

CONTENT
In this slide we see all three quarters represented when reviewing smart phones.
Are there any trends that you can identify?

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

86
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

Q3 2013 to Q4 2013 – What


Changed?
3.5 2013 Q3 2013 Q4 2014 Q1
%
3.0
%
2.5
%
2.0
%
1.5
%
1.0
%
0.5
%
0.0
%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

87
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• The next two slides represent the mobile device manufacturer market share.
Instructors will want to note the slight differences between the slides. While
they may seem insignificant, could they be indicative of a future trend?

CONTENT
The next two slides represent the market share for mobile device manufacturers
in the UAE. As you review these two slides? What differences do you see?
Pay particular attention to Nokia and Samsung as you move to the next slide.

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

88
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

Q4 2013 Device Manufacturer UAE Market


Share
HTC, 0.7%
Sony, 0.3%
Huawei, Others
0.5% ,
LG, 0.9% 10.8%
Apple,
8.4%

BlackBerr
y, 9.0% Nokia,
51.5%
Samsung,
17.9%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

89
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• These two slides represent the mobile device manufacturer market share.
• Instructors will want to note the slight differences between the slides. While
they may seem insignificant, (small increases or decreases?) could they be
indicative of a future trend?

CONTENT
These two slides represent the mobile device manufacturer market share.
What differences do you see in the share for Nokia and Samsung? Who gained?
Who lost? Although these are small differences from the previous quarter, could
this be a signal of a larger change in the future?

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

90
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

Q1 2014 Device Manufacturer UAE Market


Share
HTC,
0.7% Others
LG, ,
0.9% 11.6%

Apple,
9.1%
BlackBerry, Nokia,
8.2% 50.2%
Samsung,
19.3%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

91
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• These two slides represent the mobile device manufacturer market share.
• These two graphs show both feature phones and smart phones.

CONTENT
These next two slides provide bar graph information on specific devices and
their market share, as opposed to the previous slides, which displayed device
manufacturers. Can you see any differences between Q4 2013 and Q1 2014?

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

92
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

Q4 2013 – Specific Device Market Share


Feature Phone Smart Phone
4.5%
4.0%
3.5%
3.0%
2.5%
2.0%
1.5%
1.0%
0.5%
0.0%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

93
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• These two slides represent the mobile device manufacturer market share.
• These two graphs show both feature phones and smart phones.

CONTENT
To note again, these two slides provide information on the market share of devices,
as opposed to the previous pie charts, which displayed device manufacturers.
What are the differences between Q4 2013 and Q1 2014?

GLOSSARY
Smartphone: a mobile phone that is able to perform many of the functions of
a computer, typically having a relatively large screen and an operating system
capable of running general-purpose applications.
Market share: the portion of a market controlled by a particular company or
product

94
Module 3: Current State of Mobile in UAE

UAE Mobile Statistics

Q1 2014 – Specific Device Market


Share
4.0 Feature Phone Smart Phone
%
3.5
%
3.0
%
2.5
%
2.0
%
1.5
%
1.0
%
0.5
%
0.0
%

SOURCES
http://www.tra.gov.ae/news_TRA_Reveals_Data_for_first_Quarter_of_2014_on_
UAE_Market_Shares_of_Mobile_
Handsets%2C_Smartphones_and_Social_Networking_Sites-638-1.php

95
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the presentation of data in the chart.

INSTRUCTOR GUIDANCE
• Instructors will introduce this new topic with this slide.
• Instructors may begin this discussion with a few questions to the class.
• Ask the class: how many of you have a desktop computer at home? How
many of you access the Internet by your mobile devices? Do you access the
Internet every day?
• Ask the Class: what does this change in Internet user tell us about planning
for government services? Does this mean that organizations should plan for
more mobile services? Probably.

CONTENT
What can you see on this graph?
The yellow line represents users who access the Internet by mobile device.
The green line represents users who access the Internet by Desktop.

As the graph shows, from 2007, desktop Internet users outnumbered mobile
Internet users greatly. What happened from 2013 to 2014?
For the first time, between the end of 2013 and the beginning of 2014, mobile
Internet users were more than the number of Desktop Internet users.

96
Module 3: Current State of Mobile in UAE

Mobile vs. Desktop Users

CONTENT
When planning government smart services, it is important to plan for the mobile
Internet user.

97
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the value of Google Analytics and how it can help organizations
plan for mobile development.

CONTENT
When planning for mobile services, how do organizations decide which devices
and platforms to design for?

Tools like Google analytics can be used, usually for free, to determine the current
mobile use of websites. The bullets on the left represent the type of data ,which
can be collected to show the behavior of users. The images on the right are the
graphical representation of the data when it is collected.

For example, if you want to know if you should design an application for Android,
examining the number of Visits by Type of Mobile Device, will help us determine
if there is enough demand. Data such as this is vital to effective planning for
mobile services. Organizations want to carefully invest their money into services
that customers actually want and will use.

Test Questions
• What tool can be used to determine the mobile use of existing eServices?

98
Module 3: Current State of Mobile in UAE

Google Analytics

• Create your own mobile • Mobile bounce rate


dashboard and track: • Mobile traffic by source
• Mobile visits • Visits by type of mobile device
• Mobile page views • Mobile visitor screen
• Mobile pages/visit resolutions
• Average mobile visit duration • Mobile visitor operating
• Average mobile page load time systems

99
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. The Q1 2014 market share of smart phones in the UAE is 52%.

a. TRUE
b. FALSE

100
Module 3: Current State of Mobile in UAE

Quiz – Question 2

2. What is a smart phone?

a. A mobile phone that is able to make calendar appointments


b. A mobile phone that is able to perform many of the functions
of a computer.
c. A mobile phone that has very few features and cannot access
the internet
d. A mobile phone that only provides SMS

Quiz – Question 3

3. What tool can be used to determine the mobile use of existing


eServices?

a. Google mail
b. Google maps
c. Google analytics
d. Google images

101
End of Module
mGovernment 103
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

THEMES
• Strategy, Architecture, Applications.

CONTENT
Synopsys of this Module.

104
Module 4: Major Smartphone Platforms

Major
Smartphone
Platforms

mGovernment 105
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how smartphone OS‟s differ.
2. Understand the impact of fragmentation.
3. Understand OS security concerns.

CONTENT
Introduce the Objectives, (read the slide).

106
Module 4: Major Smartphone Platforms

Objectives

• Understand how smartphone OS‟s differ.

• Understand the impact of fragmentation.

• Understand OS security concerns.

107
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the fundamental concepts, differences, and background of
BlackBerry devices.

CONTENT
Blackberry, which was once the king of the mobile market, has fallen dramatically
in market share, stature and prestige. We‟ll discuss why this happened more in a
little bit. First, we need to understand where Blackberry comes from.

Blackberry is a device, built upon a proprietary operating system, that offers a


“security first” perspective regarding mobile device features. It was primarily
developed for government and corporate customers, instead of individuals. This
target market is why security was the priority.

Blackberry upgraded from its first smartphone operating system, called


“BlackBerry OS” into today‟s “BlackBerry 10 OS”. This was a fundamental change
where the OS went from a custom built to a QNX-based kernel.

Native Blackberry applications are, today, programmed mostly in C++ or, if you
have an Android application, it can be ported to Blackberry through the Android
Runtime Layer.

108
Module 4: Major Smartphone Platforms

BlackBerry Overview

• Proprietary OS
• BlackBerry OS
Developer Site:
• Released in 1999 developer.blackberry.com
• Java Virtual Machine (JVM) based
• BlackBerry 10 OS
• Released January 30, 2013
• Based on QNX Kernel
• Android runtime layer
• Application Programming:
• Native – C++
• Android runtime layer – Java

109
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Java Virtual Machine: A platform-independent execution environment that
converts Java byte code into machine language and executes it.
QNX: A commercial Unix-like real-time operating system, aimed primarily at the
embedded systems market.
Kernel: The kernel is the central module of an operating system. It is the part of
the operating system that loads first, and it remains in main memory.
C++: A high-level programming language developed by Bjarne Stroustrup at Bell
Labs. C++ adds object-oriented features to its predecessor, C.
Java: A high-level programming language developed by Sun Microsystems. Java
was originally called OAK, and was designed for handheld devices and set-top
boxes.

SOURCES
BlackBerry logo: http://www.logostage.com/logos/blackberry.png
BlackBerry Bold picture:
https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Blackberry-
Bold-9650-Verizon.jpg/640px-Blackberry-Bold-9650-Verizon.jpg
BlackBerry Z30 picture: http://www.comparephonemarket.co.uk/images/
phones/XL/MobilePhonesDirectZ30.png
Source for market share comment in Content section (below):
http://en.wikipedia.org/wiki/Mobile_operating_system#Market_share

110
Module 4: Major Smartphone Platforms

BlackBerry Overview
• Proprietary OS
• BlackBerry OS
• Released in 1999 Developer Site: developer.blackberry.com
• Java Virtual Machine (JVM) based
• BlackBerry 10 OS
• Released January 30, 2013
• Based on QNX Kernel
• Android runtime layer
• Application Programming:
• Native – C++
• Android runtime layer – Java

Test Questions
1. Match the smartphone operating system to the programming language
used to create native applications.
Listed operating systems:
a. Android
b. iOS
c. BlackBerry
d. Windows Phone
2. Dropdown box choices:
a. Objective-C
b. C#
c. C++
d. Java

111
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the fundamental concepts, differences, and background of
Windows Phone devices.

CONTENT
Windows Phones are relatively new to the market, but what was once a small
population of them might grow substantially now that Microsoft has finished its
acquisition of Nokia. Just like BlackBerry, Windows Phone is a small player.

What once began as Windows Mobile OS in 2000 has now changed into Windows
Phone – this is a good example of how today‟s “mobile devices” are not the same
thing as handheld devices of the past.

Windows Phone OS seems to be following the same versioning trend as the


latest Windows Desktop operating systems, as there have been Windows Phone
7, Windows Phone 8, and now a Windows Phone 8.1 operating system. This
similarity of OS naming and appearance also includes the underlying code. Like
the previously mentioned desktop versions, Windows Phone 8 and 8.1 are based
on the Windows NT kernel.

Native Windows Phone applications are created using C# or Visual Basic,


supported through the Microsoft .NET framework.

112
Module 4: Major Smartphone Platforms

Windows Phone Overview

• Proprietary OS.

• Windows Mobile OS.


Developer Site: www.windowsphone.com
• Released in 2000.

• Support ended January 2013.


• Windows Phone OS.
• Released in 2010.
• Not backwards-compatible.
• Based on Windows NT kernel.
• Application Programming.
• C#, Visual Basic.

113
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Windows NT: A version of the Windows operating system. Windows NT (New
Technology) is a 32-bit operating system that supports preemptive multitasking.
C#: Pronounced “see-sharp.” A hybrid of C and C++, it is a Microsoft programming
language developed to compete with Sun‟s Java language.
Visual Basic: A programming language and environment developed
by Microsoft.

Test Questions
(Same question as listed on BlackBerry slide – this module, slide 3)
Match the smartphone operating system to the programming language used to
create native applications.
Listed operating systems:
a. Android
b. BlackBerry
c. iOS
d. Windows Phone
Dropdown box choices:
a. Objective-C
b. C#)
c. C++
d. Java

114
Module 4: Major Smartphone Platforms

Windows Phone Overview


• Proprietary OS.
• Windows Mobile OS.
• Released in 2000. Developer Site:
www.windowsphone.com
• Support ended January 2013.
• Windows Phone OS.
• Released in 2010.
• Not backwards-compatible.
• Based on Windows NT kernel.
• Application Programming.
• C#, Visual Basic.

115
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the fundamental concepts, differences, and background of iOS
devices.

CONTENT
The world first met iOS at the same time it first met the Apple iPhone, when both
were announced in mid-2007. A proprietary operating system, iOS has been
updated and improved with a new OS version released on a yearly basis. Native
applications for iOS are produced in Objective-C and, beginning with iOS 8 in late
2014, a brand new language, created by Apple, called Swift.

What makes iOS unique is how it replaced Blackberry as the device market leader
upon its introduction. Blackberry had initially ridiculed and mocked Apple for
attempting to enter a market that, from Blackberry‟s perspective, Apple knew
nothing about. Four years later, there were more iOS devices than Blackberry
devices being sold around the world.
Blackberry considered itself invulnerable in the mobile market due to their strong
device security. However, Apple targeted the individual users that cared more
about the device interaction and user experience than device security. In this
category, Apple defeated Blackberry easily.

116
Module 4: Major Smartphone Platforms

iOS Overview

• Proprietary OS
• Based on Unix (BSD) Kernel
• First released June 2007
• iOS 7
• iPhone 4 & 5 models
• All current iPad models
• iOS 8
• Current iOS version
• iPhone 4S – 6+ models
• Available to all but first generation iPads
• Application Programming
• Objective-C & Swift

117
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
UNIX: A popular multi-user, multitasking-operating system developed at Bell
Labs in the early 1970s.
Berkeley Software Distribution: Berkeley Software Distribution (BSD,
sometimes called Berkeley Unix) was a Unix operating system derivative
developed and distributed by the Computer Systems Research Group (CSRG) of
the University of California, Berkeley, from 1977 to 1995.
Objective-C: Objective-C is a general-purpose, object-oriented programming
language that adds Smalltalk-style messaging to the C programming language.
It is the main programming language used by Apple for the OS X and iOS
operating systems, and their respective application programming interfaces
(APIs), Cocoa and Cocoa Touch.

SOURCES
iOS logo: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/
Apple_iOS_new.svg/125px-Apple_iOS_new.svg.png

iPhone 5C picture: http://i2.wp.com/boygeniusreport.files.wordpress.


com/2013/09/iphone-5c.jpg

iPhone 5S picture: http://cdn.iphonehacks.com/wp-content/up-


loads/2013/09/iPhone-5S-gold.jpg

118
Module 4: Major Smartphone Platforms

iOS Overview
• Proprietary OS
• Based on Unix (BSD) Kernel
• First released June 2007
• iOS 7
• iPhone 4 & 5 models
• All current iPad models
• iOS 8
• Current iOS version
• iPhone 4S – 6+ models
• Available to all but first generation iPads
• Application Programming
• Objective-C & Swift
Test Questions
(Same question as listed on BlackBerry slide – this module, slide 3)
Match the smartphone operating system to the programming language used to
create native applications.
Listed operating systems:
a. Android
b. BlackBerry
c. iOS
d. Windows Phone
Dropdown box choices:
a. Objective-C
b. C#
c. C++
d. Java

119
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the fundamental concepts, differences, and background of
Android devices.

CONTENT
Android was also responsible for pulling the mobile market away from Blackberry.
Two years after its introduction, it passed Blackberry‟s market share on the same
grounds as Apple – a better user experience.

One of the things that allowed Android to grow so rapidly was its open source
nature. Based on a Linux kernel, the Android OS is freely available for anyone
to download, develop, and use on any devices they would like, so long as they
can engineer the technology to support it. Native applications for Android are
produced in Java, which is also freely available for download and use.

This open approach caused the market to be flooded with Android devices, and
for development and innovation to rapidly grow. However, this open nature
created some problems.

120
Module 4: Major Smartphone Platforms

Android Overview

• Open Source OS

• Based on Linux Kernel

• Released October 2008

• Android 4.1 – 4.3 – Jelly Bean


Developer Site:
• Released July 2012 (v4.1)
www.android.com
• Android 4.4 – KitKat

• Released October 2013

• Introduced new run-time environment

• Application Programming

• Java

121
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
Linux: Pronounced lee-nucks or lih-nucks. A freely distributable open source
operating system that runs on a number of hardware platforms.

SOURCES
Android “alien” logo: http://nuiteq.com/wp-content/uploads/2014/05/
android_vector.jpg
Android picture: http://theexaminer.com/sites/default/files/blog/samsung-
galaxynexus-veriz-angle-lg.jpg
Source for market share comment in Content section (below): http://
en.wikipedia.org/wiki/Mobile_operating_system#Market_share

Test Questions
(Same question as listed on BlackBerry slide – this module, slide 3)
Match the smartphone operating system to the programming language used to
create native applications.
Listed operating systems:
a. Android
b. BlackBerry
c. iOS
d. Windows Phone
Dropdown box choices:
a. Objective-C
b. C#
c. C++
d. Java

122
Module 4: Major Smartphone Platforms

Android Overview

• Open Source OS

• Based on Linux Kernel

• Released October 2008

• Android 4.1 – 4.3 – Jelly Bean


Developer Site:
• Released July 2012 (v4.1)
www.android.com
• Android 4.4 – KitKat

• Released October 2013

• Introduced new run-time environment

• Application Programming

• Java

123
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate the significant number of manufacturers that produce devices
to support the Android Operating System.

CONTENT
The open nature of Android allowed any manufacturer to produce any device
they wanted to support the operating system, so long as the technology could
function. This meant that various companies began producing large numbers of
Android devices of different capabilities, screen sizes, and resources.

This chart demonstrates the market share of these manufacturers. Each box is a
different device – the larger the box, the larger the market share. You can view
this chart, and interact with it, at the web address at the top.

GLOSSARY
Android Fragmentation: The threat or concern that a proliferation of diverging
variants of the Android platform will result in the inability of some devices to
properly run apps written with the Android SDK.

124
Module 4: Major Smartphone Platforms

Android Brand Fragmentation

http://opensignal.com/reports/fragmentation-2013/

SOURCES
http://opensignal.com/reports/fragmentation-2013/

125
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate the further complexities of adding the different Android OS ver-
sions to the already complex landscape illustrated in the previous slide.

CONTENT
Unfortunately, the Android Fragmentation problem only gets worse when
we expand the Brand Fragmentation to include the different device model
configurations within each brand. For example, depending on when or where
they were sold, two Samsung Galaxy S3 smartphones might be different model
numbers. You can view this chart, and interact with it, at the web address at the
top.

The one thing you should remember from this is that, so far, you have seen
Android Fragmentation among manufacturers, and devices. We have only gone
two levels deep into the problem. If we were to go one more level down, we
would be exploring the different number of Android OS versions installed on
different device models from different manufacturers.

126
Module 4: Major Smartphone Platforms

Android Device Fragmentation

• http://opensignal.com/reports/fragmentation-2013/

SOURCES
http://opensignal.com/reports/fragmentation-2013/

127
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Illustrate how iOS versions do not suffer from the same fragmentation
problem as much as Android does.

CONTENT
Compare all of the fragmentation problems we just discussed with Android, to
iOS devices. The fragmentation problem is almost non-existent. While open
source solutions like Android allow anyone to produce products and services,
this results in a chaotic situation for developers.

128
Module 4: Major Smartphone Platforms

iOS Fragmentation

• 90% of devices are using iOS 7

• Near zero iOS version fragmentation

• All iOS devices made by Apple

• Zero brand fragmentation

• Source (July 2014): https://developer.

apple.com/support/appstore/

SOURCES
https://developer.apple.com/support/appstore/

129
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate that there are benefits to open source operating systems after
having demonstrated their problems in the fragmentation slides.

CONTENT
There is some good news for open source systems, though. When we compare
the CVE findings for iOS to Android, we see something we might not have
expected. The Android OS shows fewer vulnerabilities than iOS.

This is because the open source nature of Android allows the code to be reviewed
by programmers and security experts around the world. It also allows these
same people to develop security solutions for those problems. Apple, on the
other hand, is limited to only the programmers and security experts they employ
or contract to review the iOS source code.

While this looks nice for Android, keep in mind that these CVEs are related to the
base operating system alone. These CVEs do not take into consideration the
security concerns that are introduced when users between installing applications
onto these devices. We will discuss this problem more in a later module.

130
Module 4: Major Smartphone Platforms

Android/iOS CVEs

Security Flaws in Mobile Operating Systems


• iOS Vulnerabilities:

• Android Vulnerabilities:

Source: CVEDetails.com as of August 2014

131
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
CVE: Acronym for Common Vulnerabilities and Exposures. A system that
provides a reference-method for publicly known information-security
vulnerabilities and exposures.

SOURCES
Apple logo: http://applethat.com/wp-content/uploads/2013/04/apple-logo1.jpg

Android logo: http://nuiteq.com/wp-content/uploads/2014/05/android_vector.


jpg

iOS vulnerabilities:
http://www.cvedetails.com/product/15556/Apple-Iphone-Os.html?vendor_id=49

Android vulnerabilities:
http://www.cvedetails.com/product/19997/Google-Android.html?vendor_
id=1224

132
Module 4: Major Smartphone Platforms

Android/iOS CVEs

Security Flaws in Mobile Operating Systems


• iOS Vulnerabilities:

• Android Vulnerabilities:

Source: CVEDetails.com as of August 2014

133
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how smartphone OS‟s differ.
2. Understand the impact of fragmentation.
3. Understand OS security concerns.

CONTENT
Review the Objectives (re-read the slide).

134
Module 4 : Major Smartphone Platforms

Review

• Objectives

• Operating Systems are significantly affected by the intended

audience, and by its status as open or proprietary source code.

• Android‟s open nature creates a significant fragmentation problem,

while Apple‟s restriction on the OS and hardware almost entirely

eliminates this problem.

• While the open nature of Android improves OS security, it creates

application security problems that are avoided by iOS, due to

Apple‟s comparatively tight restrictions.

135
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Which smartphone operating system is freely available for any-


one in the world to download?

a. Blackberry
b. Windows Phone
c. iOS
d. Android

136
Module 4: Major Smartphone Platforms

Quiz – Question 2

2. Developers should be aware of the Android fragmentation


problem, and – because of this problem – be very careful when
deciding what the minimum supported Android version will be for
their applications.

a. True
b. False

Quiz – Question 3

3. Because there are fewer security vulnerabilities documented for


the Android OS than for iOS, this means that Android devices will
always be more secure than iOS devices.

a. True
b. False

137
End of Module
mGovernment 139
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
Synopsys of this Module.

GLOSSARY
SDLC – Software Development Life Cycle
Acronym for software development life cycle (SDLC) and also synonymous with
software process as well as software engineering, it is a structured methodology
used in the development of software products and packages. This methodology
is used from the conception phase through to the delivery and end of life of a
final software product.

140
Module 5: SDLC – Phase 1: Requirement Analysis

SDLC – Phase1
Requirement
Analysis

mGovernment 141
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how Phase 1 impacts the entire SDLC.
2. Understand how to evaluate which services are best to mobilize.
3. Understand how to select the proper application type for the
mobile service.

CONTENT
Introduce the Objectives, (read the slide).

142
Module 5: SDLC – Phase 1: Requirement Analysis

Objectives

• Understand how Phase 1 impacts the entire SDLC

• Understand how to evaluate which services are best to mobilize

• Understand how to select the proper application type for the

mobile service.

143
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. A general introduction to the purpose of SDLC Phase 1.

CONTENT
The most important part of the SDLC because this step defines what our work
will be for every phase to come next.

This usually involves a “kick-off” meeting, which marks the beginning of the
project. At this meeting, or prior to it, all entity stakeholder interests need to be
represented. This means managers that will oversee the application through its
development and operation, the technicians who will support the backend, the
security officers who are responsible for securing the application data, and – of
course – the developers who will build the application.

These concerns and interests are collected and used to identify the scope of
work, milestones and goals for developing the application. This will influence the
application throughout the rest of the life cycle.

144
Module 5: SDLC – Phase 1: Requirement Analysis

SDLC – Phase 1 – Requirements Analysis

• The most important part of the

SDLC

• Usually done by the most

skilled and experienced

software engineers in the

organization.

• Once the requirements are

gathered, documentation is

created which establishes the

scope of the project.

145
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

Test Questions
Note: This question can be answered by any slide containing the SDLC
graphic. This question is included here so it is presented as early as
possible in the training track.
Match the SDLC Phase number with the SDLC Phase name
(Each phase is listed as “Phase x” where x is 1 – 6)
Dropdown box options:
Analysis & Design (Answer:)
Requirement Analysis (Answer:)
Implementation (Answer:)
Maintenance (Answer:)
Code Generation (Answer: )
Testing (Answer:)
Next question – Note: Though not documented on the slide, everywhere in
the training track that SDLC is mentioned, it is referred to as the “Software
Development Life Cycle”.
SDLC stands for several things. Which is the most appropriate meaning of SDLC
in the Application Developers course?
a. System Development Life Cycle
b. Software Development Life Cycle
c. Security Development Life Cycle
Next question – Note: Though it is not explicitly stated on the slide, the
information on this slide establishes the answer for this question.
Which phase of the SDLC defines what services the application should
provide?

146
Module 5: SDLC – Phase 1: Requirement Analysis

SDLC – Phase 1 – Requirements Analysis

• The most important part of the

SDLC

• Usually done by the most

skilled and experienced

software engineers in the

organization.

• Once the requirements are

gathered, documentation is

created which establishes the

scope of the project.

Test Questions
a. Analysis & Design
b. Requirement Analysis
c. Testing
d. Implementation
e. Maintenance
f. Code Generation

147
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Begin discussion of some of the decisions that will be reached in Phase 1.

CONTENT
Deciding on what services to mobilize begins by identifying what services your
entity offers, how much demand there is for that service, and how easy (or
difficult) it would be to provide as a mobile service.

These factors help us to categorize each service on a quadrant chart, which will
help us decide what services to mobilize.

148
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis

How do we decide what service(s) to mobilize?


• Collect a list of all your entity‟s services.

• How much demand is there for each service?

• Is there a clear path to mobilize the service?

• Use a Quadrant Chart to simplify the decision.

149
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show how a simple quadrant chart can be used to identify what government
services should be prioritized for mobilization.

CONTENT
Any services that have a high demand, and are easy to mobilize, would go into
the green square.
These services should be considered for mobilization before any others.

150
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis
Eas

Mobilize these
y

services when
Mobilize
time and budget these
allow services
Increasing Ease of

Moderat

first!
Mobilization

It may never be Think about if it is


desireable, or worth the effort to
possible, to mobilize these
mobilize
Har

these services services


d

Lo Moderate
w Hig
h
Increasing Service Demand

151
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Begin discussing how to decide which application type to use for the
selected service(s).
2. Remind them of the minimums established in the TRA Guidelines.

CONTENT
After we have decided what service were going to mobilize we now need to
decide what application type we are going to use. Unfortunately, this is not as
simple as it may initially sound. Far to often, the initial response is to develop
a native application. We want an application for our entity, so we must produce
one that can be downloaded from the app store. This quick judgment can be
problematic to future growth.

Instead, before we decide on which application type to use, we should go back to


the TRA mobile guidelines document and remember the guidelines that it gives
us. We should keep these guidelines in mind before we begin to ask ourselves
the questions that will help us decide on the proper application type

152
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis

How do we decide what application type to use?


• Remember these important TRA guidelines:
• “All services may not be suitable for mobile platforms”
• “As a first phase, all government entities should focus on Citizen
Centric (G2C) services as an immediate priority for mobile
transformation.”
• “All government entities should achieve Step 1 & Step 2 as a
minimum baseline in order to be considered mobile enabled.”
• Step 1 – Get Service Information
• The customer finds out what kind of service is required and how,
when and where to get it.
• Step 2 – Apply for Services
• The customer initiates the interaction with the Federal Entity to
obtain the desired services.

153
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Continue discussion of application type selection.
2. Bring budget, timeline & update frequency into consideration.

CONTENT
The most fundamental questions we need to ask, before we develop our
application, has to do with the resources required to build it. Perhaps the most
important thing to consider is how much budget we have to develop this
application. We must remember that native applications and hybrid applications
require a larger budget then HTML5 applications or SMS applications. The
reason these cost more, is because we are developing an application for each
major smart phone platform. Whereas, with HTML5 and SMS applications, we
are only developing one application that will present itself in the same way on all
mobile phones.
Likewise, because of the extra capabilities of native and hybrid applications,
these applications will take longer to develop, test and deploy than HTML5 or
SMS applications. Also remember that this timeline applies to updates as well as
the initial release of the application. Updates to the application, whether it‟s for
security reasons or improving functionality, will take longer to develop, test, and
deploy on a native and hybrid applications.

Because HTML5 applications are websites, anytime we need to make an update


to the application we only need to update the Web server, or the system back
and, which is entirely in our control at our data center. The same can be said for
the servers that handle SMS applications. However, because native and hybrid
applications are downloaded from app stores, and because the companies

154
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis

How do we decide what application type to use?


Begin with these questions and basic estimates:
• How much is budgeted for application development?
• Large budget – Native or Hybrid app is possible
• Small budget – Focus on HTML5 apps
How quickly should the application be developed and made available?
• 4 – 6 months or more – Native or Hybrid app is possible
• 2 – 4 months – HTML5 app, Native or Hybrid might be possible
• 1 – 2 months – HTML5 app is fastest
How often does the application content need to be updated?
• Very often (Daily) – HTML5 app
• Somewhat often (Once per month) – HTML5 or Hybrid app
• Not often at all (1 – 4 times per year) – HTML5, Hybrid or Native app

CONTENT
that maintain these app stores must review and approve these applications, we
cannot guarantee that the updates will be available as soon as possible. In fact,
even once the updated application has been made available on the app store, we
cannot force an update to the users phone. The user must voluntarily decide to
download and implement the update.

155
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Continue discussion of application type selection.
2. Bring target market device demographics into discussion.

CONTENT
There are even more questions you must answer before you can select an
application type. Because native and hybrid applications run on different
smartphone platforms, and because we want to reach the greatest number
of users with our application, we should be aware of what the current market
composition looks like for smart phones.

Likewise, we need to understand how simple the application will be that we


produce. If our application is designed to provide a very simple service, there is no
reason for us to spend the time and the money to create unnecessarily complex
application. SMS applications are, perhaps, the simplest application type you
can select. They also have a distinct advantage of being available to all mobile
phones, which includes feature phones and smartphones, and being accessible
in the same way across all devices. However, because SMS is so simple, we would
create a very frustrating and difficult user experience if we try to use this very
simple application type for a very complex service.

156
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis

How do we decide what application type to use?


More questions to ask:

• What is the current mobile device market share?

• Native or Hybrid app – Device OS specific

• HTML5 app – Available independent of device OS

• SMS app – Available to all mobiles, smartphone or not

• What is the level of application service simplicity?

• Very simple – SMS or HTML5 app

• Simple but numerous functions – HTML5 app

• Moderately complex – Native app

• Very complex – Hybrid app

157
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Table provided comes from the mGov Guidelines to demonstrate the major
differences between application types.

CONTENT
This table, which comes from the mGovernment guidelines document,
references various aspects of an application type that you should be aware of
before choosing one for your application.

158
Module 5: SDLC – Phase 1: Requirement Analysis

Requirements Analysis
Native HTML5 Hybrid
Graphics Native APIs HTML, Canvas, HTML, Canvas,
SVG SVG
Performance Fast Slow Slow
Native “look & feel” Native Emulated Emulated
Distribution Application Store Web Application Store
Application Short Long Long
Lifespan
Access to Device Yes No Yes
Notifications Yes No Yes
Storage Secure file system,
Secure file Shared SQL
shared SQL
storage
Location Yes Yes Yes
Awareness
Connection Online & Offline Mostly online Online & Offline
Technical Skills Objective-C, HTML5, CSS, Objective-C, Java, C++,
Java, C++, JavaScript C#, HTML5, CSS,
C# JavaScript

SOURCES
Table comes from mGovernment Guidelines document, page 19, with some
additions to the Technical Skills row.

159
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how Phase 1 impacts the entire SDLC.
2. Understand how to evaluate which services are best to mobilize.
3. Understand how to select the proper application type for the mobile service.

CONTENT
Review the Objectives (re-read the slide).

160
Module 5: SDLC – Phase 1: Requirement Analysis

Review

• Objectives
• Phase 1 defines our objectives and strategy for each iteration of the

SDLC. Changes from the completion of Phase 1 should be intro-

duced in Phase 1 of the next SDLC iteration.

• Certain services are better candidates for mobilization than others.

Identify the most demanded services, and select only a few of these

for mobilization.

• Not all applications need to be native. In some cases, HTML5 or

SMS applications are better options.

161
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Why is Phase 1 of the SDLC considered to be the most


important?

a. It is where the goals are established


b. It includes all stakeholders and their interests
c. It defines the scope of the project
d. All of the above

162
Module 5: SDLC – Phase 1: Requirement Analysis

Quiz – Question 2

2. Which of the following is correct about each application type?

a. Although SMS reaches all phones, it should not be used for


complex mobile services
b. Native applications are best because they appear the same on
all devices
c. HTML5 applications will always work offline
d. All of the above

Quiz – Question 3

3. Typically, SMS and HTML5 applications can be faster and cheaper


to design and implement than Native and Hybrid applications.

a. True
b. False

163
End of Module
mGovernment 165
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
Synopsys of this Module.

166
Module 6: SDLC – Phase 2 Application Design

SDLC – Phase2
Application
Design

mGovernment 167
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the significance of Phase 2.
2. Understand how to plan the mobile application design.
3. Understand the best techniques to improve the mobile application design

CONTENT
Introduce the Objectives, (read the slide).

168
Module 6: SDLC – Phase 2 Application Design

Objectives

• Understand the significance of Phase 2.

• Understand how to plan the mobile application design.

• Understand the best techniques to improve the mobile application

design.

169
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Module location in the SDLC.

CONTENT
Application Design, which is phase 2 of the SDLC, receives the project guidelines
and milestones from Phase 1 and uses that data to begin creating the app.

170
Module 6: SDLC – Phase 2 Application Design

SDLC – Phase 2 – Application Design

171
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate what Apple, long praised for the design of their products and
services, uses as a guide for design.

CONTENT
A designer‟s emotional connection to a project always reflects itself in
the finished product. Those who feel an overwhelming sense of pride,
joy, even ownership in what they are creating will always result in a
better product than one created by an apathetic, disinterested designer.

How designers feel about something, and how they want those who will use
the product they are creating, should always govern the direction of a mobile
application service. If your motivation is simply to get something functional
out fast, your app will not be as well received or successful as an app that was
carefully and happily designed.

172
Module 6: SDLC – Phase 2 Application Design

“The presentation contains a video from the Apple WorldWide


Developer Conference of 2013 titled “Apple Design Intention”

https://www.youtube.com/watch?v=nmV3KMniZuQ

SOURCES
Apple Design Video: https://www.youtube.com/watch?v=VpZmIiIXuZ0

173
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate, in a manner that everyone can directly relate to, how some
things in life are more valuable than others.

CONTENT
Maslow‟s Hierarchy of Needs is a psychological concept where the importance of
what a person needs in their life is ranked by importance.

The hierarchy helps us understand that higher concepts such as creativity and
confidence, are not as important to someone as family, friendship, and health,
and likewise all of these concepts are less important than basic physical neces-
sities.

Put into a simple example, having confidence and the respect of others is mean-
ingless if you do not have food, water, and shelter.

174
Module 6: SDLC – Phase 2 Application Design

Introduction

A psychological concept where

an individual‟s needs in life are

organized by importance.

Less important needs (such

as self-esteem, love and

security) are irrelevant

if the physiological

needs (food, water,

shelter, sleep) are

not met.

SOURCES
Hierarchy Picture: http://quentinhafner.com/wp-content/uploads/2014/06/
maslows-hierarchy2.jpg

175
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate, by using the same concept as in the previous slide, how some
things in an application are more valuable than others.

CONTENT
This idea of a hierarchy of importance applies to application development
as well. When most people talk about an application, they might find simple
things that they say needs improvement.
These could be improvements like the physical appearance of an application,
or how the user interacts with it. These are important requirements to meet
when designing an application. However, even an application with a beautiful
design and a simple interface will be ruined if the application does not respond
in a timely or expedient manner, and will especially be ruined if the application
cannot be relied upon to accurately and successfully complete the task for
which it was designed.
In order to have a successful application, we must find a way to design
something that is reliable, fast, simple, and beautiful. This is not an easy task.
However, if a substantial amount of time is spent in the design phase with
constant reviewing and improvement of the design, the final product should
achieve all of these goals. We cannot just jump blindly into design, though –
doing this will absolutely yield an inferior application. There is a strategy we
can use, and by following the strategy we improve our chances of creating an
application that we are proud to put our name upon.

176
Module 6: SDLC – Phase 2 Application Design

Design “Hierarchy of Needs”

177
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate how to begin with the application design – work out the
business logic, and how various functions will operate within the app before
programming begins.

CONTENT
One of the first things we should do when we are designing an application is
to refer to the definition of what the application should accomplish – this was
determined in the requirements gathering phase. Once we know what services
we are trying to provide with our application, we need to think of the technological
steps and processes to achieve them. These steps should be documented into
a flowchart. These flowcharts are sometimes also known as “decision trees”.
These have two purposes:

First, it establishes each step necessary to achieve the process. We can readily
identify what data each step in each process will need to receive and likewise
produce in order to complete the process reliably.

Second, it allows us to begin thinking of what the user interface will look like. To
expand upon that we take the flowcharts we have created and create wireframe
mockups of our application.

178
Module 6: SDLC – Phase 2 Application Design

Start with a Flow Chart…

GLOSSARY
Flow Chart: A graphical representation of a computer program in relation to its
sequence of functions (as distinct from the data it processes).

SOURCES
Sign in flow map diagram: http://quentinhafner.com/wp-content/up-
loads/2014/06/maslows-hierarchy2.jpg

179
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To use the flow chart as a guide to develop wireframes, which when
combined, will constitute a mockup/prototype/storyboard of the
application.

CONTENT
Wireframe mockups are absolutely critical to the success of your application.
These allow you to see what your application will look like before a single line
of code is written. In this step you can quickly identify problems with the layout
of the user interface, or any missing screens that should exist according to the
flowcharts.

The easiest way to understand the value and the benefit of mockups is to look at
how movies and television shows are produced. Each movie begins with a script,
something that documents and outlines the flow of the story. This is exactly what
the flowcharts document. From there, the process begins called “storyboarding”.
In the storyboarding process, rough sketches of what the scene would look like
are drawn and placed on the board. These drawings are then rearranged, edited,
or completely redrawn to match the director‟s vision. Changing an entire scene is
as simple and cheap as simply drawing another rough sketch. If the decision was
made to film a scene all over again, it would be very expensive. By changing the
scene during storyboarding, money is saved by refining the vision of the movie
before a single scene is filmed.
Wireframe mockups are the storyboard of your mobile application. Changes
made to the application at this point are significantly less expensive than making
changes after the application programming has begun.

180
Module 6: SDLC – Phase 2 Application Design

…then do Wireframe Mockups

GLOSSARY
Mockup: A set of wireframes that, when combined, create an
illustration-based prototype of an application‟s design
Wireframe: A drawing of objects or symbols that create a minimalized
illustration of an application‟s appearance.

SOURCES
iPhone Wireframe: https://media.balsamiq.com/img/examples/iphone-
wireframe-sm.png

181
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce ten simple design strategies for a good UX.

CONTENT
Because mobile is so different from laptops and larger, non-mobile computers,
we should not design for mobile the same way we designed for non-mobile. Here
are some design suggestions to help you create a pleasant end-user experience.

GLOSSARY
User Experience (UX): A person‟s perceptions and responses that result from
the use or anticipated use of a product, system or service.

182
Module 6: SDLC – Phase 2 Application Design

Mobile User
Experience (UX)
Design Suggestions

183
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate the simplicity and aesthetic appeal of aligned text boxes,
buttons, and other elements.

CONTENT
Not only are aligned form elements elegant to the eye, they are also easier to
navigate on a mobile device. The majority of navigation on a mobile device is
up/down, so structuring input fields vertically is the superior option for mobile
devices.

184
Module 6: SDLC – Phase 2 Application Design

Unify Text input

• Less finger movement required to enter data.

• Simple flow from one textbox to the next.

SOURCES
http://uxmovement.com/forms/why-users-fill-out-forms-faster-with-unified-
text-fields/

185
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate that button dimensions should be no less than a certain
size, thereby avoiding difficult-to-use buttons.

CONTENT
Imagine having a computer mouse cursor where the area you select is 50x50
pixels with each click. This would be very difficult to use, but that‟s exactly the
situation at hand when using a mobile device – the pad of your finger is going to
be around 57 pixels wide, so be sure to create buttons in your application that
are large enough for users to click!

186
Module 6: SDLC – Phase 2 Application Design

Button Size

• Verify the size of buttons on various user devices, screen sizes and

resolutions

• MIT Touch Lab study found that the average width of the index

finger is 1.6 to 2 cm

SOURCES
http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-tar-
get-sizes

187
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate that, unlike a keyboard on a computer, phones are primarily
held in a single hand, and it might be advantageous to layout buttons in a
“fan” style, allowing the thumb to flow across all buttons.

CONTENT
Traditional grid-like button layouts do not need to be used every single time with
mobile apps. Most mobile phones are held and used with a single hand (with
about 90% of those being used by only a right-hand), and as the thumb sweeps
back and forth it creates a “fan-like” motion. In the depicted example, using
the color wheel on the right is easier for a single hand than the more traditional
layout on the left.

188
Module 6: SDLC – Phase 2 Application Design

Button Layout

• Organize buttons in an ergonomically simple way.


• Almost 90% of the world is right-hand dominant, design your layout
with that in mind.

189
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate that certain areas of a screen are better places for certain
buttons – harder to reach buttons should be for less-used functions,
whereas easy to reach buttons should be for the most common functions.

CONTENT
As mentioned earlier, a single hand uses most phones, and most of those are
right-handed users. This means that the lower-right area of a screen is often the
easiest to reach, and the upper-left the most difficult. Consider what buttons
and actions should be placed where on the screen. “Progressive” buttons
(Next, Continue, etc.) will be clicked more often than “Regressive” buttons
(Back, Menu, etc.), so the less used “regressive” buttons should be placed in the
harder to reach area of the screen, while the “progressive” buttons should be in
the lower-right.

190
Module 6: SDLC – Phase 2 Application Design

Button Locations & Purpose

“Regressive” buttons
• Back
• Menu
• Cancel
can be very disruptive if accidentally
pressed, and should therefore be
placed in more difficult to reach areas
of the screen
“Progressive” buttons
• Next
• Continue
• Proceed
should be in easy to reach locations

191
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate that demonstrating where a user is located in a process helps to
prevent user frustration over potentially long tasks/processes.

CONTENT
People like to know how far they are into a process. Whether it‟s how many
pages are left in a book they read, how long a line is at the market, etc., people
experience a feeling of relief by knowing how many steps are in a process and
where they are in that process. For multi-step processes in mobile devices, just
as should be done with websites, mobile apps should include these important
details.

192
Module 6: SDLC – Phase 2 Application Design

Show Progress & Position


• Processes with many screens or sections, such as:

• Purchase Checkouts.

• Account Registrations.

should display the user‟s current position and all the process steps from

beginning to end.

• Each step should be clickable for easy navigation.

SOURCES
http://www.pitstopmedia.com/sem/checkout-progress-bar-survey

193
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To introduce the “three-click rule”, and demonstrate the need for certain
buttons/functions on different device platforms.

CONTENT
Navigating through the mobile application should be simple. Two guiding rules
for this are (1) the main menu should always be reachable from anywhere in the
mobile app, and (2) any service provided by your app should either be reachable
or completed within the course of three clicks.

Another important matter to remember is the differences between mobile


operating systems. This picture shows an Android IKEA app that has a back
button in the upper-left corner. This is not necessary, since Android offers a back
button either via the device hardware or the OS itself. However, if the button was
removed for the iOS version of this application, it would be a massive problem
since there is no back button provided either by iOS hardware or by iOS itself.

194
Module 6: SDLC – Phase 2 Application Design

Navigation Best Practices


• Any section of your application

should be easily accessible within 3

clicks of the main menu.

• The main menu should always be just

one-click away.

• Think of the iPhone “Home” Button.

• Android devices always have a back

button in the hardware or the OS –

programming one is not necessary.

• Whereas, forgetting them in iOS

applications would be catastrophic!

195
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To illustrate the importance of reminding users that their connection is
secured.

CONTENT
Most users don‟t understand, or want to understand, how their data is protected
– they just want to know that it is. When engaging in any kind of transaction that
involves the exchange of sensitive data – be it personal data, or financial data – it
is good to include a picture or a statement which informs the user that their data
is protected.

196
Module 6: SDLC – Phase 2 Application Design

Security Reassurances

• Provide users visual reassurance that their data is protected when

submitting confidential information.

• One publicized security incident can cause people to stop using

your application immediately.

197
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To remind developers about the potential for using existing services, when
available.

CONTENT
You should utilize as many existing services to help build your app as possible.
In the commercial world, a business could allow users to create an account by
using their Facebook, Google or Twitter accounts. UAE government entities will
be able to use the Emirates ID Authority (EIDA) to provide this service for them
instead.

198
Module 6: SDLC – Phase 2 Application Design

Don‟t Recreate Services

• Simplify the registration and login processes by obtaining &

validating data from authorized 3rd parties.

• “Sign up with Google/Facebook/Twitter/etc.”

• Same idea, but you are a government entity! You should use

something much better than these sites and services.

• Emirates ID Authority is working to provide these services to all

government entities.

SOURCES
http://android-developers.blogspot.ca/2013_02_01_archive.html

199
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate the importance of providing a line of assistance should the
app fail to accomplish the intended task.

CONTENT
Mobile applications do not always solve every problem. Sometimes a customer
needs to speak with an entity representative for help.

If your entity has a customer service phone number, you should include a button
in your mobile application that will dial the support line. This will allow users to
obtain assistance without having to leave your app.

200
Module 6: SDLC – Phase 2 Application Design

One-Click Calling
• If you have a customer service
center, your app should provide
the ability to call it with one
click.
• If users have trouble using
your app, they still need your
government services.
• Without this feature, they will
need to search online for the
number to call. This is a major
inconvenience when it could
instead be just one click away in
your app.

201
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate the value of utilizing GPS coordinates instead of asking for
manually entered location data.

CONTENT
Sometimes a user will need to visit a branch office of your entity in person to
receive a service.

By obtaining their GPS coordinates from the mobile device, your app can show
them which branches are closest, and help them obtain directions to get there.

202
Module 6: SDLC – Phase 2 Application Design

Geolocation
• Available to Native, Hybrid & HTML5

applications.

• Do not ask users to type in a

location – use GPS.

• If you need their current location

(example – requesting a taxi) access

that information from the device and

display it on a map.

• If you need a different location

(example – setting a taxi destination)

let them determine it by selecting

the location on a map.

GLOSSARY
GPS: Short for Global Positioning System, a worldwide MEO satellite navigational
system formed by 24 satellites orbiting the earth and their corresponding
receivers on the earth. The satellites orbit the earth at approximately 12,000
miles above the surface and make two complete orbits every 24 hours.

203
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To demonstrate the difference between different screen resolutions and
screen sizes, and how “one size fits all” doesn‟t always work out.

CONTENT
Mobile applications will not only be used across different OS platforms, but across
different devices (phones vs. tablets) and – with the exception of iOS – different
manufacturer devices.

These differences will account for different screen sizes and different resolutions.
You should test all possible resolutions before launching your application
either on physical devices, or on emulated devices (with physical devices being
preferred).

204
Module 6: SDLC – Phase 2 Application Design

Screen Size & Resolution

• Always test your application on devices with different screen sizes

and resolutions.

• Include high pixel-density screens (like Retina).

GLOSSARY
Retina Display:A display screen with a resolution and pixel density so high a
person is unable to discern the individual pixels at a normal viewing distance.

205
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the significance of Phase 2.
2. Understand how to plan the mobile application design.
3. Understand the best techniques to improve the mobile
application design.

CONTENT
Review the Objectives (re-read the slide).

206
Module 6: SDLC – Phase 2 Application Design

Review

• Objectives

• Phase 2 establishes what users will see, and experience, when using

the application. It is critical that great thought go into this phase.

• If the application is not simple, intuitive, and easy, users will not

enjoy it. Use proper planning techniques to help achieve these

goals.

• Mobile devices are so different, we must reevaluate how we obtain

data and interact with the user. Designing the same way we did for

non-mobile devices will not work.

207
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. All of these are important for mobile applications, but which is


the most important of all?

a. The application should be fast


b. The application should be reliable
c. The application should look attractive
d. The application should be simple

208
Module 6: SDLC – Phase 2 Application Design

Quiz – Question 2

2. Why should application design begin with a flow chart?

a. A flow chart helps us understand what steps are required for


each service.
b. A flow chart helps us understand how the application should
respond to user input.
c. A flow chart helps us understand what wireframe mockups we
should create.
d. All of the above.

Quiz – Question 3

3. All areas of a mobile device screen are equally easy for a user to
access with their thumb.

a. True
b. False

209
End of Module
mGovernment 211
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
Learning how to use Wireframe Mockup tools to design an application.

GLOSSARY
Balsamiq Mockups – A graphical user interface mockup builder application.
It allows the designer to arrange pre-built widgets using a drag-and-drop
WYSIWYG editor.

Mockup – A set of wireframes that, when combined, create an illustration-based


prototype of an application‟s design

Wireframe – A drawing of objects or symbols that create a minimalized


illustration of an application‟s appearance.

212
Module 7: Hands-on Activity Balsamiq Mockups

Hands-on
Activity
Balsamiq Mockups

mGovernment 213
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the capabilities of wireframing tools.
2. Understand how to connect and export wireframe mockups.
3. Understand why these tools are preferred to non-purpose related alterna-
tives (Photoshop, Visio, etc.) for GUI design.

CONTENT
Introduce the Objectives, (read the slide)

214
Module 7: Hands-on Activity Balsamiq Mockups

Objectives

• Understand the capabilities of wireframing tools.

• Understand how to connect and export wireframe mockups.

Understand why these tools are preferred to non-purpose related

alternatives (Photoshop, Visio, etc.) for GUI design.

GLOSSARY
Photoshop: A leading paint program from Adobe Systems, Inc. For many years,
Photoshop has been the model against which other paint programs are com-
pared.
Visio: A diagramming and vector graphics application and is part of the Micro-
soft Office family.
GUI – Graphical User Interface: A program interface that takes advantage
of the computer‟s graphics capabilities to make the program easier to use.
Well-designed graphical user interfaces can free the user from learning complex
command languages.

215
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce Balsamiq Mockups to the attendees.

CONTENT
(Read the slide).

216
Module 7: Hands-on Activity Balsamiq Mockups

What is Balsamiq Mockups?

• Balsamiq Mockups is a tool which allows anyone, from developers


to managers, to create an interactive storyboard that demonstrates
how an application should look, and behave.
• Now let‟s begin learning how to use it!

217
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Familiarize attendees with some of the most commonly used functions
available within Balsamiq Mockups, and where they are located.

CONTENT
(Read the slide).

218
Module 7: Hands-on Activity Balsamiq Mockups

Balsamiq Main Menu

• This is the main menu of your Balsamiq Mockups work


area
• The top row of buttons allow you to undo, redo, duplicate,
paste, etc.
• The bottom row of buttons allow you to filter the Balsamiq
Symbols by category. Let‟s look a little closer at what those
are!

219
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the symbols – the wireframes that are manipulated in order to
create our application mockups.

CONTENT
(Read the slide).

220
Module 7: Hands-on Activity Balsamiq Mockups

Balsamiq Symbols

• If we select the tab from

the Balsamiq Symbols menu,

we will see a number of symbols

which are designed to resemble

the iPhone and the user

interface on an iPhone.

• Simply click down on a symbol,

drag it over the work area, and

release the mouse button to

drop it in place!.

221
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain layering to attendees so they are able to modify the appearance of
their mockup if a symbol accidentally ends up behind another.

CONTENT
(Read the slide).

222
Module 7: Hands-on Activity Balsamiq Mockups

Symbol Layering

• Layering allows you to stack

symbols on top of each other.

• We can place one symbol

behind others (top) or bring

them in front (bottom).

• By default, symbols are placed

on top of other symbols in the

workspace.

223
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the myCV application, and give the attendees a goal to strive for as
they begin to create their own application mockups.

CONTENT
We will begin using Balsamiq to create mockups for an application called „myCV‟.
This application will allow users to view your CV information on their mobile
phone. The application will have three tabs, representing a summary of your
accomplishments, your work experience, and your education.

The summary tab will have two buttons which, when pressed, will either call your
phone number or email your address.

224
Module 7: Hands-on Activity Balsamiq Mockups

Creating a Mockup

• We will create mockups for an app called „myCV‟.

• This application will display someone‟s CV. The layout has been

decided upon as follows:

• The application shall have three tabs with the following names and

personal information:

• About Me – Summary information with photo. Must include two

buttons:

• Call Me – Will dial the person from the application

• Email Me – Will email the person from the application

• Experience – Professional experience information with photos

• Education – Education credentials with photos

225
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Provide some additional pointers and tips to help attendees improve their
mockup productivity, and troubleshoot problems.

CONTENT
Now that you understand the basics of using Balsamiq, and you have a task
for what to create, here are a few additional tips for how to work with Balsamiq
Mockups.

226
Module 7: Hands-on Activity Balsamiq Mockups

Helpful Tips

• Each application tab must be a different mockup (a different file)

• You can use the box in the upper-left to search for

symbols.

• You can use the button at the top to duplicate a selected

symbol.

• You can duplicate an entire mockup by selecting

File > New Clone of Current Mockup.

• Remember to save your mockups!.

227
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Provide attendees with some sample mockups so, if desired, they have an
idea of how they might want to design their mockups .

CONTENT
Here are a few sample mockups of the myCV application to help inspire your
design.

228
Module 7: Hands-on Activity Balsamiq Mockups

Mockup Examples

• Here are examples of the myCV mockups:

About
Me

Experien Educatio
ce n

229
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the ability to connect mockups to each other. These connections
will allow attendees to have an interactive experience with their mockups by
clicking buttons instead of trying to recall which mockup to load when a tab
or button is pressed.

CONTENT
One of the wonderful things about Balsamiq is that we can link these
mockups to each other and use those links to simulate interacting
with an actual application. Follow the process on the slide to link the
tabs in each mockup to the different mockup files you have created.

Don‟t forget to save your mockups after making these links!

230
Module 7: Hands-on Activity Balsamiq Mockups

Linking Mockups to Each Other

• Verify that all three mockups are saved, and open.

• Click on the tabs to select them, and configure the Links so the tab

name points to the appropriate mockup.

• The dropdown boxes contain mockup filenames.

• If you do not see dropdown boxes, click the white link that says

Show Link Inspector.

• Repeat this process for all three mockup files.

231
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate the interactive links in action that the attendees implemented
on the previous slide.

CONTENT
Content:Now that we‟ve connected our mockups to each other, let‟s see those
connections in action! Follow the instructions on the slide to activate Presenta-
tion Mode, and see how you are able to interact with your mockup by navigating
through the different tabs. Remember, press the Escape key on your keyboard
to exit Presentation Mode!.

232
Module 7: Hands-on Activity Balsamiq Mockups

Presentation Mode

• Select View > Full Screen Presentation from the top to open Pre-

sentation mode. You now have a fully interactive storyboard of your

mockups!

• Notice how clicking the tabs will navigate between the mockups

you created.

• This simulates the app experience before any code is written, which

saves money on development.

• This integrated interaction is not possible with non-purpose related

tools (such as Photoshop, Visio, etc.)

• Press the Escape key to exit Presentation Mode when finished

233
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate that the interactive capability between the attendee mockups
is not limited to within the Balsamiq Mockups application itself. The
mockups, along with the interactive simulation, can be exported to a PDF file.

CONTENT
These mockups, as well as the interaction we witnessed in Presentation Mode,
can be exported into a PDF file. Follow the instructions on the slide to export
your mockups to a PDF file.

This is extremely handy when you need to show someone the mockups you have
designed, but aren‟t in the same location as them – all you need to do is just
send them the PDF!

234
Module 7: Hands-on Activity Balsamiq Mockups

Export a PDF

• Select File > Export All Mockups to PDF… and on the window that

appears, click Start Export.

• Balsamiq will export all open mockups to a single PDF file that you

will be asked to save.

• Just like Presentation Mode, the interaction with the mockups

.=remains within the PDF. This allows you to:

• Share all mockups in a single file.

• Share mockups without Balsamiq be installed.

235
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the capabilities of wireframing tools.
2. Understand how to connect and export wireframe mockups.
3. Understand why these tools are preferred to non-purpose related
alternatives (Photoshop, Visio, etc.) for GUI design.

CONTENT
Review the Objectives (re-read the slide).

236
Module 7: Hands-on Activity Balsamiq Mockups

Review

• Objectives

• Understand the capabilities of wireframing tools.

• Understand how to connect and export wireframe mockups.

• Understand why these tools are preferred to non-purpose related

alternatives (Photoshop, Visio, etc.) for GUI design.

237
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. What are the benefits of a purpose related GUI design tool such
as Balsamiq Mockups?

a. It saves money on application development.


b. It implements interactive capabilities to simulate application
behavior.
c. It is easier to use and learn than tools designed for more
complicated tasks.
d. All of the above.

238
Module 7: Hands-on Activity Balsamiq Mockups

Quiz – Question 2

2. What would be the best way to show a customer their


application mockups?

a. Tell them to download and install Balsamiq Mockups, then


send all the mockup files.
b. Export to a PDF and send this file to them.
c. Arrange a meeting so they can visit and sit through a
presentation of the mockups
d. Take photographs of the mockups and send them the pictures.

Quiz – Question 3

3. Balsamiq Mockups is the only Wireframing tool currently


available to the public.

a. True
b. False

239
End of Module
mGovernment 241
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
This module discusses the programming code behind mobile applications, and
what makes them different.

242
Module 8: SDLC – Phase 3 Code Generation

SDLC – Phase 3
Code Generation

mGovernment 243
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what tools are used to create applications.
2. Understand what code categories exist, and what their purpose is.
3. Understand the security concerns that exist with poor coding practices.

CONTENT
Introduce the Objectives, (read the slide).

244
Module 8: SDLC – Phase 3 Code Generation

Objectives

• Understand what tools are used to create applications.

• Understand what code categories exist, and what their purpose is.

• Understand the security concerns that exist with poor coding

practices.

245
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. A general introduction to the purpose of SDLC Phase 3.

CONTENT
Code generation, where we begin building the actual application itself, occurs
after we have finalized and accepted the design we created in the previous step
of the SDLC.

246
Module 8: SDLC – Phase 3 Code Generation

The Language of Applications

247
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To identify some of the common tools used by developers when creating
mobile applications.

CONTENT
These are some common tools that are used by application developers today.
Most of them are packaged together as a single download or installation, but in
some other cases you will need to acquire them separately. A common example
of this would be using an IDE, such as Eclipse, to program in Java. However,
you would still need to download the Android SDK in order to create any Java
applications that will work on an Android device.

GLOSSARY
Compiler: A program that translates source code into object code.
Debugger:A special program used to find errors (bugs) in other programs. A
debugger allows a programmer to stop a program at any point and examine and
change the values of variables.
SDK – Software Development Kit: A programming package that enables a
programmer to develop applications for a specific platform.
IDE – Integrated Development Environment: A programming environment
integrated into a software application that provides a GUI builder, a text or code
editor, a compiler and/or interpreter and a debugger.

248
Module 8: SDLC – Phase 3 Code Generation

Overview of Basic Tools

• Compiler
A program used to convert a programmer‟s source code into the
machine code that a computer understands.
Debugger
• A program used to detect code errors. Some errors will be caught
(usually syntax errors), but not all (usually logic errors).
• Software Development Kit (SDK)
A set of software resources to help develop for a platform.
• Integrated Development Environment (IDE)
A single program, usually consisting of all the above tools, used by
programmers to simply application development.

Test Questions
1. What does the acronym “SDK” stand for?

a. Security Deactivation Kit


b. System Defined Knowledge
c. Scripted Derived Knowledge
d. Software Development Kit

249
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Mobile application code can be categorized in many different ways.
2. The code categories we are focusing on are Scripted and Compiled

CONTENT
While there are many different ways to organize mobile applications and mobile
application code, we are going to organize them into Scripted and Compiled
categories.
With scripting code, a plaintext file that has been written in a scripting language
is analyzed by a runtime interpreter that then converts these written instructions
into action. An advantage of this is that programmers can easily review the code
they write to modify it for debugging or improvement. A disadvantage, though,
is that scripted code can run slower than compiled code because of the time it
takes for the runtime interpreter to convert the script into action.
Compiled code is different. The original source code that has been written by
programmers is provided to a compiler that, as mentioned earlier, converts this
into the machine code that computers understand. An advantage here is that
compiled programs will often execute much faster than scripted programs.
However, creating and debugging compiled applications takes more time due to
the compiling process.

250
Module 8: SDLC – Phase 3 Code Generation

Code Categories
• Most program code fits into one of two categories:
• Scripted
• A set of instructions that are provided to a run-time interpreter,
which converts these instructions into actions.
• Compiled
• Code which is converted from its original source into the machine
code that computers understand.

GLOSSARY
Scripted Code: A high-level programming language that is interpreted by
another program at runtime rather than compiled by the computer‟s processor
as other programming languages are.
Compiled Code: The code produced by a compiler. Programmers write
programs in a form called source code. The source code consists of instructions
in a particular language, like C or FORTRAN. Computers, however, can only
execute instructions written in a low-level language called machine language.

Test Questions
Note: The answer to this question can be found from the content in
Modules-Slides AD08-05 and AD08-07.
• Which category of code requires a run-time interpreter to work?
a. Scripted code
b. Compiled code
c. Both Scripted and Compiled require a run-time interpreter
d. None of these categories require a run-time interpreter

251
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objectives.

CONTENT
We will begin by focusing on the scripting code, and explain how it is used to
create HTML5 applications.

252
Module 8: SDLC – Phase 3 Code Generation

Scripted
Code HTML5
Applications

253
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Scripted code is used for websites and HTML5 applications.
2. Scripted code exists as “client-side” and “server-side”.

INSTRUCTOR GUIDANCE
• Instructors will use the slide text to guide them.
• Introduce HTML5 web applications.

CONTENT
As a reminder, HTML5 mobile applications are websites that have been custom-
built to provide services via mobile devices. This means that the same scripting
languages, and principles, which applied for eGovernment services also apply
here.

Scripted code can be further divided into two subcategories – client-side and
server-side. This division identifies where a runtime interpreter processes the
code. If it happens on a user‟s device, it is considered “client-side”. If it happens
on the web server, it is considered “server-side”.

254
Module 8: SDLC – Phase 3 Code Generation

HTML5 Applications

• Scripted code is used for websites and HTML5 applications.

• Scripted code is a set of instructions, which requires a run-time

interpreter to read, interpret, and convert into action.

• Scripted code falls into two subcategories:

• Client-Side – Code which is transmitted to the user‟s device,

then locally run.

• Server-Side – Code which is run and completed on the server

before sending data to the user.

Test Questions
Note: The answer to this question can be found from the content in
Modules-Slides AD08-05 and AD08-07.

1. Which category of code requires a run-time interpreter to work?

a. Scripted code
b. Compiled code
c. Both Scripted and Compiled require a run-time interpreter
d. None of these categories require a run-time interpreter

255
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand some client-side scripting languages.
2. Understand some server-side scripting languages.

CONTENT
Some of the client-side scripting languages you will encounter with an HTML5
application are HTML, or HyperText Markup Language, CSS, or Cascading Style
Sheets, and JS, or JavaScript. These three languages, when combined, create the
modern HTML5 mobile application, as we know it.

Supporting the client-side, though, are a number of server-side scripting


languages. These languages serve different functions. Languages such as Perl,
PHP, Python and C# can be used to customize the content of a webpage being
sent to a user, while languages such as SQL, or Structured Query Language, are
used to access and interact with databases.

256
Module 8: SDLC – Phase 3 Code Generation

HTML5 Applications

• Some Client-Side Scripting Languages:

• HTML – HyperText Markup Language

Defines page structure

• CSS – Cascading Style Sheets

Defines page styles

• JS – JavaScript

Defines page actions

• Some Server-Side Scripting Languages

• Dynamic Page Creation

Perl, PHP, Python, C#, etc.

• Data Access & Modification

SQL – Structured Query Language

257
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objectives.

CONTENT
Let‟s begin by looking into what most people are familiar with – the client-side.

We‟ll analyze the client-side by reviewing the three scripting languages we


identified earlier – HyperText Markup Language, Cascading Style Sheets and
JavaScript.

258
Module 8: SDLC – Phase 3 Code Generation

Scripted
Code Client-Side

259
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how HTML is used to structure and organize content in an
HTML5 application.

CONTENT
HyperText Markup Language – or HTML – is where we get the term “HTML5
application”. The current HTML version used by most website developers is
version 5, hence, “HTML5”.

HTML is used to define the structure and content of a webpage. In the provided
example, you can see how the HTML code is used to organize the structure and
content of a very simple website.

GLOSSARY
HTML: HyperText Markup Language
HTML defines the structure and layout of a Web document by using a variety of
tags and attributes.

260
Module 8: SDLC – Phase 3 Code Generation

HTML Scripting

HTML – HyperText Markup Language


• A unified way of using text to describe how information should be
graphically displayed
• Uses tag pairs and empty tags – known as “elements”
• Tag pairs – <p> </p>
• Empty tags – <img />

<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<HR>
<a href="http://somegreatsite.com">Link Name</a>
is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
Send me mail at <a href="mailto:[email protected]">
[email protected]</a>.
<P> This is a new paragraph!
<P> <B>This is a new paragraph!</B>
<BR> <B><I>This is a new sentence without a paragraph
break, in bold italics.</I></B>
<HR>
</BODY>
</HTML>

261
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how CSS affects the presentation and display style of an HTML5
application.

CONTENT
CSS is a very powerful tool that allows us to define and apply style definitions
to an entire HTML5 application without having to program that configuration
directly into the HTML.

For example – if your HTML5 application had 50 different pages with a green
background, and you needed to change the background color to blue, you would
need to update all 50 pages if you did not use CSS. This would take a long time,
and if you missed any pages, would give the user an inconsistent experience.
However, if you were using CSS, this change can be made to all 50 pages in a
single line of code in a single CSS file.

GLOSSARY
CSS – Cascading Style Sheets: A new feature being added to HTML that gives
both Web site developers and users more control over how pages are displayed.

262
Module 8: SDLC – Phase 3 Code Generation

CSS Scripting
CSS – Cascading Style Sheets

• Define styles for HTML elements without modifying the HTML itself.

• Apply a consistent style across the site from a single source.

• Make style changes in few lines of code.

• Reduces the amount of code writing.

• Simplifies style uniformity.

• Expedites applying style changes.

Test Questions
Note: The answers to this question can be found from the content in
Modules-Slides AD08-11 (CSS), AD08-14 (jQuery), AD09-07 (XML/JSON)
and AD13-06 (JavaScript Minification).
1. Which of the following application development practices would improve
network communications between a mobile device and the back end server
in a hybrid application? (Select all that apply).
a. Use XML instead of JSON to reduce the number of characters in your code.
b. Minify the JavaScript to remove unnecessary comments and white-space
c. Use jQuery to reduce the number of characters in your code
d. Use CSS to reduce the number of style definitions in your code

263
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate CSS in action.

CONTENT
Here is a simple example of CSS in action. With only HTML, we would see only
plain black text on a white background.

However, if we add CSS, we can completely change how the text appears without
ever modifying the original HTML code.

264
Module 8: SDLC – Phase 3 Code Generation

CSS Scripting

CSS – Simple Example


HTML
CS
<p> S p{
Lorem ipsum dolor sit amet, consectetur adipisicing border:1px solid black;
elit, sed do eiusmod tempor incididunt ut labore et color:#FFF;
dolore magna aliqua. Ut enim ad minim veniam, quis
font-weight:bold;
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure background-color:#00F;
dolor in reprehenderit in voluptate velit esse text-align:right;
cillum dolore eu fugiat nulla pariatur. Excepteur }
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</p>

HTML only HTML & CSS


Output Output
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit amet, consectetur adipisicing
do elit, sed do eiusmod tempor incididunt ut labore et dolore
eiusmod tempor incididunt ut labore et dolore magna aliqua. magna aliqua. Ut enim ad minim veniam, quis nostrud
Ut enim ad minim veniam, quis nostrud exercitation ullamco exercitation ullamco laboris nisi ut aliquip ex ea
laboris nisi ut aliquip ex ea commodo consequat. Duis aute commodo consequat. Duis aute irure dolor in
irure dolor in reprehenderit in voluptate velit esse cillum reprehenderit in voluptate velit esse cillum dolore eu
dolore eu fugiat nulla pariatur. Excepteur sint occaecat fugiat nulla pariatur. Excepteur sint occaecat cupidatat
cupidatat non proident, sunt in culpa qui officia deserunt non proident, sunt in culpa qui officia deserunt mollit
mollit anim id est laborum. anim id est laborum.

265
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Java and JavaScript are not the same thing.
2. JavaScript adds functionality to an HTML5 application.

CONTENT
JavaScript, to begin with, is not the same thing as Java. They are very different,
and Java will be discussed in the Compiled category. JavaScript is a Scripting
language, hence the name.

While HTML defined how your webpage was structured, and CSS defined how
your webpage looked, JavaScript defines how your webpage behaves. JavaScript
interacts with the user‟s browser to trigger actions, reactions, responses or other
behaviors that bring your HTML5 application to life. JavaScript can modify the
page HTML structure, change CSS style definitions, it can even send requests to
the webserver without any user action.

If your HTML5 application is a car, HTML is frame, CSS is the body, and JavaScript
is the engine.

GLOSSARY
JavaScript: A scripting language developed by Netscape to enable Web authors
to design interactive sites.

266
Module 8: SDLC – Phase 3 Code Generation

JavaScript

JavaScript
• Java and JavaScript are not the same thing!

• JavaScript can:

• Modify HTML structure

• Change CSS styles

• Transmit data or request it

• Interact with the user‟s input

• JavaScript is the engine that brings your application to life

267
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. jQuery is a library that improves upon JavaScript.
2. jQuery is not a different programming language from JavaScript – it only
modifies how JavaScript is used.

CONTENT
Although JavaScript is very powerful, it is also very complicated and tedious to
write. jQuery introduced a library of tools that developers could use to make
writing JavaScript easier and faster. These simplifications also reduced the
amount of code that developers needed to write.

Here is an example code reduction. Both the JavaScript and jQuery lines of code
change the HTML element with the identity of “target” to have a blue border.

GLOSSARY
jQuery: A free and open source JavaScript library that is used by Web developers
to navigate HTML documents, handle events, perform animations and add Ajax
interactions to Web pages.

268
Module 8: SDLC – Phase 3 Code Generation

JavaScript / jQuery
jQuery – A popular JavaScript library
• JavaScript is powerful, but tedious to write
• jQuery – a library of tools for JavaScript
• Same result:
JavaScript:
document.getElementById(“target”).style.borderColor = “#00F”;
jQuery:
$(„#target‟).css(„border-color‟,‟#00F‟);
• Faster to write, easier to read, simpler to debug.

Test Questions
Note: The answers to this question can be found from the content in
Modules-Slides AD08-11 (CSS), AD08-14 (jQuery), AD09-07 (XML/JSON)
and AD13-06 (JavaScript Minification).
1. Which of the following application development practices would improve
network communications between a mobile device and the back end server
in a hybrid application? (Select all that apply).
a. Use XML instead of JSON to reduce the number of characters in your code
b. Minify the JavaScript to remove unnecessary comments and white-space
c. Use jQuery to reduce the number of characters in your code
d. Use CSS to reduce the number of style definitions in your code

269
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. jQuery can significantly reduce the amount of JavaScript code developers will
need to write.

CONTENT
Here is another example of how jQuery reduces the amount of JavaScript code
that developers must write. Both of these solutions will gradually fade-out a
named HTML element. Using pure JavaScript, we must create our own function
to accomplish this. With jQuery, this function is already defined for us, and we
only need to write a single line of code.

270
Module 8: SDLC – Phase 3 Code Generation

JavaScript / jQuery

jQuery – A popular JavaScript framework


Fading out an element:
JavaScript:
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = „none‟;
}
element.style.opacity = op;
element.style.filter = „alpha(opacity=‟ + op * 100 + “)”;
op -= op * 0.1;
}, 50);
}
jQuery:
$(element).fadeOut();

271
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objectives.

CONTENT
Now that we‟ve covered the client-side of Scripted code, it‟s time to talk about
the server-side. Even though the users of an HTML5 application are only going
to see the client-side, without the server-side to support the application, the
client-side wouldn‟t exist.

272
Module 8: SDLC – Phase 3 Code Generation

Scripted Code
Server-Side

273
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Server-side scripting is responsible for dynamic page creation.
2. Dynamic page creation is what creates the personalized user experience.

CONTENT
When users access your HTML5 application, the individual and unique experiences
they have are created for them by the personalized webpages they view. These
pages are dynamically created by the webserver using server-side scripting.
There are many different languages that can be used to create webpages with
server-side scripted code, such as Perl, PHP, Python and C#, just to name a few.

In this example, a PHP file contains some PHP script that will be replaced with
a name. Even though two different users receive the access the same file on
the server, because the provided names are different, they receive personalized
pages.

Note that the PHP script exists only at the server, and is never sent to the user.
This is the same for all server-side scripting code.

GLOSSARY
Query String: The portion of a dynamic URL that contains the search parame-
ters when a dynamic Web site is searched.
Cookies: Cookies are a message given to a Web browser by a Web server. The
browser stores the message in a text file.

274
Module 8: SDLC – Phase 3 Code Generation

Dynamic Page Creation

• Receive user-submitted data

Forms, query strings, cookies, etc.

• Retrieve unique data

Database queries, calculation, session lookup, etc.

• Customize the website/HTML5 app before delivery


hello.php HTML Source Code
hello.php File on Server
<html>
<html> <head>
<title>PHP Test</title> hello.php Webpage
<head> </head>
<title>PHP Test</title> <body>
URL & Output
</head> <p>Hello Tariq!</p>
</body> http://server/hello.php?name=Tari
<body> </html> q
<?php Hello Tariq!
echo '<p>Hello ' . <html>
$_GET['name'] <head> http://server/hello.php?name=Ais
. ‘!</p>'; <title>PHP Test</title>
?> </head> Hello Aisha!ha
</body> <body>
<p>Hello Aisha!</p>
</html> </body>
</html>

275
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. SQL is used to access databases.
2. SQL is very powerful because it has direct access to stored data, and can
modify it.

CONTENT
While many different languages can be used for server-side code, accessing
databases is almost always done through SQL, or Structured Query Language.
This is the language that is passed to database servers to access application data.

SQL is a very powerful language because it tells database servers what to do with
stored data. These commands can do everything from only reading stored data,
to adding new data, to updating existing data. However, SQL can also be used to
modify the databases themselves – not just the data stored within. This makes
SQL a very popular mechanism for hackers to try to access your data.

GLOSSARY
SQL – Structured Query Language: SQL is a standardized query language for
requesting information from a database.

276
Module 8: SDLC – Phase 3 Code Generation

Data Access & Modification

Structured Query Language (SQL)


• Used to query databases.

• Can update/edit contents of databases.

• Can alter the structure of databases.

• Has direct access/control of data – very powerful.

• Frequent target of security exploits (e.g.: „SQL Injection‟).

277
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate how poor programming can result in an SQL Injection Attack.

CONTENT
Here is a simple example of how bad programming can lead to hackers accessing
your application‟s data.

If the server creates an SQL command with input provided by the user, and the
server does not validate the data provided by the user, an attacker can provide
their own SQL command. This command is then inserted into the command on
the server. The result is two commands passed to the database server.

Instead of one command that updates data – the command intended by the
application developer – two commands are executed. One updates the data, the
second deletes all of the data.
Application developers need to work with security professionals to verify that
the code they create is not going to create any vulnerabilities or risks to the
application data. In this example, this failure caused the unintended loss of data.

GLOSSARY
SQL Injection: A form of attack on a database-driven Web site in which the at-
tacker executes unauthorized SQL commands by taking advantage of insecure
code on a system connected to the Internet, bypassing the firewall.

278
Module 8: SDLC – Phase 3 Code Generation

SQL Injection Attack

• Simple SQL command to update a name:


UPDATE Population SET Name = $_GET[„name‟];
• Malicious $_GET[„name‟] value:
$_GET[„name‟] = „‟; DROP TABLE Population;
• Resulting command:
UPDATE Population SET Name = ‘’; DROP TABLE Population;
• Outcome:
1. UPDATE Population SET Name = „‟;
• Name is set to „‟
2. DROP TABLE Population;
• Population table is deleted

Test Questions
1. “SQL Injection” is a type of attack where hackers can inject their own SQL
queries to be processed by the server.

a. True
b. False

279
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objectives.

CONTENT
Now that we understand Scripted code, it‟s time to discuss compiled code and
native applications.

280
Module 8: SDLC – Phase 3 Code Generation

Compiled Code
Native
Applications

281
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Creating native applications requires more tools and resources than scripted
applications.
2. Compiled (native) applications will offer more capabilities than scripted
(HTML5) applications.

CONTENT
Unlike scripted HTML5 applications, which run in a browser, compiled native
applications have access to the device sensors and resources. This allows
compiled applications to be more robust and offer a better user experience than
what a scripted application can provide.

There are disadvantages, though. The elimination of the browser, which gives
applications access to device sensors and resources, also exposes the application
to security problems and vulnerabilities that were prevented by the browser.
How this problem is addressed is also how we will subcategorize compiled code.

282
Module 8: SDLC – Phase 3 Code Generation

Compiled Code

• Compiled applications take more resources to create than scripted

applications.

• Compiled applications are more robust and offer more features

• They operate much closer to the device hardware

• The browser-barrier does not exist

• Direct access to the OS from the application

283
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Compiled code exists in Managed and Unmanaged forms.
2. The difference is about how applications access resources.

CONTENT
Compiled applications can be categorized into unmanaged and managed. What
separates them is how the applications access system resources.

With unmanaged code, applications have direct access to system resources.

With managed code, applications do not have such direct access, and must go
through a “manager” to utilize system resources.

GLOSSARY
Unmanaged Code: Compiled code that is capable of accessing system resourc-
es directly through the Operating System.
Managed Code: Compiled code that can only access system resources from
the Operating System by requesting them through a Manager – an application
that acts as a buffer between the program and the OS.

284
Module 8: SDLC – Phase 3 Code Generation

What is Compiled Code?

Compiled code, like scripted code, falls into two different categories:

• Unmanaged Code

• Also called “native code” (do not confuse with “native app”)

• Resources are accessed directly by your application

• Applications not “sandboxed” – faster execution, higher security

risk

• All code requests go straight to the OS

• Managed Code

• New name, coined by Microsoft, for an old concept

• Resources are NOT managed by your application

• Allows for “sandboxing” (isolation) of applications

• All code requests go through the “manager” (.NET, JRE, etc.)

285
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. title slide – no objectives.

CONTENT
Let‟s take a closer look at Unmanaged Code to improve our understanding of
how it operates.

286
Module 8: SDLC – Phase 3 Code Generation

Compiled Code
Unmanaged Code

287
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Unmanaged code allows applications to directly access system resources
through the operating system.
2. C++ and Objective-C are unmanaged programming languages and used to
create applications for BlackBerry and iOS (respectively).

INSTRUCTOR GUIDANCE
• NOTE: While Objective-C is indeed an unmanaged programming language,
Apple provides developers the choice to use a manager or not when
developing for iOS.

CONTENT
Applications created with unmanaged code have the ability to access system
resources directly through the operating system.

Advantages are that the application can execute faster by not going through a
manager to access resources, and the application is not put at risk of crashing in
the event of a manager failure since there is no manager present.

Disadvantages are that application developers are solely responsible for


managing these resources. Poor programming with unmanaged code can cause
a system to slow down or malfunction as a result of memory leaks, and also
create security risks.

288
Module 8: SDLC – Phase 3 Code Generation

Unmanaged Code
• C++ - Used for native BlackBerry applications.
• Objective-C – Used for native iOS applications.
• Code talks directly to Operating System.
• This increases the security risk of poorly written code.

App App
App
Mobile Operating
System
Mobile Device
Hardware
GLOSSARY
C++: A high-level programming language developed by Bjarne Stroustrup at Bell
Labs. C++ adds object-oriented features to its predecessor, C.
Objective-C: A general-purpose, object-oriented programming language that
adds Smalltalk-style messaging to the C programming language. It is the main
programming language used by Apple for the OS X and iOS operating systems,
and their respective application programming interfaces (APIs), Cocoa and Cocoa
Touch.
iOS: Apple‟s mobile operating system for its iPhone, iPod touch, iPad, Apple TV
and similar devices. iOS was originally called the iPhone OS but was renamed
in 2010 to reflect the operating system‟s evolving support for additional Apple
devices.
289
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. How poor programming with unmanaged code creates security risks.

CONTENT
In this example, a user logs in to an application. The developer‟s code captures the
user name and password, and stores them in memory to perform authentication.
However, the developer forgot to write the code that erased these values from
the system‟s memory once authentication completed. The user then logs out
and exits the application.

Even though the user is no longer using this application, their credentials are still
stored in the system memory because the developer forgot to clean and release
that memory back to the operating system – a necessity with unmanaged code.
A program designed to read the system‟s memory could find these credentials
and expose them to an attacker.

290
Module 8: SDLC – Phase 3 Code Generation

Unmanaged Code

• Open Application
Memor
• Login y
• Store in memory: Variable Variable
Name Value
• Username
userName Adam_Davis
• Password
userPasswor RedS0x04!
• Exit Application d
• Logout
Username and password are
still stored in memory.

291
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objective.

292
Module 8: SDLC – Phase 3 Code Generation

Compiled
Code Managed
Code

293
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Managed code allows applications to access system resources through
a manager that acts as a “middleman” between the applications and the
operating system.
2. Java and C# are managed programming languages and used to create
applications for Android and Windows Phone (respectively).

CONTENT
Applications created with managed code must access system resources from
the operating system through a “manager”.

Advantages are that there are fewer security risks if best programming practices
are not followed, since the manager will contain and control all application
resource access on the behalf of the application.

Disadvantages are that more system resources are required, since the manager
requires resources for it to operate. Likewise, all applications are put at risk of
failing if the manager crashes.

294
Module 8: SDLC – Phase 3 Code Generation

Managed Code
• Java - Used for native Android applications.

• C# – Used for native Windows Phone applications.

• All apps must speak to the OS through a manager.

Ap Ap Ap
p p p
Manage
r
Mobile Operating
System
Mobile Device Hardware

GLOSSARY
Java: A high-level programming language developed by Sun Microsystems. Java
was originally called OAK, and was designed for handheld devices and set-top
boxes.
C#: Pronounced “see-sharp.” A hybrid of C and C++, it is a Microsoft programming
language developed to compete with Sun‟s Java language. C# is an object-
oriented programming language used with XML-based Web services on the .NET
platform and designed for improving productivity in the development of Web
applications.

295
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. How managed applications mitigate security risks caused by poor
programming practices.

CONTENT
In this example, a user logs in to an application. The developer‟s code captures the
user name and password, and stores them in memory to perform authentication.
However, the developer forgot to write the code that erased these values from
the system‟s memory once authentication completed. The user then logs out
and exits the application.

When the application closes, the manager identifies all the system memory that
was used by the application, cleans it and releases it back to the operating system.
If the application failed to do this with the stored credentials, the manager would
have addressed it. A program designed to read the system‟s memory would not
find these credentials thanks to the manager.

296
Module 8: SDLC – Phase 3 Code Generation

Unmanaged Code

• Open Application
Memor
• Login y
• Store in memory: Variable Variable
Name Value
• Username
userName Adam_Davis
• Password
userPasswor RedS0x04!
• Exit Application d
• Logout

Manager cleans memory


used by application

297
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Title slide – no objectives.

CONTENT
Now that we understand the differences between scripted and compiled code,
as well as the subcategories of client-side, server-side, managed and unmanaged
code, we can review hybrid applications and understand how they work.

298
Module 8: SDLC – Phase 3 Code Generation

Scripted &
Compiled Code
Hybrid Applications

299
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. A hybrid application uses characteristics of both native and HTML5
applications.

CONTENT
A hybrid application is a combination of both native and HTML5 applications.
This means that we will need to develop a compiled application to run on the
handset – which, depending on the device, will be created with either managed
or unmanaged code – that is capable of receiving client-side scripted language
from a webserver running server-side scripted language.

300
Module 8: SDLC – Phase 3 Code Generation

Hybrid Applications

• Native + HTML5 = Hybrid.

• A combination of HTML5 & Native Apps working together in a

single, seamless user experience.

HTML HTML
5 5
Nativ Nativ
e e
Hybri
d

301
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Concerns for both native and HTML5 applications must be addressed.
2. Combining both native and HTML5 applications introduces many concerns
to address, eliminates few.

CONTENT
Deciding to go with a hybrid application introduces a great number of develop-
ment concerns that must be addressed. When choosing a hybrid application,
it is analogous to creating your own private web browser that can only access
your website. This eliminates the concern of how the client-side portion of the
HTML5 application behaves in different browsers, but replaces it with the prob-
lem of creating this personal browser for various platforms.

Even though hybrid applications look appealing because they give you the great-
est amount of access and options, remember that through combining native
and HTML5 to get the best of both, you also get the worst of both. With hybrid
applications, you are now responsible for end-to-end application security.

302
Module 8: SDLC – Phase 3 Code Generation

Hybrid Applications

• Native App side

• Must be developed for specific platforms.


• Can access device sensors & data.

• Contains its own browser capability.

• HTML5 App side


• Browser differences can be ignored – website is only provided to

the native part of your hybrid app.


• Can receive device sensor data from the native part of your hybrid

app.

• Server-side should reject any connection requests not from the

native app side of your hybrid app.

303
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Developers will need to know how to communicate the benefits and
detriments of all application types to management during Phase 1 of the
SDLC so that the appropriate application type can be selected.

CONTENT
Management will need help identifying the best application type to select for
the mobile service in Phase 1 of the SDLC. It is up to the developers to help
managers understand the pros and cons of each application type, and to make
a recommendation that best fits the needs of the outlined mobile service
requirements.

304
Module 8: SDLC – Phase 3 Code Generation

Developers Take Note!

• Phase 1 of the SDLC will establish which application type should be

created for your app.

• Managers will depend on you to help them decide which

application type to select!

• It is your duty to help them understand the consequences,

responsibilities, capabilities and limitations of each application type.

305
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what tools are used to create applications.
2. Understand what code categories exist, and what their purpose is.
3. Understand the security concerns that exist with poor coding practices.

CONTENT
Review the Objectives (re-read the slide).

306
Module 8 : SDLC – Phase 3 Code Generation

Review

• Objectives
• While different tools exist to perform different tasks when creating

applications, most of these tools are used today as part of an IDE to

simplify and expedite the development process.

• Not all code is the same. Scripted and Compiled are two common

categories we discussed, each with further subcategories.

• All computer security exists within the code. Poor programming

practices can lead to faulty code, which can lead to security

vulnerabilities.

307
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Which of the following is a client-side scripting language?

a. Perl
b. JavaScript
c. SQL
d. None of these

308
Module 8: SDLC – Phase 3 Code Generation

Quiz – Question 2

2. SQL Injection is an example of a security vulnerability created by


poor programming practices. How could we defend against this?

a. Provide a legal notice in our application


b. On the server, always validate the data users submit and reject
suspicious data
c. On the client device, always validate the data users submit
and reject suspicious data
d. Never accept data from the users

Quiz – Question 3

3. Managed code eliminates all mobile application security


concerns.

a. True
b. False

309
End of Module
mGovernment 311
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
This module discusses the programming code behind mobile applications, and
what makes them different.

312
Module 9: Application Programming Interface (API)

Application
Programming
Interface (API)

mGovernment 313
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what APIs are, and why they are important.
2. Understand how APIs relate to mGov and their future role.
3. Understand why some API data formats are better than others for a mobile
application.

CONTENT
Introduce the Objectives, (read the slide).

314
Module 9: Application Programming Interface (API)

Objectives

• Understand what APIs are, and why they are important.

• Understand how APIs relate to mGov and their future role.

• Understand why some API data formats are better than others for a

mobile application.

315
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To explain, with a visual aid, what an API is and how it works.

CONTENT
An Application Programming Interface (API) is a logical interface that allows
developers to improve their applications by connecting to this interface and
exchange data. APIs can be used to receive data and send the data.

Examples of how this may be useful are:


- Authenticating identity credentials with the Emirates ID Authority.
- Processing payments with credit card companies like Visa and MasterCard.
- Tying into SMS service providers.

316
Module 9: Application Programming Interface (API)

What is an API?

• An interface where applications and services can connect and

exchange data. For example:

• Emirates ID.

• Payment Gateways (Visa, MasterCard, etc.).

• SMS Gateway Services.

Formatted
Data A Data
Query
Request
Applicatio P Applicatio
n Formatted
Data n
Data
Result
Reply
I

317
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Link the benefits of APIs to the higher service enhancements and customer
experience steps outlined in the mGov Guidelines document.

CONTENT
If we refer back to the mobile Government Guidelines document, we will recall
that some higher-level customer experience steps and service enhancements
were identified. Utilizing APIs will most likely be necessary to achieve these high-
er-levels of service.

318
Module 9: Application Programming Interface (API)

APIs and mGovernment

• Remember these?

mGov Service Enhancements

• Transactional Services (Customer Experience Step 3).

• Applications that allow citizens to book appointments, make

purchases, pay fees, post notices, and sign documents.

• Large increase in security and privacy issues with these services.


• Integrated Services (Customer Experience Step 4)
• Services that combine services & data from other organizations,
departments, entities, etc.
• These services, while the most complex, bring the most value to
citizens and are the main focus of UAE mGovernment

319
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show how utilizing another entity/organization API can achieve Step 3 of
the mGov Guidelines Customer Service experience.

CONTENT
Here is a simple example of an API being used is for processing payments.

Consider how somebody pays for products or services online. They go to a website
and they type in their credit card information. The website then charges the
credit card for the amount being billed, and delivers what the customer ordered.
But how does the website note that the credit card information is accurate? How
does the website make charges to your credit card? Does every merchant have a
copy of the Visa and MasterCard database? No! Absolutely not. These merchants
access a payment gateway.
Using this gateway, merchants send credit card information to Visa or MasterCard,
and wait for a reply. Once the credit card company responds, the merchant
proceeds with the order depending on how the credit card company responds.
If the charge was successful they process the order. If the charge failed, inform
the customer to try again.
This is a common transactional service. The user supplies information that is
provided to a third-party, and the third party‟s response helps decide what to do
next.
We can use the same approach in our government applications. Suppose we
produce an application, and users can submit their national identification
information to the application. How would you know if the information is valid?

320
Module 9: Application Programming Interface (API)

APIs and mGovernment


mGov Service Enhancements

• Transactional Services (Customer Experience Step 3)

• Your mobile service uses another organization‟s API. For example:

• Relay user-submitted Emirates ID information to EIDA for

validation.

• Submit credit card information to Visa/MasterCard for payments

• Your mobile service initiates the request, and receives a reply.

Formatted Data
Your Request A Data Query EID
mGovernme P A
nt App Formatted Data
Data
Visa
Reply I Result MasterCar
d Etc.

CONTENT
You would need to contact the national ID Authority to have it validated, and
decide how to proceed after receiving their response.
An API defines how you interact with that third-party. The payment gateway for
Visa and MasterCard is an API that they produce so merchants can engage in
commerce using their credit cards. An API provided by the national ID authority
would allow government entities to improve their applications by passing along
users submitted data for validation.
321
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show how providing your own API to others can achieve Step 4 of the mGov
Guidelines Customer Service experience.

CONTENT
Many government entities will need to engage in transactional level applications
to support the services that they provide. This means that, while many
government entities will need to access and use an API, most government
entities will not need to provide their own API. However, some very critical
government entities will need to do this.

For a fully integrated service, entities will need to create and maintain their own
API for other government entities to use. Go back to the example of a government
entity forwarding national ID information to the national ID authority for
verification. Even though the government entity that forwards the information is
using an API, that API is not created and maintained by them. That API is created
and maintained by the national ID authority. Once a government entity, or even
a business, is providing APIs for other users to access and build upon, it is not as
accurate to call this service an application anymore – it is now a platform.

For example: consider Facebook. Initially, Facebook started as a website that


allowed people to post information about themselves and connect with others.
The only people who could develop for Facebook were employees at Facebook.
However, once Facebook introduced APIs that would allow developers to securely
access and utilize Facebook data, suddenly there were thousands of people

322
Module 9: Application Programming Interface (API)

APIs and mGovernment


mGov Service Enhancements

• Integrated Services (Customer Experience Step 4)

• Your mobile service offers an API. You can:

• Receive updated data from other entities.

• Validate information you have from an incoming request.

• Your mobile service receives the request, then sends the reply.

• Your mobile service is no longer just an application – it is now an

mGovernment platform!.

Formatted
Another Data
Data Query
A Your
Entity’s Request
mGovernme
mGovernme P Data nt Platform
nt App Formatted Data
Result
Reply I

CONTENT
developing for Facebook that were not employed by Facebook. Facebook‟s
value and revenue grew because of this, but because they did not hire any
new employees to develop these new applications for them, their expenses did
not grow. Creating these APIs and making them available to the public greatly
improved Facebook as a business, as an investment, and as a source of innovation.

323
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain the different data formats used to exchange data via APIs, and why
some are preferred for mobile services.

CONTENT
When interacting with an API, the exchanged data must be packaged in a format
that both the sender and receiver will understand. There are two common
data formats that are used today to exchange this information – the eXtensible
Markup Language, or XML, and JavaScript Object Notation, or JSON.

Here is an example of the exact same set of data being provided via both XML
and JSON. As you can see, there are many more characters being used by XML
than by JSON. Remember that every character you see is a byte of data that
must be transmitted over a network, and that more data means more network
resources are used, which can slow down network performance.

For this reason, the use of JSON to support communications with mobile devices
would be ideal, since fewer characters are needed to communicate the same
data. Unfortunately, depending on what data structure your organization is
using, you may not be able to choose JSON over XML.

324
Module 9: Application Programming Interface (API)

API Data Formats

• XML – eXtensible Markup Language.

• Very heavy (more bandwidth use, slower connections).


<Person>
<FirstName>Homer</FirstName>
<LastName>Simpson</LastName>
<Relatives>
<Relative>Grandpa</Relative>
<Relative>Marge</Relative>
<Relative>The Boy</Relative>
<Relative>Lisa</Relative>
<Relative>Maggie</Relative>
</Relatives>
</Person>
• JSON – JavaScript Object Notation.

• Very light (less use, faster connections).

{
“firstName”: “Homer”,
“lastName”: “Simpson”,
“relatives”: [ “Grandpa”, “Marge”, “The Boy”, “Lisa”, ”Maggie” ]
}

325
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

GLOSSARY
XML – eXtensible Markup Language: /A specification developed by the W3C.
XML is a pared-down version of SGML, designed especially for Web documents.

JSON – JavaScript Object Notation: A lightweight data-interchange format


that is easy for humans to read and write, and for machines to parse and
generate. JSON is based on the object notation of the JavaScript language.

Test Questions
Note: The answers to this question can be found from the content in
Modules-Slides AD08-11 (CSS), AD08-14 (jQuery), AD09-07 (XML/JSON) and
AD13-06 (JavaScript Minification).
• Which of the following application development practices would improve
network communications between a mobile device and the back end server
in a hybrid application? (Select all that apply).
a. Use XML instead of JSON to reduce the number of characters in your
code.
b. Minify the JavaScript to remove unnecessary comments and white-space
c. Use jQuery to reduce the number of characters in your code
d. Use CSS to reduce the number of style definitions in your code

326
Module 9: Application Programming Interface (API)

API Data Formats

• XML – eXtensible Markup Language.

• Very heavy (more bandwidth use, slower connections).


<Person>
<FirstName>Homer</FirstName>
<LastName>Simpson</LastName>
<Relatives>
<Relative>Grandpa</Relative>
<Relative>Marge</Relative>
<Relative>The Boy</Relative>
<Relative>Lisa</Relative>
<Relative>Maggie</Relative>
</Relatives>
</Person>
• JSON – JavaScript Object Notation.

• Very light (less use, faster connections).

{
“firstName”: “Homer”,
“lastName”: “Simpson”,
“relatives”: [ “Grandpa”, “Marge”, “The Boy”, “Lisa”, ”Maggie” ]
}

327
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce Simple Object Access Protocol (SOAP) and REpresentational State
Transfer (REST).
2. Explain how these data structures impact the aforementioned data formats.

CONTENT
Even though XML and JSON are means of packaging data, APIs need to establish
a common way to exchange that data. This is where Simple Object Access
Protocol, or SOAP, and REpresentational State Transfer, or REST, are used. Both
are fine ways to transfer data, but their requirements are important to understand.

For example, SOAP requires the use of the XML data format. This is fine for
packaging and exchanging data through APIs, but it will result in more network
use since XML uses more characters to package the data than JSON. REST, on
the other hand, does not require the use of any specific data format. You could
use XML with REST if you wanted to, but because it is not required, you should
decide to use a data format which uses less characters to package the data – this
makes it possible to use JSON with REST, which will use less network resources
than XML with SOAP.

328
Module 9: Application Programming Interface (API)

API Data Structures

• SOAP & REST are methods of structuring data

• SOAP – Simple Object Access Protocol

• XML only

• Older, falling out of use

• REST – REpresentational State Transfer

• No data format specification (JSON, XML, etc.)

• Newer, growing in use

GLOSSARY
SOAP - Simple Object Access Protocol: A lightweight XML-based messaging
protocol used to encode the information in Web service request and response
messages before sending them over a network.
REST - REpresentational State Transfer: An architectural style for large-scale
software design.

Test Questions
1. The Simple Object Access Protocol (SOAP) specification requires the use of
eXtensible Markup Language (XML).
a. True
b. False

329
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what APIs are, and why they are important.
2. Understand how APIs relate to mGov and their future role.
3. Understand why some API data formats are better than others for a mobile
application.

CONTENT
Review the Objectives (re-read the slide).

330
Module 9 : Application Programming Interface (API)

Review

• Objectives

• APIs are interfaces which allow data to be exchanged between

other organizations, while still protecting that organization‟s data

from unauthorized disclosure.

• APIs will be how government entities exchange data as Mobile

Government transforms into Smart Government.

• Common mobile (wireless) connections are still slower than

common non-mobile (wired) connections. Reducing the amount

of data we exchange improves the network performance of mobile

devices.

331
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Application Programming Interfaces (APIs) allow different


organizations to exchange data with each other, without
compromising security.

a. True
b. False

332
Module 9: Application Programming Interface (API)

Quiz – Question 2

2. Your government entity produces an API, which enables the


exchange of data with other government entities. According to the
UAE mGov Guidelines, which service enhancement is this?

a. Informational Services
b. Interactive Services
c. Transactional Services
d. Integrated Services

Quiz – Question 3

3. eXtensible Markup Language (XML) will require more network


resources than JavaScript Object Notation (JSON) when exchanging
data between APIs.

a. True
b. False

333
End of Module
mGovernment 335
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
Learning how to use Appcelerator a build an application

336
Module 10: Hands-on Activity: Appcelerator IDE

Hands-on
Activity
Appcelerator IDE

mGovernment 337
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how to work with an IDE.
2. Understand certain IDEs can create multiple applications from the same
code.
3. Understand how to package an Android application with Appcelerator.

CONTENT
Introduce the Objectives, (read the slide).

338
Module 10: Hands-on Activity: Appcelerator IDE

Objectives

• Understand how to work with an IDE.

• Understand certain IDEs can create multiple applications from the

same code.

• Understand how to package an Android application with

Appcelerator.

339
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the Appcelerator IDE to attendees.
2. Explain the purpose and capability of an IDE.

CONTENT
(Read the slide).

340
Module 10: Hands-on Activity: Appcelerator IDE

What is Appcelerator?

Appcelerator is an Integrated Development


Environment (IDE) that enables the creation of
mobile applications for different platforms (Android,
BlackBerry, etc.) from a single set of source code.

Now let‟s begin learning how to use it!

341
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce attendees to the myCV project, and show them the project
directory structure.

CONTENT
The left-side of the IDE is the “Project Explorer”. In here, you will see a project
pre-loaded for you called “myCV”. Expand the project, then expand the “app”
folder, then expand the “views” folder and double-click on “index.xml” to open it.

342
Module 10: Hands-on Activity: Appcelerator IDE

Explore the myCV Project

• Expand the myCV Project and open /myCV/app/views/index.xml.

343
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Locate the file that establishes the layout for the application.
2. Introduce and explain the concept of a “default document” as it applies in
web servers and in Appcelerator.

CONTENT
On a web server, something called the “default document” is defined. This means
that, if no specific file is requested from the web server, it should look for – and
load if it finds it – the “default document”. This is often something like “index.
html”, but here in our myCV application, it is this “index.xml” file.

This file will be our application‟s “default document”. This file holds the
configuration for how we will display our application when we load it. Now, let‟s
see how the app looks!

344
Module 10: Hands-on Activity: Appcelerator IDE

The “Default Document”

• index.xml defines the first page the app displays.

345
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show attendees how to create the myCV application as an HTML5 app from
the established set of source code.

CONTENT
At the top-left of Appcelerator, change the second dropdown box to “Mobile
Web Preview in Browser”. It should run automatically, but if it does not, click the
green play button. We will soon see the myCV application as an HTML5 app.

346
Module 10: Hands-on Activity: Appcelerator IDE

Run as an HTML5 App

• Change to Mobile Web Preview in Browser and click the green

button.

347
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce attendees to the appearance of the myCV application as an
HTML5 app.
2. Identify the location of tabs on the screen for future comparison.

CONTENT
Here we see the myCV application running as an HTML5 app on our local
computer. Notice that we have three tabs, and they are at the bottom.
Remember this, because their location will change on an Android device without
us changing the code at all!.

348
Module 10: Hands-on Activity: Appcelerator IDE

myCV as an HTML5 App

• Notice the tabs are at the bottom of the page.

349
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show attendees how to create the myCV application as an Android app from
the same set of source code.

CONTENT
Now return back to Appcelerator and change the dropdown box from “Mobile
Web Preview in Browser” to the name of the Android device you have connected
to your computer. If it does not begin compiling after you make this new
selection, click the green play button. This process will take much longer than
the HTML5 version of the app, and might take up to one minute to complete.
Be sure your Android devices are unlocked and not sleeping when this step is
underway, or the installation of the app onto the device might fail.

350
Module 10: Hands-on Activity: Appcelerator IDE

Run as an Android App

• Change to the connected Android device.

351
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce attendees to the appearance of the myCV application as an
Android native app.
2. Compare the location of tabs to their location as an HTML5 app as a simple
demonstration of the user experience customizations handled automatically
by Appcelerator.

CONTENT
Here we see the myCV application running as an Android app on our Android
device. Notice those three tabs that were at the bottom in the HTML5 version
are now at the top. This is because it is inline with the Android user experience
to place tabs at the top of the device instead of the bottom. Remember, we
accomplished this without making any changes to the code at all – Appcelerator
did it for us! Also notice how the Call and Email buttons are integrated with the
device. If you wanted to contact this person, all you need to do is press one of
these buttons instead of remembering their contact information for later use.

352
Module 10: Hands-on Activity: Appcelerator IDE

myCV as an Android App

• Notice the tabs are now at the top.

• Also notice that the Call & Email buttons work.

353
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Provide attendees with the location of myCV files to edit in order to
personalize the app to themselves.

CONTENT
Now it is time to change this into an app that shows your CV! The locations listed
on this slide, and the following slide, will help you understand what you need to
modify in order to change this application into your own personalized app.

354
Module 10: Hands-on Activity: Appcelerator IDE

Editing the Contents

• /myCV/app/views/index.xml

• Edit Call & Email buttons.

• Edit Window titles.

• /myCV/app/controllers/index.js

• Edit message variable values for Call & Email functions.

• /myCV/app/assets/

• Edit bio.html to change About Me tab contents.

• Edit experience.html to change Experience tab contents.

• Edit education.html to change Education tab contents.

• Replace myPic.jpg with a picture of yourself.

355
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. (Continued from previous slide).

INSTRUCTOR GUIDANCE
• NOTE: Instructor‟s prior knowledge of Appcelerator and HTML will give a
significant advantage when assisting attendees with editing these files.

356
Module 10: Hands-on Activity: Appcelerator IDE

Editing the Contents

• /myCV/app/assets/education

• Include College & University logos here

• /myCV/app/assets/employers

• Include employer logos here

Remember: If you add new files, or rename them, be certain to update the

HTML code in the relevant .html file!

• Project files location on computer:

C:\Users\mGov Training\Documents\Titanium_Studio_Workspace\myCV

357
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate to attendees how to package their Android native application
for distribution to other Android devices.

CONTENT
Now that we have our personalized myCV applications ready, let‟s package them
for upload to the Google Play Store! In the upper-left, where you see “Run” next
to the green play button, change that dropdown to “Package”, and then verify
that the dropdown to the right changes to say “Android App Store”. Then click
the package icon that has replaced the green play button.

358
Module 10: Hands-on Activity: Appcelerator IDE

Package your Android App

• Change from Run to Package

359
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain the information to publish the application for upload to the Google
Play Store.

INSTRUCTOR GUIDANCE
• Note: If you are using the mGov Dell Laptops under their Windows 7
configuration, the keystore to use is mGovTrainingKey.keystore and it can be
found in the mGov Training user‟s Documents folder. The keystore password
is mgovtraining and the alias is mGovTrainingKey.

CONTENT
Before we can package this application for upload, we must first sign it – this is a
security precaution to prevent unauthorized modification of the application and
to verify the identity of the developer. First, click the “Browse…” button next to
the “Distribution Location” text box, and select where you will save the packaged
application. After you have chosen your save location, you must select the
keystore you will use to sign the app. After this, provide the password and alias
for the keystore you are using and click Publish!

360
Module 10: Hands-on Activity: Appcelerator IDE

Enter the Required Data

• Select the Save Location and Keystore to sign with.

361
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate the app publication process in action, and where attendees can
locate their app once publication finishes.

INSTRUCTOR GUIDANCE
• Note: All tasks related to establishing a Google developer account, and
uploading the packaged application, are outside of the scope for this activity.

CONTENT
It can take about half a minute to publish the myCV application, but when it
completes you will receive a notice in the bottom-right corner of the screen.
Click this notice and it will open a window showing you the file you‟ve created!
All you need to do now is create a developer‟s account with Google and upload
this file to the Play Store!

362
Module 10: Hands-on Activity: Appcelerator IDE

Your App is Now Ready!

• You will be notified when packaging finishes.

363
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand how to work with an IDE.
2. Understand certain IDEs can create multiple applications from the same
code
3. Understand how to package an Android application with Appcelerator

CONTENT
Review the Objectives (re-read the slide).

364
Module 10: Hands-on Activity: Appcelerator IDE

Review

• Objectives

• Understand how to work with an IDE.

• Understand certain IDEs can create multiple applications from the

same code.

• Understand how to package an Android application with

Appcelerator.

365
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

366
Module 10: Hands-on Activity: Appcelerator IDE

Quiz – Question 1

1. What does IDE stand for?

a. Integrated Deployment Environment.


b. iOS Development Extension.
c. Implemented Distribution Environment.
d. Integrated Development Environment.

Quiz – Question 2

2. What advantage does a tool like Appcelerator offer?

a. It is the only common worldwide IDE.


b. It enables development for multiple platforms from a single set
of source code.
c. You do not need any programming knowledge to use it.
d. None of the above.

367
End of Module
mGovernment 369
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
The various types of testing that mobile applications undergo.

370
Module 11: SDLC - Phase 4 Testing

SDLC – Phase 4
Testing

mGovernment 371
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what makes these tests different.
2. Understand how these tests relate to each other.
3. Understand what hacker types exist, and which ones you can trust.

CONTENT
Introduce the Objectives, (read the slide).

372
Module 11: SDLC - Phase 4 Testing

Objectives

• Understand what makes these tests different.

• Understand how these tests relate to each other.

• Understand what hacker types exist, and which ones you can trust.

373
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. The application produced in Phase 3 is provided in Phase 4 for testing and
evaluation of suitability for release.

CONTENT
Testing is where we will begin to evaluate the produced application for suitability
for release. There are many different tests that can be conducted, but we are
going to focus on three of the major common tests.

Test Questions
Match the application test names to their descriptions

(The following descriptions are provided)


- Test to evaluate if the application is operating as designed
(Correct answer: )
- Test to evaluate if the application has security vulnerabilities
(Correct answer: )
- Test to evaluate if the user will accept the application design
(Correct answer: )

(The following dropdown box options are provided)


- Usability Test
- Functionality Test
- Security Test

374
Module 11: SDLC - Phase 4 Testing

SDLC – Phase 4 – Testing

375
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the three major tests we will cover in this module.

CONTENT
The three major tests we will discuss are displayed here.

Usability tests are about how well the user can interact with an application. If
users find it difficult, confusing or frustrating to accomplish a task or use the
application, the test has been failed. Usually the wireframes from the design
phase of the SDLC contribute to the most to the outcome of this test.

Functionality tests are an evaluation of the application‟s ability to perform the


desired functions as intended. Since this is often an evaluation of an application‟s
ability to execute a process as designed, the flow charts from the design phase of
the SDLC contribute the most to the outcome of this test. If the application fails
to successfully complete tasks as intended, the application fails the test.

Security tests are, obviously, an evaluation of the application‟s security


protections. There are a number of ways the application‟s security can be
evaluated, and we will go into further detail on those later.

376
Module 11: SDLC - Phase 4 Testing

Mobile Application Testing

• Usability

• Focuses on acceptance of the end user, and how well they can

complete the task that they want to accomplish.

• Functional

• Focuses on whether the application performs as expected.

• Security

• Static Analysis

• Dynamic Analysis

• Penetration Testing

GLOSSARY
Usability Testing: A method by which users of a product are asked to perform
certain tasks in an effort to measure the product‟s ease-of-use, task time, and
the user‟s perception of the experience.
Functional Testing: A quality assurance (QA) process and a type of black
box testing that bases its test cases on the specifications of the software
component under test.

377
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Present some of the simple tests that are conducted to evaluate a user‟s
acceptance of the produced application.

CONTENT
Usability testing, sometimes also known as a “user acceptance test” is a test
where the ability for a user to understand, use, and enjoy the interface and
interaction of an application is tested and evaluated. Some of these tests can
be very simple, such as, “Is the application available in my language?” If your
intended audience speaks only one language, we do not usually even think
about this. However, if your intended audience includes people who speak more
than just one language, you will automatically alienate an entire segment of your
market by not providing your application in their language. Another simple test
would be aesthetics. You‟re providing black colored text on a very dark-colored
background it would be difficult to read the information presented. This would
fail the user acceptance test, since something that should be easy, like reading
text, has been made unnecessarily difficult.

Some user acceptance tests, however, are a bit more difficult to put into words.
These tests usually have less to do with the appearance of an application, and
more to do with the interaction of application. For example: on the iPhone, unlike
Android, there is no hardware or OS provided back button. A button to “Go back”,
or “Return” must be programmed into the application. The most common place
to put this button in an iPhone application is the top left corner of the screen.

378
Module 11: SDLC - Phase 4 Testing

Sample Usability Checklist

Device Specific Network Specific App Specific UX Specific

Does the app behave as Does the app meet the Is it possible for users to go
Does the app install on the
designed if connected through established initial back to the previous screen?
device?
Wi-fi? requirements?

Is the app stable? For


If the connection is lost,
Does the app behave as example – If the app has If there is a long list of
does the app resume when
desired during an photos, does high speed data, is there a search
reconnecting to the network?
incoming call? scrolling button?
cause a crash?

If performance is
Does the app behave as Does the app use standard Can the user print from the
expected to be slow,
desired during an network ports? app (if applicable)?
indicate progress
incoming SMS? Should it?
(“Loading…”).

Transactions are processed In case of „live‟ filtering of


Does the app behave as
correctly after re-establishing a Is the app name self data while the user enters
designed when it comes
connection to the server explanatory? his search query, verify
out of sleep?
performance.

SOURCES
http://www.tmap.net/sites/tmap.net/files/attachments/Checklist_Mobile_
App_Testing_0.docx

379
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
In fact, this has become so common, that most users do not even think about
looking for this button when using a brand-new application. They instinctively
go for that corner of the screen when they need to go back to screen. If you do
not put these buttons in that part of the screen on your iPhone application, you
not only run the risk of failing the user acceptance test but you also run the risk
of your application being rejected by Apple due to their very strict application
development guidelines.

Finally, it might be strange to think of, but in many ways the best user acceptance
testers are young children. Many parents will willingly admit that their young
children have somehow, almost magically, learned how to use Mom or Dad‟s
Mobile phone or tablet without any kind of instruction. Many parents will claim
their children to be geniuses because of this, but in reality the true geniuses are
the people who designed the applications. These designers put so much thought
into the design of their application that the users experience of interacting
with it was so intuitive, and so simple, that a child could literally use it. Even if
your application is not meant to be used by children (which will likely be true
for all government applications) the applications should be designed with such
simplicity in mind that even a child could use it. After all, if a child – with less
technology exposure, and less patience than an adult – can understand how to
use your application just by playing with it, then any user can.

380
Module 11: SDLC - Phase 4 Testing

Sample Usability Checklist


Device Specific Network Specific App Specific UX Specific

Does the app behave as Does the app meet the Is it possible for users to go
Does the app install on the
designed if connected through established initial back to the previous screen?
device?
Wi-fi? requirements?

Is the app stable? For


If the connection is lost,
Does the app behave as example – If the app has If there is a long list of
does the app resume when
desired during an photos, does high speed data, is there a search
reconnecting to the network?
incoming call? scrolling button?
cause a crash?

If performance is
Does the app behave as Does the app use standard Can the user print from the
expected to be slow,
desired during an network ports? app (if applicable)?
indicate progress
incoming SMS? Should it?
(“Loading…”).

Transactions are processed In case of „live‟ filtering of


Does the app behave as
correctly after re-establishing a Is the app name self data while the user enters
designed when it comes
connection to the server explanatory? his search query, verify
out of sleep?
performance.

381
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Present some of the simple tests that are conducted to evaluate the perfor-
mance of the produced application.

CONTENT
Functional testing is an evaluation of the application‟s ability to deliver the
experience and output that we expect the application to deliver. Functional
testing is a very interesting form of testing because it shares much in common
with both user acceptance testing, and security testing. At the very least, if
functional testing does not encompass elements of these other two tests, it at
least serves as the bridge between them.

Functional testing can be as simple as making sure that the expected output is
what is received from known inputs. If, for example, we were testing “2+2” and
our application give us the answer of “5”, we would know there is a problem that
needs to be fixed! But this is just a very simple example.

A more practical example of functional testing would be if a user can regain access
to your application after forgetting their password. This is a very good example
of the functional test because it not only has elements that are solely functional,
but it also encompasses areas of the user acceptance test and security testing.
Imagine your application has a login screen at the very beginning. Suppose the
user has forgotten their password. The user acceptance test would only check to
see if a link or button to retrieve the password is present.

382
Module 11: SDLC - Phase 4 Testing

Sample Functional Checklist

Date Field Numeric Alphanumeric


Links
Link Forms
Forms Data Validation
Data Validation
Checks Fields Field Checks
s
Verify they
Verify they go
go Does aa form
Does form Are you
Are you following
following Are leap
Are leap years
years Test
Test Test blank
Test blank and
and
where they
where they accept invalid
accept invalid the published
the published handled
handled min/max
min/max non-blank fields
non-blank fields
should
should input?
input? Privacy Policy?
Privacy Policy? correctly?
correctly? values
values

Ensure
Ensure
Does the
Does the app
app Are time
Are time positive &
Validate 33rdrd
Validate Are mandatory
Are mandatory handle invalid
handle input
invalid zones
zones negative Test min/max
Test min/max
party links
party links are
are
fields marked?
fields marked? without
input without handled
handled values are string length
string length
appropriate
appropriate malfunctioning?
malfunctioning? correctly?
correctly? processed
correctly
Are date
Are date
formats
formats Ensure blank
Ensure blank
Validate links
Validate links Is the
Is the input
input box
box Does
Doesthethe
mobile app
mobile consistent and
consistent and & zero
& zero
Test invalid
Test invalid
use aa familiar
use familiar longer than
longer than the
the support multiple
app support specifically
specifically values are
values are characters
characters and
and
format
format database allows?
database allows? languages?
multiple languages? identified for
identified for handled
handled symbols
symbols
(underlined)
(underlined) locals and
locals and properly
properly
travelers?
travelers?

383
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
The functional test would be to see if clicking that button would take you to
the correct screen – a screen that you should have documented in your earlier
application flow chart, and drawn in your wireframe mockups.

If the user clicks the button and they are taken to a page to retrieve their
password, so far the functional test has not failed. However, if the buttons are
not aligned and the colors are poorly chosen, even though the functional test
passed the user acceptance test would likely fail. This is just one simple example
of how the two tests relate, but are still very different.

Now suppose that the screen the user is viewing asks them to submit their user
ID. When the user does so, the screen displays the password for that user. The
functional test may have passed, because we just helped the user retrieve their
password. However, this is very clearly a violation of the security test because
there is nothing that prevents someone from entering another user ID and
obtaining that user‟s password. So although the functional test passed, this is
a major failure of a security test. While this example is rather extreme, and no
one would ever design a password retrieval system like this, it is provided to help
illustrate the difference between functional testing and security testing.

Although functional testing and security testing are different, it is important to


keep security in mind when doing the functional testing. Another quick example
of a functional test would be to see if the total number of characters which can
be entered into a text field are greater than the total number of characters that
can be stored in the back end database.

384
Module 11: SDLC - Phase 4 Testing

Sample Functional Checklist

Date Field
Date Field Numeric
Numeric Alphanumeric
Alphanumeric
Links
Link Forms
Forms Data Validation
Data Validation
Checks Fields Field Checks
s
Verify they
Verify they go
go Does aa form
Does form Are you
Are you following
following Are leap
Are leap years
years Test
Test Test blank
Test blank and
and
where they
where they accept invalid
accept invalid the published
the published handled
handled min/max
min/max non-blank fields
non-blank fields
should
should input?
input? Privacy Policy?
Privacy Policy? correctly?
correctly? values
values

Ensure
Ensure
Does the
Does the app
app Are time
Are time positive &
positive &
Validate 33rdrd
Validate Are mandatory
Are mandatory handle invalid
handle input
invalid zones
zones negative Test min/max
Test min/max
party links
party links are
are
fields marked?
fields marked? without
input without handled
handled values are string length
string length
appropriate
appropriate malfunctioning?
malfunctioning? correctly?
correctly? processed
correctly
Are date
formats Ensure blank
Validate links Is the input box Does
Doesthethe
mobile
mobile
app consistent and & zero
Test invalid
use a familiar longer than the support
app support
multiple specifically values are
identified for characters and
format database allows? languages?
multiple languages? handled
symbols
(underlined) locals and properly
travelers?

CONTENT
Depending on how the application, and the back and supporting application
infrastructure, has been designed, under certain circumstances something as
small and insignificant as this could result in massive security vulnerabilities.

385
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Present the three forms of security testing that will be discussed in this
module.

CONTENT
When evaluating the security of a mobile application, there are a number of
different tests that can be conducted. These are the three we will discuss –
Static Analysis, Dynamic Analysis, and Penetration Testing. When we discuss
Penetration Testing, we will elaborate on different forms of Penetration Testing,
and other concerns to defend against.

386
Module 11: SDLC - Phase 4 Testing

Security Testing

• Static Analysis

• Dynamic Analysis

• Penetration Testing

• White Box

• Black Box

• Hackers

GLOSSARY
Static Analysis: The analysis of computer software that is performed without
actually executing programs.

Dynamic Analysis: The testing of the dynamic behavior of code. That is,
dynamic analysis refers to the examination of the physical response from the
system to variables that are not constant and change with time.

Penetration Testing: An attack on a computer system with the intention of


finding security weaknesses, potentially gaining access to it, its functionality
and data.

387
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To convey that Static Analysis is a review of the source code.

INSTRUCTOR GUIDANCE
• Note: The answers to this question can be obtained from information
contained in Modules-Slides AD11-08, AD11-09, and AD11-10.
• Match the security test to the correct description:
• (The following items are provided)
• Testing a running version of the code (Correct answer: Dynamic Analysis)
• Hiring a professional to hack the application (Correct answer: Penetration
Testing)
• Reviewing the source code for potential problems (Correct answer: Static
Analysis)
• (The following dropdown box options are provided)
• Static Analysis
• Dynamic Analysis
• Penetration Testing

CONTENT
Static Analysis is very similar to debugging in that it involves reviewing the source
code of the application. However, unlike debugging, the test does not search for
malfunctioning code – instead it is searching for code that could create security
problems.

388
Module 11: SDLC - Phase 4 Testing

Static Analysis

• Security-themed code review

• Doesn‟t execute the code – finds most of the flaws

• Usually performed by automated tools

• Simple example:

function isAdministrator(permissionLevel){

if (permissionLevel < 2)

return false;

else

if(permission level>2)

return true;

• What happens if permissionLevel equals 2?

CONTENT
Examples of potential security problems would be code that does not defend
against unexpected input, or code that does not adequately protect information
– think of the credentials example given in the unmanaged code category of
SDLC Phase 3 – Code Generation.

389
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To convey that Dynamic Analysis is a review of an application by testing a
running version of it.

INSTRUCTOR GUIDANCE
• Note: The answers to this question can be obtained from information
contained in Modules-Slides AD11-08, AD11-09, and AD11-10.
• Match the security test to the correct description:
• (The following items are provided)
• Testing a running version of the code (Correct answer: Dynamic Analysis)
• Hiring a professional to hack the application (Correct answer: Penetration
Testing)
• Reviewing the source code for potential problems (Correct answer: Static
Analysis)
• (The following dropdown box options are provided)
• Static Analysis
• Dynamic Analysis
• Penetration Testing

CONTENT
Dynamic Analysis is the means of evaluating an application for potential security
problems by testing a running version of it. Instead of the review performed
by Static Analysis, Dynamic Analysis attempts to exploit potential problems that
may have been overlooked during Static Analysis, or could not have possibly
been detected or determined during Static Analysis.

390
Module 11: SDLC - Phase 4 Testing

Dynamic Analysis
• Reviews client-side (device) and server-side (back end) code while it

is running

• Mimics how a hacker would attack the app through a direct device

connection or the back end‟s internet accessible interfaces

• Dynamic analysis tests that are created without careful planning

may negatively impact the application‟s performance or behavior,

since the application is operating during the test

• If you are performing these tests against a non-production version

of your app, this is irrelevant

CONTENT
For example – some Dynamic Analysis tools are designed to cause a program to
crash. The attempt is to capture the crash report, or the contents of the memory
space used by the application, and determine if it contains any information that
might help break into either the application itself, or the application‟s supporting
backend.

391
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. To explain what a “Penetration Test” is.
2. To explain the differences between “White Box” and “Black Box” penetration
tests

INSTRUCTOR GUIDANCE
Note: The answers to this question can be obtained from information
contained in Modules-Slides AD11-08, AD11-09, and AD11-10.

Match the security test to the correct description:


(The following items are provided)
- Testing a running version of the code (Correct answer: Dynamic Analysis)
- Hiring a professional to hack the application (Correct answer: Penetration
Testing)
- Reviewing the source code for potential problems (Correct answer: Static
Analysis)
(The following dropdown box options are provided)
- Static Analysis
- Dynamic Analysis
- Penetration Testing
Next question – Note: The answers to this question can be obtained by
understanding and contemplating the information presented in Modules-
Slides AD09-10 and AD09-11.
White hat hackers only perform White Box penetration testing.
a. True
b. False (Correct Answer)

392
Module 11: SDLC - Phase 4 Testing

Penetration Testing

• Penetration Testing (“PenTest”) – an intentional attack on an

application or system to test and assess its security vulnerabilities

• White Box Penetration Testing

• Information about the target is provided to assist with the test.

• More thorough than Black Box, but not close to “real world”

• Black Box Penetration Testing

• Information is not provided to the testers – they must find it

• Less thorough than White Box, but much closer to “real world”

GLOSSARY
White Box Testing: A software testing technique whereby explicit knowledge of
the internal workings of the item being tested are used to select the test data.

Black Box Testing: A software testing technique whereby the tester does not
know the internal workings of the item being tested.

393
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
A penetration test is a security test conducted by a hired security expert. A
common nickname for these experts is the word “hacker”, although it is
more commonly attributed towards security experts that act with malicious
intent. Penetration tests are conducted according to the desired goals of the
application owner, and the testers can customize their strategy according to
these goals.

Two common categories of penetration testing are “white box” and “black box”
testing. “White Box” testing involves providing the tester with information that
would help them with their test.

An example of this would be providing network address information of database


servers when hiring a tester to evaluate the security of your database servers.
This information will help the tester, which can mean a more thorough test is
conducted, but a “white box” test does not simulate “real world” conditions,
since you would never give this information to someone attempting to break
into your database servers.

“Black box” testing, on the other hand, is closer to “real world” conditions. The
opposite of “White Box” testing, “Black Box” testing involves no disclosure of
any information to the tester that would help them with the test they‟ve been
hired to conduct.

394
Module 11: SDLC - Phase 4 Testing

Penetration Testing

• Penetration Testing (“PenTest”) – an intentional attack on an

application or system to test and assess its security vulnerabilities

• White Box Penetration Testing

• Information about the target is provided to assist with the test.

• More thorough than Black Box, but not close to “real world”

• Black Box Penetration Testing

• Information is not provided to the testers – they must find it

• Less thorough than White Box, but much closer to “real world”

CONTENT
An example of this, using the same scenario as before, would be hiring a tester
to evaluate the security of your database servers, but not providing them any
information about the servers. The tester must, on their own, find a way to
identify, target, and access the database servers – just as a real-world attacker
would have to do.

395
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce three kinds of hackers, and explain how they are different.

CONTENT
A “hacker”, as mentioned earlier, is a nickname for these security experts that
perform penetration testing. However, the term “hacker” can mean different
things. The world of information security professionals commonly acknowledges
three different categories of “hackers”:

A “White Hat” hacker is a “good guy”. These are the security experts you will hire
to perform penetration testing against your application and supporting systems.

A “Black Hat” hacker is a “bad guy”. These are security experts that are very
smart, but dangerous since they are often motivated to illegally access, steal or
modify data for their own gain.

A “Gray Hat” hacker is someone who is a bit of a “white hat” and a bit of a “black
hat”. These are individuals who might work as “white hats” during the day, but
engage in illegal “black hat” activities at night on their own free time.

Sometimes these nicknames get confused with the earlier penetration tests.
They are different. A “white hat” can perform both “white box” and “black box”
testing, just as a “black hat” can perform both. However, you should never hire a
“black hat” to perform penetration testing, as their intentions could be malicious
– this would be almost equal to inviting burglars into your home.

396
Module 11: SDLC - Phase 4 Testing

The Penetration Testers

• Hackers – Allies or Enemies?

• White Hat Hackers

Ethical hackers that specialize in security assessment & penetration

testing. They will help you secure and defend your systems.

• Black Hat Hackers

Malicious hackers that break into systems for personal gain. These

are the burglars of the internet.

• Grey Hat Hackers

Hackers with a mix of white and black hats. They might be “white

hats” for work during the day, but “black hats” at night.

Hire a “White Hat” to PenTest your app before a

“Black Hat” does it with malicious intent.

397
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
Ultimately, what separates these three types of hackers is their personal ethics
and motivations. Just like a locksmith and a burglar, both know how to pick a lock
and both can break into your home. The locksmith, much like a “white hat”, will
only do this if you ask them. The burglar, much like a “black hat”, will do it when
he wants to, and will steal from you anything they want.

GLOSSARY
White Hat Hacker: An ethical computer hacker, or a computer security expert,
who specializes in penetration testing and in other testing methodologies to
ensure the security of an organization‟s information systems.
Black Hat Hacker: A hacker who “violates computer security for little reason
beyond maliciousness or for personal gain” (Moore, 2005).
Grey Hat Hacker: A combination of a black hat and a white hat hacker. A grey
hat hacker may surf the internet and hack into a computer system for the sole
purpose of notifying the administrator that their system has a security defect,
for example. They may then offer to correct the defect for a fee.

398
Module 11: SDLC - Phase 4 Testing

SOURCES
Hat image: http://www.examcollection.com/blog/wp-content/uploads/2013/10/
hats.jpg

Test Questions
Note: The answers to this question can be obtained by understanding and
contemplating the information presented in Modules-Slides AD11-10 and
AD11-11.

1. White hat hackers only perform White Box penetration testing.

a. True
b. False (Correct Answer)

399
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand what makes these tests different.
2. Understand how these tests relate to each other.
3. Understand what hacker types exist, and which ones you can trust.

CONTENT
Review the Objectives (re-read the slide).

400
Module 11 : SDLC - Phase 4 Testing

Review

• Objectives

• Test types:

• Usability tests evaluate a user‟s experience

• Functionality tests evaluate application behavior

• Security tests evaluate the integrity of the application

• Although these tests are different, they all relate. Applications

which pass some of these tests, but not all of them, can still cause

users to lose confidence and stop using the application

• “White Hat vs. Black Hat” is much like “Locksmith vs. Burglar”. Both

have the ability to break into your home, but their intentions are

drastically different. Only trust White Hats.

401
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Usability testing determines if the user has a pleasant, simple,


and intuitive experience with an application. What was created in
the previous phases to help achieve this goal?

a. Phase 1 – The application project scope


b. Phase 2 – Flow Charts
c. Phase 2 – Wireframe Mockups
d. All of the above

402
Module 11: SDLC - Phase 4 Testing

Quiz – Question 2

2. Functionality testing evaluates the application reliability by testing


how it behaves with user input and interaction. Which of the following
can help identify if the application is passing this test?

a. The application project scope document


b. The application Flow Chart
c. The application Wireframe Mockups
d. The IDE‟s debugger
e. b & d

Quiz – Question 3

3. Penetration testing is essential to protect your mobile service.


You should, very carefully, select a professional, reputable company
to perform regular penetration testing.

a. True
b. False

403
End of Module
mGovernment 405
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications, Security

CONTENT
In this module, we will show you how simple it is for an attacker to decompile
your Android app and gain access to your source code.

406
Module 12: Decompiling Android Apps

Decompiling
Android Apps

mGovernment 407
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
This module has these objectives:
1. Understand the ease with which an attacker can decompile your app and
gain access to your source code.
2. Understand the implications:
a. Ability to Trojan apps.
b. Ability to reverse engineer the back end APIs.

CONTENT
Introduce the Objectives, (read the slide).

408
Module 12: Decompiling Android Apps

Objectives

• Understand the ease with which an attacker can decompile your

app and gain access to your source code.

• Understand the implications:

• Ability to Trojan apps.

• Ability to reverse engineer the back end APIs.

409
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Overview the build process.
2. Overview the de-compilation process.

INSTRUCTOR GUIDANCE
• Situational Awareness: This is shared across several mobile platforms.

CONTENT
We will talk through the process of building an Android app at a high level, and
de-compiling it like an attacker to get back to the source code.

Let‟s begin with Building the app


We start with Java source code in plain text
First we compile it into java class files
Then we run through several packaging steps

If you have an IDE (Integrated Development Environment), it will probably do a


lot of this for you automatically

Now, let‟s reverse the process


We go through several steps to un-package and get back to first a dex file, then
a jar file, and finally to class files
Then we de-compile the class files and end up
Back where we started, with plain text source code

410
Module 12: Decompiling Android Apps

Reverse Engineering apk

Build the app: Package


it

In Reverse:
Un-Package De-Compile
it it

411
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
The next 18 slides are screenshots from the hands-on activity of decompiling an
Android Application.

They assume that the student has a notebook prepared with the tools necessary.

412
Module 12: Decompiling Android Apps

Demonstration

• Hands-on, decompiling from the Windows Platform.

413
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Beginning from the Windows desktop, open the highlighted folder in the lower
left, labeled “Decompiler Lab”.

414
Module 12: Decompiling Android Apps

Open Decompiler Lab

mGov Application Developers Course - Day 3

415
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Each folder contains two or more files, including an Instructions.txt file. For all of
the steps, the process for the student is to open the Instructions file, read and
follow the directions.

416
Module 12: Decompiling Android Apps

Open Step1-APK

mGov Application Developers Course - Day 3

417
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Each folder contains two or more files, including an Instructions.txt file. For all of
the steps, the process for the student is to open the Instructions file, read and
follow the directions.

418
Module 12: Decompiling Android Apps

Find mGov.apk

mGov Application Developers Course - Day 3

419
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
For step One, rename the .apk file, i.e. the Android Application to end with .zip.

420
Module 12: Decompiling Android Apps

Rename to mGov.zip

mGov Application Developers Course - Day 3

421
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
The windows OS will pop up a warning like this one, indicating that changing the
file extension might break some things. Don‟t worry, that‟s exactly what we want
to do.

Windows uses the filename extension to know what type of file it is, and how the
operating system should handle it.

422
Module 12: Decompiling Android Apps

Click Yes

423
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Notice that once the file is renamed, the icon for the file changes to that of a
compressed folder.

Double click on the file icon to open the compressed folder, i.e. the zip file.

424
Module 12: Decompiling Android Apps

Double-click mGov.zip

mGov Application Developers Course - Day 3

425
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Opening the .zip file reveals the contents, specifically the structure of the
packaged Android Application. Notice the AndroidManifest.xml file, which
defines the permission and access controls for the application. The developer
prepared this.

Exploring the res folder will eventually reveal graphics files.

Viewing them and comparing them to the running Android Application will show
that these files contain the graphical resources used to build elements displayed
on the screen.

Finally, notice the classes.dex file, which is the actual Dalvik executable run by the
Android system. This contains the compiled application code, and we will work
with it in Step 2.

Navigate to the higher folder.

426
Module 12: Decompiling Android Apps

Browse the different files

mGov Application Developers Course - Day 3

427
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Now, navigate to the Step 2 folder….

428
Module 12: Decompiling Android Apps

Open Step2-dex2jar

mGov Application Developers Course - Day 3

429
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Open and follow the instructions in the Instructions file:

Double click on the shortcut to the command prompt. It‟s important to use
the provided shortcut, as it opens the command prompt window in the correct
directory, and with the command execution prompt set properly to allow the
student access to the necessary commands.

430
Module 12: Decompiling Android Apps

Double-click Command Prompt

mGov Application Developers Course - Day 3

431
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
The command prompt window should look like this.

Confirm that you are in the proper folder by looking at the path in the prompt.

432
Module 12: Decompiling Android Apps

Command Prompt opens

mGov Application Developers Course - Day 3

433
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Type in the command as shown and hit enter to execute it.

The command is: d2j-dex2jar.bat mGov.apk.

434
Module 12: Decompiling Android Apps

Enter this command:

mGov Application Developers Course - Day 3

435
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
The command just executed converts the Dalvik executable (the .dex file) into a
normal Java executable (the .jar file).

When finished, navigate to the higher folder.

436
Module 12: Decompiling Android Apps

The program runs

mGov Application Developers Course - Day 3

437
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Now, navigate to the Step 3 folder.

438
Module 12: Decompiling Android Apps

Open Step3-JD-GUI

mGov Application Developers Course - Day 3

439
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Open and follow the directions in the Instructions file:

Double click on the jd-gui.exe file. This will open a Java Decompiler with a Graph-
ical User Interface.

440
Module 12: Decompiling Android Apps

Double-click jd-gui.exe

mGov Application Developers Course - Day 3

441
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
The Decompiler should look like this..

442
Module 12: Decompiling Android Apps

Java Decompiler opens

mGov Application Developers Course - Day 3

443
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Drag the .jar file produced in step 2 and drop it in the running decompiler window.

Alternatively, use the File menu in the decompiler menu bar to open the .jar file.

444
Module 12: Decompiling Android Apps

Drag/drop mGov-dex2jar.jar into Java Decompiler

mGov Application Developers Course - Day 3

445
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
A folder hierarchy should appear on the left side of the decompiler.

Single click on the plus sign to the left of the folders to open them and explore.

Continue to open sub-folders until you see files with a “J” icon.

These are the actual java class files, which are the compiled versions of the java
components of the application.

446
Module 12: Decompiling Android Apps

Folders appear on the left

mGov Application Developers Course - Day 3

447
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Walk the students through the decompilation process.

CONTENT
Clicking on any of the class files (the “J” icons) will cause the source code to
appear in the right panel.

Notice that the formatting (tabs, indents and spaces) and comments appear as
they were entered by the original developer.

It is really that simple to decompile an Android application, and to access the


source code and the developers comments.

448
Module 12: Decompiling Android Apps

Expand the folders to review the application code

mGov Application Developers Course - Day 3

449
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the implications of being able to easily de-compile Android apps.

CONTENT
All of these controls are good, but with the following combination of problems:
• An attacker can de-compile your (or any other) application and get to the
source code
• An attacker can insert his own code, and recompile / repackage it with his
own matching AndroidManifest.xml
• Since Google will accept any certificate to perform the app signing, he can
re-sign his now trojaned version of your app
• The user can be tricked into accepting and loading this app, and if the
“Unknown Sources: Allow installation of apps from sources other than the Play
Store” box is checked under Security in Settings, the app will load and run

The Android security model, which is otherwise quite robust, can be completely
circumvented by this.

Users must understand to never load apps from untrusted sources, and to not
check the box to allow that.

Developers, and that means mGov developers, should NEVER release apps
through other than the official store channel.

450
Module 12: Decompiling Android Apps

Security Architecture
Primary components
• All Applications must be signed by
the developer
• The Android package (.apk) is as-
signed a distinct Linux user ID
• Privileges enforced by Kernel us-
ing Linux user ID and group Id
• Permissions defined in Android-
Mainfest.xml
• Special capabilities based permis-
sions for URI access of Content
Providers

CONTENT
In addition, this ability to de-compile means that the attacker can reverse
engineer the API for your back end, plus he has running example code in the form
of the original app itself. This gives the attacker a huge head start on attacking
your back end.

And remember, a trojaned app usually compromises one user at a time. Attacking
the back end can yield ALL of the data it contains.

451
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Expose a real trojaned application.

CONTENT
Here is an example of a trojaned, or fake application in the wild.

Droid 09 masqueraded as banking application, but it was not.

It targeted several large banks, some, like First Tech Credit Union did not even
have a REAL banking application available, nontheless, users downloaded and
installed the app.

If you do not yet have a mobile app, you might want to make it apparent on your
traditional web site that you do not.

If you do have an app, make it clear that it is only available through the official
app store, and provide links.

452
Module 12: Decompiling Android Apps

Droid 09

• Masquerades as banking application

• Targeted many different medium to large sized

banks – Chase, Sun Trust, BB&T, and others

• First Tech Credit Union posted a warning on

its site about the issue, saying


“If you did download the Droid09 app, please remove it from your phone and take it to

your mobile provider to ensure it‟s completely removed”. It adds, “As a reminder, we

don‟t currently have an app for the Android phone.”

• Reference: http://www.theinquirer.net/inquirer/news/1585716/

fraud-hits-android-apps-market

453
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the ease with which an attacker can decompile your app and
gain access to your source code
2. Understand the implications:
a. Ability to Trojan apps
b. Ability to reverse engineer the back end APIs

CONTENT
Review the Objectives (re-read the slide).

454
Module 12: Decompiling Android Apps

Review of Objectives

• Understand the ease with which an attacker can decompile your

app and gain access to your source code.

• Understand the implications:

• Ability to Trojan apps.

• Ability to reverse engineer the back end APIs.

455
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

456
Module 12: Decompiling Android Apps

Quiz – Question 1

1. Decompilation of Android apps:


Select all that are correct:

a. Reveals the source code


b. Exposes the API for the back end
c. Facilitates building trojaned versions of the original app
d. Is so hard and time consuming that it is not a threat

457
End of Module
mGovernment 459
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications, Security

CONTENT
Code obfuscation techniques make it more difficult for an attacker to easily
decompile apps to readable source code.

GLOSSARY
Obfuscation: hiding of meaning, making code confusing, ambiguous, and
harder to interpret.

460
Module 13: Code Obfuscation

Code
Obfuscation

mGovernment 461
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
This module has these objectives:
1. Expose Obfuscation.
2. Explain the limits of obfuscation techniques.

CONTENT
Introduce the Objectives, (read the slide).

462
Module 13: Code Obfuscation

Objectives

• Expose Obfuscation.

• Understand the limits of obfuscation techniques.

463
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Overview the build process.
2. Overview the de-compilation process.

CONTENT
Access to source code and reverse engineering applications is ALWAYS an issue
from a security point of view.

All that really means is that the obscurity layer of the security is gone.

As the de-compilation example makes clear, the attacker will be able to read your
source code. He will find anything you have tried to “secure” by hiding it in the
code. While he will not see the source for your back end through this process, he
will see how the front end (the mobile application) communicates with the back
end, so at least that portion of your API will be exposed, with running example
code!

We cannot prevent this, but we can make it more difficult.

464
Module 13: Code Obfuscation

Is Decompilation of applications an Issue?

• Native apps introduce client-side code which, as HTML5 apps,

would be server-side, therefore hidden.

• Attackers can find vulnerabilities through source code analysis.

• Attackers can learn how the backend works by reviewing the native

app code.

465
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Define and explain obfuscation.

CONTENT
A lot of security, be it physical or information security, is about making things
more difficult or time consuming for the attacker. If we as the defenders can
make the target more difficult to attack, then perhaps we can deter the attacker,
or redirect him to a less well-defended target.

That is specifically what obfuscation does; it makes it more difficult (but not
impossible) to read the code.

We hope that the attacker, when faced with obfuscated code, will choose another
target.

466
Module 13: Code Obfuscation

Code Obfuscation

• A technique which rewrites the code into a style that is more

difficult to analyze and understand.

• Code Obfuscation creates a situation where an attacker must

spend more time, money, and resources to study the code.

467
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain the basics of a simple block of code.

CONTENT
This is a simple block of JavaScript. It‟s not Java like used in Android apps, but
it‟s related and close enough to serve as a simple example of some of the
obfuscation techniques.

Let‟s step through this block of code. Observe:


• It declares the variable error_level, and sets it to the value 4.
• The two comment styles, and the comments.
• The function declarations, and how one function calls the other.
• The first function has two arguements, and calls the second function.
• The second function has three arguements, but writes some specific text, and
uses some system calls.
• Language features like the reserved words, parentheses, brackets, semicolons,
etc., which cannot change.
• Style elements like carriage returns, hanging indents, coding conventions
which make it easier for the human to read.

468
Module 13: Code Obfuscation

Standard JavaScript

var error_level = 4; /* error level to show alerts for*/


function log_error(whereStr, msg){
log_common(3,"error:" + whereStr, msg);
//call common function
}

function log_common(lvl, whereStr, msg){


var buf = '<div class=logitem>' + new Date() +
whereStr + msg + '</div>';
if (lvl >= error_level)
alert(buf);
errlog.write(buf);
}

469
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Show and explain a trivial example of obfuscation.

CONTENT
This is functionally the same code block as on the previous slide, except that it
has been “minified” as described in the slide.

Note the reserved words (var function, etc), the numbers of arguments in the
functions, the fixes strings, and the system calls.

Compare with the previous slide and you will see that these two blocks of code
do exactly the same thing.

The machine can not tell the difference, will execute both, and produce the
same result.

The last statement is not strictly 100% accurate. Minification is commonly used
with Javascript to speed up execution. It contains less characters, so it will travel
from the server to the client (in this case a browser) more quickly, and when
received, it will parse and therefor execute more quickly for the same reason.

470
Module 13: Code Obfuscation

Minified JavaScript

var q=4;function y(a,b){x(3,”error:”+a,b);}function x(c,d,e){var f=‟<div

class=logitem>‟+new Date()+d+e+‟</div>‟;if(c>=q)alert(f);r.write(f);}

• Comments removed

• Unnecessary white-space removed

• Variables changed to shorter names

• Reference: https://en.wikipedia.org/wiki/Minification_%28pro-

gramming%29

SOURCES
https://en.wikipedia.org/wiki/Minification_%28programming%29

471
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Expose additional obfuscation techniques.

CONTENT
There are more powerful techniques which can be use to obfuscate code.

You have seen the simple level in the previous two slides.

Dead code injection involves inserting code blocks which are never called, or
which perform null operations.

Expressions and hex escapes which are easily parsed by the machine can be
extremely confusing to a human.

We‟ll look at the more complex expression substitutions in the next example.

Remember, and we will reinforce this in the next two slides, we are not making it
impossible for the attacker to transform the code back into something human
readable, we are just making it more difficult and time consuming.

472
Module 13: Code Obfuscation

Not all the Same

• Obfuscation potency, the level confusion to the reader.

• Simple – Minification (Removing code comments & white space,

changing variable names).

• Moderate – Dead code injection.

• Complex – Expressions, Hex escapes, etc.

• Obfuscation Resiliency

• How difficult it is to put the code back together?

• Remember mobile devices have limited resources and obfuscation

can create performance delays.

473
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

CONTENT
This is the same source block we started out with before.

Focus on the reserved words, and on the declaration of the variable error_level,
and setting it to 4.

474
Module 13: Code Obfuscation

Standard JavaScript

var error_level = 4; /* error level to show alerts for*/


function log_error(whereStr, msg){ log_common(3,"error:" +
whereStr, msg);
//call common function
}

function log_common(lvl, whereStr, msg){


var buf = '<div class=logitem>' + new Date() +
whereStr + msg + '</div>';
if (lvl >= error_level)
alert(buf);
errlog.write(buf);
}

475
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Demonstrate more advanced obfuscation techniques.

CONTENT
This is still readable, but much harder to understand.

Focusing on the reserved words in the language, we can see a variable declaration
in the first line (in red).

Instead of a readable variable name, or a single letter variable name, we now


have “zfafb4b3d80”. This could just as easily be MUCH longer.

The open and close parenthesis in that expression mean in this case “do some
math”

The math is: take the values “0x550” and add to it “1066”, then subtract “0x976)
0x550 and 0x976 are encoded in hexidecimal, 1066 in decimal. The machine
will convert:
0x550 1360
+1066

2426
0x976 - 2422

476
Module 13: Code Obfuscation

Very Obfuscated
• var zfafb4b3d80=(0x550+1066-0x976);function z9fe5826ce8(z0b-
f8c0e6c8,z26241da7c7){za56048cb23((0x1cf+6841-0x1c85),”\
x65\x72\x72\x6f\x72\x3a”+z0bf8c0e6c8,z26241da7c7);}
function za56048cb23(z26241da7c7,z3309f8f2aa,z2e4d-
4a9bbf){var z0bf8c0e6c8=”\x3c\x64\x69\x76\x20\x63\x6c\
x61\x73\x73\x3d\x6c\x6f\x67\x69\x74\x65\x6d\x3e”+new
Date()+z3309f8f2aa+z2e4d4a9bbf+”\x3c\x2f\x64\x69\x76\x3e-
”;if(z26241da7c7>=zfafb4b3d80){alert(z0bf8c0e6c8);}z9df02a65fb.
write(z0bf8c0e6c8);}

CONTENT
We can see with this first line that we are looking at functionally identical code.

Look deeper into the obfuscated code block and you will see additional reserved
words (function), and syntax elements.
This is much harder, but still not impossible to read.

Test Questions
1. Obfuscation makes it more difficult and time consuming, but not impossible,
for an attacker to read and understand source code.
Select one:
a) True
b) False

477
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Discuss obfuscation tools.

CONTENT
Strongly consider obfuscating your code, particularly if it is a sensitive application.

Tools are out there; google is your friend in locating them.

The CoDI will test your code to determine if you have obfuscated the source, and
recommends that you do.

478
Module 13: Code Obfuscation

Obfuscation Tools

• Automated tools to obfuscate code are available.

• Commercial.

• Free / Open.

• Google will help you find them.

• CoDI will test to see if you have obfuscated your source.

479
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Expose Obfuscation.
2. Understand the limits of obfuscation techniques.

CONTENT
Review the Objectives (re-read the slide).

480
Module 13: Code Obfuscation

Review of Objectives

• Expose Obfuscation.

• Understand the limits of obfuscation techniques.

481
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

482
Module 13: Code Obfuscation

Quiz – Question 1

1. Obfuscation makes it more difficult and time consuming, but not


impossible, for an attacker to read and understand source code.
Select one:

a. True
a. False

483
End of Module
mGovernment 485
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
Releasing the mobile application to various App Stores.

486
Module 14: SDLC – Phase 5 Implementation

SDLC – Phase 5
Implementation

mGovernment 487
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand Public and Private App Store differences.
2. Understand the different requirements between Public App Stores.
3. Understand the benefits of the UAE App Store.

CONTENT
Introduce the Objectives, (read the slide).

488
Module 14: SDLC – Phase 5 Implementation

Objectives

• Understand Public and Private App Store differences.

• Understand the different requirements between Public App Stores.

• Understand the benefits of the UAE App Store.

489
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. A general introduction to the purpose of SDLC Phase 5.

CONTENT
In this phase of the SDLC, we will be uploading the tested and approved
application to the mobile app stores for users to download.

490
Module 14: SDLC – Phase 5 Implementation

SDLC – Phase 5 – Implementation

491
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the concept of Public vs Private App Stores.

CONTENT
When most people think of App Stores, they think of the more commonly known
“public” App Stores. However, there are also “private” App Stores, which allow
people to list applications according to their own private criteria. The United
Arab Emirates government has pursued this, and published their own private
App Store.

GLOSSARY
Public App Store: An app store that is available to anyone with a device
designed to access the store (e.g., iPhone to Apple App Store will work, iPhone
to Google Play Store will not).
Private App Store: An app store that restricts its availability and contents to a
certain group of people (e.g., a company or government entity private app store
which lists only approved and/or official apps).

492
Module 14: SDLC – Phase 5 Implementation

App Store Requirements

Public App Private App


Stores Stores

493
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce some of Apple‟s requirements for mobile apps.

CONTENT
Apple maintains very tight control over the apps that are approved for listing in
their App Store. As a result, they have very strict policies for applications and
developers.

Developers must submit their applications using a certificate that has been
provided by Apple. Attempts to submit apps that are signed by other certificates
will be rejected – this helps to validate the identity of the developer that
developed a submitted application.

Because of Apple‟s thorough review process, submitted applications can take


over a week to be approved or rejected.

494
Module 14: SDLC – Phase 5 Implementation

Apple‟s Requirements

• Apps can only be installed from the App Store

• Must have a developers account and signed NDA

• USD$99/year

• Each app is digitally signed by a certificate that has been provided

by Apple

• Each app is evaluated by Apple against multiple criteria, and could

take 1 – 3 weeks for a decision to be made.

• Further information about Apple‟s review process can be found

here:

https://developer.apple.com/appstore/resources/approval/guidelines.

html

https://developer.apple.com/app-store/review/rejections/

495
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce some of Google‟s requirements for mobile apps.

CONTENT
Google, on the other hand, has a very loose control over the apps listed in the
Google Play Store.

Developers must sign the application being submitted, but the key can come
from anywhere. This means that someone can register for a developer account
with Google using someone else‟s name, and submit a certificate that contains
that identity.

Because Google does not conduct nearly as thorough of an application review as


Apple, most applications are approved or rejected within about one day.

496
Module 14: SDLC – Phase 5 Implementation

Google‟s Requirements

• Apps can come from anywhere – not just the Google (Android) Play

Store.

• Must have a Google account and signed NDA

• USD$25/year

• Apps must be signed by a key, but the key can come from

anywhere

• Google Play Store apps are reviewed by Google, and usually

available in 1 – 3 days

• Information about the Google Play Store submission process can

be found here:

https://developer.android.com/distribute/tools/launch-checklist.html

497
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Introduce the UAE App Store.

CONTENT
Private App Stores allow individuals or organizations to specifically identify
applications that they recognize, support or otherwise endorse for use. The
government of the United Arab Emirates embraced this capability and created
the UAE App Store.

Aside from being the world‟s first government App Store, the UAE App Store
serves as a single resource of identifying and obtaining official government
mobile applications – this helps prevent people from accidentally downloading a
similar, potentially fraudulent application.

498
Module 14: SDLC – Phase 5 Implementation

UAE App Store

• Creates a consolidated, single trusted source for the public to verify

official government apps.

• Markets new, official government apps.

499
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Further information about the UAE App Store.

CONTENT
Mobile users can also rest assured that the mobile applications listed in the UAE
App Store have been subjected to, and passed, a battery of testing conducted
by the UAE Telecommunications Regulatory Authority. Other major benefits of
the UAE App Store are listed, and will continue to grow as the TRA continues to
improve upon the UAE App Store into the future.

500
Module 14: SDLC – Phase 5 Implementation

UAE App Store

• Listed apps have passed TRA application testing.

• Other benefits:

• Full Arabic language support.

• Sorts apps list based on your location.

• Searches filtered to only official UAE apps.

• Push notifications inform users of new apps.

501
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Illustrate the UAE App Store is available for Android, iOS, and coming soon
for Windows Phone.

CONTENT
Content:As of mid-2014, the UAE App Store is available for iOS, and Android, with
Windows Phone support coming soon.

502
Module 14: SDLC – Phase 5 Implementation

UAE App Store

http://apps.gov.ae/

503
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand Public and Private App Store differences.
2. Understand the different requirements between Public App Stores.
3. Understand the benefits of the UAE App Store.

CONTENT
Review the Objectives (re-read the slide).

504
Module 14: SDLC – Phase 5 Implementation

Review

• Objectives

• Public App Stores are open to the public, and only restricted

by device type (e.g.: only iOS devices can download from the

Apple App Store), but Private App Stores are controlled by other

organizations, and can restrict what apps they allow to be listed in

their app stores.

• Not all platforms have the same requirements. Apple, for example,

will conduct more testing of uploaded apps than Google.

• The UAE App Store (a Private App Store) allows the UAE

Government to select, market and endorse official UAE Government

mobile apps.

505
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

506
Module 14: SDLC – Phase 5 Implementation

Quiz – Question 1

1. Apple (iOS) and Google (Android) have the same evaluation criteria
for mobile applications.

a. True
b. False

Quiz – Question 2

2. What are the benefits of the UAE App Store?

a. Easy to identify official government apps


b. New government apps can be found there
c. Apps are organized by Emirate
d. Apps offer full Arabic language support
e. All of the above

507
End of Module
mGovernment 509
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

THEMES
• Applications.

CONTENT
To understand how to support a published application, gather feedback, and
prepare for the next round of improvements.

510
Module 15: SDLC – Phase 6 Maintenance

SDLC – Phase 6
Maintenance

mGovernment 511
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the different ways to evaluate the success of a mobile
application
2. Understand how this information influences Phase 1 of the next SDLC
iteration

CONTENT
Introduce the Objectives, (read the slide).

512
Module 15: SDLC – Phase 6 Maintenance

Introduction

• Understand the different ways to evaluate the success of a mobile

application.

• Understand how this information influences Phase 1 of the next

SDLC iteration.

513
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. A general introduction to the purpose of SDLC Phase 6.

CONTENT
In this phase of the SDLC, the application has been made available to the public
and feedback is being collected. This feedback will be used to help determine
what improvements to make to the application in the future.

514
Module 15: SDLC – Phase 6 Maintenance

SDLC – Phase 6 – Maintenance

515
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Begin discussion of some of the decisions that will be reached in Phase 1.

CONTENT
Without being able to measure something, we cannot control it. Unless we
understand how we are going to measure the success of the mobile application,
we have no ability to understand if it is meeting the goals we hoped to accomplish
with it.

In order to measure the success of our application, and improve upon it in the
future, we have a few tools at our disposal that we will be discussing.

516
Module 15: SDLC – Phase 6 Maintenance

Maintenance = Measurement

• “If you cannot measure it, you cannot control it”.

• Measuring the success of an application.

• Reviews

• Metrics

• Analytics

• Reporting

517
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain the benefits of application reviews, but also the caution that must be
exercised when considering them.

CONTENT
One source of feedback from application users are the reviews that they will post
on the app store. However we must be careful how much weight we give these
reviews.

For example – If you went to a brand-new restaurant with your family, and you
thought that the food was delicious, the prices were cheap, the staff was friendly,
and the atmosphere was welcoming. How many people do you think you would
tell about your experience at this restaurant? Now consider that you went to
another new restaurant, but the food was terrible, the prices were high, the staff
was rude, and the atmosphere was very confrontational. How many people do
you think you would tell about your experience at this other restaurant? Across
all cultures and all nations, just about everybody would tell more people to avoid
the second restaurant then they would tell people to go to the first one.

Mobile application reviews work on the same principle. Most people will not
spend their time writing a good review for your application, but they will spend
time writing a bad review of your application. If people want to complain, they
want to say many things. If people want to say you did a good job, the feedback
is not nearly as long. This means that most written reviews will have a tendency
to lean towards the negative.

518
Module 15: SDLC – Phase 6 Maintenance

Application Reviews

• User reviews are good to evaluate, but they often lean towards the

negative.

• Most people will not want to provide review/feedback.

• Most written reviews will lean negative.

• Most star ratings will lean positive.

• All reviews (good or bad) are meaningless unless they mention

specific, measurable, repeatable, factual matters.

• Avoid opinionated reviews without specifics.

• Ignore reviews without any useful, specific information.

• Beware positive reviews which sound phony/purchased.

CONTENT
Unless there are common trends in the reviews that can be tested and replicated
to identify any reported problems, any feedback which is heavily opinionated
(such as “I don‟t like the background color”) should not be heavily evaluated or
considered for the next update.

519
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain what application metrics mean, and how important they are (or are
not) to evaluating the application‟s success.

CONTENT
There are some very basic metrics that are provided when an application is
available on App Store for download. One simple example of this would be the
number of times that application has been downloaded. Many government
entities, businesses, and even private individual developers love to boast and
to brag about the number of downloads their application has on app store.
However, the number of downloads is not a good metric to evaluate the success
of an application. Although the number of downloads are tracked, the number
of uninstallations is not. An application may have 10,000 downloads, but there
is no metric to establish if 10,000 downloads did not result in 10,000 immediate
uninstallations.

Related to the downloaded metric though, we can use this metric to get
useful information by comparing it to past downloads. This can be a measure
of application growth, and retention. Returning to the earlier example of the
number of downloads that an application has received, suppose version 1.1 of an
application receives 10,000 downloads, and three months later when version 1.2
is released there are 3000 downloads of the newer version. As further updates
are released in the future, we can see how our downloads change with each new
version, and analyze these metric changes to identify major app changes that
could have triggered these changes.

520
Module 15: SDLC – Phase 6 Maintenance

Gathering Metrics

• Downloads.

• More downloads means more success, right?

• Maybe. Downloads are tracked but uninstalls are not.

• Retention.

• Release updates on a regular basis to retain users.

• Download differences will indicate retention levels.

• Engagement.

• Is your application being used on a regular basis?

• Depending on what service you offer, should it?

• Low engagement does not indicate low interest if your app is based.

on “as-needed” services.

521
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain the criticality of analytics, and why this form of feedback is the most
reliable data you can consider.

CONTENT
Application analytics are the best source of data you can collect when determining
how to make a change for future improvements. Analytics is the collection of
data, pure un-opinionated data that does not prompt the user for any input,
which reflects a user‟s preferences when using an application.

For example: if we were to ask a user “How long are you willing to wait for a
response to a request when using our application?” To feedback we received
is likely subjective, and altered based on what the user wishes to communicate.
Some may say “five minutes” to avoid appearing rude, but the reality would be
more like five seconds.

Analytics capture this information. How long does it take for a page to load? How
long does a user use the application? Which services provided by the application
does the user use most? How many times has the user begun the process on
the application, but then abandoned it? This is information that will help you
understand if the user is enjoying your application or not. It is information that
will help you understand where you need to improve your application, and where
you might be able to expand the services that your application offers these users.
We do not ask the users for this information either in person or on the application
– we collect it all as the user is interacting with our application.

522
Module 15: SDLC – Phase 6 Maintenance

Collecting Analytics

• Analytics can be collected through custom designed methods or

commercial methods.

• Your own custom code, your own backend.

• Google Analytics.

• Collect all application usage data possible, even if you cannot think

of a potential use for it.

• It‟s better to have data you don‟t need, than to need data you don‟t

have.

GLOSSARY
Analytics: The discovery and communication of meaningful patterns in data.
Especially valuable in areas rich with recorded information, analytics relies
on the simultaneous application of statistics, computer programming and
operations research to quantify performance.

523
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Explain how all these sources of feedback can be connected to each other
and used to report on the success of the application, which will influence
what improvements should be considered and implemented in future
releases

CONTENT
All of the data we collected through various sources is helpful, but we need to put
it into context before we can do anything with it. Combining this data together
helps transform it into information – information that can be used to understand
the application as it currently exists.

By analyzing this and building a report, we elevate to a level of knowledge,


where we can that link the collected information to the goals and milestones we
established for the application. This will help us determine what changes could
be made to improve the current application.

524
Module 15: SDLC – Phase 6 Maintenance

Utilization Reporting

• Management always wants to know – “Is this worth the time and

money we have invested?”

• Collecting all the metrics, feedback and analytics possible helps to

build performance reports.

• You never know what data you‟ll need in the future – this is why

you collect all the data you can.

• Reporting helps to identify utilization trends and changes.

• This data helps shape the next step in the SDLC – Requirements

Analysis.

525
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Drive the point home that the SDLC is cyclical – that Phase 6 is not the end,
but feeds back into Phase 1 for another iteration.

CONTENT
The report that we‟ve created is then assessed, discussed, and evaluated.
New goals and milestones are established for improvements to the existing
application, which means we have returned to SDLC Phase 1, Requirements
Analysis, to initiate another round of application development!

526
Module 15: SDLC – Phase 6 Maintenance

The Cycle Continues!

527
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

LEARNING OBJECTIVES
1. Understand the different ways to evaluate the success of a mobile
application
2. Understand how this information influences Phase 1 of the next SDLC
iteration .

CONTENT
Review the Objectives (re-read the slide).

528
Module 15: SDLC – Phase 6 Maintenance

Review

• Objectives

• While metrics, such as the number of times an application has been

downloaded, appear to be attractive way to measure application

success, it only gives one small piece of data. Further information

should be collected from numerous sources and assessed to

measure the true success of the mobile application.

• Determining the successfulness of the mobile application helps

define what the focus should be for the next SDLC cycle, so those

improvements can be declared and defined in Phase 1, which

immediately follows this one.

529
Mobile Application Developers: Essentials of Design & Strategy for
mGov Growth / Instructor Guide

QUIZ

It is now time to review


your knowledge
of this material

Quiz – Question 1

1. Which of these feedback sources will give you the least opinionated
data to evaluate?

a. Reviews(false)
b. Metrics
c. Analytics

530
Module 15: SDLC – Phase 6 Maintenance

Quiz – Question 2

2. What data should your analytics tool capture?

a. Only what is needed right now


b. Only data that will make the app look good
c. As much usage data as possible(correct)
d. Analytics tools should not be used at all

Quiz – Question 3

3. How does this phase help the next SDLC iteration?

a. It helps us understand what scope we should establish in


Phase 1.
b. It gives feedback on what to redesign in Phase 2.
c. It identifies where we should improve the code in Phase 3 for
faster performance.
d. All of the above.(correct)

531
End of Book

You might also like