Introduction

This tutorial introduces the KOS UI SDK and its features. Building on the previously developed dispenser system application, it focuses on creating a simple Consumer User Interface (CUI) for selecting and pouring beverages as defined in the application brandset.

Intended Audience:

Frontend developers with experience in React or other JavaScript/TypeScript frameworks.

Overview

Defining the UI Design:

We start by establishing the desired user interface design.

Setting Up the Development Environment:

With a clear target design, we use KOS tools to create an integrated UI development environment optimized for KOS UI development.

Initializing the SDKs and Ensuring Connectivity:

We initialize the KOS SDKs and verify connectivity with our system application.

Utilizing Provided Models and Services & Defining Data Structures:

While most projects typically require creating custom KOS models to manage device state and business logic, this tutorial leverages the models and services provided by the Core and Dispense UI SDKs.

In this section, we demonstrate how to extend the Dispense models with application-specific data using the provided extension points and registration framework.

Leveraging the CUI Kit:

The Dispense SDK includes a CUI Kit that offers headless components and state machines, simplifying data management and user flow during the beverage selection and pouring process.

Building and Integrating UI Components:

We will develop UI components that visualize the target experience and integrate the state and data handlers from the CUI Kit.

Deployment and Testing:

Finally, we deploy the UI application as part of an image and test the beverage pouring functionality.

Background Information

This section provides optional context to help understand the services and features used in this tutorial:

  • Throughout this tutorial, references are made to both the Core and Dispense Extensions and their respective SDKs.
  • The KOS Extensions are structured in layers, gradually exposing capabilities and features based on the project and device requirements.
  • Each extension includes a corresponding UI SDK, which accelerates application development by providing ready-to-use models, services, state management, and business logic necessary for building KOS applications.

Layered KOS UI SDKs

Models are fundamental to the UI SDK and the KOS application development process, allowing the UI to access a projection of embedded device state and services in a way that is intuitive for traditional web developers.

From a UI perspective, models are crucial for state management and provide a client library for backend services.

Core

The core SDK provides access to many cross-cutting services and capabilities commonly required when building embedded devices.

Dispense

The dispense SDK exposes additional models and services specific to devices that pour beverages. It encapsulates many concepts from the Zero 4 Java tutorial.

Source Control

The source for this tutorial can be found GitHub – kondra-code/training-zero4-ui