MOBILE APPLICATIONS AND CLOUD COMPUTING ...beraldi/MACC/01_Introduction_OK...Data X Pattern: Model View View (MVVM) Binding makes data and view synchronized Any change in the data

9/24/19

1

MOBILE APPLICATIONS AND CLOUD COMPUTINGRoberto Beraldi

Course Outline

Mobile Application Cloud Computing

Android iOS

≈70 % ≈ 30 %

TOPIC

Exam

Written part

Course homepage: http://www.diag.uniroma1.it/~beraldi/MACC

Project(1 or 2 students)

0.3

0.7

Design Use

Weig

ht

9/24/19

2

More about your project

Cloud provider

Your cloud service

Concurrency(multithreading)

Responsive UI

Multiusers

Sensors (and position)

Use of a cloud service (we—api)

Data consistency

Authentication

Web-api provider

CRUD interface

Security aspects

Project on gitHub

Functional decomposition of a generic app• User Interaction:

• occurs mostly through GUI (gestures, …)• or other channels (vibration, notification)

UI

BUSINESSLOGIC • What the application ‘does’

DATA • How data are stored and managed

Tier

(or l

evel

)

9/24/19

3

Deploy architecture: how to map a three-tier architecture (tieràdevice)• Presentation tier à {M} M=Mobile, C=Cloud• Business logic à {M,C}• Data tier à {M,C}

PRESENTATION

BUSINESS

DATA

phon

e

[M,M,M]

PRESENTATION

BUSINESS

DATAclou

dph

one

[M,M,C]cl

oud

phon

e

PRESENTATION

BUSINESS

DATA

DATA

[M,M,M|C]

Deploy architecture: how to map a three-tier architecture (tieràdevice)

• Apps may strongly rely on a set of ‘services’ running remotely

PRESENTATION

BUSINESS

DATA

[M,C,C]

PRESENTATION

BUSINESS (C)

DATA

BUSINESS (S)

[M,M/C,C]

9/24/19

4

Mashup

G B1

SMARTPHONE

B3

B4

D

B2

DB2

D

An example

-Wheatear Underground-Dropbox-Flicker

GUI

-Firebase-GAE …

-Google Maps

May

be

Stro

ngly

Inte

grat

ed in

IDE

Web

API

, WS

(may

pro

vide

s SD

K)

Backend

MB

-as-

a-Se

rvic

e(p

ush

notif

actio

n, m

essa

ges,

etc

AuthenticationService-Facebook (e.g, Oauth)

Frontend

9/24/19

5

Another example

GUI

-Cloud9-Heroku..

PaaS

& S

aaS

(writ

e yo

ur O

wn

API)

Mashup App

Backend

Web

API

, RES

Tful

l WS

Storage

Frontend

Example: using a ‘smart object’

Connect to configure

Object search for a wifi SSID

9/24/19

6

Example: using a ‘smart object’

Logical communicationE.g. Send commands

Public internet

Example: using ‘smart objects’

NAT/PATPublic network

Private network

NameàIP

Dynamic DNS

9/24/19

7

Example

Configure

Commands

Citzens of internet

INTERNET

Things(Consumer IoT)

9/24/19

8

Fog Computing

What is next?

100 ms

Bandwidth

Automated driving(<5ms)

Tactile Internet (>1Gbps,<1ms,99,999%)

10 Gbps

RTT

1 ms

ReliabilitySecurity

Mbps

Industry 4.0Mbps,<10ms,99,999%)

Content Delivery

9/24/19

9

Some popular technologies

Front-end

Back-end

Kotlintitanium

Some popular technologies

CloudServiceWeb-API

Front-end

Back-end

Storage

9/24/19

10

Deploy architecture• An App can be composed of different services access via

a standard protocol

• One widely used solution is to expose them as services accessed via a standard interface (e.g., REST) and supporting CRUD operations

Example of an interface for a chess game

Web API

(cloud)

init

• Send the current state

• Reply with the new state

Interface (remote functions)

backendfront end

move

Presentation (View) +Controller

Business logic + data

9/24/19

11

Design patterns• The design and implementation of an application is

achieved following some design pattern

• The main goal of a pattern is guide the software structure (architecture) in order to reach (among other goals) a high degree of flexibility (change or add functionality) and software testability (e.g. unit test)

• To this end, a patterns aims at organizing software in components that are loosely coupled (independent), so that the change in one component doesn’t affect other components

Model View Controller (MVC)Model View Controller

Presentation X

Business X X

Data X

• Business logic is not confined in one place

• Model and view are coupled

9/24/19

12

Patterns: MVC and MVP

MVP (Presenter): Model and View cannot communicateImproves testability and flexibility (change/add code)[MVC maybe fine for simple apps]

Model View Controller Presentation X

Business X

Data X

Pattern: Model View View (MVVM)

Binding makes data and view synchronizedAny change in the data is notified to the view by the ViewModelGood abstraction for Event driven programming

9/24/19

13

Example of MVVM in android

MVVM has strong support via jetpack MVC can still be used for small app

Example: MVC in iOS

9/24/19

14

The role of framework

• A software ‘framework’ surronds the application software

APPLICATION (SW YOU WRITE)MVC MVVM

An example

Framework

SW components

UISW you write

loop

deliver

create

onCreate

9/24/19

15

Android framework

iOS framework

9/24/19

16

Mobile app classification• Web-site for mobile devices:

• deliver web content to mobile devices, using web site style navigation

• Mobile Web: • web application that mimics native apps look and feel as well as

navigation

• [Andorid|iOS] Native:• Applications installed on the devices, purched from app stores

• Hybrid:• Mix web and native applications

• Native:• C/C++

Why so many options, how to decide?• Complexity of the app• Productivity• Cross-platform • Quality of Experience• Testability • Performance • Accessible features

See: https://www.mrc-productivity.com/blog/2016/06/the-mobile-app-comparison-chart-hybrid-vs-native-vs-mobile-web/

9/24/19

17

How to ‘create’ a mobile app?• To develop a mobile app, one can use methodologies from software

engineering• The ‘agile’ methodology is one possible well established method

• Many agile frameworks exit, e.g., Scrum• The entire framework is studied in SE

Behaviour Driven Design, aka BDD• A well established starting point is to define a storyboard

• This allows to elicit functional requirements (through user stories)

• Wireframe can be used

9/24/19

18

User stories • User stories are a set of short descriptions about what the

a user can do with the application• An application is composed of many US

• A single user story is a narrative description of a single feature. It has the following structure

• As a <role>, I want <desire> so that <benefit/goal>

User stories (example)• As a user, I want to change the color used by the current

drawing tool so that it only affects the next use of that tool

• As a movie fan, I want to add a movie to the current list of movies, so that I can share comments with other fans

9/24/19

19

User stories and screens• A user story should be small enough to be represented by

a single screen

Storyboard à Navigation flow• Set of screens and their relationship

Screen 1

Touch a button

Screen 2

9/24/19

20

A complete example• Goal of the application: share the parking place of a family

car, so that each user can know the position of the car

User stories (example)• US1: I want to login in the app, so that only authorized users

can use the app

• US2: As an authenticated user, I want to store the position of the car on a map, so that another user can later locate the car on the map

• US3: As an authenticated user, I want to know the position of the current car, so that I can pick it

• US4: As an authenticated user, I want to set the state of the car as busy or available, so that other users can know its current state

9/24/19

21

Mapping US1

Login

• US1: I want to login in the app, so that only authorized users can use the app

Mapping US2

Park here

• US2: As an authenticated user, I want to store the position of the car on a map, so that another user can later locate the car on the map

9/24/19

22

Mapping US3

• US3: As an authenticated user, I want to know the position of the current car, so that I can pick it

Mapping US4

• US4: As an authenticated user, I want to set the state of the car as busy or available, so that other users can know its current state

BUSY

9/24/19

23

Login

Storyboard

park

busy

Park here

Select a function

ERROR

Select

Status

Set status

Storyboard

9/24/19

24

Storyboard

LOGIN ERROR!

Storyboard

Select

Status

Park here

9/24/19

25

Storyboard

Storyboard

busy

9/24/19

26

User navigation flow

Splashscreen

MainScreen Screen1

Screen2

…..

Example of storyboard for iOS

9/24/19

27

Example of storyboard in Android

The storyboard facility was recently added to Android Studio and it is part of the Jetpack library

1 destination2 action

QUESTIONS?

9/24/19

28

Smartphone and application usage

• # people 7.6 billion• # phones = 0.34 x 7.6 = 22,25• # download = 205.4 billion • # download per user per year

= 9.2• # new installations per month

per user < 1

Why mobile app are different from desktop

• Average number of installed applications ≅ 35 • Percentage of apps used per day ≅ 26 %• Very easy to install an application

• Crash (no second change)• Bad UX (User eXperience)• Slow

• Design UI is important• No Bugs (virtually impossible) à TESTING

9/24/19

29

Smartphone market

Worldwide Mobile web traffic share

Source: www.statista.comhttp://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

9/24/19

30

Smarthone operating systems

Duopoly• Android (Google)

• Android Open Source Project (AOSP)• New versions lead by Google

• Producers customize the new versions to their device• May take a while

• Many marketplaces

• iOS (Apple)• Single official source• Single marketplace

9/24/19

31

FragmentationAndroid

8.0àOreo

iOS11 à64 bit

Available apps (iOS vs Android)

9/24/19

32

Application publishers

Source: appAnnie

App categories

App in May 2018. 33 categories in Google Play, 24 in Apple’s App store

9/24/19

33

Installing an app• Average number of installed applications ≅ 36• Percentage of apps used per day ≅ 26 %

Souce: think with Google 2015

Why apps do have success?• Solve a problem (do something with less effort)

• Focused on a real problem • Have fun

• Provide Sense of achievement-engagment• GAMIFICATION

9/24/19

34

Why apps do not have success?• App performance issues:

• Long load times• Long registration processes• Features that are difficult to access

• Bad user experience:• UI depends and navigation may depend on the the

platform: • swipe gestures, back-button, etc.

• Improper testing• A user will hardly give a second change to an app that

crashes

QUESTIONS?