Top Banner
UI Evolving Platform Evolving Architecture Evolving
49

UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

Jun 09, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

UI Evolving Platform Evolving Architecture Evolving

2

About Me

Xianning ( Pronunciation lsquoShiningrsquo) Liu Full Stack Developer Mobile SME Lead Consultant ThoughtWorks

bull Tech Lead amp Solution Architect Recently focusing on scale mobile delivery amp the architecture evolving beyond mobile era

bull Tech evangelist Tech writer amp Conference speaker

httpsgithubcomxianlinbox

httpswwwlinkedincominxianning-liu-17027846

3

UI Evolving

4

Natural UI v3

Natural UI v1

Graphic UI

Command UI

Machinery UI

Natural UI v2

1989 Web

2016 Bots

2018 Azure

IoT Hub

2018 Amazon Go store

Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev

Skills Dev IoT Dev

5

Platform Evolving

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 2: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

2

About Me

Xianning ( Pronunciation lsquoShiningrsquo) Liu Full Stack Developer Mobile SME Lead Consultant ThoughtWorks

bull Tech Lead amp Solution Architect Recently focusing on scale mobile delivery amp the architecture evolving beyond mobile era

bull Tech evangelist Tech writer amp Conference speaker

httpsgithubcomxianlinbox

httpswwwlinkedincominxianning-liu-17027846

3

UI Evolving

4

Natural UI v3

Natural UI v1

Graphic UI

Command UI

Machinery UI

Natural UI v2

1989 Web

2016 Bots

2018 Azure

IoT Hub

2018 Amazon Go store

Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev

Skills Dev IoT Dev

5

Platform Evolving

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 3: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

3

UI Evolving

4

Natural UI v3

Natural UI v1

Graphic UI

Command UI

Machinery UI

Natural UI v2

1989 Web

2016 Bots

2018 Azure

IoT Hub

2018 Amazon Go store

Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev

Skills Dev IoT Dev

5

Platform Evolving

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 4: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

4

Natural UI v3

Natural UI v1

Graphic UI

Command UI

Machinery UI

Natural UI v2

1989 Web

2016 Bots

2018 Azure

IoT Hub

2018 Amazon Go store

Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev

Skills Dev IoT Dev

5

Platform Evolving

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 5: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

5

Platform Evolving

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 6: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

6

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Client Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Install from App store

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 7: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

7

App Fatigue

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 8: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

9

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 9: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

10

Facebook split Messenger out to be a standalone app then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation

Slack build its own Bot storeLet service provider to build their own chatbot to connect with facebook users through conversation

hellip

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 10: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

11

2016 Beginning of conversational App

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 11: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

12

Ecosystem

Channels Building Tools AI Platform

Channels Integration

Chatbot discovery amp promotionMonitor amp Analytics

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 12: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

13

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 13: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

14

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Microsoft Slack

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Action Cortana Skills

Install from App store

Access directly through messenger platform

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 14: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

15

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 15: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

16

Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the users phone to authorize them to enter

Pressure SensorDetect whether an item has been picked up an item and put back

Face Recognition AI

Identifies the customer and captures their action

Computer Vision Sensor Vision Deep Learning

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 16: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

17

2018Azure IoT Hub

Google IoT Core

AWS IoT Hub

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 17: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

18

1980rsquos

Platform

Key Players

Development Paradigm

Service Accessibility

Product Form

1990rsquos 2008rsquos 2016rsquos 2018rsquos

Microsoft Oracle SAP

Facebook Google Amazon

Apple Google

Facebook Amazon Google Tencent

Microsoft Amazon Google Alibaba

Client Dominant Development

Server Dominant Development

Server Dominant Development

Client Dominant Development

Packaged Software

Web App SaaS Mobile App

Buy Disks amp Licenses

Access directly through browser

Chatbots Alexa Skills Google Actions

System combined with software and Hardware

Client Dominant Development

Buy devicesInstall from App store

Access directly through messenger platform

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 18: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

19

Architecture EvolvingFrom Mobile to Conversational to IoT

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 19: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

20

ADDITIONAL PLATFORMAlready has iOS or Android app and API is ready Need to build app for the other mobile channel

MOBILE ENABLEMENTAlready have backend services built for website need to extend services to mobile platform with mobile specific API (BFF) BFF

MOBILE SERVICESNeed to build mobile first features

BFF

Backend Services

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 20: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

21

Users

Interface

BFF

Backend Services

Backend Service

Mobile App

Middle Layer

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 21: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

22

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 22: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

23

Atomic Design

Design Elements

Shared Component

Feature Component

Page Component

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 23: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

24

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Containers

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices gravida libero vitae consequat ex ultrices non Cras aliquam eu velit at venenatis Phasellus eu nisl metus Praesent sed vestibulum felis eu suscipit libero

Container oneThis container is used when there is an image on the LHS

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Buttons

Large buttonsHere is our range of large buttons

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

lttable style=width100gt lttrgt lttdgtJilllttdgt lttdgtSmithlttdgt lttdgt50lttdgt lttrgt lttrgt lttdgtEvelttdgt lttdgtJacksonlttdgt lttdgt94lttdgt lttrgtlttablegt

More

Small buttonsHere is our range of large buttons

More

Design

Base Elements

Components

Modules

Development

Templates

Fonts

Header tags

The quick broThe quick browThe quick brown f

Here is our range of header tags

H1

The quick brown fox

H2

H3

H4

Praesent ullamcorper ultricies lectus eu pulvinar turpis Ut consequat semper elit in condimentum Nullam ultrices

gravida libero vitae consequat ex ultrices non ultricies lectus eu pulvinar turpis Ut consequat semper elit in con-dimentum Nullam ultrices gravida libero vitae consequat ex ultrices non

Design

Base Elements

Components

Modules

Development

Templates

Design

Base Elements

Components

Modules

Development

Colours

Design

Typography

Logo

Design Principles

Imagery Guidelines

Living Style Guide

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 24: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

25

Native

Cost

Reusability

Dynamic Update

User Experience

Community

H5 React Native

High Low

iOSAndroid 2 Codebase

iOSAndroidWeb 1 Codebase

iOSAndroid Component Reuse

Limited by App Store Controlled By Dev Controlled By Dev

With Design

Best Just so so Better

Apple Google 10 years

W3C Standards comes very slow

Facebook amp Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 25: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

26

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 26: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

27

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 27: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

28

BETA USERS

DASHBOARD

GIT

Push code

APP STORES

CI MACHINES

ENTERPRISE DISTRIBUTION

Beta release

Beta push

Test push

App Store Submission

Collect feedback

DEVICE LAB

IOS amp ANDROID SIMULATORS

QA

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 28: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

29

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 29: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

30

Mobile Development Platform

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 30: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

31

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 31: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

32

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 32: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

33

Messenger App is the new platform

AI is the new UIMicroservices is the essential architecture

Users

Interface

hellip

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 33: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

34

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 34: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

35

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 35: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

36

Discovery Design Evolution

Bounded Context

Current Biz API Refine

Service Discovery

Interface Recognition

Continuous Evolutionary

Service Map API List ADRSpeed of Change

Event Storming DDD

Design Thinking

API versioning

API Management

Safety of Change

API Platform

API Documentation

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 36: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

37

Middle Layer

Users

Interface

hellip

Mobile App BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 37: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

38

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 38: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

39

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

Speech AI

Speech to Text

Text to Speech

Domain Identify

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 39: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

40

Middle Layer

Users

Interface

hellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF

Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 40: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

41

IoT Device

IoT System

PrivateIoT

Platform

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 41: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

42

Smart Cane for Blinds

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 42: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

43

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 43: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

44

Remote Health Control System

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 44: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

45

Door Sensor

In-Field

T7 Platform on AWS

Bluetooth Gateway

MQTT HTTP

Pill box

MQTT HTTP

Heart rate Band

heart rate amp

step count

Cloud

open close events

chair waterpipe closestool vibration sensor 3

Smart plug

Zigbee Gateway

open close events

electricconsumption

vibration events

HTTP

HTTP

Web Apps

Mobile Apps

AWS IoT Hub

AWS IoT Shadow

AWS IoT rule engine

DynamoDB

AWS SNSPreprocessor

API Gateway

Device Communication

amp ControlTransformation

amp Queue Data Storage Backend

T7 Platform on AWS

Redshift S3

Queue - SQS

Formula Algorithm

Lambdas

Cognito

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 45: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

46

DaoCloud (DCE)

PaaS

Business Applications

IoT Module

Edge Device

SDK

Message Hub Thing Model Time Series Storage

Identity Security Monitor Log API

Rules Engine

Data Pipeline Developer CLI

Management UI

ContainerContainer Container

Docker Swarm

Message Hub Device shadow Rule engine SDK amp APISecurity

46

Private IoT Platform

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 46: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

47

Users

Interface

App l i c a t i o n Connec t o r

Backend ServicesIntent Parser

Natural Language Understanding

Dialogue Management

Account

Products

Delivery

Payment

BI Report

hellip

IoT Gateway

Device ManagementDevice Management

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

Business Model Exploration Device Sourcing Gateway In Field

Multi Device Integration Stability Security

DataDataData

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 47: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

48

Middle Layer

Users

Interface

helliphellip

Mobile App BFF

App l i c a t i o n Connec t o r

Natural Language Understanding

Dialogue Management

BFF Backend Services

Account

Products

Delivery

Payment

BI Report

hellip

Speech to Text

Text to Speech

hellip

Security

Device Management

Rule Engine

bullMQTT bullHTTP bullModbus bullCoAP

bullEthernet bullCellular bullWiFi bullBluetoot bullZigbee

QampA

THANK YOU

Page 48: UI Evolving Platform Evolving Architecture Evolving · Amazon Go store Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev. 5 ... Application Connector

QampA

THANK YOU