LogoLogo
  • KPN THINGS USER GUIDE
    • Introduction
    • Getting started
      • Registration and setup
      • Device simulator app
      • Connect devices
        • SIM cards
        • Supported devices and KPN Devices
        • SODAQ R412M
        • Smartrak
        • Marvin development board
        • LoPy5
        • Arduino MKR WAN 1300/1310
        • Arduin MKR NB 1500
    • All videos
    • Tutorials
      • Configure a flow
      • Connect a HTTPs destination
      • Create a simple IoT web applicationPage
      • Send instruction to LoRa DevicePage
      • Send your data to Azure SQL
      • Technical overview
        • Management data model
        • Uplink communication
        • Downlink communication
        • Location data
      • Accounts and projects
        • Customer accounts and users
        • Projects
        • Customer management
        • Cost overview and contract
    • Frequently asked
      • Multi Factor Authentication
  • GENERAL FUNCTIONS
    • Quick reference videos
    • APIs
  • THE PORTAL EXPLAINED
    • Things Manager
      • Devices
        • Bulk operations
      • Data
        • Device data graph
      • Connectivity
        • LoRa connectivity configuration
      • Bulk reports
    • Things Creator
    • Support
      • News
      • Release notes
      • Real-time status
      • Service reports
      • Documents
      • Support tickets
      • Invoices
      • Contact info
    • Shop
  • BUILDING BLOCKS
    • Devices
      • Sensors
        • KPN Conditionsensor CO2 II
        • KPN Conditionsensor CO2 III
        • KPN Conditionsensor CO2 III motionPage 1
        • KPN FillTag I
        • KPN FillTag II
        • 1M2M ED1608
        • Elsys ERS
        • Device Simulator (Mobile Phone app)
        • Generic Device (Internet connected)
        • Generic LoRa device (preset connectivity)
        • Generic LoRa device (programmable)
        • Generic M2M device
        • Generic M2M device (with Internet connection)
      • Trackers
        • KPN Global Tracker Autonomous
        • KPN Global Tracker Wired
        • KPN LocationTag I
        • KPN LocationTag II
        • KPN LocationTag II v2
        • KPN LocationTag II v2 Expert Mode
        • KPN LocationTag II v3
        • KPN LocationTag III (with GPS)
        • KPN LocationTag III (without GPS)
        • KPN LocationTag III v2
        • KPN LocationTag III v2 Buffer
        • KPN LocationTag III v3
        • KPN LocationTag III v4
        • KPN LocationTag V
        • KPN LocationTag VI
        • KPN LocationTag WS
        • Streamline LoRa
        • Streamline M2M
        • Viloc
      • Routers
      • Gateways
        • KPN FSK Basestation
      • Device SDK
    • Connectivity
      • Connecting LoRa devices
        • LoRa connectivity configuration
      • Connecting M2M devices
      • Connecting Internet devices
      • Connecting MQTT Devices
    • Data Processing
      • ThingsML and SenML
        • ThingsML
        • SenML
          • Understanding and Interpreting SenML Data
          • Changes in KPN SenML
      • Device Twin
      • Decoders and encoders
        • Common measurements list
        • Decoder migrations
        • DIY Decoder
          • DIY decoder scripts
      • Merger
      • Device data
      • Devices
    • Destinations
      • HTTPS destination
      • MQTT broker
      • Cumulocity IoT Platform
      • Azure Event Hubs
      • Azure IoT Hub
      • Test Endpoint
      • ThingsBoard
      • Datacake
      • AWS Lambda
      • Google Cloud Run functions
  • IOT LINE UP
    • Freemium
      • Test SIM cards
    • Explorer
    • Modular
    • Tailored
    • Terms and Conditions
Powered by GitBook

© 2024 KPN - All rights reserved.

On this page
  • 1. Install the IoT web application
  • 2. Redirect your webhook to localhost
  • 3. Test connection with test message
  • 4. (optional) Deploy as Azure web application

Was this helpful?

Export as PDF
  1. KPN THINGS USER GUIDE
  2. Tutorials

Create a simple IoT web applicationPage

Showing your data in an application

PreviousConnect a HTTPs destinationNextSend instruction to LoRa DevicePage

Last updated 6 months ago

Was this helpful?

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

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

  • Content Type: application/json

  • HTTP Method: POST

3. Test connection with test message

  1. Send a location message using the device simulator.

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

4. (optional) Deploy as Azure web application

  1. Log into Azure, where ??? is the tenant ID from Azure Active Directory: az login --tenant ???

  2. Deploy: az webapp up --sku B1 --location westeurope (takes about 5 minutes)

  3. After deployment the URL is logged

  4. Modify the URL in the HTTPS destination created in Connect a HTTPS destination to the URL returned by Azure CLI:[generated URL]/api/lora

  5. Inspect logs: az webapp log tail

  6. Open [generated URL] in the browser to see the web app

Go to and click UPDATE.

Install azcli: brew install azure-cli (()

http://localhost:3000/
https://learn.microsoft.com/en-us/cli/azure/install-azure-cli
Next.JS
https://github.com/kpn-iot/c3y
http://localhost:3000/api/lora