Building an IoT App With InfluxDB, JavaScript, and Plotly.js

Rate this content
Bookmark

The Internet of Things (IoT) is increasingly driven by sensor data, with devices taking measured actions based on everything from wind speed and direction, vital body functions, illumination intensity, and temperature.


In this session we will showcase how to build a fully functional sample IoT monitoring application built with javascript and utilizing InfluxDB as its backend. With integrations to visualization libraries such as Plotly, creating automated alerts with InfluxDB as well as data downsampling.

20 min
05 Jun, 2023

Video Summary and Transcription

This Talk introduces building an IoT app with InfluxDB, JavaScript, and PlotlyJS, highlighting the benefits of time series databases for handling high ingestion rates and data manipulation. It provides instructions for setting up IoT devices and connecting sensors, along with data cleaning and transformation techniques. The Talk covers creating a bucket in InfluxDB, using JavaScript client libraries for data read and write, querying and graphing data with InfluxDB and Plotly.js, creating dashboards, and available learning resources. Overall, it offers a comprehensive overview of building IoT applications with InfluxDB.

1. Introduction to InfluxDB and IoT Data

Short description:

Hello, and welcome to my presentation. Today, I'll be going over building an IoT app with InfluxDB, JavaScript, and PlotlyJS. Time series data is different from other types of data, and for our project, IoT data is considered metrics data. Time series databases are ideal for storing IoT data as they can handle high ingestion rates and allow for data manipulation over time. We provide the Telegraph plugin library for data acquisition, but you can also use our JavaScript client library. Feel free to check out the project link to follow along and deploy the project on your own.

Hello, and welcome to my presentation. So today I'm going to be going over building an IoT app with InfluxDB, JavaScript, and PlotlyJS. My name is Zoe Steinkamp. I am a developer advocate at InfluxData, which means I am a person who not only likes to educate developers on some of our features, but also just in general listen to our open source community and talk with them about different things that they'd like to see and, you know, get feedback and help people.

If you have any questions, feel free to reach out to me on LinkedIn after this talk and just in general. So the agenda today, I'll go over the InfluxDB overview just to give you an idea of some of the tools that we're using the IoT hardware setup, the data ingestion setup, the data request, and then the GitHub code base. And again, you can feel free to reach out to me with questions on LinkedIn.

So introduction to InfluxDB. So first things first, something that you should probably understand is that time series data is a little bit different than some of the data that you're probably more used to working with. And for our project, IoT data is considered metrics data. It's values that are collected regularly over time. So for example, as you're going to find out in this project, for the plant, we monitor things like the humidity of the air, the water amount in the soil, the overall moisture content. So those are going to be things where the sensors will send us a data point roughly every second or so depending on the sensor that you use and how you structure your data. But that is roughly what we would expect. There's other types of time series data, things that are events that are more regularly generated and also things like traces. So as I mentioned before, time series databases are a pretty good spot for putting your IoT data. You're going to find that through most of the internet if you start to build up your own IoT projects. Most people will mention the fact that you really want to pick a database that can handle the higher ingestion rate, but also make sure that you can do things like downsampling or manipulating your data, especially over time. Things like I want to know at this time period what was happening to the plant. It's a little harder to do that in other types of DBS, especially a SQL DB, which is not built for that type of querying normally.

And when it comes to data acquisition methods, so one thing to note is that we do take care of the Telegraph plugin library, which is an open-source plugin library for specifically time series data. It has a lot of different plugin options. It has about 300 plus. And some of these might actually work for your use case, depending on the IoT device that you're working with. For the project, I'm using a Boron particle microcontroller which is very specific in how it works and how I get data off of it. So I'm using the client library, specifically our JavaScript client library, to get that data off. But you also might be able to use Telegraph depending on the device that you have. So, I'm going to go ahead and link the project here. So go ahead and grab this link. This will allow you to follow along as well as to actually deploy this project on your own.

2. Setting up IoT devices and required components

Short description:

It just gives you in general the code, the instructions, explanations for things that possibly I'm not going to get into quite as much during my 20 minutes here. So setting up your IoT devices. Basically, how this works is the microcontroller reads the data off of your IoT sensors. From there, it goes through the JS client library and is put up into InfluxDB Cloud. You're going to need a plant, preferably alive. A particle bore on microcontroller or another compatible microcontroller. If you choose to use something like a Raspberry Pi for this project, you're going to have to do a lot to get it to work. Different microcontroller brands do things slightly differently in how much capability they give you to get the data off.

It just gives you in general the code, the instructions, explanations for things that possibly I'm not going to get into quite as much during my 20 minutes here. And you know, it's just a good link to grab. I won't be repeating this link, so I'm going to leave this up for just one more second here. All right. And I can probably post this. If we have like a chat or anything, when this goes live, I'll go ahead and post it there.

So setting up your IoT devices. So a really quick background. Basically, how this works is the microcontroller reads the data off of your IoT sensors. So like I said, that's going to be things like a light sensor, humidity, soil temperature. This is all in the context of a plant. So these are all things that plants tend to care about. If you were to do an IoT project that was not plant-based, maybe you're monitoring something like beer brewing or an aquarium, your sensors are going to be slightly different which is why I just categorized them as IoT devices.

From there, you send it through, at least for my personal use, we send it through a server, basically normally my home Wi-Fi. And from there, the application server, which is normally my computer. Basically, my computer has a USB that is plugged into it that reads the data off of my microcontroller. It's not an ideal setup. In the future, I think I'd like to maybe route it through something like Raspberry Pi or some other type of application server that I could use. Something that is not my laptop, but for now, that's how this setup works. From there, it goes through the JS client library and is put up into InfluxDB Cloud. You could also put it into the InfluxDB open source. We'll have examples for both of those within the GitHub project, so you can kind of pick your own adventure somewhat and decide where you want to put your data.

You're going to need in no particular order as you can see from my beautiful photo setup here, a plant, preferably alive. I've done it with a fake plant. It doesn't really work that well. A particle bore on microcontroller or another compatible microcontroller. We have the code for an Arduino as well, so you can reference that one. If you choose to use something that's a little, like if you choose to use like a Raspberry Pi for this project, you're going to have to do a lot of, what's the word here? Difficulty code. You're just going to have to do a lot to get it to work, but I will say that there is tons and tons of resources online about getting a Raspberry Pi to do something similar to this, but just keep in mind that different microcontroller brands, different brands in general when it comes to these type of IoT devices, they do things slightly differently in how much capability they give you to get the data off. Some of them give you a lot of capabilities.

3. Setting up IoT devices and data ingestion

Short description:

Particle offers APIs and options for IoT sensors. You can choose the sensors you need, buy them online, and follow the provided schematics to connect them to a breadboard. The project on GitHub includes examples of connecting light, temperature, soil moisture, and humidity sensors to a microcontroller via USB.

For example, Particle gives me APIs and stuff, which I'm not taking advantage of during this, but that was an option for me that I could use. At least one IoT sensor for your plant. They will have links in the project that will include where you can buy them off Amazon if you're US based, as well as EU versions as well.

One thing to note though is you can kind of pick and choose what you would like. Just make sure to read the Amazon reviews. Don't buy something that you know is gonna break two days later. A breadboard with jump wires and terminal strips. Again, can be bought on the internet. You can find them all over. We also provide the schematics for the sensors.

So what this basically allows you to do is it allows you to hook up these four sensors, which again, I'll be linking them. So you can buy the exact same types if you would like. That would certainly make it a lot easier on you. Or something similar that reads a similar dataset, like if you're going to do soil moisture, do either that soil moisture sensor or one very similar. And then you can go ahead and plug them into the breadboard like this. And those are the ports that we expect to see this data coming in through and into. Now you can obviously change the code. So you can, you know, put more sensors on here, you can change where they're porting into. But this is just obviously really great for people who are not super comfortable, you know, setting something like this up. It makes it a lot easier and a lot more hands-off to an extent. Like you can just follow the schematics board and get going on your project. And again, this is inside the project on GitHub so you don't have to worry. Oh, and really quick for my project I had a light sensor, temperature, soil moisture, and my temperature and humidity were comboed. So data ingestion setup. So connecting to the microcontroller, so I already kind of went into this, which is that for every single person, it's going to be slightly different. I have code in the project that basically runs on my microcontroller device and tells it to port the data through the USB. And so with that, that works well for me, but that's something that I wrote custom to make it do that. Again, depending on the controller that you're using, you might have to do slightly different versions of this. But overall, what I want you guys to be aware of is basically what I'm doing here is I'm calling it from that USB port on my terminal and I'm receiving back data.

4. Data Cleaning and Transformation

Short description:

When receiving data from IoT sensors, it's common for the data to need some cleaning up. The values may not be in a readable format, such as Celsius or Fahrenheit. There are code examples and resources available online that provide functions and equations to transform the data into a more human-readable format.

But overall, what I want you guys to be aware of is basically what I'm doing here is I'm calling it from that USB port on my terminal and I'm receiving back data. Now one thing you might notice here though is that the data looks a little weird, like outside of the zeros here. It's kind of strange numbers. That is one thing to note is that half the time these sensor data do have to be cleaned up a little bit. The way that they come in, they're not quite un-normalized to what we would expect, for example. Like the temperature might come in and it might not be in a readable Celsius or Fahrenheit value. So I do have some code in here as well that kind of cleans these up. And most of the sensors online, there are documentation and blogs and such where people talk about once you get the data, this is the functions that you run on them or the mathematical equations that you run on them to get them to be a more human readable result.

5. Creating a Bucket in InfluxDB

Short description:

This video demonstrates how to create a bucket in InfluxDB. A bucket is a database used to store data. You can create a bucket in the cloud UI or the open source UI. After creating the bucket, you can set the data retention period and obtain an API token. It is recommended to create a read and write token for specific buckets instead of an all access token. This token allows you to send and retrieve data from InfluxDB.

So this is a quick video that I'm just going to be showing really quick. Basically, what this is doing is this is just showing you how to create a bucket. This can be in the cloud UI or the open source UI. They look pretty much exactly the same. But basically what you do is you create your bucket. For me, I created a PlantBuddy bucket. And I guess one thing to clarify here, a bucket is a database. So this is just me creating the database to store my data into. I'm setting it that it will retain the data for the next seven days. And after that I'm grabbing an API token for that bucket. You could create an all access token. It will warn you not to do that as seen here, basically because it gives access to all of the buckets. And if this is the only project that you plan to do, it's not really a big deal per se to create the all access token, but if you're the type of person who has more than, you know, one bucket in here, more than one data set, you could just do a read and write and select the buckets that you wish to read and write from. And with that token, that would be the one that gives you the ability to send your data into Influx and to get it back out. Basically that's the basics of getting the storage set up.

6. JavaScript Client Libraries and Writing Data

Short description:

I will now discuss the JavaScript client libraries for querying and writing data in InfluxDB. There are two main packages, one for Node.js and one for the InfluxDB client APIs. The newer library, which will be released soon, is similar to the original library. To install the client, use npm or Yarn, and provide credentials to write and query data. The data should include a timestamp, sensor name, and value. Additional tags for user and device ID can be added for scalability. A table example shows the resulting data points. Next, I will cover data request and visualization.

So now I'm going to talk about the JavaScript client libraries. So there's two main packages, one for Node.js and one for the InfluxDB client APIs. I'm not going to really talk about the client APIs. Those are more for people who want to manage like their buckets, their authorizations and such from the client library. But we're really just focusing on querying and writing that data back out. And one thing to note is this is our original client library which is using our internal flux querying language, but my project example will be going over the newer library that's coming out in roughly the next week or so. So I will have to just relink that because currently the repo is private, but I'll go over how that works. It's very, very similar to the old one in the fact that you just basically install it and then query and write from it.

So obviously you need to do some installation of packages. This is literally pulled from the docs. It's pretty straightforward, but basically you just do the npm install, the Yarn ad or sorry, the Yarn ad or the npm add if you want. It's basically up to you, but basically just install the client. And from there, you're going to want to give it credentials to actually begin to write and query into. So this is actually an example from the project for writing into Influx with our sensor data. So obviously I have tags and float fields on here. The big thing when it comes to writing data in is basically what we expect to see is a timestamp of when the data was received, a sensor name, and a value for that sensor. So for example, light value at this time was 100% or et cetera. And then you can also, for us, we also have the tags of user and device ID. The idea being that if you wanted to scale this project up, you could have multiple people using it or you could have multiple devices, basically multiple plants, in theory, being monitored. If you don't want to add those, that would be fine. You could just go for the very basic sensor name, value, as well as temperature, as well as time. So that would also be an option that you could just do. It's a little more simple, but this is, again, available in the code. You can change it as you wish. And this is a table example of those resulting data points that we would expect. So yes, we have our measurement of sensor data. As you can see, a light, a value, and a time. I've specifically made this more human readable in this slide deck by removing, if you were to like scroll over, you would have seen the other tag values, but this is basically the gist of what we expect to see. Now let's go into the data request and visualization. Like I said, it's very straightforward to get this going.

7. Querying and Graphing Data with InfluxDB

Short description:

This tool allows you to query data from Influx using SQL and get it back in a data frame format for graphing with Plotly.js. You can customize the query for different sensors and ensure consistent time intervals. The resulting graph displays the values over time, and you can change variables such as device ID. Running this project requires an InfluxDB instance and running the project on localhost.

This is a great tool to use to get your data in, and then obviously get it right back out. So this is us using SQL to query from Influx to get our data.

For example, we are doing it where the time is the past 24 hours from, or sorry, two hours from now. So from now to two hours ago, go ahead and give me all of the sensor data where the device ID equals this and the sensor name equals this. And the reason that we have these two values, that you can pop them in and out, they're flexible variable. There we go, that's the right word for this is. So that way then you can reuse this query for different sensors. You could be like use this query for the light sensor, use this query for the humidity sensor, with the idea being that at least for our project you'd always want the time intervals to be the same for the sensors. Like you don't want to see the past 24 hours for the light and the past two hours for the temperature. It's strange if that's how you're looking at the data.

And basically what that gives you back is a data frame that then you can use in Plotly.js to actually graph your values. You can also get it back in other types of formats. You don't have to do a data frame but again this project was using Plotly.js so that was the most straightforward way to format the data for Plotly to ingest themselves.

As you can see this is how graphing the data actually ends up looking. So as I mentioned before, you can now get the idea of what I meant by those flexible variables. For example, we're calling the exact same query but we're changing soil, air, and then the graph.defaultDeviceID. That's just a value that I've hard-coded at the top of the file because I'm only monitoring one plant so I only got one device ID. I don't have multiple. But again if you wanted to you could change it as needed. And then this graphing down here is basically creating a line graph where the X value is going to be time and the Y value will be the value, whether that be humidity or air temperature. And then we've also gone ahead and titled it. As you can see, I didn't capitalize humidity. So it's a fun little project so it's not always going to be perfect. Maybe I'll go in and correct that. And this is how it would actually look if you were to run this on your localhost. So basically how you would do this is you're running your InfluxDB local instance, or you're running the ... or you're using the cloud. Whichever one you decide to do. And from there, you can run that. You would have that on one localhost tab, and then on your other localhost tab, you would actually be running this project.

8. Creating Dashboards and Learning Resources

Short description:

You would run the NPM commands to get this going. And then you would have your dashboards to look at. This is our light one. We put soil and air temperature together. The room humidity tends to spike when I tend to like breathe near the plant. The soil moisture is almost always quite consistent. This graph is very compacted. We have more projects available on our InFlux community. You can try more things yourself. Join our slack community for help. Check out our website and other resources.

You would run the NPM commands to get this going. Sorry, the NodeJS commands to get this going. And then you would have your dashboards to look at. So these are pretty basic, little plotly dashboards. You can obviously make these a lot prettier, quite a bit prettier, but for right now, this was a great way to just show off the project and not have to think too much about it.

So this is our light one. And then we put soil and air temperature together. During this time period, the plant was ... it was just not a very long time, and the plant was just sitting in my dining room, so there was really no variance here. So if you're wondering why the soil and air temperature didn't change, it's because I didn't change them, it was just kind of sitting peacefully. Though funny enough, the light was clearly up and down, but I just claim that our light sensor is extra sensitive, it's also probably just me walking by. And then finally, the room humidity and the soil moisture, the humidity tends to spike when I tend to like breathe near the plant, so that's probably where those spikes are coming from. And then the soil moisture is almost always actually quite consistent, it'll take a bit for the moisture to actually start to drop down when the plant gets a little more dry. But yeah, so this kind of gives you an idea. One thing you might notice right away, though, is the fact that yeah, this data can be a little spikey, a little wonky looking. We've been working on kind of smoothing it out a bit, but it's a little tricky. And in all fairness, this graph is very compacted, like it's very small, obviously, like if you were to range this from zero to 100, the spikes would not look quite as intense as they do here. But in all fairness, a plant living inside on my living room dining table has relatively consistent metrics. It's you know, it's inside a humidity controlled house.

So when it comes to learning resources beyond going obviously through the project on GitHub and just following that along, you can try more things yourself. So we have more projects available on our InFlux community. You can actually see Plant Buddy right there. That's the original Python version. We're working off the Javascript version of it, but there's also other cool projects that you can reference and check out. And then as well as our website, influxdata.com. And then these are just some further resources. I wouldn't be a very good dev rel if I didn't tell you guys to come join our slack community. That's definitely where you can get help from both the developer advocates as well as other people. The Getting Started is basically just the cloud link. The GitHub Influx Community, which I just mentioned.

9. Conclusion and Resources

Short description:

Docs and blogs are great resources to get started. InfluxDB University offers free courses on various topics. Feel free to reach out on LinkedIn or Slack. You can contribute to the project through pull requests. Thank you for attending.

Docs and blogs can obviously be great resources to get going and get started. And finally, InfluxDB University, which is a free learn-at-your-own-pace platform. So you can basically learn more and take as much time as you need personally, and there's lots of different courses on lots of different things.

And that is pretty much the wrap-up of my presentation. And you are also welcome, of course, to reach out, like I said, on LinkedIn. You can reach out and find me on Slack. If you feel like the project needs a little bit of, I guess you could say TLC, you want to make some changes, feel free to do a pull request. I don't mind. That's what open source is all about.

And thank you so much for coming. Thank you. Appreciate it.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2022JSNation 2022
22 min
How I've been Using JavaScript to Automate my House
Software Programming is naturally fun but making something physical, to interact with the world that you live in, is like magic. Is even funnier when you can reuse your knowledge and JavaScript to do it. This talk will present real use cases of automating a house using JavaScript, Instead of using C++ as usual, and Espruino as dev tools and Microcontrollers such as Arduino, ESP8266, RaspberryPI, and NodeRed to control lights, doors, lockers, and much more.
React Summit US 2023React Summit US 2023
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
At Netflix, millions of our users watch Netflix on TV Devices. How do we develop the UI for all of the different types of devices? That's exactly what I wanted to know! I'll be sharing why it's important to take on new growth opportunities, how to navigate the difficulties of learning a whole new platform at a new company, and some of the things I've learned about how we use React to bring Netflix to your TV!
React Advanced Conference 2023React Advanced Conference 2023
18 min
Let’s Build a TV Spatial Navigation
In this talk, I'll take you through my journey as I joined the team supporting our Smart TVs application and share my experience learning one of the most overlooked but essential pieces of functionality we have.
JSNation Live 2021JSNation Live 2021
23 min
An Introduction To IoT; Or How I Built an IoT Kitty Litter Box Using JavaScript
My favorite things in life are cats, computers and crappy ideas, so I decided to combine all three and make an IoT (Internet of Things) litter box using a Raspberry Pi and JavaScript! If you have ever wanted to get build your own IoT project, but didn’t know how to start, then this is the talk for you.Together, we will go through how I setup my IoT Litter Box from start to finish. Including how to setup Node.js on a Raspberry Pi and how to connect sensors to a Raspberry Pi and how to read the sensor inputs with Node.js.
Node Congress 2023Node Congress 2023
8 min
Tools for better Observability in NodeJS Serverless IoT Applications
Observability is crucial for successfully operating large IoT fleets. IoT incorporates different components, including hardware, network, on-device software, and cloud. Devices operate under unreliable conditions and constraints, and need to be monitored remotely. Cloud applications become complex and costly, as they are built to handle device activity at scale. Answering questions such as:
-    Do I have a problem in my IoT application?
-    Where is the problem?
-    What is causing the problem?
-    How much of my fleet is affected?
-    Is my code expensive to run and if yes, how can I fix that? ,
can be challenging. Logging, monitoring and tracing are fundamental observability pillars. However, they are often viewed as non-functionals in IoT applications, and can fall off the radar, or are not standardized during development.

This session will show how to leverage Open Source tools, such as AWS Lambda PowerTools, in a fully functional Serverless IoT application, to ease adoption of best practices for modern application development, and integrate services such as Amazon X-Ray, Amazon CloudWatch and AWS IoT Core features, to achieve end-to-end observability.

Workshops on related topic

JSNation Live 2021JSNation Live 2021
105 min
Build an IoT App With InfluxDB
Workshop
InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced sensors, applications and infrastructure.
This workshop showcases a fully functional sample application called IoT Center that is built on InfluxDB. This application demonstrates the capabilities of the InfluxDB platform to develop a JavaScript-enabled time-series-based application. It collects, stores and displays a set of values that include temperature, humidity, pressure, CO2 concentration, air quality, as well as provide GPS coordinates from a set of IoT devices. With this data stored in InfluxDB, the application can query this data for display as well as write data back into the database.
This hands-on workshop will show students how to install this open source code to learn how to query and write to InfluxDB using the InfluxDB JavaScript client, and gain familiarity with the Flux lang query language which is designed for querying, analyzing, and acting on time series data. And finally, collect and visualize performance data of the Node JS application.
Node Congress 2021Node Congress 2021
131 min
IoT Center Workshop by InfluxData
Workshop
InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced sensors, applications and infrastructure. This workshop showcases a fully functional sample application called IoT Center that is built on InfluxDB. This application demonstrates the capabilities of the InfluxDB platform to develop a JavaScript-enabled time-series-based application. It collects, stores and displays a set of values that include temperature, humidity, pressure, CO2 concentration, air quality, as well as provide GPS coordinates from a set of IoT devices. With this data stored in InfluxDB, the application can query this data for display as well as write data back into the database.
This hands-on workshop will show students how to install this open source code to learn how to query and write to InfluxDB using the InfluxDB JavaScript client, and gain familiarity with the Flux lang query language which is designed for querying, analyzing, and acting on time series data. And finally, collect and visualize performance data of the Node JS application.
Prerequisites
Registered free InfluxDB Cloud account at https://cloud2.influxdata.comThree options available (via Google account, via Microsoft account or via email)Test login after the registration and save credentials for the workshopInstallation of the git tool (e.g. from https://git-scm.com/downloads)IoT Center cloneRun: git clone https://github.com/bonitoo-io/iot-center-v2Installed nodejs (from https://nodejs.org/en/download)Installed yarn package manager (from https://classic.yarnpkg.com/en/docs/install)Installed required packagesIn the cloned directoryRun: cd appRun: yarn install