# Create a simple IoT web application

{% hint style="warning" %}
Note that this sample IoT web application is for testing purposes only and not a secure solution for processing data
{% endhint %}

With this tutorial you will create a simple web application showing a map showing your tracked LoRa data. This runs an in-memory data store, so on restart the store will be reset and all recorded data will be lost. The application runs on [Next.JS](https://nextjs.org/)

As an optional step the IoT web application can be deployed to Azure Web App. 

## 1. Install the IoT web application

1. Get all the files needed for this tutorial at <https://github.com/kpn-iot/c3y> and save these in a local folder
2. Go to the folder 'c3y' and install: `npm i`
3. Build: `npm run build`
4. Start server in production mode: `npm start`
5. (optional) Seed with dummy data: `./postDummyData.sh`

## 2. Redirect your webhook to localhost

Enable XHR Redirect in your webhook (tested in Firefox & Chrome, does NOT work in Safari):&#x20;

* Target: <http://localhost:3000/api/lora>
* Content Type: application/json
* HTTP Method: POST

<figure><img src="https://1453626848-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6RrePMSAjRvOgcHjMBZ%2Fuploads%2FAxONmQVK2dRhRTuqjOPu%2FScreenshot%202023-02-02%20at%2013.05.13.png?alt=media&#x26;token=46d1e046-7b30-4fa8-83d2-5840950acb34" alt=""><figcaption></figcaption></figure>

## 3. Test connection with test message

1. Send a **location** message using the device simulator.&#x20;
2. Go to <http://localhost:3000/> and click UPDATE.

You should see the location update with the location you have sent via the device simulator.

<figure><img src="https://1453626848-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6RrePMSAjRvOgcHjMBZ%2Fuploads%2FT0JjKGdKpriwvbsmG2Bc%2Fimage.png?alt=media&#x26;token=0b95f628-6a65-45d4-9dce-12f6d7f50526" alt=""><figcaption></figcaption></figure>

## 4. (optional) Deploy as Azure web application

1. Install azcli: `brew install azure-cli (`(<https://learn.microsoft.com/en-us/cli/azure/install-azure-cli>)
2. Log into Azure, where ??? is the tenant ID from Azure Active Directory: `az login --tenant ???`
3. Deploy: `az webapp up --sku B1 --location westeurope` (takes about 5 minutes)
4. After deployment the URL is logged
5. Modify the URL in the HTTPS destination created in [Connect a HTTPS destination](https://docs.kpnthings.com/kpn-things/getting-started/tutorials/connect-a-https-destination) to the URL returned by Azure CLI:`[generated URL]/api/lora`
6. Inspect logs: `az webapp log tail`
7. Open `[generated URL]` in the browser to see the web app


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kpnthings.com/kpn-things/getting-started/tutorials/create-a-simple-iot-web-application.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.