Front end: create a UI

Now that we’ve created the IoT Center’s back-end server and APIs, let’s create a web application that uses the APIs and (other functionality provided by the Flux language) to interact with time series data. In the UI, users will be able to visualize data, manage devices, and write test data to InfluxDB.

In the next sections, we will look at the code behind the the IoT Center user interface. The UI runs in the browser and has four pages:

  • Home1
  • Device Registration
  • Virtual Device
  • Dashboard

On each page, we'll write code to:

  • managing device configurations
  • the IoT Center API from the UI’s point of view
  • the InfluxDB REST API for writing and querying data
  • the Flux query langauge
1

We can skip the Home page since it doesn’t use any special InfluxDB related code, or call the IoT Center API. Here is its source, if you’re interested.