Kleeen Software Demonstration and Introduction

To help you better understand what Kleeen's platform does and is about we have published this article and demonstration application with a walkthrough to help guide you. Prepare to spend 15-20 minutes as we guide you through the benefits of authoring software with our platform, how it works, and some cool features you won't see unless you peak under the hood.

What is Kleeen?

Kleeen is the inspiration of Software Engineers and User Interface experts that set out to build a better way to make software. You may hear this refered to as low code or no-code authoring, however we just think of it as smarter and more efficient, much the same way you don't call a car a no walking solution. Kleeen is focused on a better way to get things done. The tool we sell customers is the same tool we use to build they software we sell to them.

This solution was born out of the frustration of building front end applications that cost too much, took too long, and were too repetitive. The roots of our team is a group of people that ran a design studio after a successful SAAS exit and learned some hard lessons along the way. Our goal is to bundle the good and bad experiences from our foundations to make engineering software better.

The first step to understanding Kleeen's platform is to take a look at the output.

Kleeen has published a demonstration of software authored with our platform. This product can be accessed by visiting: https://iot-demo.app.kleeen.cloud/. This demonstration is a fully functional piece of software running in AWS. The application is wired up to an external backend and includes custom functions not built with our platform. If you want to look at the source code we started with, it can be accessed in this repository.

You can use [e-mail] as the username and password to access the application.

Important Terms

When discussing the Kleeen platform, we have some terms that it will be helpful to know.

Things

Things in Kleeen are what your product is about and the related attributes. For example, in the application, we are discussing in this article Nodes and Sensors are Things. They may have related Things such as IP Addresses and Status.

Workflows

Workflows are the pages of an application that Kleeen uses to display your data in three differrent scopes. A scope of Single is a detail page the focuses on one thing, such as a particular computer or employee. A scope of Collection looks at a group of things, like a team of employees. Finally a scope of The Entire Product Domain will look at all the Things in your product and is useful for KPI dashboards, configuration pages, and other big picture views.

Workflows are written with a user story and semantic model.

Experiences 

Experiences are the path you want your workflow to take a user down. For example, if the user story for a workflow is "As a System Admin I want to Explore a Collection of Sensors." Related experiences will likely include Dashboards, Tables, Configuration, and Filters. As you build a workflow you can add the relevant experiences as needed.

Visualizations

Visualizations are the charts, graphs, and configurations that are contained within an experience. You may also see them referred to as widgets throughout the product and help center.

Touring The Product

Here are some key items to consider when viewing the demonstration:

If you click on the User Icon in the upper left of the window you can adjust user preferences. Kleeen built software by default gives users the option to choose between a Light Kit and Dark Kit. The software is also prewired to allow you to include language localization according to your preferences and user needs. Make sure as you tour the product that you view pages using both the light and dark options. Below is the System page in both dark and light views.

Pages are also responsive to resolution and will arrange and scale items accordingly.

While we are on the System page it's a good time to take a look at some of the features on this page. There are examples of the many visualizations or Insights, you can generate with the Kleeen Authoring Tool demonstrated here. The most obvious is the bubble chart in the upper left corner. 

Let's take a look at some of the features of the charts, graphs, and other Insights Kleeen builds for you. 

View Switching

Based on the data being presented and the relationship between data points Kleeen provides multiple views in each visualization when possible. As you build the Insight, the authoring platform will give you a preview of the output. The three buttons at the bottom of the bubble chart show the three views available. The users last view will be stored locally when they return to the page. The image below shows three views of the Event Length Insight.

Cross-Linking

Kleeen creates automatic cross-links between pages that show the details of a Thing in your application and the higher-level views. With this feature, you don't have to remember to build links every time you build something new in your product. Also, if you build your application and find that a detail view is missing when reviewing it you just need to build a Detail Workflow for that Thing and the next time you launch your product all the crosslinks will be built for you. The image below shows the table view of the Site Map widget offering the ability to navigate to the details page in the same or a new window.

Focus and Filter

When UI best practices call for it, widgets can also include filter data and focus on a specific range. For example, the Node Status widget presents time series data so the third view allows a user to refine their view to a specific range as shown below.

Single Data UI Elements

When a visualization is built of a singular data point that will allow specific UI elements to be created. The first is a Summary Statistics card that shows additional numeric and graphical data about one Thing. For example, time-series data can show trends, averages, and totals. The Sensors widget shows an example of this.

The System Health widget shows the gauge or progress view of a piece of data, this is most commonly used with data that has a severity level or severity status type. 

Actions and Configurations

Action buttons can also be added to pages the will allow you to wire them up to events in production. These can be tied to CRUD operations as well as other actions as you see fit. The Node Details page in this demo demonstrates a Reboot action button.

Configuration tables can be added to configuration workflows and used to perform CRUD operations on tables. This will also allow for bulk changes where you can modify several items before committing a save. The Configure Sensor Node page in the application shows this, clicking the Add New Sensor button will display a modal that Kleeen autogenerates for adding a new table entry.

Widgets can be created to configure single values on pages as well. Summary Statistics Cards in Detail Workflows can also be enabled to edit.

Custom Features

Kleeen does a lot and the list is constantly growing with our weekly releases. That being said, we know there isn't one platform that does everything for everyone. Sometimes you need that custom touch to really express your secret sauce or to support legacy features during an upgrade. To accommodate this we have built in the ability to integrate custom sections of an application. This can either be an entire workflow, as demonstrated on the Production KPIs page, or a single widget, like the Utilization Saturation Errors widget on the System Page. 
In Kleeen Instant Prototypes, these custom functions are represented with images or gifs. In the exported code, they are reserved as custom folders stubbed out for you to insert your code. As you update your repository with updates from Kleeen the pull requests will not impact these folders.

Full Page Customizations

To demonstrate the full page customizations ability we inserted a full page business intelligence sample from Tableau into the Production KPIs page of this demo application. Clicking on the tabs at the top will switch views and the data coming from the back end.

Custom Widgets

Similar to a full page view the custom widget is a public example from Recharts that is pulling from their data source and is in the prototype System page at the bottom. This chart represents a view that is not yet available in Kleeen's platform.

Forms

Kleeen offers several ways to implement forms in your application. We have successfully implemented Jotforms, Typeform, and Google Forms into applications. In this application, we have used a Google form embedded using an iFrame.

Next Steps

Now that we've shown you most of the cool things you can do with a Kleeen Authored application why not take a look at how authoring works? Or take a look at the source code we exported to build this demo?