SlideShare una empresa de Scribd logo
1 de 95
Descargar para leer sin conexión
Miroslav Malecha / Product Manager
Bonitoo.io
IoT Center Workshop
InfluxDB
© 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
© 2020 InfluxData. All rights reserved.
3
Issues, Questions?
Please use Chat in Zoom:
• Something does not work
• Questions
• Comments
All the decks are available in
the chat for copy-paste
© 2020 InfluxData. All rights reserved.
4
InfluxDB
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
© 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.
© 2020 InfluxData. All rights reserved.
6
InfluxDB Introduction
© 2020 InfluxData. All rights reserved.
7
Deployment options
• InfluxDB Cloud
https://cloud2.influxdata.com
/signup
• Local deployment
(OSS)
IoT Center
© 2020 InfluxData. 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)
• InfluxData consulting partner
Delivered Client Libraries and other deliverables
© 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?
© 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
© 2020 InfluxData. 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
© 2020 InfluxData. All rights reserved.
6
Devices Registration
Left menu
• Devices
Registration
© 2020 InfluxData. All rights reserved.
7
Virtual Device - Generate demo data
Left menu
• Virtual Device
Top screen
• Button with pencil
© 2020 InfluxData. All rights reserved.
8
Visualisation
Left Menu
• Dashboard
Filters
• Device
• Time
© 2020 InfluxData. All rights reserved.
9
IoT Center Demo
Link - http://localhost:5000
© 2020 InfluxData. All rights reserved.
10
Source code organization
https://github.com/bonitoo-io/iot-center-v2
Directories
• app
• server
• ui
• client_arduino
• client_python
© 2020 InfluxData. All rights reserved.
11
Goal of this workshop
1. Extend visualisations - add GEO widget
2. Node.js applications monitoring
© 2020 InfluxData. All rights reserved.
12
Documentation
1. Help windows embedded into IoT Center
2. Dev guide https://influxdata.github.io/iot-dev-guide
Workshop
IoT Center Installation
© 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
© 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
© 2020 InfluxData. All rights reserved.
4
Create InfluxDB
Cloud Account
Skip this if you already have the InfluxDB account
© 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
© 2020 InfluxData. All rights reserved.
6
Verification
Only when email option was selected
© 2020 InfluxData. All rights reserved.
7
Registration
1. Select any provider
2. Company name
3. Read & check agreement
4. Click continue
© 2020 InfluxData. All rights reserved.
8
Select plan
• Select Free tier
(time-unlimited)
• You can upgrade the
tier any time
© 2020 InfluxData. All rights reserved.
9
InfluxDB 2 Cloud Account Created
If you already have the InfluxDB account, please login
© 2020 InfluxData. All rights reserved.
10
Generate API Token for IoT Center
Menu
• Data
Tab
• Tokens
Button
• Generate
Select
• All Access
Token
© 2020 InfluxData. All rights reserved.
11
Define API Token Name
Enter Description
• e.g. “IoT Center”
Button
• Save
© 2020 InfluxData. All rights reserved.
12
Get API Token
1. Click on the token name
2. Click button
• Copy to clipboard
Keep this page open - we use
the token later
© 2020 InfluxData. All rights reserved.
13
IoT Center
Installation
© 2020 InfluxData. 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 -
© 2020 InfluxData. All rights reserved.
15
Install yarn
• Linux - Install package yarn
• Windows/Mac - https://classic.yarnpkg.com/en/docs/install
• Test yarn
$ yarn --version
1.22.5
© 2020 InfluxData. All rights reserved.
16
Install git
• Linux - Install package git-all
• Windows/Mac - https://git-scm.com/downloads
• Test git
$ git --version
git version 2.25.1
© 2020 InfluxData. 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.
© 2020 InfluxData. 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.
© 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
© 2020 InfluxData. 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
© 2020 InfluxData. All rights reserved.
21
Virtual Device - Generate demo data
Left menu
• Virtual Device
Top screen
• Button with pencil
© 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
© 2020 InfluxData. All rights reserved.
23
Test Demo Data
Left Menu
• Click Dashboard
© 2020 InfluxData. 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
© 2020 InfluxData. All rights reserved.
25
Mobile client - Flutter
Using Dart InfluxDB Library
https://github.com/influxdata/iot-center-flutter
© 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
Workshop
InfluxDB Data Explorer
© 2020 InfluxData. All rights reserved.
2
Agenda
• InfluxDB Cloud Login
• Introduce Flux Query Language
• Data Explorer
• Exercise: Query GEO Data
© 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
© 2020 InfluxData. All rights reserved.
4
Start Explorer
Click on Explore Icon
© 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
© 2020 InfluxData. 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")
© 2020 InfluxData. 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”
© 2020 InfluxData. All rights reserved.
8
Show Raw Query Data
Click to View Raw Data
• Table with all the columns
© 2020 InfluxData. 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")
© 2020 InfluxData. All rights reserved.
10
1/2 Using Query Builder
© 2020 InfluxData. 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”
© 2020 InfluxData. All rights reserved.
12
Documentation
More information:
https://docs.influxdata.com/influxdb/v2.0/query-data/get-started/
Javascript client to InfluxDB v2 APIs
InfluxDB JS Client
© 2020 InfluxData. All rights reserved.
2
Direct write into InfluxDB
$ 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
© 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/
© 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
© 2020 InfluxData. 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
• Buffering
• Retry
© 2020 InfluxData. 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'
)
},
})
© 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
© 2020 InfluxData. All rights reserved.
8
Documentation
More information:
https://influxdata.github.io/influxdb-client-js/
GEO Visualisation
© 2020 InfluxData. All rights reserved.
2
Extend Dashboard
Latest Value
• Gauge
History
• Line chart
Location history
• This exercise
© 2020 InfluxData. All rights reserved.
3
Goal
Add location history of the IoT device
© 2020 InfluxData. All rights reserved.
4
Steps
All the changes in the dashboard file:
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
© 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
}
© 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()
© 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 {
© 2020 InfluxData. 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
='&copy; <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
© 2020 InfluxData. 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
© 2020 InfluxData. All rights reserved.
10
Dashboard with GEO
Refresh page if not visible
© 2020 InfluxData. 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
Workshop
Node.js monitoring
© 2021 InfluxData. All rights reserved.
2
Agenda
• Process Monitoring
• Response time Monitoring
• InfluxDB Dashboard
• Monitoring in 2 steps
© 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
© 2021 InfluxData. 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)
})
)
}
© 2021 InfluxData. All rights reserved.
5
IoT Center
Monitoring
© 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)
...
}
© 2021 InfluxData. All rights reserved.
7
Install Dashboard 1/2
Left Menu
• Settings
Tab
• Templates
Paste the URL
• URL below
Button
• Lookup template
© 2021 InfluxData. All rights reserved.
8
Confirm imported template
Button
• Install Template
© 2021 InfluxData. All rights reserved.
9
Imported Template
© 2021 InfluxData. All rights reserved.
10
Open the imported dashboard
© 2021 InfluxData. All rights reserved.
11
Node.js Monitoring Dashboard
Add new chart Filters (based on variables)
© 2021 InfluxData. All rights reserved.
12
Application monitoring - custom events
InfluxDB 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)
© 2021 InfluxData. All rights reserved.
13
Nodesource
Advanced real-time insight into application performance and security
© 2021 InfluxData. All rights reserved.
14
InfluxDB Templates
Select
Queries & Scripts
Select
Dashboards
Select
Data Sources
Network Monitoring
Security
Kubernetes Monitoring
TIME TO AWESOME
© 2021 InfluxData. All rights reserved.
15
Show & contribute to InfluxDB Templates
© 2021 InfluxData. All rights reserved.
16
IoT Center Template
https://github.com/influxdata/community-templates/tree/master/iot_center
© 2021 InfluxData. All rights reserved.
17
Q & A
© 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
Thank You

Más contenido relacionado

Similar a Webinar Registration Getting Started with Building Your First IoT App

Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud
Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud
Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud InfluxData
 
Prototyping the internet of things with Node-RED
Prototyping the internet of things with Node-REDPrototyping the internet of things with Node-RED
Prototyping the internet of things with Node-REDPooja Mistry
 
Srikanth_PILLI_CV_latest
Srikanth_PILLI_CV_latestSrikanth_PILLI_CV_latest
Srikanth_PILLI_CV_latestSrikanth Pilli
 
IAB3948 Wiring the internet of things with Node-RED
IAB3948 Wiring the internet of things with Node-REDIAB3948 Wiring the internet of things with Node-RED
IAB3948 Wiring the internet of things with Node-REDPeterNiblett
 
Using Node-RED for building IoT workflows
Using Node-RED for building IoT workflowsUsing Node-RED for building IoT workflows
Using Node-RED for building IoT workflowsAniruddha Chakrabarti
 
What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3AVEVA
 
InfluxDB + Kepware: Start Monitoring Industrial Data Quickly
InfluxDB + Kepware: Start Monitoring Industrial Data QuicklyInfluxDB + Kepware: Start Monitoring Industrial Data Quickly
InfluxDB + Kepware: Start Monitoring Industrial Data QuicklyInfluxData
 
Narender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni
 
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...InfluxData
 
Introduction to Node-RED
Introduction to Node-REDIntroduction to Node-RED
Introduction to Node-REDnodered_ug_jp
 
Fiware IoT Proposal and Community
Fiware IoT Proposal and CommunityFiware IoT Proposal and Community
Fiware IoT Proposal and CommunityCARLOS RALLI-UCENDO
 
Connecting devices to the internet of things
Connecting devices to the internet of thingsConnecting devices to the internet of things
Connecting devices to the internet of thingsBernard Kufluk
 
How to install IBM Connections in a Coffe Break
How to install IBM Connections in a Coffe BreakHow to install IBM Connections in a Coffe Break
How to install IBM Connections in a Coffe BreakAndrea Fontana
 
FIWARE Primer - Learn FIWARE in 60 Minutes
FIWARE Primer - Learn FIWARE in 60 MinutesFIWARE Primer - Learn FIWARE in 60 Minutes
FIWARE Primer - Learn FIWARE in 60 MinutesFederico Michele Facca
 
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 Minutes
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 MinutesFederico Michele Facca - FIWARE Primer - Learn FIWARE in 60 Minutes
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 MinutesCodemotion
 
IoT solutions with InduSoft Web Studio and Arduino in Coating Processes
IoT solutions with InduSoft Web Studio and Arduino in Coating ProcessesIoT solutions with InduSoft Web Studio and Arduino in Coating Processes
IoT solutions with InduSoft Web Studio and Arduino in Coating ProcessesAVEVA
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Raspberry pi and Azure
Raspberry pi and AzureRaspberry pi and Azure
Raspberry pi and AzureFaisal Mehmood
 
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...Intel® Software
 

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

Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud
Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud
Announcing: Native MQTT Integration with HiveMQ and InfluxDB Cloud
 
Prototyping the internet of things with Node-RED
Prototyping the internet of things with Node-REDPrototyping the internet of things with Node-RED
Prototyping the internet of things with Node-RED
 
Srikanth_PILLI_CV_latest
Srikanth_PILLI_CV_latestSrikanth_PILLI_CV_latest
Srikanth_PILLI_CV_latest
 
IAB3948 Wiring the internet of things with Node-RED
IAB3948 Wiring the internet of things with Node-REDIAB3948 Wiring the internet of things with Node-RED
IAB3948 Wiring the internet of things with Node-RED
 
Using Node-RED for building IoT workflows
Using Node-RED for building IoT workflowsUsing Node-RED for building IoT workflows
Using Node-RED for building IoT workflows
 
What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3
 
InfluxDB + Kepware: Start Monitoring Industrial Data Quickly
InfluxDB + Kepware: Start Monitoring Industrial Data QuicklyInfluxDB + Kepware: Start Monitoring Industrial Data Quickly
InfluxDB + Kepware: Start Monitoring Industrial Data Quickly
 
Narender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni Resume - Updated
Narender Soni Resume - Updated
 
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...
Brian Gilmore [InfluxData] | InfluxDB in an IoT Application Architecture | In...
 
Introduction to Node-RED
Introduction to Node-REDIntroduction to Node-RED
Introduction to Node-RED
 
Fiware IoT Proposal and Community
Fiware IoT Proposal and CommunityFiware IoT Proposal and Community
Fiware IoT Proposal and Community
 
Connecting devices to the internet of things
Connecting devices to the internet of thingsConnecting devices to the internet of things
Connecting devices to the internet of things
 
How to install IBM Connections in a Coffe Break
How to install IBM Connections in a Coffe BreakHow to install IBM Connections in a Coffe Break
How to install IBM Connections in a Coffe Break
 
FIWARE Primer - Learn FIWARE in 60 Minutes
FIWARE Primer - Learn FIWARE in 60 MinutesFIWARE Primer - Learn FIWARE in 60 Minutes
FIWARE Primer - Learn FIWARE in 60 Minutes
 
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 Minutes
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 MinutesFederico Michele Facca - FIWARE Primer - Learn FIWARE in 60 Minutes
Federico Michele Facca - FIWARE Primer - Learn FIWARE in 60 Minutes
 
IoT solutions with InduSoft Web Studio and Arduino in Coating Processes
IoT solutions with InduSoft Web Studio and Arduino in Coating ProcessesIoT solutions with InduSoft Web Studio and Arduino in Coating Processes
IoT solutions with InduSoft Web Studio and Arduino in Coating Processes
 
Node-RED Installer, Standalone Installer using Electron
Node-RED Installer, Standalone Installer using ElectronNode-RED Installer, Standalone Installer using Electron
Node-RED Installer, Standalone Installer using Electron
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Raspberry pi and Azure
Raspberry pi and AzureRaspberry pi and Azure
Raspberry pi and Azure
 
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...
Accelerate Your IoT and Robotics Development Using Web Technology and Apache ...
 

Más de InfluxData

Announcing InfluxDB Clustered
Announcing InfluxDB ClusteredAnnouncing InfluxDB Clustered
Announcing InfluxDB ClusteredInfluxData
 
Best Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow EcosystemBest Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow EcosystemInfluxData
 
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...InfluxData
 
Power Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDBPower Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDBInfluxData
 
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base InfluxData
 
Build an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING StackBuild an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING StackInfluxData
 
Meet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using RustMeet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using RustInfluxData
 
Introducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud DedicatedIntroducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud DedicatedInfluxData
 
Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB InfluxData
 
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...InfluxData
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...InfluxData
 
Introducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage EngineIntroducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage EngineInfluxData
 
Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena InfluxData
 
Understanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage EngineUnderstanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage EngineInfluxData
 
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDBStreamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDBInfluxData
 
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...InfluxData
 
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022InfluxData
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022InfluxData
 
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...InfluxData
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022InfluxData
 

Más de InfluxData (20)

Announcing InfluxDB Clustered
Announcing InfluxDB ClusteredAnnouncing InfluxDB Clustered
Announcing InfluxDB Clustered
 
Best Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow EcosystemBest Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow Ecosystem
 
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
 
Power Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDBPower Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDB
 
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
 
Build an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING StackBuild an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING Stack
 
Meet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using RustMeet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using Rust
 
Introducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud DedicatedIntroducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud Dedicated
 
Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB
 
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
 
Introducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage EngineIntroducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage Engine
 
Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena
 
Understanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage EngineUnderstanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage Engine
 
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDBStreamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
 
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
 
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
 
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
 

Último

Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleanscorenetworkseo
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)Christopher H Felton
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITMgdsc13
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一Fs
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 

Último (20)

Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleans
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITM
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 

Webinar Registration Getting Started with Building Your First IoT App

  • 1. Miroslav Malecha / Product Manager Bonitoo.io IoT Center Workshop InfluxDB
  • 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
  • 3. © 2020 InfluxData. All rights reserved. 3 Issues, Questions? Please use Chat in Zoom: • Something does not work • Questions • Comments All the decks are available in the chat for copy-paste
  • 4. © 2020 InfluxData. All rights reserved. 4 InfluxDB 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.
  • 6. © 2020 InfluxData. All rights reserved. 6 InfluxDB Introduction
  • 7. © 2020 InfluxData. All rights reserved. 7 Deployment options • InfluxDB Cloud https://cloud2.influxdata.com /signup • Local deployment (OSS)
  • 9. © 2020 InfluxData. 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) • InfluxData 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 InfluxData. 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
  • 13. © 2020 InfluxData. All rights reserved. 6 Devices Registration Left menu • Devices Registration
  • 14. © 2020 InfluxData. All rights reserved. 7 Virtual Device - Generate demo data Left menu • Virtual Device Top screen • Button with pencil
  • 15. © 2020 InfluxData. All rights reserved. 8 Visualisation Left Menu • Dashboard Filters • Device • Time
  • 16. © 2020 InfluxData. All rights reserved. 9 IoT Center Demo Link - http://localhost:5000
  • 17. © 2020 InfluxData. All rights reserved. 10 Source code organization https://github.com/bonitoo-io/iot-center-v2 Directories • app • server • ui • client_arduino • client_python
  • 18. © 2020 InfluxData. All rights reserved. 11 Goal of this workshop 1. Extend visualisations - add GEO widget 2. Node.js applications monitoring
  • 19. © 2020 InfluxData. All rights reserved. 12 Documentation 1. Help windows embedded into IoT Center 2. Dev guide https://influxdata.github.io/iot-dev-guide
  • 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
  • 23. © 2020 InfluxData. All rights reserved. 4 Create InfluxDB Cloud Account Skip this if you already have the InfluxDB account
  • 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
  • 25. © 2020 InfluxData. All rights reserved. 6 Verification Only when email option was selected
  • 26. © 2020 InfluxData. All rights reserved. 7 Registration 1. Select any provider 2. Company name 3. Read & check agreement 4. Click continue
  • 27. © 2020 InfluxData. All rights reserved. 8 Select plan • Select Free tier (time-unlimited) • You can upgrade the tier any time
  • 28. © 2020 InfluxData. All rights reserved. 9 InfluxDB 2 Cloud Account Created If you already have the InfluxDB account, please login
  • 29. © 2020 InfluxData. All rights reserved. 10 Generate API Token for IoT Center Menu • Data Tab • Tokens Button • Generate Select • All Access Token
  • 30. © 2020 InfluxData. All rights reserved. 11 Define API Token Name Enter Description • e.g. “IoT Center” Button • Save
  • 31. © 2020 InfluxData. All rights reserved. 12 Get API Token 1. Click on the token name 2. Click button • Copy to clipboard Keep this page open - we use the token later
  • 32. © 2020 InfluxData. All rights reserved. 13 IoT Center Installation
  • 33. © 2020 InfluxData. 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 -
  • 34. © 2020 InfluxData. All rights reserved. 15 Install yarn • Linux - Install package yarn • Windows/Mac - https://classic.yarnpkg.com/en/docs/install • Test yarn $ yarn --version 1.22.5
  • 35. © 2020 InfluxData. All rights reserved. 16 Install git • Linux - Install package git-all • Windows/Mac - https://git-scm.com/downloads • Test git $ git --version git version 2.25.1
  • 36. © 2020 InfluxData. 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 InfluxData. 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 InfluxData. 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
  • 40. © 2020 InfluxData. All rights reserved. 21 Virtual Device - Generate demo data Left menu • Virtual Device Top screen • Button with pencil
  • 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
  • 42. © 2020 InfluxData. All rights reserved. 23 Test Demo Data Left Menu • Click Dashboard
  • 43. © 2020 InfluxData. 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
  • 44. © 2020 InfluxData. All rights reserved. 25 Mobile client - Flutter Using Dart InfluxDB Library https://github.com/influxdata/iot-center-flutter
  • 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
  • 47. © 2020 InfluxData. All rights reserved. 2 Agenda • InfluxDB Cloud Login • Introduce Flux Query Language • Data Explorer • Exercise: Query GEO Data
  • 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
  • 49. © 2020 InfluxData. All rights reserved. 4 Start Explorer Click on Explore Icon
  • 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 InfluxData. 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 InfluxData. 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”
  • 53. © 2020 InfluxData. All rights reserved. 8 Show Raw Query Data Click to View Raw Data • Table with all the columns
  • 54. © 2020 InfluxData. 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")
  • 55. © 2020 InfluxData. All rights reserved. 10 1/2 Using Query Builder
  • 56. © 2020 InfluxData. 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”
  • 57. © 2020 InfluxData. All rights reserved. 12 Documentation More information: https://docs.influxdata.com/influxdb/v2.0/query-data/get-started/
  • 58. Javascript client to InfluxDB v2 APIs InfluxDB JS Client
  • 59. © 2020 InfluxData. All rights reserved. 2 Direct write into InfluxDB $ 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 InfluxData. 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 • Buffering • Retry
  • 63. © 2020 InfluxData. 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
  • 65. © 2020 InfluxData. All rights reserved. 8 Documentation More information: https://influxdata.github.io/influxdb-client-js/
  • 67. © 2020 InfluxData. All rights reserved. 2 Extend Dashboard Latest Value • Gauge History • Line chart Location history • This exercise
  • 68. © 2020 InfluxData. All rights reserved. 3 Goal Add location history of the IoT device
  • 69. © 2020 InfluxData. All rights reserved. 4 Steps All the changes in the dashboard file: 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 InfluxData. 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 ='&copy; <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 InfluxData. 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
  • 75. © 2020 InfluxData. All rights reserved. 10 Dashboard with GEO Refresh page if not visible
  • 76. © 2020 InfluxData. 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
  • 78. © 2021 InfluxData. All rights reserved. 2 Agenda • Process Monitoring • Response time Monitoring • InfluxDB Dashboard • Monitoring in 2 steps
  • 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 InfluxData. 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) }) ) }
  • 81. © 2021 InfluxData. All rights reserved. 5 IoT Center Monitoring
  • 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) ... }
  • 83. © 2021 InfluxData. All rights reserved. 7 Install Dashboard 1/2 Left Menu • Settings Tab • Templates Paste the URL • URL below Button • Lookup template
  • 84. © 2021 InfluxData. All rights reserved. 8 Confirm imported template Button • Install Template
  • 85. © 2021 InfluxData. All rights reserved. 9 Imported Template
  • 86. © 2021 InfluxData. All rights reserved. 10 Open the imported dashboard
  • 87. © 2021 InfluxData. All rights reserved. 11 Node.js Monitoring Dashboard Add new chart Filters (based on variables)
  • 88. © 2021 InfluxData. All rights reserved. 12 Application monitoring - custom events InfluxDB 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)
  • 89. © 2021 InfluxData. All rights reserved. 13 Nodesource Advanced real-time insight into application performance and security
  • 90. © 2021 InfluxData. All rights reserved. 14 InfluxDB Templates Select Queries & Scripts Select Dashboards Select Data Sources Network Monitoring Security Kubernetes Monitoring TIME TO AWESOME
  • 91. © 2021 InfluxData. All rights reserved. 15 Show & contribute to InfluxDB Templates
  • 92. © 2021 InfluxData. All rights reserved. 16 IoT Center Template https://github.com/influxdata/community-templates/tree/master/iot_center
  • 93. © 2021 InfluxData. All rights reserved. 17 Q & A
  • 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