TI-Client App

Introduction

Client App creates a Flow that the Customer App uses to provide End-User experiences. This guided Flow - experience is made possible by TI-Framework SDK in the Customer App and TI-Server.

App Structure

TI-Client app is implemented in Angular. Please refer to the individual sections below to understand the design. Components are used to define and implement the behavior needed for creating Task/Stage/Flow and initiating Flow. Services are designed to abstract and simplify the signaling between the app, SDK and server. Data Models declares interfaces to enforce data types when the Components and Services interact with each other or with the SDK/TI-Server. Listeners are passed when delegating the functionality from app to SDK, so that app can receive updates(app listens to updates).

Components

Components implement all the functionality to create client app's UI, without communicating directly with SDK or TI-Server. Read below to get a quick understading of different components available in TI-Client app.

Create Components

TaskComponent is responsible for creating a new Task and retrieving all the existing Tasks from TI-Server.

StageComponent is responsible for creating a new Stage. Some useful methods when creating a new Stage like the addition or removal of Tasks are implemented here. StageComponent is also responsible for retrieving all the existing Stages and all the existing Tasks in each Stage from TI-Server.

FlowComponent s responsible for creating a new Flow. Some useful methods when creating a new Flow like the addition or removal of Stages are implemented here. FlowComponent is also responsible for retrieving all the existing Flows and all the existing Stages in each Flow from TI-Server.

Initiate Component

The InitiateComponent is responsible for starting a Flow and other UI experience related to Flow updates until the Flow is completed. it depends on appservice to perform all operations that need communication with the TI-Server.

Other Components

DatadisplayComponent is a child view available as part of InitiateComponent and displays all the interaction data received from the TI-Customer app.

AlertComponent is used throughout the app to display useful alerts or notifications on client app. It is usually consumed by other components as a child view. It accepts string parameters to display a custom message and AlertType.

NavbarComponent contains a user experience implementation that persists across all the client app screens, and provides access to all the other components involved in creating Task/Stage/Flow or InitiateComponent.

FlowComplete component to display an alert that active Flow is now completed and that session no longer exists.

Services

AppService is a single stop for all the components that need to communicate with SDK or TI-Server. Eg: creating or fetching Tasks/Stages/Flows, connecting to SDK to bring up communication channels with the TI-Server to initiate a Flow, receive Flow updates, and send/receive interaction data.

Data Models

All the data types needed in the client app related to Flow functionality are directly imported from the ti-framework SDK.

Listeners

Flow listener

ClientFlowListener is sent by InitiateComponent to AppService, to receive updates on Flow. Eg; when Session has an update or completed etc. AppService sends this to the SDK to be called above mentioned update events.

Interaction listener

ClientDataInterface is sent by AppService to SDK to receive interaction updates, like when the interaction is available, disconnected, data received from customer app, etc.

Integration

Create Custom Task

As mentioned in the customer app integration guide, use client app to create the Task. It's important to note that the ControllerName you input for Task creation must be the class name of your custom component. Once Task is created, add to any of the desirable Stages in the Flow.

Guidelines

Use Create Components as an example of how to create and fetch required data. Always use AppService to talk to the SDK and pass Listeners to receive Flow and interaction updates.