Paige Niedringhaus, Author at Blues Fastest path to build wireless IoT products Fri, 18 Apr 2025 09:37:38 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 https://blues.com/wp-content/uploads/2023/05/Asset-30-1-150x150.png Paige Niedringhaus, Author at Blues 32 32 Introducing Notehub JS – the JavaScript Library for the Notehub API https://blues.com/blog/introducing-notehub-js-the-javascript-library-for-the-notehub-api/ Tue, 21 Feb 2023 15:15:38 +0000 https://blues.com/?p=8874 Notehub JS is designed to get you connected to the Notehub API quickly, and allow you to interact with Notehub.io IoT data in a JavaScript-friendly way.

The post Introducing Notehub JS – the JavaScript Library for the Notehub API appeared first on Blues.

]]>
Today is a big day for Blues, as we’re excited to announce a new library to make it easier than ever for JavaScript developers to interact with the Notehub API when building their own custom applications: Notehub JS.

The Notehub JS Backstory

Blues aims to make cloud-connected Internet of Things development easier by providing the crucial device-to-cloud connection all IoT products need regardless of if there is a reliable Internet connection or not. We do this through the use of Notecards and Notehub.

Notecards are low-power, 30mm x 35mm, prepaid cellular-connected devices designed to integrate with any IoT device, and Notecards know, out of the box, how to connect with the Notehub cloud to send as well as receive data from it.

Notehub.io is a cloud-based service for securely connecting to Notecard devices and storing data from them before sending it on to your cloud application of choice.

Here’s a diagram of how the whole setup works: start with your IoT sensors, choose the microcontroller host of you prefer, the Blues Notecard sends that sensor data to the Notehub cloud, and the Notehub cloud routes that IoT data out to your cloud provider, low code dashboard, or custom web app of your choice.

Users can interact with Notehub through its web interface or they can use the Notehub API to interact with it through HTTP requests.

The Notehub API is great for getting going, but as developers building lots of JavaScript-based dashboards and web apps to monitor and display the IoT data stored in Notehub, it quickly becomes apparent rewriting the same HTTP calls in multiple projects to fetch data from the native Notehub API endpoints isn’t easy to reuse or keep up to date as the API grows and evolves.

So we created our own open source, JavaScript-based library for the Notehub API and published it on npm for anyone to use for free. Notehub JS is designed to get you connected to the Notehub API quickly, and allow you to access all of the API routes relevant to interacting with Notehub in a JavaScript-friendly way.

If you’re not as familiar with Notehub.io and the Notehub API, check out this link to learn more.

Notehub JS Features and Benefits

Aside from being open source and JavaScript-based, the Notehub JS library boasts some significant features for users.

Extensive, up-to-date documentation of all API methods available in the Notehub JS GitHub repo and on the Blues Developer Experience website.

Let’s say you want to see how to fetch a list of devices associated with a particular Notehub project. From the Developer Experience site’s Tools & SDKs section, you can click on Notehub JS Library > Devices API and then click the method you’re looking for to see the JavaScript code implementation.

Find the method you’re looking for under the variety of Notehub JS API endpoints present in the sidebar menu.
JavaScript-based code examples of every API call including authorization tokens and required and optional arguments, and real world use cases showing the implementation of the library in working code bases.

Building off the previous example, here is the JavaScript code on the Developer Experience site showing exactly how to access the Devices API method getProjectDevices() , complete with authorization and arguments.

Sample JavaScript code implementation for fetching all devices associated with a particular Notehub project.

You can copy this code line for line, replace the api_key.apiKey and projectUID strings with your own auth token and Notehub project UID, drop it into your JavaScript app, and be off to the races.

ES6-forward syntax making use of newer features like import(), async/await, and Promises, in addition to more traditional JavaScript syntax like require().

Whether you’re using this Notehub JS in a Node.js application, a web application, a TypeScript project, or even serverless functions on the edge, this library is compatible.

Install with npm or yarn, then import it with import or require, and go to town.

We built this library to be compatible with as many different sorts of JavaScript-based applications as possible: install it with your preferred package manager and use it as you see fit.

Get Started with Notehub JS Today

Anyone building applications for displaying and managing IoT data knows how tough it can be sometimes to access and shape that information into something providing useful, actionable insights. We hope that by providing the Notehub JS library for interacting with the Notehub API to the Blues community, we can make that experience a bit smoother and easier.

If you’d like to get started with Notehub JS and try it out for yourself you can:

Happy hacking!

The post Introducing Notehub JS – the JavaScript Library for the Notehub API appeared first on Blues.

]]>
Quickly Build Custom IoT Dashboards with Snowflake, Streamlit, and Blues Wireless https://blues.com/blog/build-custom-iot-dashboards-with-snowflake-streamlit-and-blues/ Thu, 08 Sep 2022 15:02:35 +0000 https://blues.com/?p=6142 Some basic Python code can create beautiful, highly customized IoT data visualizations in no time.

The post Quickly Build Custom IoT Dashboards with Snowflake, Streamlit, and Blues Wireless appeared first on Blues.

]]>

 

If you’ve ever wanted to turn raw IoT data into tables, graphs, or other cool data visualizations but wanted more fine-grained control over how the data was stored and displayed than most low-code tools provide without having to build a complete app from scratch, Snowflake and Streamlit are two tools you need to check out.

What are Snowflake and Steamlit?

Snowflake is a data cloud offering high performance data management at massive scale, ideal for people who want performant, flexible, secure data warehousing in the cloud. It offers a fully managed service that can store large amounts of data, power complex data pipelines and analytics, scale efficiently, and automate complex data replication and sharing.

Streamlit is an open-source Python library that makes it easy to create and share custom web applications for machine learning and data science with just a few lines of Python code – no need to write a backend, define routes, handle HTTP requests, connect a frontend, write HTML, CSS, JavaScript, and all the rest. Instead, just use the Streamlit API in a Python program to visualize, mutate, and share data in whatever ways you want. Text and images, tables, charts, widgets, graphs  – it’s all there and more. It provides the options and customizations of a built-from-scratch app without the time consuming hassle of actually having to build it from scratch.

And the icing on the cake? Snowflake data can integrate seamlessly with Streamlit applications.

How does Blues Wireless fit in to all this?

When Blues Wireless saw how Streamlit was making data visualizations for data scientists and other Python devs quick and easy, we wanted to bring that same option to our IoT customers who want to see the data their Notecard-powered IoT devices are recording and sending to Notehub.

So now, Blues has an officially supported route in Notehub to make sending data from Notehub to Snowflake very straightforward.

Snowflake custom route option in Notehub
Snowflake is now a route option inside of a Notehub project’s Routes tab.

How it works

  1. Sign up for a Snowflake account, create RSA keys to allow Notehub and Snowflake to talk to one another, and route JSON data out of Notehub to the Snowflake REST API.
Example of creating a Snowflake route in a Notehub project.
Adding pertinent data to a new Snowflake route in a Notehub project.
  1. In Snowflake, use SQL syntax to parse the JSON data and grab the pieces you want, and add them to a new view.
create or replace view
    tracker_vw
as select
    payload:event::STRING as id,
    payload:device::STRING as device,
    payload:when::TIMESTAMP as created,
    payload:best_lat::FLOAT as lat,
    payload:best_lon::FLOAT as lon,
    payload:best_location::STRING as location,
    payload:best_location_type::STRING as location_type,
    payload:best_timezone::STRING as timezone,
    payload:best_country::STRING as country,
    payload:body.temperature::FLOAT as temp,
    payload:body.motion::FLOAT as motion,
    payload:body.voltage::FLOAT as voltage
from tracker_data;

select * from tracker_vw;
  1. Install Streamlit, connect to the Snowflake database, and go to town with the Streamlit API options.
import streamlit as st
import pandas as pd
import snowflake.connector

# Initialize connection.
@st.experimental_singleton
def init_connection():
    return snowflake.connector.connect(**st.secrets["snowflake"])

conn = init_connection()

# Perform query.
@st.experimental_memo(ttl=600)
def run_query(query):
    with conn.cursor() as cur:
        cur.execute(query)
        return cur.fetchall()

"""
# Asset Tracker Data

This page shows asset tracker environment readings and device location from a Blues
Wireless Notecard.
"""

"""
### Options
"""
num_rows = st.slider('Rows to fetch?', 10, 500, 100)
sort = st.selectbox('Sort?',('asc', 'desc'))
show_table_data = st.checkbox('Show table data?', True)
show_charts = st.checkbox('Show charts?', True)
show_map = st.checkbox('Show map?', False)

location_rows = run_query(f'SELECT * from tracker_vw ORDER BY created {sort} LIMIT {num_rows};')
location_data = pd.DataFrame(location_rows, columns=("ID", "Device", "Created", "lat", "lon", "Location", "Location Type", "Timezone", "Country", "Temp", "Motion", "Voltage"))

In next to no time, you can have an interactive, fully customizable dashboard of your IoT data, only Python required.

 

Where to go from here?

For a more thorough, step-by-step guide to getting started with Snowflake and Streamlit for your own IoT project, we have a complete guide in our developer documentation.

If you have any questions, or find any issues, feel free to reach out in our forum, and have fun bringing your own IoT data to life more quickly!

The post Quickly Build Custom IoT Dashboards with Snowflake, Streamlit, and Blues Wireless appeared first on Blues.

]]>
Build an IoT Smart Leak Detector with SMS Alerts when Water is Detected https://blues.com/blog/build-an-iot-smart-leak-detector-with-sms-alerts/ Fri, 29 Jul 2022 18:10:49 +0000 https://blues.com/?p=5176 Learn how to build a low-cost, cellular-enabled water leak detection device complete with SMS notifications if a leak's detected.

The post Build an IoT Smart Leak Detector with SMS Alerts when Water is Detected appeared first on Blues.

]]>

 

In the first year of home ownership 77% of buyers faced unexpected repair costs, and over 2/3 of those surveyed paid upwards of $1,000 on repairs. 

Leaks can happen any time and water can be one of the most destructive substances, especially when it’s where it shouldn’t be and you don’t know about it. Leaks can even happen when the power’s out, meaning Wi-Fi powered leak detectors are out of luck too. 

In this Hackster tutorial, I’ll walk you through how to build your own cellular-enabled, low-code leak detector, with instant SMS alerts via Twilio whenever water is detected. 

How it Works

We’ll take a Blues Wireless Cellular Notecard, slot it into the Blues Wireless Notecarrier-A, add an analog water sensor, and use the newly released Notecard firmware feature that allows for autonomous reporting of GPIO state changes without a host microcontroller 

A small LiPo battery powers the whole shebang, as well. 

All the pieces to make a smart IoT leak detector device

This code will tell our Notecard to watch for changes to its AUX1 pin, and if the pin’s state changes from LOW to HIGH (like when water is detected by the sensor), it will trigger an SMS alert from Twilio. 

And if water is detected? 

Twilio powered SMS alert telling a user a leak's been detected

Build Your Own Leak Detector

If you’d like to make your own leak detection device, complete instructions are available here in this Hackster tutorial. 

To get started, grab the following hardware: 

Happy hacking! 💧 👨‍💻 

The post Build an IoT Smart Leak Detector with SMS Alerts when Water is Detected appeared first on Blues.

]]>
Anti-Theft GPS Tracker and Recovery System https://blues.com/blog/anti-theft-iot-gps-asset-tracker/ Wed, 13 Apr 2022 20:18:35 +0000 https://blues-wireless.local/?p=1865 Build a Notecard-powered anti-theft device complete with SMS alerts when movement is detected, for under $100.

The post Anti-Theft GPS Tracker and Recovery System appeared first on Blues.

]]>

The words “asset tracking” typically bring to mind moving dots on a map: cars, trucks, planes, and the like. Things that are supposed to move.

But think about things that shouldn’t move, things that, if they are on the move, means something is amiss: historical statues, expensive environmental monitors, high value equipment in storage, or even (believe it or not) beehives.

In this Hackster project, I built a Blues Wireless Notecard-powered anti-theft tracker that integrates with Twilio to send SMS alerts to a user’s phone when motion is detected, complete with last known location coordinates and a simple Google Maps URL link.

At a high level, here’s how it works:

  • The ultra-low-power cellular Notecard (a mere ~8uA when idle) is configured to act as a GPS device, and only begin taking location readings when motion is detected.
  • When it’s in motion, it begins taking GPS tagged readings every minute and sending them as JSON data to Notehub – a thin cloud service that securely accepts data from the Notecard.
  • Notehub immediately transforms the raw JSON with the help of JSONata into a payload of relevant info for Twilio, and routes this data on.
  • Finally, Twilio forwards this data along to the user’s phone and they receive an alert like the screenshot below, with a clickable Google Maps link. Hopefully speeding up recovery of whatever’s gone missing.
The Twilio alert complete with Notecard name, last seen time and location and Google Maps link.

To see how I built this, view the full tutorial on Hackster, where I detail exactly how to set up the hardware and software that made this anti-theft and recovery device possible.

The post Anti-Theft GPS Tracker and Recovery System appeared first on Blues.

]]>
Low Fi LoJack® with Blues Wireless and React https://blues.com/blog/gps-asset-tracker-with-blues-wireless-and-react/ Wed, 23 Feb 2022 22:17:04 +0000 https://blues-wireless.local/?p=425 Build your own asset tracker from hardware to software and everything in between.

The post Low Fi LoJack® with Blues Wireless and React appeared first on Blues.

]]>

The day after Thanksgiving my parents’ car was stolen out of the driveway while we were all inside eating dinner. There was a screech of tires, I went to the door to see about the noise and watched their car heading down the driveway and out of sight at high speed.

We called the police, filed a report, and normally that would have been the end of it. The car didn’t have LoJack®, OnStar® or any other built-in GPS tracking systems. It did, however, have a Blues Wireless Notecard and Notecarrier AL attached to a battery in the backseat recording GPS coordinates every 10 minutes.

And so begins the tale of how a hobby React asset tracker dashboard became a low fidelity LoJack® tracking a stolen car in the St. Louis area.

As the situation began to unfold, I started live-tweeting what was happening. If you’d like to see the drama in real-time, you can read this Tweet thread:

Let’s Talk About How We Got Here

In my previous blog post, I discussed how Blues Wireless makes getting started with IoT development easier in the same way that Create React App makes spinning up a new React application easier. And that’s awesome.

But once that sensor data from an IoT device is flowing in to Blues’ Notehub application, that’s only half the battle. The other half is getting that data back out of and turning it into something useful in the form of charts and maps.

Luckily, Blues makes that pretty darn easy as well. Not only does the data from sensors come in to Notehub in the form of JSON, Notehub also sends JSON back out to wherever you want.

It can push that data pushed via Notehub routes wherever you want: low code platforms Quibtro or Datacake, or other cloud providers like AWS or Microsoft Azure. Or it can be pulled from Notehub via the Notehub API: this is great for getting up and running quickly, building proof of concept apps before you stand up a third-party database.

Today I’ll show you how to take a Notecard and my React-based application and make your own asset tracker dashboard. The app pulls data from Notehub, renders that data in charts and maps, and regularly fetches new data to update the UI. Ready?

Configure your Asset Tracker Hardware

Before we get to the dashboard code itself, let’s set up a new Notecard project to generate data for the dashboard.

The asset tracker composed of a Blues Wireless Notecard, Notecarrier AL, and LiPo battery.
The asset tracker composed of a Blues Wireless Notecard, Notecarrier AL, and LiPo battery.

IoT Hardware List

Here’s the equipment you’ll need to make this project happen:

Initial Notecard and Notecarrier AL Configuration

To keep this portion of my post more evergreen, I’m going to point you to the Blues quickstart guide to set up a Notecard, Notecarrier, and Notehub project, and the Blues asset tracking guides for the commands needed to configure a Notecard for GPS location tracking.

In addition to these instructions, there’s a few important caveats to make this asset tracker work for our purposes.

  1. When setting the inbound and outbound time periods in your hub.set request, make the time period for each 10 minutes. The reason being, there’s no way to force a remote update from Notehub when things like environment variables changes, so if we need the Notecard to read new environment variables shortly after they’re added, the sync times between Notehub and the Notecard need to be regular.
  2. In the final config step of card.location.track where we start the tracker running, include the property of: "sync":true. This property means as soon as a new event is acquired by the Notecard (a new GPS location, in this case), the Notecard will sync the event to Notehub instead of waiting for its regularly scheduled outbound time.

If you’re curious, here’s all of the commands I used to set up my Notecard from start to finish using the built-in web REPL on the Blues Developers site.

{"req":"card.restore","delete":true}
#factory reset card

{"req":"hub.set","product":"com.blues.[NOTEHUB_PROJECT_ID_HERE]","mode":"periodic","outbound":10,"inbound":10}
#attach tracker to Notehub project, set it to periodic mode,
#sync outbound reqs every 10 mins and inbound reqs from Notehub every 10 mins

{"req":"card.location.mode","mode":"periodic","seconds":360}
#tell card how often to get GPS reading and only when motion is detected

{"req":"card.location.track","start":true,"heartbeat":true,"hours":12,"sync":true}
#start tracking, issue heartbeat every 12 hours when no motion detected,
#sync data with Notehub as soon as a tracking event is acquired (this is an important one)

The Asset Tracker Software

This dashboard was a fun challenge to build, and it turned out be much more useful than I could have imagined when it was put to the test in a real-world situation.

Technology Powering the Low Fi LoJack® Tracker App

I chose to build this application using the following technologies:

The Dashboard Look and Feel

Low Fi LoJack® App

When all is said and done, the dashboard looks like this short video above: charts, map and list of events.

Tracker Map

React Leaflet map displaying Notecard GPS coordinates over time.
React Leaflet map displaying Notecard GPS coordinates over time.

The map is using the React Leaflet library to map all the coordinates from Notehub, display them on the map as blue circles, draw the lines between each circle, and display a marker with clickable tooltip of last recorded location. Mapbox provides the actual map style displayed in the component.

Tracker Charts

Recharts chart displaying Notecard temperature over time.
Recharts chart displaying Notecard temperature over time.

Recharts is displaying both the temperature of the Notecard and the voltage every time a GPS location reading is taken. It also has tooltips to display relevant information when a user hovers over the chart.

Recharts chart displaying Notecard voltage over time.
Recharts chart displaying Notecard voltage over time.

Tracker Events

React Table list displaying paginated Notecard events over time.
React Table list displaying paginated Notecard events over time.

For a sanity check as much as anything else, there’s an event list in a React Table at the bottom of the application showing a paginated list of all the events the dashboard has pulled from Notehub. It shows when the last event was received and a couple of other pieces of information so it’s easy to tell, at a glance, what’s going on.

Interesting Notes about How the Dashboard’s Built

If you’re ready to set up your own asset tracker dashboard, skip to the next section, but if you’re interested in some of the challenges I ran into along the way and how I solved for them, read on:

  • I pulled data via the Notehub API instead of using WebSockets to accept data pushed via Notehub Routes.

Many of the low-code dashboard platforms rely on Notehub’s routes to push Notecard events to them, but doing that, there’s no way to get historical data from Notehub that occurred before the route was hooked up.

To get my React app up and running and populated with data quickly, I decided to use the Notehub API to fetch events directly from Notehub. The Notehub API requires users to create an authorization token to be passed along with requests, but the process is well documented, as is the API to fetch all events and then filter down to the events I wanted on my end (_track.qo events in this case).

Doing it this way also eliminated my need for a persistence layer of some sort in the form of a database, although for a production ready app I would recommend going this route.

  • The map component needs server-rendered data. Next.js makes it easy.

Another interesting challenge I ran into is that in order to render all the data points and connecting lines on the map, the data must be fetched at app build time, not after the component’s rendered.

At first, I built a simple refreshPage() function to run on an interval and force-refresh a page to server-side render and refetch fresh data from Notehub.

Then I found a better way: incremental static regeneration. ISR allows you to create or update static pages after the site’s been built without need to rebuild the entire site. The key is an optional revalidate parameter that tells the getStaticProps() function fetching the data server-side to re-fetch new data on an interval specified in seconds and re-generate the page.

Once I’d figured out how to fetch the data on the server-side and get all the events out of Notehub via the API, it was a simple matter of transforming the data into the shape the app needed to render its various components.

Make the React Dashboard Work for You

Ok, so let’s make your own tracker app connected to your own Notecard and Notehub project.

Run Low Fi LoJack® Locally

  1. Download the asset tracker app code

First, go ahead and fork my asset tracker repo in GitHub.

Clone or download it to your local machine.

$ git clone https://github.com/paigen11/react-gps-asset-tracker-dashboard
  1. Install all the project dependencies

Open up your code in your IDE of choice: VSCode, WebStorm, Sublime, Atom, etc.

In a terminal, at the root of the project, run npm install to download all the project’s dependencies.

$ npm install
  1. Generate an access token for Notehub

To access the events in Notehub, you’ll need to generate an access token. The documentation to generate the token is straightforward. Open a terminal instance and follow the instructions.

$ curl -X POST
-L 'https://api.notefile.net/auth/login'
-d '{"username":"[you@youremail.com]", "password": "[your_password]"}'

Copy this token after it’s generated – you’ll be putting it into your project shortly.

  1. Create a .env.local file at the root of the project

This .env.local file is how Next.js automatically reads in environment variables used at build time or on the client side. All the variables you’ll need are build time variables so none of them need to be prefixed with NEXT_PUBLIC_, which allows for variable access on the client side.

These are the variables you’ll need to add to the file:

NOTEHUB_PROJECT_ID=APP_ID_GOES_HERE # get this from Notehub
NOTEHUB_TOKEN=NOTEHUB_GENERATED_TOKEN_GOES_HERE # paste in token generated in previous step
MAPBOX_ACCESS_TOKEN=MAPBOX_ACCESS_TOKEN_GOES_HERE_IF_NOT_USING_MINE # if you have your own Mapbox API token, add it here
  1. Start up the app and see if you’re getting data

Once all the local environment variables are set with your Notehub credentials, and the project dependencies have been installed, start the app up locally by typing npm run dev at the root of the project.

$ npm run dev

If everything goes according to plan, when you go to http://localhost:8080 you should see something like the screenshots in this article in your browser.

 

Deploy Low Fi LoJack® to Netlify

It’s cool to have this up and running on your local machine and all, but what about if you want to deploy it somewhere where other people can see it?

The quickest and easiest solution I would recommend is the Netlify platform.

I deployed my own version of this app to Netlify in order to share the map and history with the police detective working to recover the vehicle after it was stolen.

  1. Sign up for a free Netlify account

If you don’t already have a Netlify account, sign up for a free one.

Netlify signup options

  1. Grant Netlify access to your GitHub repo

After you’ve logged in to Netlify, you’ll need to follow these instructions to grant Netlify access to your GitHub GPS tracker repo.

  1. Set Netlify environment variables during first deployment

During the very first build and deployment of your repo on Netlify, you’ll need to add the environment variables we set locally via our .env.local file via Netlify’s build and deploy variables.

After you’ve selected the repo you want Netlify to build, click the “Advanced Build Settings” button, and add each key-value pair from your .env.local file as a new variable here.

Netlify environment variables added in build process

These variables need to be protected on the server side because they give access to Notehub, your project, etc. and shouldn’t be stored in GitHub or anywhere else accessible by the general public.

Beyond these steps, the netlify.toml file in the root of the project handles the rest of the Next.js deployment on Netlify without having to do much else.

[build]
publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

The secret is the @netlify/plugin-nextjs package – it takes care of all the more complicated parts of deploying a Next.js app so you don’t have to.

The Grand Theft Auto Conclusion

For about an hour after the car was stolen we were able to follow it around on my app’s map because my asset tracker remained undetected in the backseat. After that, the thieves discovered it and ditched it in a park and a few days later the police retrieved it – the tracker was still transmitting its location every 12 hours even though no new motion was detected.

I want to give a special shout out to my coworker Sean, who jumped on a Slack call 20 minutes after the car was stolen and helped me remotely update the Notecard via Notehub environment variables to take more frequent GPS readings so we could more closely follow the car in real time. I feel fortunate to work with such good people.

By the time the tracker was returned to my parents, I’d already left for my own home, so they mailed it to me, and since it was still operating fine, I was able to track its progress via USPS as it made its way towards me.

The OG asset tracker Notecard on its way back to me via USPS after its harrowing ordeal, still working like a champ
The OG asset tracker Notecard on its way back to me via USPS after its harrowing ordeal, still working like a champ.

Here’s the tracker when it arrived back at my house.

The asset tracker Notecard safely packed in a shipping box full of bubble wrap.
The asset tracker Notecard safely packed in a shipping box full of bubble wrap.

Over a month after the car was stolen it was found abandoned in terrible condition in an impound lot: bullet holes in the roof (which ruined the interior), dents and scratches on every outside panel, the stench of marijuana inside, an extra 2,500 miles on the odometer, and that’s just what could be seen without checking under the hood.

Hopefully the insurance company will write it off.

Where to go from here

Make and deploy your own asset tracker – from hardware to software it’s all available with Blues tech and my dashboard app code. You can even use this discount code to get 20% off your first development kit purchase.

There’s also a ton of ways this tracker dashboard could be even better. Improvements could include:

  • An option to download event data to a spreadsheet for easy sharing
  • Customizable timeframes via a date picker to see different amounts of events on the map and the charts
  • Add a cloud database that Notehub can push new events to reducing the amount of direct queries to Notehub

I actually extended this idea into another project where I made an SOS-equipped dashboard during a day-long internal company hackathon.

It follows the same principles as the project here, but includes an “SOS Mode”, which updates the Notecard remotely to do more frequent GPS location locks, and displays it on the dashboard with a red colored line.

This SOS asset tracker project changes all connecting lines between points to red when SOS mode is enabled.
This SOS asset tracker project changes all connecting lines between points to red when SOS mode is enabled.

What will you follow with your own asset tracker?


LoJack® and OnStar® are registered trademarks of the LoJack Corporation and OnStar, LLC. respectively.

The post Low Fi LoJack® with Blues Wireless and React appeared first on Blues.

]]>
Blues Wireless – Just Like React, but for IoT https://blues.com/blog/reactjs-vs-blues-wireless-iot/ Tue, 02 Nov 2021 21:34:38 +0000 https://blues-wireless.local/?p=728 You can build without React or Blues Wireless, but why would you?

The post Blues Wireless – Just Like React, but for IoT appeared first on Blues.

]]>

Welcome to the start of a new blog series where I’ll attempt to show other people with web development backgrounds (like my own), just how simple Internet of Things (IoT) development can be with the help of the right tools like Blues Wireless.

How, you ask? Why, by using an analogy many web developers are familiar with: comparing the unfamiliar (IoT and hardware) to the familiar (JavaScript and the web).

In this first post I’ll be showing how Blues Wireless makes getting started with IoT development easier in the same way that popular JavaScript frameworks, like React, make building websites easier.

Two different pieces of tech, solving for the same sorts of problems

It might not be immediately obvious, but React and Blues Wireless actually have a lot in common.

While neither is absolutely essential to building tech today, there’s no reason not to use them: both make the process infinitely easier.

Let’s face it, most of the time the hardest part of anything is getting started. Whether it’s a blank IDE staring at you as you gaze at your keyboard willing the code to appear, or an IoT-connected device, but no path to get the data from the real world where it originates to your virtual world where it will be useful.

It’s the worst, but that’s where these two seemingly unrelated pieces of tech converge.

For websites, it’s JS frameworks to the rescue

To get you started, JavaScript frameworks like React, Vue, Angular, and Svelte all have simple templates to give devs a starting point and let them get over that first hurdle of getting something, anything in the browser.

Once that’s been accomplished, developers are free to focus on the more important (and fun) stuff: solving business problems and building useful tools, and less on if the server’s running on the right port, the code’s compiling, or they’ve correctly bound event handlers to clicks in the DOM.

The promise of Create React App: to get devs up and running quickly
React’s quick start template: Create React App. It takes care of the hard stuff so we can get to fun stuff faster.

For IoT, it’s Blues Wireless and its device-to-cloud data pump

Blues Wireless does the same thing – just for Internet of Things engineers (and especially the ones who know that where their hardware is going, reliable Internet connectivity is not just not a guarantee – it might not even be an option).

Instead of learning the archaic language of AT commands, negotiating exorbitant fees with cellular companies to transmit data to the cloud, and figuring out how to turn that cryptic cloud data into something useful, Blues takes care of all of that for you.

Just buy a Notecard, attach it to a Notecarrier, issue a few simple JSON commands, and you’re ready to roll. It just works.

The flow of data from a Blues Wireless Notecard to the Blues Wireless Notehub cloud
This is a simple diagram showing the flow of data from a Blues Wireless Notecard in the field to the Blues Wireless Notehub cloud. Again, development made easier.

No Really, Blues Wireless Just Works

If you’re like me, you’re rolling your eyes right now after that last sentence. I get it – I too, would think what I’m saying is too good to be true. But it’s not.

Let me list my lack of IoT qualifications when I joined Blues Wireless. When I started, I:

After working at Blues Wireless for close to 4 months, I still can’t write or debug Arduino code.

Yet despite all this, within 6 weeks of starting there, I built a fully-functional asset tracker. This little guy collects GPS and temperature data, sends that data to the Blues Wireless cloud Notehub, and Notehub pumps that data to the low-code IoT platform Datacake where it decodes the data and displays it.

With the help of the detailed asset tracking documentation on the Blues developer site, in less than 30 minutes, I’d configured a Notecarrier-AF, equipped it with a Notecard to record its GPS coordinates, temperature, and motion data at an interval of once an hour, and pumped that data, in an easy-to-understand JSON data object, to a project I’d set up in the Blues Notehub cloud.

Notecarrier GPS asset tracker and battery
Behold, my asset tracker in all its glory: a Notecard, Notecarrier and LiPo battery
Notehub.io project dashboard
This is the Notehub dashboard. The “Asset Tracker” project in the center is where all my sensor data was sent to.

In another 30 minutes, I had my data in Notehub being sent to the Datacake platform, still in readable JSON format, and being interpreted to display the relevant GPS coordinates on a map.

Datacake low code dashboard
These are two of the widgets I put on my Datacake dashboard: the map plotting my course over time, and the temperature tracker.
Fields you can add to Datacake dashboard
Some of the fields I was setting from the JSON being delivered to Datacake via Notehub.
Datacake decoder that takes in the data and formats it for the fields
The Datacake HTTP payload decoder which took in the raw JSON from Notehub and assigned the correct pieces of info to the fields I’d defined in the image above.
How to set Datacake route in Notehub to send data over
The single URL link I added to my Notehub project so it knew which data files to send to my Datacake dashboard.

The best part about all this? Notehub doesn’t just work with Datacake.

It works with (and has documentation to connect to) all the most popular cloud platforms:

Plus lots of low-code IoT platforms too:

Once that sensor data is in Notehub, it’s simple to send it anywhere else. And once it’s anywhere else, just hook into that platform like you would with any other third-party API service providing data. Easy peasy.

The many data routing tutorials Blues Wireless has documentation for
Just look at all the possible cloud providers Blues Wireless has provided routing tutorials for to get the data out of Notehub and to your app.

How does this relate to React, Again?

I’ll admit, this post is much more about the IoT side of things than in depth look at web development, but I’m operating under the assumption that if you’re reading this, you’re already fairly familiar with JavaScript, React and the web development world.

What I’m trying to do is connect the dots: React makes web development easier, and Blues Wireless makes IoT development easier.

Could I have set up this neat little asset tracker myself without Blues Wireless? Yes, probably.

Would it have taken me an exponentially longer time, and probably turned into such a frustrating, landmine-strewn obstacle course that I very well might have quit before achieving my goal? Also yes, quite likely.

Just like with JavaScript, I could spend a lot of time on the unfun, nitty gritty details that JS frameworks take care of for me, but why would I? Why spend time and energy on things already solved for in these frameworks, when I could spend that same time building cool, useful stuff instead?

And the same can now be said of IoT prototyping and development. Spend time on the low-level details, or choose Blues Wireless solutions and get to building the “cool, useful stuff” a whole lot sooner.

I’m sold. Are you?

Where to go from Here

If you’re ready to get started with your own IoT project, I recommend you check out our Getting Started documentation on our developer experience site. It’s what I used to get up and running with my project in no time at all.

You can even use this discount code to get 20% off your first development kit purchase.

What’s Next?

Stay tuned for the next installment in this series: I plan to show you how to send data from Notehub to a cloud provider and then display it in your own React app with D3. We are developers after all, building cool data visualizations is fun.

The post Blues Wireless – Just Like React, but for IoT appeared first on Blues.

]]>