# Your First Heisenware App

## Video

{% embed url="<https://www.youtube.com/watch?v=ZOWjfi18SVI>" fullWidth="false" %}

## Create a new app

1. Log in to your Heisenware account
2. Click on Apps
3. Click on the + to add a new app
4. Choose an App Name
5. Upload an App Icon
6. Open the App Builder

## Connect data sources

### HTTP

1. Drag and drop the [HTTP get function](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/http-rest#do-a-get-request) on the canvas
2. Configure the function:

```yaml
#url
http://www.randomnumberapi.com/api/v1.0/random
#parameters
min: 50
max: 100
count: 5
```

3. Trigger the function.
4. Add a [JSONata modifier](https://docs.heisenware.com/tutorials/app-templates/broken-reference) to the function and enter the average function:

```
$average($)
```

### OPC UA

1. Create an OPC UA client with the [OPC UA create function](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/opc-ua-client#create).
2. Call the client `Demo` or use any other name you like.&#x20;
3. Trigger the function.
4. Connect to an OPC UA server using the [connect function](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/opc-ua-client#connect) from within the client just created. You can use the following public server:

```
opc.tcp://opcua.demo-this.com:51210/UA/SampleServer
```

5. Trigger the connect function
6. Check the connection with the isConnected function
7. Use the clients [readNode](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/opc-ua-client#readnode) function and configure it with the following node ID:

```
ns=2;i=10846
```

8. Add a JSONata modifier to the function and extract the value with:

```
value.value
```

{% hint style="info" %}
Alternatively to step 7 and 8, you can also use the [readVariableValue](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/opc-ua-client#readvariablevalue) function to get right to the value.
{% endhint %}

## Configure data flow

### Combine data points

1. Drag and drop the combine function on to the canvas.
2. Connect the modifier of the get function with argument 1 of the combine function and the modifier of the readNode function with argument 2 of the combine function.
3. Trigger the combine function
4. Add a JSONata modifier to the function and enter the sum function:

```
$sum($)
```

5. Set the readNode trigger  and the get function trigger to `every 10s`.
6. Set the combine trigger to `on input change` by drag and drop of each of the functions arguments (or just one of them) on the trigger.
7. Test your logic using the [test mode](https://docs.heisenware.com/tutorials/app-templates/broken-reference). Wait at least 10 seconds to see data.

### Record historic data

1. Add a [recorder](#record-historic-data) to the modifier behind the combine function.
2. Call the recorded data point `demo_data` or use any other name you like.&#x20;
3. Start the test mode for a minute or so to record some data.

## Build user interface

### Visualize live data

1. Upload your logo or any other image to the [resources](https://docs.heisenware.com/tutorials/app-templates/broken-reference).
2. Drag and drop the image onto the [UI builder](https://docs.heisenware.com/app-builder/build-frontend).
3. Pick a [circular gauge](https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/circular-gauge) from the display widgets and click in the UI builder to place it.
4. Configure start and end value (0 to 500) and the color sections of the circular gauge.
5. Connect the modifier of the combine function to the circular gauge with drag and drop. Make sure to select the circular gauge first.
6. Start the test mode and see the data coming.

### Visualize recorded data

1. Click on the database icon of the recorder to auto generate the [InfluxDB read function](https://docs.heisenware.com/tutorials/app-templates/broken-reference).
2. Within the read function, change the `tail` value to 10.&#x20;
3. Trigger the read function.
4. Create a [new page](https://docs.heisenware.com/app-builder/build-frontend/pages-and-navigation#add-and-delete) with right-click in the pages panel on the first page and a click on `New Page`.
5. Configure the apps main menu using the [navigation builder](https://docs.heisenware.com/tutorials/app-templates/broken-reference). Rename pages and add icons if you like.
6. Select the new page.
7. Add a [chart](https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/chart) widget to the page.
8. Connect the output of the read function (array) to the chart with drag and drop. Make sure to select the circular gauge first.
9. Resize and configure the chart.
10. Add a [button](https://docs.heisenware.com/app-builder/build-frontend/widgets/trigger-widgets/button) and configure it.
11. Connect read function trigger and button.
12. Test your logic using the test mode.

### Adjust all screens

1. Choose the [preview](https://docs.heisenware.com/tutorials/app-templates/broken-reference) of rotated phone, tablet, rotated tablet or desktop.
2. Adjust all widgets size and position for each screen.

### Modify app theme

1. Open the [theme editor](https://docs.heisenware.com/app-builder/build-frontend/theme-editor).
2. Pick a base theme.
3. Pick a default theme or configure your own theme.

## Publish and open the app

1. Click on [deploy](https://docs.heisenware.com/tutorials/app-templates/broken-reference).
2. Scan the QR code to open the app on your phone or click the URL to open the desktop version of your app.&#x20;
3. Optionally install the app on your device.