mobile applications and cloud computingberaldi/macc_20/01_introduction_ok_2020.pdf · 9/24/19 10...
TRANSCRIPT
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?