Module 6: Mobile

Application for IoT

WIJDAN SKILLS ENTERPRISE 1

MODULE OUTLINE
MODULE 6.4
MODULE 6.2 Data Visualization for
6.1 Designing
Mobile Apps
6.3 Mobile Apps

Layout

MODULE 6.1 MODULE 6.3

6.2
6.4
IoT Data
Introduction to Storage for
Mobile Apps Mobile Apps
Development

WIJDAN SKILLS ENTERPRISE 2

6.1
Introduction to
Mobile Apps
Development
• What is Mobile Devices?
• Evolution of Mobile Devices
• Architecture of Mobile Devices
• Types of Mobile Platforms
• Mobile Devices and IoT

WIJDAN SKILLS ENTERPRISE 3

 Introduction to Mobile Apps
6.1 Development

6.1.1 What is Mobile Devices

• The telephone is without a doubt the greatest
invention for mankind.

• It changes the way we communicate and share

information or ideas across great distances.

• It brings us closer without having to physically

meet.

• In fact, the most defining technologies of the

twentieth century and widely used electronic
device is the telephone.

WIJDAN SKILLS ENTERPRISE 4

 Introduction to Mobile Apps
6.1 Development
6.1.1 What is Mobile Devices?

• Mobile devices are handheld computing devices that are small and
portable. Typically, these devices have a display screen for user output
and a miniature keyboard and/or a touch screen for user input.

• These devices can be equipped with Bluetooth, GSM, Wi-Fi, and GPS
capabilities that allow user to communicate, access and/or share data
and information at any place and/or any time.

• Also, it is worth noting that mobile devices are becoming more like our
personal computers.

WIJDAN SKILLS ENTERPRISE 5

 Introduction to Mobile Apps
6.1 Development
6.1.1 What is Mobile Devices?

• It is difficult to shift our perception that our mobile devices are capable of replacing
personal computers.

• The mobile industry of today are rapidly enhancing the functionality of our mobile
devices and these devices are functioning more than just communicating from one end
to another. There conflicting interest on each side of the mobile industry.

• First, the telecom infrastructure, required for everything to work but only focused on the
network (i.e. 2g, 3g, 4g and 5g). Second, focused on how and when we interact with the
network. Third, the context of how we are incorporating these devices into our daily
activities (Siri, Cortana and Google Assistant).

WIJDAN SKILLS ENTERPRISE 6

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Brick Era

• This era is around the year 1973 – 1988

• Figure shows the Motorola DynaTAC that were introduced
in 1983.
• DynaTAC was an abbreviation of Dynamic Adaptive Total Area
Coverage.
• Motorola discontinued the DynaTAC in the late 1994.
• The Brick Era requires enormous batteries to get power
needed to reach the nearest cellular network site.
• The Brick Era phones were commonly used by stockbroker,
salespeople or real estate agents.

WIJDAN SKILLS ENTERPRISE 7

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Candy Bar Era

• The second era which the Candy Bar Era started around the
year 1988 – 1998
• The network shifted to second-generation (2G) technology,
starting in Finland in 1991.
• The density of cellular sites caused by increased usage
decreased the power demands of the device, making it small
enough to fit in your pocket.
• The 2G GSM (Global System for Mobile communications)
networks included the SMS (Short Message Service)
capabilities.

WIJDAN SKILLS ENTERPRISE 8

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Feature Phone Era

• The Feature Phone Era started around the year 1998 – 2008.
• Before, mobile phones are capable of three things; make voice calls, send
text messages and play Snake game.
• The Motorola RAZR was probably the most iconic device from the Feature
Phone Era.
• In this era, there are variety of applications and services were introduced
on the phone such as listening to music and taking photos and introduced
the use of the Internet on a phone.
• During this era, GSM network providers added GPRS (General Packet
Radio Service), allowing packet-switched data services.
• This network evolution is most often referred to as 2.5G, or halfway
between 2G and 3G networks.
• Also, camera were introduced into the higher-end feature phones.
WIJDAN SKILLS ENTERPRISE 9
 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Smartphone Era

• The Smartphone Era occurred at the same time as the third and
fifth eras and spans from around 2002 to the present.
• Smartphones are distinctive in that:
• use a common operating system
• a larger screen size
• a QWERTY keyboard or stylus for input
• Wi-Fi or another form of high-speed wireless connectivity.

WIJDAN SKILLS ENTERPRISE 10

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Touch Era

• On the morning of January 9, 2007, Steve Jobs went onstage at

the MacWorld conference in San Francisco to usher in the fifth
and final era and to change the mobile world. He introduced
the world to the iPhone.
• The iPhone were equipped with 3G/3GS technology.
• The iPhone 3G had the ability to purchase and load
applications onto the iPhone through the iTunes Apps Store.
• The introduction to iPhone 3G were revolutionary.
• The usage of internet skyrocketed and more company are
making their presence available over the internet

WIJDAN SKILLS ENTERPRISE 11

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

The Superfast Wold Era

• In May 2019, the EE network launched the UK’s first 5G service

in 6 cities.
• The fifth generation network promises vastly superior data
speeds and reliability, boosting ultra-high resolution for video
streamlining and mobile gaming.
• Chipsets are getting faster to cope with the mobile gaming era
and as well as mobile photography.
• Storage are also getting larger.

WIJDAN SKILLS ENTERPRISE 12

 Introduction to Mobile Apps
6.1 Development
6.1.2 Evolution of Mobile Devices

• Back then, most of the computing power belongs to the computer but now
thanks to powerful chipset, our phones have the capability of computing
and rendering high resolution video and games.
• It changes how we perceived our mobile phones.
• We no longer need to reach for a computer to write a report, to start a
conference meeting, to make a purchase at the grocery store (e-wallet) or
even to date someone.
• Literally, everything is at the tip of our fingers.

WIJDAN SKILLS ENTERPRISE 13

 Introduction to Mobile Apps
6.1 Development
6.1.3 Architecture of Mobile Devices
Anatomy of a Smartphone System on Chip
• A system on a chip, also known
as an SoC, is essentially an
integrated circuit or an IC that
takes a single platform and
integrates an entire electronic or
computer system onto it.
• It is, exactly as its name
suggests, an entire system on a
single chip.
• The components that an SoC
generally looks to incorporate
within itself include a central
processing unit, input and
output ports, internal memory, System on Chip (SoC)
as well as analog input and
output blocks among other
things.

WIJDAN SKILLS ENTERPRISE 14

 Introduction to Mobile Apps
6.1 Development
6.1.4 Types of Mobile Platforms – Operating System

Before Android OS and iOS, there are…

WIJDAN SKILLS ENTERPRISE 15

 Introduction to Mobile Apps
6.1 Development
6.1.4 Types of Mobile Platforms – Operating System

Then, we have the ultimate battle of the mobile OS between…

VS

WIJDAN SKILLS ENTERPRISE 16

 Introduction to Mobile Apps
6.1 Development
6.1.4 Types of Mobile Platforms – Android OS

What is Android?

• Mobile operating system based on Linux

Kernel.
• User Interface for touch screens.
• Used on over 80% of all Smartphones.
• Powers devices such as watches, TVs and cars.
• Open source.

WIJDAN SKILLS ENTERPRISE 17

 Introduction to Mobile Apps
6.1 Development
6.1.4 Types of Mobile Platforms – Android OS Flavours

Funtouch OS
based on Android

WIJDAN SKILLS ENTERPRISE 18

 Introduction to Mobile Apps
6.1 Development
6.1.5 Mobile Devices and IoT

Connectivity in a Smartphone Integration of a Smartphone in IoT application

connectivity and
data protocols

WIJDAN SKILLS ENTERPRISE 19

 Introduction to Mobile Apps
6.1 Development
6.1.5 Mobile Devices and IoT

• Since mobile phone have the

capability of accessing the
internet, it possible for IoT
devices to share the data
collected by the sensors to
mobile applications.
• Mobile devices are used to
monitor as well as control
the condition of the IoT
devices.

WIJDAN SKILLS ENTERPRISE 20

QUICK RECAP!

1. When was the first mobile telephone

were introduced?
2. What is the main difference between 2G
and 3G?
3. Why do you think there are so many
Android flavours/derivitives?

WIJDAN SKILLS ENTERPRISE 21

6.2
Designing Mobile
Apps Layout
• How to start designing your mobile apps?
• UI and UX in Mobile Layout
• Importance of Designing Mobile Apps Layout

WIJDAN SKILLS ENTERPRISE 22

 6.2 Designing Mobile Apps Layout
6.2.1 How to start designing your mobile apps?

• Before you can start on developing and

designing and android apps, you have to
decide on which platform that you want your
user to use your applications.
• If you decided to develop a native
application, you are recommended to
develop the apps in a native environment.
• Whereas if you decided to develop a mobile
web apps, then it is recommended to
develop your app in a responsive
environment since different phone are
different in dimension.

WIJDAN SKILLS ENTERPRISE 23

 Introduction to Mobile Apps
6.1 Development
6.2.1 How to start designing your mobile apps?

Native Apps vs Web Apps

• A Native App is an app • A Web App, on the
developed essentially other hand, are
for one particular basically
mobile device and is Internet-enabled apps
installed directly onto that are accessible via
the device itself. the mobile device’s
• Users of native apps Web browser.
usually download them • They need not be
via app stores online downloaded onto the
or the app user’s mobile device in
marketplace, such as order to be accessed.
the Apple App Store, The Safari browser is a
the Google Play store good example of a
and so on mobile Web app.

WIJDAN SKILLS ENTERPRISE 24

6.2 Designing Mobile Apps Layout
6.2.1 How to start designing your mobile apps?

• In cross platform architecture using Hybrid method

(Hybrid Apps), the application is written using web
technologies like HTML5, JavaScript and CSS but
run inside the mobile platform native shell.

• Hybrid apps use a web control/web app template to

present the web UI so that it can be coded in web
technologies.

WIJDAN SKILLS ENTERPRISE 25

 6.2 Designing Mobile Apps Layout
6.2.1 How to start designing your mobile apps?
If you decided to develop mobile apps in a native environment, you can use Android Studio to develop an
Android app or Xcode to develop an iOS app respectively. Commonly, to develop an android app, you’ll
need a prior knowledge of programming language called Java. Whereas to develop an iOS app, you’ll need
to code it in Objective-C or Swift.

develop Android apps

Android
Studio

develop iOS apps

Xcode

WIJDAN SKILLS ENTERPRISE 26

 6.2 Designing Mobile Apps Layout
6.2.1 How to start designing your mobile apps?
Or alternatively, you can develop both app at the same time using a cross platform Android and iOS app
development software such as Apache Cordova, Adobe PhoneGap, Qt and apppcelerator. The cross platform
apps development software develop apps in HTML, CSS and Javascript.

develop Android apps

and iOS apps

appcelerat
WIJDAN SKILLS ENTERPRISE
or 27
 6.2 Designing Mobile Apps Layout
6.2.1 How to start designing your mobile apps?
Or if you have no programming background, you can still develop an Android apps using MIT App Inventor,
Kodular and Thunkable. It is a drag and drop mobile app developer.

Kodular
develop mobile apps

WIJDAN SKILLS ENTERPRISE 28

 6.2 Designing Mobile Apps Layout
6.2.2 UI and UX in Mobile Layout

• UI is the abbreviation for User Interface, whereas UX stands for User

Experience.
• UI is the layout which the user sees and where the user interact.
• UX is the whole experience of using the application. The intuitive
gesture and design plays an important role in deciding whether your
application will succeed or fail miserably.
• As mention previously, if you have decided on the developing your mobile
apps in a native environment, all the gestures and icons are native to the
phone.
• That is why when you compared the same app in an Android OS and iOS,
you will be presented with a slight different in terms of interface and
gestures/experience.

WIJDAN SKILLS ENTERPRISE 29

 6.2 Designing Mobile Apps Layout
6.2.2 UI and UX in Mobile Layout

Example of native UI and UX in Apple iOS. The user interface are responsive to
the user gesture. For example, swipe left and right for choosing and swipe up and
tap for further information.

https://www.behance.net/gallery/82963291/Mobile-UI-UX-and-Animation-Design
https://www.behance.net/gallery/82963291/Mobile-UI-UX-and-Animation-Design

WIJDAN SKILLS ENTERPRISE 30

 6.2 Designing Mobile Apps Layout
6.2.3 Importance of Designing Mobile Apps Layout

As a Malaysian, we love to dip our fries with sauce or with any fried food actually.
It is a match made in heaven…

WIJDAN SKILLS ENTERPRISE 31

 6.2 Designing Mobile Apps Layout
6.2.3 Importance of Designing Mobile Apps Layout

But… most of the time we spend pouring the

sauce angrily…

This situation only happens if we are

pouring the sauce from a glass bottle.

Like this one…

www.patrickhansen.com
http://www.patrickhansen.com/2017/09/01/ui-vs-ux-design-meme-problem/

WIJDAN SKILLS ENTERPRISE 32

 6.2 Designing Mobile Apps Layout
6.2.3 Importance of Designing Mobile Apps Layout

But to those who are pouring sauces from a

plastic bottle will most likely enjoying their
food happily with a splash or dash of sauce.

So, what can you

conclude from these two
situation?

http://www.patrickhansen.com/2017/09/01/ui-vs-ux-design-meme-problem/

WIJDAN SKILLS ENTERPRISE 33

 6.2 Designing Mobile Apps Layout
6.2.3 Importance of Designing Mobile Apps Layout

UI UI

www.patrickhansen.com

Situation A Situation B

http://www.patrickhansen.com/2017/09/01/ui-vs-ux-design-meme-problem/

WIJDAN SKILLS ENTERPRISE 34

 6.2 Designing Mobile Apps Layout
6.2.3 Importance of Designing Mobile Apps Layout

We want our user to have a pleasant And not letting them having a bad
experience using our apps… experience using our apps…

WIJDAN SKILLS ENTERPRISE 35

QUICK RECAP!

1. What are the differences between

native mobile apps and mobile web
apps?
2. Why is it important for us to properly
plan the design of our mobile apps?
3. List down 3 mobile apps that gives you
a bad and a good experience.

WIJDAN SKILLS ENTERPRISE 36

6.3
IoT Data Storage
in Mobile Apps
• What is a Data Storage and Database?
• Types of Data Storage and Database
• Data Storage for IoT Devices
• Why do we need a data storage for IoT Devices?

WIJDAN SKILLS ENTERPRISE 37

 6.3 IoT Data Storage in Mobile Apps
6.3.1 What is a Data Storage?

• Data storage is the process by which

information technology archives, organizes,
and shares the bits and bytes that make up
the things you depend on every day—from
applications to network protocols,
documents to media, and address books to
user preferences.
• Data storage is a central component of big
data.
https://www.redhat.com/en/topics/data-storage

WIJDAN SKILLS ENTERPRISE 38

 6.3 IoT Data Storage in Mobile Apps
6.3.1 What is a Database?

• A database is an organized collection of structured

information, or data, typically stored electronically in a
computer system. A database is usually controlled by a
database management system (DBMS).

• Data within the most common types of databases in

operation today is typically modeled in rows and
columns in a series of tables to make processing and
data querying efficient. The data can then be easily
accessed, managed, modified, updated, controlled, and
organized.
https://www.oracle.com/database/what-is-database.html

WIJDAN SKILLS ENTERPRISE 39

6.3 IoT Data Storage in Mobile Apps
6.3.2 Types of Data Storage

Flash Drive
Memory Ram

Cloud Storage
Hard Disk SD Card

Floppy Disk Optical Disk

WIJDAN SKILLS ENTERPRISE 40

 6.3 IoT Data Storage in Mobile Apps
6.3.2 Types of Database

• Relational databases. Relational databases became dominant in the 1980s. Items in a relational database
are organized as a set of tables with columns and rows. Relational database technology provides the most
efficient and flexible way to access structured information.
• Distributed databases. A distributed database consists of two or more files located in different sites. The
database may be stored on multiple computers, located in the same physical location, or scattered over
different networks.
• Data warehouses. A central repository for data, a data warehouse is a type of database specifically
designed for fast query and analysis.
• NoSQL databases. A NoSQL, or non-relational database, allows unstructured and semi-structured data to
be stored and manipulated (in contrast to a relational database, which defines how all data inserted into
the database must be composed). NoSQL databases grew popular as web applications became more
common and more complex.
• Graph databases. A graph database stores data in terms of entities and the relationships between
entities.
• OLTP databases. An OLTP database is a speedy, analytic database designed for large numbers of
transactions performed by multiple users.
https://www.oracle.com/database/what-is-database.html

WIJDAN SKILLS ENTERPRISE 41

6.3 IoT Data Storage in Mobile Apps
6.3.3 Data Storage for IoT Devices

What is a Time Series Database?

A time series database (TSDB) is a

database optimized for time-stamped or
time series data. Time series data are
simply measurements or events that are
tracked, monitored, down sampled, and
aggregated over time.
https://www.influxdata.com/time-series-database/

IoT devices collects data based on a

sampling rate in unit of time whether in
seconds or minutes.

Thus, it is recommended that for IoT

devices to store data in a time series
database

https://www.influxdata.com/time-series-database/

WIJDAN SKILLS ENTERPRISE 42

6.3 IoT Data Storage in Mobile Apps
6.3.4 Why do we need a data storage for IoT Devices?

• Commonly in an IoT application, the devices

or sensors collects data and publish it to a
dashboard in a form of charts.

• The data displayed on dashboard are

real-time data. Meaning, what we are doing
basically monitoring the current situation
using the real-time data.

• It is important for the data collected by the

IoT devices to be kept in a data storage so
that further data analysis can take place.

WIJDAN SKILLS ENTERPRISE 43

QUICK RECAP!

1. List down 2 types of data storage for

mobile phones
2. List down 3 types of DBMS available
3. Explain in your own words about the
time series database?

WIJDAN SKILLS ENTERPRISE 44

6.4
Data Visualization
for Mobile Apps
• What is Data Visualization?
• Importance of Data Visualization
• Type of Data Visualization
• Data Visualization for Mobile Applications

WIJDAN SKILLS ENTERPRISE 45

 6.4 Data Visualization for Mobile Apps
6.4.1 What is Data Visualization?

• Data Visualization is a way of

presenting your data. Translating
raw data into graphics presentation
such as charts and gauge.
• Dashboard Software is the
product of data visualization.
• Dashboards are easy to read
graphics presentation of current
status/data and historical data.

WIJDAN SKILLS ENTERPRISE 46

 6.4 Data Visualization for Mobile Apps
6.4.2 Importance of Data Visualization

• Easily graspable information – It is easier for user to understand data through graphic
presentation comparing to viewing data in form of multiple rows and column.
• Establish relationship – Charts and graphs do not only show the data but also
established co-relations between different data types and information.
• Share – Since data visualization is easily understandable, important trend in a chart can
be shared across department in an organization.
• Interactive and intuitive visualization – Several dashboard allows user to zoom into the
charts and graphs to dive into the data.

NOTE: For IoT Application, it is important and necessary to develop data visualization
due to huge amount of data collected on a daily basis. It will be a long and tiresome
scrolling if the data are in the form of rows and column.

WIJDAN SKILLS ENTERPRISE 47

6.4 Data Visualization for Mobile Apps
6.4.3 Type of Data Visualization

Business Intelligence Dashboards

Strategic Operational Analytical Informational Monitoring Performance

Dashboard Dashboard Dashboard Dashboard Dashboard Dashboard

WIJDAN SKILLS ENTERPRISE 48

 6.4 Data Visualization for Mobile Apps
6.4.3 Types of Data Visualization

• Commonly, IoT application utilizes the monitoring dashboard that

focuses on presenting real-time data as well as utilizing the analytical
dashboard in an effort of finding anomaly or insight of the data by drilling
down the data.
• Strategic dashboards are commonly used in a wide range of business
types while aligning a company’s strategic goals. They track performance
metrics against enterprise-wide strategic goals. It provide a quick
overview for the decision maker.
• Operational dashboards manage intra-daily business processes –
frequently changing and current performance metrics or key performance
indicators (KPIs).
• A performance dashboard provides users with an instant visual
representation of their company's performance.

WIJDAN SKILLS ENTERPRISE 49

 6.4 Data Visualization for Mobile Apps
6.4.4 Data Visualization for Mobile Applications

Responsiveness in Mobile Design 1) Fluid grids: The grid is the tool that designers use to lay out
their designs, regardless of whether those designs will be
viewed online or offline. Figure on the left shows a grid
design has been transformed for three screen shapes.

2) Flexible images: When you have images in a dashboard,

you want to ensure that they’re not cut off or distorted.
Making sure that your images can reformat themselves is
important.

3) Media queries: The content needs to be viewed on any

mobile device a user might have. What makes viewing it on
a variety of devices a challenge is that the designer has no
way to know what the returned result will be.

WIJDAN SKILLS ENTERPRISE 50

QUICK RECAP!

1. What is a Dashboard Software?

2. In your opinion, which dashboard is
suitable to monitor sales in a company?
3. List down 3 software for data
visualization.

WIJDAN SKILLS ENTERPRISE 51