Invited for technology trend talk in University Teknikal Melaka, I presented some of the trend and technology that can be implemented for their final year project to promote employability. Presented the following topic: 1) Industry 4.0 2) Blockchan 3) AR and VR 4) Mobile app development (emphasize on creating project in React and Flutter) 5) Web development (emphasize on doing it using Javascript technology) 6) Machine Learning 7) IOT 8) Big Data 9) Cloud computing 10) Devops

6. Product management work.

7. Development Manager

8. Another work as Development Manager

9. Last project as Development Manager

10. Mobile app training - Classes from different countries

11. MDR Tech
11

12. Common Room Bangi
12

13. 13
I know it’s a cheap shot ...
Follow and like us at @commonroombangi on
facebook =)
So we can get 1000 likes :)

14. What are the next big trend?
● Industry 4.0
● Blockchain
● AR/VR
● Mobile app and development.
● Web development.
■ Machine Learning
■ IOT
■ Big Data
■ Cloud Computing
■ Devops

15. Industry 4.0
15

16. Industrial Revolution
2015
Fourth Industrial
Revolution
Introducing smart automation.
Example: Cyber Physical
Systems
1954
Third Industrial
Revolution
Introducing computer and
automation.
Example: Computer
1913
Second Industrial
Revolution
Introducing mass production,
assembly line and electricity.
Example: Conveyer belt
1782
First Industrial
Revolution
Introducing mechanization,
water power and steam power.
Example: Steam engine

17. Phases of Earlier Industrial Revolutions
1950 - 2010
03
● Computers & personal devices
● Semiconductors
● Mainframe computing
● Internet
1870 - 1940
02
● Mass production
● Electricity
● Assembly line
1760 - 1840
01
● Ushered in mechanical production
● Railways
● Steam engine

18. Industry 4.0
● Industry 4.0 is a collective term for technologies and value
chain organization concept.
● Based on the technological concept of cyber-physical
systems, the Internet of Things, and the Internet of Services,
Industry 4.0 facilitates the vision of the Smart Factory.
18

19. Industry 4.0: Smart Manufacturing
Builds on the
digital revolution
Smaller & powerful
sensors
Machine learning
Ubiquitous Internet Artificial
Intelligence (AI)
Labor & energy
cost

20. Industry 4.0: Building Blocks
Autonomous
Robots
Simulation Horizontal &
Vertical System
Integration
Industrial Internet
of Things
Cyber Security Additive
Manufacturing
Augmented Reality Big Data Analytics

21. Industry 4.0: Example of Product
Philips Lighting
Users can control Philips Lighting
hue lightbulbs via smartphone,
turning them on and off,
programming them to blink if they
detect an intruder, or dimming them
slowly at night.
Ralph Lauren
Ralph Lauren’s Polo Tech Shirt,
available in 2015, streams distance
covered, calories burned,
movement intensity, heart rate, and
other data to the wearer’s
smartphone.
Babolat
Babolat’s Play Pure Drive product
system puts sensors and
connectivity in the tennis racket
handle, allowing users to track and
analyze ball speed, spin, and
impact location to improve their
game.

22. Industry 4.0: Potential Implications
1. Robot assisted production
2. Predictive maintenance
3. Additive manufacturing of complex parts
4. Machines as a Service
5. Big data drive quality control
6. Production line simulation
7. Smart supply network

23. Blockchain
23

25. Timestamp

27. ABC DEF GHI
ABC JKL GHI
Before
After

31. ➔
◆
◆
➔
◆
◆
◆
◆
◆

32. ❏
❏
❏
❏
❏
❏
❏
❏
❏

33. ❖
❖
❖

34. ➢
➢
➢
➢
➢
➢

35. Ethereum Election Smart Contract

36. AR and VR
36

37. AR/VR
Augmented Reality (AR)
● Closer to the real world. It adds graphic, sound and smell to the natural
world as it exists.
● User is not cut off from the reality.
Virtual Reality (VR)
● Creates immersive and computer-generated environment which replaces
real world.
● A completely artificial world and user is cut off from the real world.
37

38. AR
Augmented Reality (AR) is a
technology or an environment
with additional information
generated by a computer is
inserted into the user’s view
of real world scene.
Augmenting information may
consist of virtual geometric
objects placed into the
environment, or a display on
non-geometric information
about existing real objects
(distribution of room
temperature).
38

39. AR: Applications
Collaborative Virtual
Environment (CVE)
● Interaction of possibly many
participants that may be spread
over large distances.
● Examples: 3D multiplayer
games, collaborative
engineering software.
Medical
● Display of acquired data from
ultrasound and superimposed
over the live patient.
● To facilitate minimality invasive
operations such as fine needle
biopsies and laparoscopic
surgeries.
AR-Based
Videoconferencing
● Insert real video stream into
virtual environment.

40. Video for AR
1. Upin Ipin AR app
2. Boboiboy Choki-choki
40

41. AR: Apps built with ARKit, ARCore or Unity

42. VR: Four Key Elements
A Virtual World, An
Imaginary Space
Realized through a medium such as a rendering
pipeline or a display.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis sit amet odio vel purus bibendum luctus.
Immersion
Have a sense of presence within an environment
through a mental or a physical immersion.
Sensory Feedback
Visual or aural or haptic feedback to a
participant.
Interactivity
Able to move around and change our viewpoint
through movements on our head.

43. VR: Technology
Displays
● Tiny displays.
● Mounted on the head.
● Fully immersive.
● Needs tracker to track
the position and
orientation of user’s
head.
Projection-Based
Systems
● A front-projected or
rear-projected system.
● User is surrounded by
images.
● Projected onto large
screens.
● Create high immersion
sense.
Blue-C System
● Collaborative virtual
reality.
Workbenches
● Flat, rear-projection
screens display images
in stereo and can be set
up in a horizontal or
tilted position.
● Create partially
immersion and high
object presence.

44. VR: Applications
Employees Training
● Walmart is using virtual reality
to train its store employees in
experiencing real-world
scenario.
● Experience a holiday rush or a
mess in an aisle and learn how
to handle these events.
Medical
● Doctors use virtual reality to
distract patients and ease their
anxiety and pain.
● Virtual reality provides medical
students a safe and controlled
environment to practice
surgeries and procedures.
Business
● Can test safety and
functionality of products
without risking health of
employees.
● Virtual reality helps to reduce
costs, lessen business travel,
conduct interviews and hold
meetings.

45. Video of VR
Upin & Ipin Hari Raya - 360°
45

46. Mobile App Development
46

47. Mobile App Development
● A mobile application is a software application designed to run on
smartphones, tablet computers and other mobile devices.
● Users on smartphones typically check the news, weather, email
or their social networks. They have a choice between the mobile
web version or a specially-created mobile app.
47

48. Mobile App Dev: Current State
Native Development Hybrid Development
● Android
● iOS
● Ionic
● React Native
● Flutter

49. Mobile App
Types
● Native
○ Programmed using Swift on the iPhone or using
Java/Kotlin on Android devices.
● Hybrid
○ Mix between these two types of mobile applications.
● Web Apps
○ Runs in the phone’s browser.
49

50. Mobile App Types Differences
Native Hybrid Web Apps
Device Access Full Full Partial
Speed Very Fast Native Speed
as Necessary
Fast
Development
Cost
Expensive Reasonable Reasonable
App Store Available Available Not Available
Approval
Process
Mandatory Low Overhead None

51. Why Native is Better?
Make use of all the
phone’s features such as
the camera,
geolocation,user’s
address book, etc.
Do not need to be
connected to the Internet
to be used.
Specific to the mobile
device it is run on since it
uses the features of that
specific device.
Can be distributed on the
phone’s marketplace
such as Apple Store, Ovi
Store and Play Store.
51

52. Mobile App
Development:
Environments
● Most platforms have an SDK that can be downloaded
and built against.
● Every platform has an emulator that can be used to
test the apps.
● Most emulators are configurable to match a variety of
mobile devices.
○ Various screen sizes, memory limitations, tablets, etc.
○ In practice, emulators are quite limited.
● IDE: Integrated Development Environment that
provides tools to allow a developer to write, test and
deploy apps into the target platform environment.
52

53. Android Studio and Android Emulator

54. Mobile App Dev: Examples
1. In-body smart devices
a. Sensors/monitoring devices
b. Drug delivery systems
c. Medical robots
d. Neural implants
2. Habitat Monitoring
3. Mobile Social Networking
54

55. React Native ● React Native is a framework for building native apps
using React, a JavaScript code library developed by
Facebook and Instagram which was released on Github
in 2013.
● React Native is using declarative components.
55

56. React Native ● Creating a native app means writing apps for a
specific operating system. With React Native,
developers can reuse code across the web and on
mobile.
● No need to build the same app for iOS and Android
from scratch, just has to reuse the code across each
operating system.
● There are very little differences between a finished
app built in Objective-C or Java and one built with
React Native.
56

57. React Native: Advantages
Closer Teams
iOS and Android developers are working together
with React Native.
Performance
The development time is considerably shorter.
Developer Efficiency
Offers a great network of experienced developers.
Cross-Platform Building
Can change codebase to React Native to work
across iOS to Android.

58. 1 2 3
Problems Solved by React Native
Leverage existing
skill sets to write
apps with native feel.
Gets you out of the
“HTML5 Sandbox”.
Writing
cross-platform
high-performance
apps using a single
business logic
codebase.
58

59. Examples of React Native Apps
Facebook Ads
Manager App
● Complicated business logic was
difficult to handle with differences
in currencies, formats of date and
ad, time zones, etc.
● React Native was considered the
perfect choice to handle the issues
and a fast app was successfully
built.
Instagram
● Engineers faced several problems
upon the development process.
● React Native was used to renovate
the existing app due to the code
reuse and to integrate some
features into the native app.
Uber Eats
● React Native were successfully
implemented for the creation of
this complicated app.
● The restaurant dashboard that was
built initially meant for the web has
been upgraded to render the
functionalities of the native device.

60. Who’s Using React
Native
60

61. Who’s Else Using React
Native
61

62. Why React
Native?
1. It got iOS and Android covered.
2. It’s reusable components allow hybrid apps to render
natively.
3. Can be applied to an existing app’s code without any
rewriting at all.
4. It is one of the top mobile JavaScript frameworks among
developers and is still growing.
5. It is all about the UI.
6. Native app development is much more efficient.
7. It offers third-party plugin compatibility, less memory
usage, and a smoother experience.
62

67. Guided workout plans
and customizable
workouts on any device.

68. Flutter:
Introduction
● Mobile users expect their apps to have beautiful
designs, smooth animation and great performance.
● To deliver all these, developers need to create new
features faster than ever without compromising in
quality and performance.
● That is why Google builds Flutter.
● Flutter is Google’s mobile UI framework that provides
a fast and expressive way for developers to build
native apps on iOS and Android.
68

69. Flutter: History
● The first version of Flutter, known as Sky, ran on the
Android OS.
● It was unveiled at the 2015 Dart developer summit, with
the intention to render consistently at 120 frames per
second.
69

70. Flutter
● Multi-platform (iOS and Android) from a single codebase.
● High performance, high fidelity, low latency.
● DART as main language.
● Open source / github.
● Custom UI rendering engine.
70

71. Flutter:
Architecture
● Flutter engine
○ Written primarily in C++, provides low-level rendering
support using Google’s Skia graphics library.
● Foundation library
○ Written in Dart, provides basic classes and functions
which are used to construct applications using Flutter.
● Design-specific widgets
○ Material Design widgets implement Google’s design
language of the same name.
○ Cupertino widgets imitate Apple’s iOS design.
71

72. Flutter: Architecture

73. Flutter: Application
● Material design on iOS.
● Drawer, Floating Action Button (FAB) implementation on iOS.
● Change iOS or Android behaviour style dynamically.
● iOS navigation style on Android.
● Hot reload of classes (highly productive and fast development).
● AOT compilation for iOS and Android.
73

74. Flutter:
Example
74

75. Web Development
75

77. ➔
➔
➔
➔
➔
➔

78. Progressive Web App
(PWA)
PWA is a website that looks and behaves the same
way as a mobile application.
PWA can be added to the main screen of smartphones,
send push notifications and access the hardware of the
device.
PWA works smoothly in an unstable connection or even
in the absence of a network just like it should be with
full Internet access.
78

79. PWA: Characteristics
Progressive
PWA works on any device and
enhance progressively of any
features available on that device
and browser.
Responsive
PWA UI fit the device’s form
factor and screen size.
Connectivity-Independent
Works in areas of low quality
networks or even offline.
App-Like
PWA looks like a native app, built
on the application shell model
with minimal page refreshes.
Fresh
New content is made available in
the app when published and is
always up-to-date.
Safe
Hosted over HTTPS and can
prevent man-in-the-middle
attacks.
Discoverable
PWA is discoverable in search
engines as it is a website.
Re-Engageable
More likely to reuse PWA through
features such as push
notifications.
Installable
Keeps most useful apps on home
screen making them readily
available.
79

80. PWA:
Example
1. Twitter Lite
○ Twitter Lite has increased 65% in pages per session,
75% in Tweets, and has decreased 65% in bounce
rate.
○ It loads in under 3 seconds for repeat visits even on
low quality networks.
2. Air Berlin
○ Air Berlin uses a progressive web apps for its online
check-in process.
○ They allow users to access their tickets without an
Internet connection.
80

92. Artificial Intelligence
92

93. Machine Learning
Herbert Alexander Simon:
“Learning is any process by which a system improves performance from
experience.”
“Machine learning is concerned with computer programs that automatically
improve their performance through experience.”
93

94. Machine Learning
“A computer program is said to learn from
experience (E) with some class of tasks
(T) and a performance measure (P) if its
performance at tasks in T as measured
by P improves with E.”
94

95. Why Machine
Learning?
To develop systems that can
automatically adapt and
customize themselves to
individual users.
For example, personalized
news or mail filter.
To discover new knowledge
from large databases (data
mining).
For example, market basket
analysis (diapers and beers).
Ability to mimic human and
replace certain monotonous
tasks that requires some
intelligence.
For example, recognizing
handwritten characters.
To develop systems that are
too difficult or expensive to
be constructed manually due
to specific skills requirement.
95

96. Machine
Learning: Why
Now?
Flood of available
data.
Increasing
computational power.
Growing progress in
available algorithms
and theories
developed by
researchers.
Increasing support
from industries.
96

97. Machine Learning: Factors Affecting
Performance
Types of training provided. The form of background knowledge.
The type of feedback provided. The learning algorithms used.
97

98. 1
2
3
Machine
Learning:
Techniques
Classification: Predict class from observations.
Clustering: Group observations into meaningful or more
specific groups.
Regression (prediction): Predict value from observations.
98

99. Machine Learning: Applications
Multimedia Security Marketing Diagnosis
Bioinformatics Search Engine Game E-commerce
Medicine Manufacturing Image
Processing
Face
Recognition

100. Machine
Learning:
Usage
● Spam Email Detection
● Machine/Language Translation
● Image Search for similarity
● Clustering: Amazon Recommendations
● Classifications: Google News
● Text Summarization: Google News
● Speech Understanding: iOS Siri
● Face Detection: Facebook’s photo tagging
100

101. Machine
Learning:
Applications
Classification
● Pattern Recognition
● Face Recognition: Different pose, lighting, occlusion,
makeup, hair styles.
● Character Recognition: Different handwriting styles.
● Speech Recognition:Temporal dependency
○ Use of a dictionary or the syntax of the language.
○ Sensor fusion. For example, visual (lip image) and
acoustic for speech.
● Medical Diagnosis: From symptoms to illnesses.
● Web Advertising: Predict if a user clicks on an ad on the
Internet.
101

102. Machine Learning: Frameworks/Tools
Weka Carrot2 Gate OpenNLP
LingPipe Stanford NLP MLib (Apache
Spark)
Scikit-learn
(Python)

103. 103
Machine
Learning:
TensorFlow
TensorFlow is an open source
software library for numerical
computation using data flow graphs.

104. 104

105. IoT
105

107. ❏
❏
❏
❏
❏
❏

109. ➔
➔

111. ●
●

112. ❏
❏
❏

114. ➔
➔
➔
➔
➔
➔
➔

115. ❏
❏
❏
❏

117. ➔
➔

123. SQL databases use structured query language (SQL) for defining and manipulating
data. On one hand, this is extremely powerful:
The most versatile and widely-used options available, making it a safe choice and
especially great for complex queries.
Structure is restrictive.
Needs to have predefined schemas to determine the structure of your data before you
work with it.
All data must follow the same structure. This can require significant up-front
preparation, and, as with Town A, it can mean that a change in the structure would be
both difficult and disruptive to your whole system.

127. https://neo4j.com/developer/example-project/

128. ➢
➢
➢
➢
➢
➢
➢

129. ➔
➔
➔
➔
➔
➔
➔

136. ➔
➔
➔
➔
➔
➔
➔

142. ●
●
●
➢
➢
➢
➢