React Developer Leaves Homemade GPS Asset Tracker in Car - On Demand Webinar

Speaker: Gabe Sanchez - Blues Wireless TV Host  00:00

Welcome back, Paige. It's great to see you again. On our first episode of the Niedringhaus Effect, you discussed how Blues Wireless is like a Create React App, but for IoT development. So what are you going to share with us today?

Speaker: Paige Niedringhaus - Staff Software Engineer - Blues Wireless

Hey Gabe, it's great to be back. Today I'm going to talk about how a hobby project actually turned into a vehicle recovery system when my parents’ car was stolen from their driveway with a Notecard in the backseat.

Speaker: Gabe Sanchez

Hold on—your parents’ car was stolen?

Speaker: Paige Niedringhaus

Yes, actually. So November 26^th at 7:42 p.m., my parents’ car was stolen from the driveway. But in the backseat, there happened to be a live asset tracker that I built, so I could track the thieves in real time.

Speaker: Gabe Sanchez

Did you call the police?

Speaker: Paige Niedringhaus

We did. Absolutely, and they actually were nearby. They arrived just about four or five minutes after the car had actually been stolen. They said that they had seen it speeding through the neighborhood at high speeds. They actually had chased it as well, but the speeds were too high for the residential area that they were in, so they aborted the chase, just to make sure that everybody was safe.

Speaker: Gabe Sanchez

What happened then?

Speaker: Paige Niedringhaus

I knew that the Notecard was still in the backseat of the car. I pulled up this asset tracker dashboard that I had been building for this very episode actually, and I showed the officer exactly where the thieves were at that moment. The tracker was recording its current location every 10 minutes while the vehicle was in motion. After that had happened, the officer gave me his number, and he told me to call and report the car’s location when the tracker stopped moving. My parents and I just stayed glued to the dashboard like it was a true-crime drama, because in some ways it was. I’d set the location ping for every 10 minutes to conserve battery life, but now we had a need to get more frequent updates. I hit up our Slack channel at work just a few minutes after this had happened on Friday. My coworker Sean was actually able to help me update the tracker to get more frequent updates.

Speaker: Sean Taylor - Staff Firmware Engineer - Blues Wireless 01:55

Yeah, so it was Friday the day after Thanksgiving in the evening, and I’d just sat down to practice my saxophone. My phone buzzed, so I looked down at the phone, and there was a Slack message from Paige to say, “Hey, my parents’ car has been stolen. It has a Notecard tracking device in it, but it’s configured to report the GPS location very infrequently, as is typically the case with asset trackers. Is there any way I can update the frequency over the air?” I put my sax down, went downstairs to the office and did a look because I figured there was a way, but I couldn’t remember off the top of my head. Once I found it, I Slacked back to Paige to say yes, go into the Notehub account, update the environment variable, and that will override the current setting in the Notecard. She went ahead and did that and was able to track the vehicle at a greatly increased rate.

Speaker: Gabe Sanchez  02:51

That guy will do anything to keep from practicing his scales, including taking work calls late on a Friday evening, won’t he?

Speaker: Paige Niedringhaus

So I have to say that I am really grateful to work with such a great company. These people gave me such great assistance, and I’ve never even bought anything from Blues. So you know it’s going to be wonderful assistance for our paying customers.

Speaker: Gabe Sanchez

Well, this is quite a story. Did the thieves find the tracker in the car?

Speaker: Paige Niedringhaus

Actually, yes, it did turn up. About an hour after the car was stolen, the tracker was found in the backseat. It wasn’t hidden because I certainly wasn’t anticipating this sort of scenario happening. It was tossed out of the window and into a park. So we lost the car at that point. The police were actually able to find the tracker in a few days, right where the dashboard said it would be, but the car was nowhere to be found. About a month later, however, the car did turn up. It was in an impound lot and it smelled of marijuana. It had bullet holes in the roof, and there were scratches and dents on every body panel. So currently, we’re waiting for the insurance company to total that vehicle so that my parents can move on and procure a new one. It certainly wasn’t the happy ending any of us were asking for, but at least it did turn up again.

Speaker: Gabe Sanchez  03:59

Having a tracker on the car was pretty lucky, though having your parents’ car stolen during Thanksgiving is a bummer for sure. But let's just back up for one minute. I want to hear more about this low-fi low-jack solution that you just happened to be building when this happened. Can you tell us more about it?

Speaker: Paige Niedringhaus

So after our first episode, where I showed how quickly Blues Wireless makes standing up something like an asset tracker with just a few pieces of hardware, a Notecard, a Notecarrier, and a battery, I wanted to take the next step and see how easy it was to build my own dashboard for the data from the tracker to display. So I started out with the same basic components: a Notecard, a Notecarrier, and a battery. I configured all of them using the Blues Wireless dev docs. I used our Blues Wireless quick start guide to actually configure my Notecarrier with the basic instrumentation. Then, because I was doing asset tracking, I went over to our asset tracking documentation to get the tracker configuration requests that I needed to start GPS tracking. That's really all that I needed to do on the hardware side to be able to start sending data to Notehub and have that data available to me for my asset tracker that I was building.

Speaker: Gabe Sanchez

So, how was building your own dashboard?

Speaker: Paige Niedringhaus

It was actually pretty good. Since frontend web development is my main area of expertise, I went with some of the most popular tools out there. I went with Next.js as my JavaScript framework, TypeScript as my language, a combination of React Leaflet and Mapbox for my actual map, Recharts for my data, libraries, and charts, and then React Table to display those events in Notehub. This is what the finished product looks like. We have a little temperature chart showing the temperature of the asset tracker over time, we have a map that you can zoom in and zoom out of to see where it's been, and little connecting dots showing you exactly where you are. We have a voltage chart showing the battery voltage over time, and then we have tracker events, which you can expand out to actually see what was the latest GPS location? What was the last time that an event was recorded from Notehub and then pulled into this tracker? It's pretty cool. It was pretty fun to build too.

Speaker: Gabe Sanchez

Impressive, but how did you get the location data out of Notehub and into your app?

Speaker: Paige Niedringhaus

There were a couple of different ways that I could have gone with this: I could have used Notehub’s Routes, which push data to a dashboard, but then you have to wait for that new event to be generated, and you have to store those events in some sort of a separate database to be accessed later on. So instead, I used the Notehub API, which allowed me to pull all of my past events from Notehub via my application. The dev.blues site actually details how to generate an auth token, which is all that you need to be able to access your events for your particular Notehub project and then the different endpoints to get those events. If you look over here, we have documentation about how to actually generate the post that you'll need to generate your auth token. Once you've got that, we have documentation about how to pull events out of Notehub, which is actually what I needed to be able to access my project. The other thing that you need to know is the project UID, which comes out of Notehub. The easiest way to get that is by going to your actual Notehub project, going to the settings, and then scrolling down to the bottom, and there's your project ID.

So I'll go into a little bit of the details about how to put this into the project if you want to make your own asset tracker shortly, but this is all you need to be able to get those events, and you get this really nice list of JSON data. Then I just was able to transform it into the shapes that I needed for the map and the charts and everything else. It was actually quite easy, considering what looks like a pretty impressive dashboard in the end.

Speaker: Gabe Sanchez

Since you are pulling the data out of Notehub instead of waiting for the data to be pushed to you, how did you know when the new events were there waiting for you?

Speaker: Paige Niedringhaus

That's a really great question, Gabe. I considered using WebSockets, which is about the most real time that you can get with new events that are coming in like this. But since this dashboard didn't technically start out as a real-time project, I ended up using Next.js’s incremental static generation, which is something that's relatively new to the framework. Basically, what this does is fetch and render the data server side, but it can then be told to re-fetch that data on an interval. Next calls this “revalidation” after the page is generated, and then it regenerates the page in the background. So even though the user doesn't see something like a loading screen, or anything else that might indicate that new data is being pushed into the DOM and then into the browser, it's happening on the back end. The user just sees the refresh data on the screen, which is pretty cool.

Speaker: Gabe Sanchez  09:11

Gotcha. So if someone wanted to make their own asset tracker using your code, could they do that?

Speaker: Paige Niedringhaus

Oh, absolutely. I built my dashboard so that anyone with a Notehub project and a Notehub auth token could plug in their own credentials and see their own Notecard data. If you go to GitHub, you can find my GPS asset tracker dashboard and fork it and use it as you want. Then when you open up the code, there is going to be a .env.localfile that you'll want. That's where you'll put the project ID that I showed you earlier, which you get out of Notehub, and your Notehub token, which is your secretly generated token. So that's really about all there is to it, and then your data should start showing up in the dashboard.

Speaker: Gabe Sanchez

Sounds pretty simple. So is it that easy to get this deployed to a cloud somewhere so it can be shared with others, like local law enforcement for example?

Speaker: Paige Niedringhaus

Again, the answer is yes. I did something very similar to this after the car was stolen, and the detective who was working the case asked for a link to the dashboard so that he could cross-reference the Notecard’s time and location with the traffic cams that the car may have passed. Within an hour of him asking for this, I was able to get it up onto Netlify to show where the tracker was from the time it was stolen. So right about here, to the time that it was ditched in the park, right about here. In addition to that, he also had the GPS and the cell tower locations at his disposal. So yes, it is really that easy. With Netlify, the tracker that I have given you, or the code, is all set up to deploy on Netlify with just a few simple setup steps. So it really is very simple to do.

Speaker: Gabe Sanchez

This sounds really great. Did you happen to organize this information somewhere so others can set up their own tracker like you did?

Speaker: Paige Niedringhaus

I actually did. So in addition to this video that we're doing now, I actually wrote an entire blog post—it's up on the blues.io website—where you can see everything from start to finish, and you can read the real-time live tweets that I did as this whole situation was unfolding. You can see how to configure your asset tracker, in addition to all the pieces of hardware that you might need. I've got all the commands there. I have how to set up the actual software as well, so you're pulling the data out of your Notehub project and into your own tracker dashboard.

Speaker: Gabe Sanchez

Fantastic. Is there anything else you'd like to share about this experience?

Speaker: Paige Niedringhaus

Well, the only other thing I would say is that this dashboard can go a lot further than where I took it. It can be expanded upon in so many ways, a couple of which I had down here at the very bottom of this blog post. You could add some sort of a download option, so you could download a spreadsheet of the GPS coordinates, or you could add customizable timeframes with a date picker so you could see just specific points in time and where the asset tracker is. One thing that I actually did myself was I built an SOS mode into a further iteration of this tracker, where if it was in stolen mode, you would actually see red lines showing up in between the different portions of where the tracker was saying its location was, for easier use. There are a lot more ways that you could take this and make it useful. I’ll really be excited to see what other people come up with.

Speaker: Gabe Sanchez

Excellent. So that means that people can start from your build and then add in any features they like to make the asset tracking application their own. That's awesome.

Speaker: Paige Niedringhaus

Absolutely. Well, that's the hope: to show people what's possible with Blues Wireless, and then show them how much further they can take it with just a little bit of JavaScript and web browser stuff on their end.

Speaker: Gabe Sanchez

Well, there you have it, folks. You've learned how you can easily build and set up your own asset tracker that can be used in many ways, even as a supporting cast in your own true-crime drama. If you build your own asset tracker and dashboard, share with us on Twitter @blueswireless—we'd love to see what you do. We may even send you a super cool PCB ruler for playing along. Thanks for joining us on this episode of the Niedringhaus Effect on Blues Wireless TV. We'll see you next time.