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

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.

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.

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.

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.

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.

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.

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.

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.

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.