Webinar Registration Getting Started with Building Your First IoT App

1. Miroslav Malecha / Product Manager Bonitoo.io IoT Center Workshop InﬂuxDB

2. © 2020 InfluxData. All rights reserved. 2 Agenda • What is InfluxDB? • IoT Center Demo Application • Install IoT Center • Build InfluxDB data queries • InfluxDB JS Client library introduction • Add geo widget into Node.js application • InfluxDB as monitoring platform for Node.js

4. © 2020 InﬂuxData. All rights reserved. 4 InﬂuxDB Time Series Platform EMPOWERS DEVELOPERS TO BUILD IOT, ANALYTICS, & MONITORING SOFTWARE. – Purpose built to handle the massive volumes of time stamped data – Easy to share, easy to extend – Multi data source – Open Source (MIT license) – Easy to get started but powerful to scale

5. © 2020 InfluxData. All rights reserved. 5 Powerful APIs, Tools, & Ecosystem Developers using the InfluxDB platform build their applications with less effort, less code, and less configuration. Unrestricted developer productivity Client and server libraries in everything from React, JavaScript, Go, Python and more. Get a head-start with templates Inspiring templates for every use case. Easy to create and share — find what’s right for you. Vibrant open source community A diverse and highly motivated community, making contributions in code, & documentation. Powerful & active ecosystem 200+ Telegraf plugins, integrations with Grafana or data sources like Google Bigtable.

8. IoT Center

9. © 2020 InﬂuxData. All rights reserved. 2 Bonitoo - SW Engineering Company • End-to-end R&D Services (architecture, agile development, documentation, support, hosting, operation) • Development of custom monitoring solutions • Strong team of professionals (development for SaaS Startups, Enterprise Software, Mobile applications) • InﬂuxData consulting partner Delivered Client Libraries and other deliverables

10. © 2020 InfluxData. All rights reserved. 3 • Simple demo application • How to integrate InfluxDB • Write measurements • Query database • Manage InfluxDB • Based on Node.js and React • IoT Devices example (out of scope of this workshop) • Embedded Virtual Device • Links to source code - GIT • No DB installation - InfluxDB Cloud What is IoT Center?

11. © 2020 InfluxData. All rights reserved. 4 IoT Center Architecture Configuration InfluxDB 2 Cloud Time Series Database (or standalone InfluxDB) IoT Center IoT Device InfluxDB Client Arduino Python Java .NET ... InfluxDB JS Client Virtual Device Web Browser Measurements (temp, humidity, pressure, GPS, …) UI

12. © 2020 InﬂuxData. All rights reserved. 5 IoT Center Three functions • Device Registration - register new IoT Devices • Virtual Device - emulate IoT device • Dashboard - show measured data from the IoT Devices

20. Workshop IoT Center Installation

21. © 2020 InfluxData. All rights reserved. 2 Agenda • InfluxDB Cloud Account • Prepare environment • Install git • Install node.js • Install yarn • Get source code from GIT • Build IoT Center • Set IoT Center configuration • Run IoT Center • Virtual Device Test

22. © 2020 InfluxData. All rights reserved. 3 IoT Center Installation Approach 1 2 Configuration InfluxDB Cloud Time Series Database (or Standalone InfluxDB) IoT Center IoT Devices InfluxDB Client Arduino Python Java .NET ... InfluxDB JS Client Virtual Device Web Browser Measurements UI Raspberry Pi ESP 8266/32

24. © 2020 InfluxData. All rights reserved. 5 Sign up to Influxdb Cloud Open Web Browser https://cloud2.influxdata.com/ Three options: 1. Register via Google email • Select right Google account 2. Register via Microsoft email • Select right Microsoft account • Requires Read profile rights 3. Create account via any email • Fill Name, Email, Password • Receive email for validation Skip this step if you already have the account 1 2 3

33. © 2020 InﬂuxData. All rights reserved. 14 Install node.js • Linux - Install package nodejs (need node version v10+.) • Windows/Mac - https://nodejs.org/en/download/ • Test node.js $ node --version v10.19.0 Ubuntu/debian newer node version - curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

36. © 2020 InﬂuxData. All rights reserved. 17 Download IoT Center source code Run: git clone https:/ /github.com/bonitoo-io/iot-center-v2 Help: https://github.com/bonitoo-io/iot-center-v2 Already cloned? Run: git pull $ git clone https://github.com/bonitoo-io/iot-center-v2 Cloning into 'iot-center-v2'... remote: Enumerating objects: 1185, done. remote: Total 1185 (delta 0), reused 0 (delta 0), pack-reused 1185 Receiving objects: 100% (1404/1404), 1.92 MiB | 1.92 MiB/s, done. Resolving deltas: 100% (977/977), done.

37. © 2020 InﬂuxData. All rights reserved. 18 Build IoT Center • Move to app directory: cd iot-center-v2/app/ • Run: yarn install (takes up to few minutes) $ yarn install yarn install v1.22.5 [1/4] Resolving packages… [2/4] Fetching packages… [4/4] Building fresh packages… Done in 140.75s.

38. © 2020 InfluxData. All rights reserved. 19 Configure start scripts Modify files in iot-center-v2/app directory • Windows - open file dev.bat • Linux/Mac - open file dev.sh SET INFLUX_URL=https://us-west-2-1.aws.cloud2.influxdata.com SET INFLUX_TOKEN=h1RbZX2n4kc8Q_jYPpwdjkv3dAZRorNQnN67pMwKs1lGgbMW8vWRjAi7VvkUitQMii2XwJM9qX3cnK4oAZDIjg== SET INFLUX_ORG=node-workshop@bonitoo.io

39. © 2020 InﬂuxData. All rights reserved. 20 Start IoT Center • Execute • dev.bat (Windows) • ./dev.sh (Linux/Mac) ./dev.sh yarn run v1.22.5 cd server && yarn start node index.js Enable proxy from /influx/* to https://us-west-2-1.aws.cloud2.influxdata.com/* Bucket 'iot_center' exists. INFLUX_URL=https://us-west-2-1.aws.cloud2.influxdata.com INFLUX_TOKEN=*** INFLUX_ORG=node-workshop@bonitoo.io INFLUX_BUCKET=iot_center Listening on http://localhost:5000 • Open Web browser: http://localhost:3000 Keep this script running - we will use it later

41. © 2020 InfluxData. All rights reserved. 22 Issues? Errors HttpError: organization name "xnode-workshop@bonitoo.io" not found • fix INFLUX_ORG - wrong organization name Error: Unsupported protocol "null in URL: "us-west-2-1.aws.cloud2.influxdata.com" • fix INFLUX_URL - add https:// Error: 500 Error: getaddrinfo ENOTFOUND xus-west-2-1.aws.cloud2.influxdata.com • fix INFLUX_URL - wrong address Error: 500 Error: 401 Unauthorized : {"code":"unauthorized","message":"unauthorized access"} • fix INFLUX_TOKEN - invalid credentials

43. © 2020 InﬂuxData. All rights reserved. 24 IoT Platforms source code (temperature sensor required) ESP8266 and ESP32 devices Arduino Raspberry Pi Python https://github.com/bonitoo-io/iot-center-v2/tree/master/client_arduino https://github.com/bonitoo-io/iot-center-v2/tree/master/client_python

45. © 2020 InfluxData. All rights reserved. 26 Break - 5 minutes Errors HttpError: organization name "xnode-workshop@bonitoo.io" not found • fix INFLUX_ORG - wrong organization name Error: Unsupported protocol "null in URL: "us-west-2-1.aws.cloud2.influxdata.com" • fix INFLUX_URL - add https:// Error: 500 Error: getaddrinfo ENOTFOUND xus-west-2-1.aws.cloud2.influxdata.com • fix INFLUX_URL - wrong address Error: 500 Error: 401 Unauthorized : {"code":"unauthorized","message":"unauthorized access"} • fix INFLUX_TOKEN - invalid credentials

46. Workshop InﬂuxDB Data Explorer

48. © 2020 InfluxData. All rights reserved. 3 Login into Influxdb Cloud 2 Open Web Browser https://cloud2.influxdata.com/ Click to Log In option Three options available: 1. Google account 2. Microsoft account 3. Own email Click to Log In option

50. © 2020 InfluxData. All rights reserved. 5 Query InfluxDB • Select bucket • iot_centrum • Select measurement • environment • Select field • Temperature • Keep aggregation • Mean • Set Time • Past 1h 1 2 3 4 5 6 7

51. © 2020 InﬂuxData. All rights reserved. 6 Switch to the Script Editor Click to Script Editor Button Show Flux Query from(bucket: "iot_center") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r["_measurement"] == "environment") |> filter(fn: (r) => r["clientId"] == "virtual_device") |> filter(fn: (r) => r["_field"] == "Temperature") |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false) |> yield(name: "mean")

52. © 2020 InﬂuxData. All rights reserved. 7 Basic Flux Query Structure from(bucket: "iot_center") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r["_measurement"] == "environment") |> filter(fn: (r) => r["_field"] == "Temperature") |> filter(fn: (r) => r["clientId"] == "virtual_device") |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false) |> yield(name: "mean") bucket “database with retention policy” aggregateWindow group by time chunks defined by v.windowPeriod variable range time filter v.<name> variables generated by UI _measurement select specific “database table” _field select specific “table column” tag clientID filter specific “rows in the table”

54. © 2020 InﬂuxData. All rights reserved. 9 Task: How to Get GPS Coordinates? We need this query for the GEO widget Virtual device provides GPS coordinates • Fields Lat and Lon • How to adjust the query? • Two options from(bucket: "iot_center") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r["_measurement"] == "environment") |> filter(fn: (r) => r["_field"] == "Temperature") |> filter(fn: (r) => r["clientId"] == "virtual_device") |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false) |> yield(name: "mean")

56. © 2020 InﬂuxData. All rights reserved. 11 2/2 Using Script Editor from(bucket: "iot_center") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r["_measurement"] == "environment") |> filter(fn: (r) => r["_field"] == "Lat" or r["_field"] == "Lon") |> filter(fn: (r) => r["clientId"] == "virtual_device") |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false) |> yield(name: "mean") Add Lat, Lon select “database columns”

58. Javascript client to InﬂuxDB v2 APIs InﬂuxDB JS Client

59. © 2020 InﬂuxData. All rights reserved. 2 Direct write into InﬂuxDB $ curl -i -X POST 'http://localhost:8086/api/v2/write?org=my-org&bucket=my-bucket' -H 'Authorization: Token my-token' -d 'cpu_load_short,host=server01,region=us-west value=0.64 1434055562000000000' Format: line protocol measurement ,tag_set field_set timestamp cpu_load_short ,host=server01,region=us-west value=0.64 1434055562000000000

60. © 2020 InfluxData. All rights reserved. 3 InfluxDB Client Libraries Access InfluxDB API from various programming languages • Arduino - https://github.com/tobiasschuerg/InfluxDB-Client-for-Arduino • C# - https://github.com/influxdata/influxdb-client-csharp • Dart - https://github.com/bonitoo-io/influxdb-client-dart • Go - https://github.com/influxdata/influxdb-client-go • Java - https://github.com/influxdata/influxdb-client-java • JavaScript - https://github.com/influxdata/influxdb-client-js • PHP - https://github.com/influxdata/influxdb-client-php • Python - https://github.com/influxdata/influxdb-client-python • Ruby - https://github.com/influxdata/influxdb-client-ruby • Swift - https://github.com/influxdata/influxdb-client-swift Docs - https://docs.influxdata.com/influxdb/cloud/tools/client-libraries/

61. © 2020 InfluxData. All rights reserved. 4 JavaScript client library Two main packages (for node.js): • @influxdata/influxdb-client • Querying data using the Flux language • Writing data (batched, automatic retries) • Web Browser, Deno: @influxdata/influxdb-client-browser • @influxdata/influxdb-client-apis • Manage sources, buckets, authorizations, tasks, ... • Health check • Examples: https://github.com/influxdata/influxdb-client-js/tree/master/examples • API documentation: https://influxdata.github.io/influxdb-client-js

62. © 2020 InﬂuxData. All rights reserved. 5 Write data const {InfluxDB, Point, HttpError} = require('@influxdata/influxdb-client' ) const {url, token, org, bucket} = require('./env') const {hostname} = require('os') // create a write API const writeAPI = new InfluxDB({url, token}).getWriteApi (org, bucket, 'ns') writeApi.useDefaultTags ({host: hostname()}) // write point with the current timestamp const point1 = new Point('temperature' ) .tag('example', 'write.ts') .floatField('value', 20 + Math.round(100 * Math.random()) / 10) writeAPI.writePoint(point1) // flush data, close API writeAPI.close() Smart write logic implemented • Non-blocking • Buﬀering • Retry

63. © 2020 InﬂuxData. All rights reserved. 6 Query data import {InfluxDB, FluxTableMetaData } from '@influxdata/influxdb-client' import {url, token, org} from './env' const queryApi = new InfluxDB({url, token}).getQueryApi(org) const fluxQuery = 'from(bucket:"my-bucket") |> range(start: 0) |> filter(fn: (r) => r._measurement == "temperature")' // Execute query and receive table metadata and rows queryApi.queryRows(fluxQuery, { next(row: string[], tableMeta: FluxTableMetaData ) { const o = tableMeta.toObject(row) console.log( `${o._time} ${o._measurement} in '${o.location}' (${o.example}): ${o._field}=${o._value}` ) }, error(error: Error) { console.error(error) console.log('nFinished ERROR' ) }, complete() { console.log('nFinished SUCCESS' ) }, })

64. © 2020 InfluxData. All rights reserved. 7 Create Bucket const {InfluxDB, HttpError} = require('@influxdata/influxdb-client' ) const {OrgsAPI, BucketsAPI} = require('@influxdata/influxdb-client-apis' ) const {url, org, token} = require('./env') const influxDB = new InfluxDB({url, token}) const name = 'example-bucket' const orgsAPI = new OrgsAPI(influxDB) //Get organizations const organizations = await orgsAPI.getOrgs({org}) const orgID = organizations .orgs[0].id // get bucket - if exists, delete it const bucketsAPI = new BucketsAPI(influxDB) const buckets = await bucketsAPI.getBuckets({orgID, name}) if (buckets && buckets.buckets && buckets.buckets.length) { const bucketID = buckets.buckets[0].id await bucketsAPI.deleteBucketsID({bucketID}) } // creates a bucket, entity properties are specified in the "body" property const bucket = await bucketsAPI.postBuckets({body: {orgID, name}}) All management APIs are documented in https://influxdata.github.io/influxdb-client-js/influxdb-client-apis.html

66. GEO Visualisation

69. © 2020 InﬂuxData. All rights reserved. 4 Steps All the changes in the dashboard ﬁle: iot-center-v2appuisrcpagesDashboardPage.tsx 1. Update query (from explorer exercise) 2. Add GEO visualisation 2.1. Add imports 2.2. Create visualisation component 2.2.1. Convert input data 2.3. Add GEO visualisation into dashboard

70. © 2020 InfluxData. All rights reserved. 5 1 Update Query In function fetchDeviceMeasurements update flux query: • fetch GPS fields as well (add highlighted code) const fetchDeviceMeasurements = async ( config: DeviceConfig, timeStart = '-30d' ): Promise<GiraffeTable> => { const { // influx_url: url, // use '/influx' proxy to avoid problem with InfluxDB v2 Beta (Docker) influx_token : token, influx_org : org, influx_bucket : bucket, id, } = config const queryApi = new InfluxDB({url: '/influx', token}).getQueryApi(org) const result = await queryTable( queryApi, flux` import "influxdata/influxdb/v1" from(bucket: ${bucket}) |> range(start: ${fluxDuration(timeStart)}) |> filter(fn: (r) => r._measurement == "environment") |> filter(fn: (r) => r["_field"] == "Temperature" or r["_field"] == "TVOC" or r["_field"] == "Pressure" or r["_field"] == "Humidity" or r["_field"] == "CO2" or r["_field"] == "Lat" or r["_field"] == "Lon") |> filter(fn: (r) => r.clientId == ${id}) |> v1.fieldsAsCols()` ) return result }

71. © 2020 InfluxData. All rights reserved. 6 Flux Geo Functions Filtering ● filterRows() ● gridFilter() ● strictFilter() Aggregate ● groupByArea() ● asTracks() Transformation ● s2CellIDToken() ● toRows() Supported Shapes ● box - defined by: minLat, maxLat, minLon, maxLon ● circle - defined by: lat, lon, radius ● polygon - array of points: lat, lon Functions import "experimental/geo" //Circle from(bucket: "rides") |> range(start: 2019-11-01T00:00:00Z) |> filter(fn: (r) => r._measurement == "bike") |> geo.filterRows(region: {lat: 40.69335938, lon: -73.30078125, radius: 20.0}) //Box from(bucket: "rides") |> range(start: 2019-11-01T00:00:00Z) |> filter(fn: (r) => r._measurement == "bike") |> geo.filterRows(region: {minLat: 40.51757813, maxLat: 40.86914063, minLon: -73.65234375, maxLon: -72.94921875}) //Polygon from(bucket: "rides") |> range(start: 2019-11-01T00:00:00Z) |> filter(fn: (r) => r._measurement == "bike") |> geo.filterRows(region: {points:[{lat: 40.671659, lon: -73.936631}, {lat: 40.706543, lon: -73.749177},{lat: 40.791333, lon: -73.880327}]}) // Filter if GEO hashtag is not available - slow from(bucket: "rides") |> range(start: 2019-11-01T00:00:00Z) |> filter(fn: (r) => r._measurement == "bike") |> geo.toRows() |> geo.strictFilter(region: {minLat: 40.51757813, maxLat: 40.86914063, minLon: -73.65234375, maxLon: -72.94921875}) // The fastest GEO filtering - approximate results from(bucket: "rides") |> range(start: 2019-11-01T00:00:00Z) |> filter(fn: (r) => r._measurement == "bike") |> geo.gridFilter(region: {minLat: 40.51757813, maxLat: 40.86914063, minLon: -73.65234375, maxLon: -72.94921875}) |> geo.toRows(correlationKey: ["_time", "id"]) |> geo.asTracks()

72. © 2020 InfluxData. All rights reserved. 7 2.1 Leaflet library imports Use Leaflet library Add the highlighted imports and functions import {queryTable} from '../util/queryTable' import {VIRTUAL_DEVICE } from '../App' import {MapContainer, TileLayer} from 'react-leaflet' import AntPathWrapper from '../util/antPathWrapper' const zip = <T1, T2>(arr1: T1[], arr2: T2[]): [T1, T2][] => arr1.map((x, i) => [x, arr2[i]]) const last = <T,>(arr: T[]) => arr[arr.length - 1] interface DeviceConfig {

73. © 2020 InﬂuxData. All rights reserved. 8 2.2 Create Visualisation component const geo = measurementsTable && measurementsTable ?.length ? (() => { const latCol = measurementsTable .getColumn('Lat', 'number') const lonCol = measurementsTable .getColumn('Lon', 'number') if (!lonCol || !latCol) return undefined const track = zip(latCol as number [], lonCol as number []) // Made from basic react-leaflet example https://react-leaflet.js.org/docs/start-setup return ( <> <MapContainer style ={{width: '100%', height: '500px'}} center ={last(track)} zoom ={6} > <TileLayer attribution ='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url ="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <AntPathWrapper positions ={track} /> </MapContainer> <Divider /> </> ) })() : undefined Add the following function

74. © 2020 InﬂuxData. All rights reserved. 9 2.3 Add GEO visualisation into dashboard Add highlighted line adding the geo visualisation {deviceData?.measurementsTable ?.length ? ( <> {gauges} {geo} {plots} </> ) : ( <Card> <Empty /> </Card> )} </PageContent> ) } export default DashboardPage

76. © 2020 InﬂuxData. All rights reserved. 11 Break - 5 minutes Does not work? • run • cd iot-center-v2/app/ui/src/pages • git checkout origin/map -- DashboardPage.tsx • refresh Dashboard page if geo is not visible

77. Workshop Node.js monitoring

79. © 2021 InfluxData. All rights reserved. 3 Monitoring of Node.js process Connect InfluxDB // create Influx Write API to report application monitoring data const writeAPI = new InfluxDB({url, token}).getWriteApi(org, bucket, 'ns', { defaultTags: { service: 'iot_center', host: require('os').hostname(), }, } // https://nodejs.org/api/process.html#process_process_memoryusage writeAPI.writePoint(createPoint('node_memory_usage' , process.memoryUsage())) // https://nodejs.org/api/process.html#process_process_cpuusage_previousvalue writeAPI.writePoint(createPoint('node_cpu_usage' , process.cpuUsage())) // https://nodejs.org/api/process.html#process_process_resourceusage writeAPI.writePoint(createPoint('node_resource_usage' , process.resourceUsage())) Write process data into InfluxDB // convert data into point function createPoint(measurement, usage) { const point = new Point(measurement) for (const key of Object.keys(usage)) { point.floatField(key, usage[key]) } return point } ● By default it is reported every 10s

80. © 2021 InﬂuxData. All rights reserved. 4 Http response code and time monitoring // export a monitoring function for express.js response time monitoring module.exports = function (app) { app.use( responseTime ((req, res, time) => { // write response time to InfluxDB const point = new Point('express_http_server' ) .tag('uri', req.path) .tag('method', req.method) .tag('status', String(res.statusCode)) .floatField('response_time' , time) writeAPI .writePoint(point) }) ) }

82. © 2021 InfluxData. All rights reserved. 6 Node.js application monitoring in 3 steps Use IoT Center Example 1. Copy monitor.js file from the Iot Center GIT • it expects env.js file with InfluxDB connection parameters 2. Register monitor.js code const onboardInfluxDB = require('./influxdb/onboarding' ) const {logEnvironment , INFLUX_URL} = require('./env') const monitor = require('./monitor') async function startApplication () { const app = express() // monitor application monitor(app) ... }

88. © 2021 InﬂuxData. All rights reserved. 12 Application monitoring - custom events InﬂuxDB can store and query any application event const point = new Point('user_registered' ) .tag('name', req.name) .tag('email', req.email) .tag('result', String(res.statusCode)) .floatField('response_time' , time) writeAPI.writePoint(point)

94. © 2021 InfluxData. All rights reserved. 18 Your next steps – Keep playing with the IoT Center sample app with your Free InfluxDB Cloud account – Try other templates from the gallery to monitor your apps, sensors, and so much more – Don’t forget your socks! – Join the community • Community.Influxdata.com • Slack • GitHub

95. Thank You

Webinar Registration Getting Started with Building Your First IoT App

You are reading a preview.

Check these out next

Webinar Registration Getting Started with Building Your First IoT App

More Related Content

Slideshows for you (20)

Similar to Webinar Registration Getting Started with Building Your First IoT App (20)

More from InfluxData (20)

Recently uploaded (20)