Create a simple IoT web application

Showing your data in an application

Note that this sample IoT web application is for testing purposes only and not a secure solution for processing data

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

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):

• Target: http://localhost:3000/api/lora

• Content Type: application/json

• HTTP Method: POST

3. Test connection with test message

1. Send a location message using the device simulator.

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.

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 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