For years the world has been abuzz with IoT devices. These devices range from alarm clocks that show the current weather to refrigerators that list the prices of nearby groceries. Whatever the specifics, these devices rely on APIs to communicate with data sources. But how, exactly, do we connect the messages, data, and devices? In this post, we’ll show you an example of how to design and model data for an IoT device. We’ll use the —a small, modular IoT device with a display screen—and connect to the (NYC MTA) to render the latest subway times for various stations. M5Stack API for the New York City Metropolitan Transportation Authority While we’ll focus on the M5Stack, the concepts we’ll discuss will apply to designing an IoT application across a wide variety of devices. So, let’s get started! Prerequisites In this tutorial, we’ll focus on the bigger conceptual ideas around how to request data from an API. Some programming knowledge will be very helpful. Although you don’t need an M5Stack, if you do have one, then you can follow along and upload the finished project on your own device. With that in mind, you can download the and . If you’ve never booted an M5Stack before, to set up WiFi and the necessary firmware. For this project, we’ll use , which is the main programming language that the M5Stack uses. VS Code IDE the M5Stack plugin follow their guide Python 3 You’ll need to for a free Developer’s API key to access their real-time subway data. sign up for an NYC MTA developer account Lastly, you should sign up for a free Gravitee account to use the , which will make it easier to visualize and understand the data flow in your API calls! API designer The source material for this project was inspired by , so go ahead and star that repository if it’s been helpful. this open-source project Designing the API Interaction Before writing a single line of code, let’s take a step back and consider what sort of information we need to complete this project: Information about the relevant subway stations Which trains pass through those stations The latest real-time data about those trains According to the documentation, the API is separated into and . static data feeds real-time data feeds Static data feeds hold information about stations. With that information, we can get the actual live train data from the real-time data feeds API. The data provided by the MTA is in the following CSV format: stop_id,stop_code,stop_name,stop_desc,stop_lat,stop_lon,zone_id,stop_url,location_type,parent_station Since the only static information we need is the station ID, we can simply pluck a random station ID and use it for the real-time feeds. In this case, I’m choosing the for its relative complexity: two separate trains pass through it (the A and the C). Stations are also identified by whether they are northbound (N) or southbound (S). Hoyt–Schermerhorn station A42,,Hoyt-Schermerhorn Sts,,40.688484,-73.985001,,,1,
A42N,,Hoyt-Schermerhorn Sts,,40.688484,-73.985001,,,0,A42
A42S,,Hoyt-Schermerhorn Sts,,40.688484,-73.985001,,,0,A42 From these rows, all we need is the parent stop ID (A42) to identify the trains passing through the station, both northbound (A42N) and southbound (A42S). The real-time feeds are represented in , which is based on (also called protobuf). While the NYC MTA doesn’t have documented examples of its specific feeds, . From the GTFS documentation, we can identify how to get the time-to-arrival for the latest trains at a particular station in a protobuf format. Google’s GTFS format protocol buffers GTFS does Here’s an example of a response from the GTFS endpoint, converted into JSON for easier visualization: {
  "trip":{
     "trip_id":"120700_A..N",
     "start_time":"20:07:00",
     "start_date":"20220531",
     "route_id":"A"
  },
  "stop_time_update":[
     {
        "arrival":{
           "time":1654042672
        },
        "departure":{
           "time":1654042672
        },
        "stop_id":"H06N"
     },

     //…more stops…

     {
        "arrival":{
           "time":1654044957
        },
        "departure":{
           "time":1654044957
        },
        "stop_id":"A42N"
     }
  ]
} Because of the amount of information the NYC MTA API throws at you, it can be very helpful to use the Gravitee API Designer to model what the API returns, mapping out and visualizing the data. Here’s a snapshot of our API Designer mind map: The API Designer helps you identify all of the resources (endpoints) for your API, along with the data attributes associated with out resource. Those attributes will include the inputs an endpoint needs and the outputs it provides. In our map, we have a resource with the path . We can attach as many attributes as necessary, and we can annotate each of those attributes with data types. By looking at our map, we can draw a direct path from the endpoint to the arrival and departure times identified at the bottom right. /gtfs/ So, in order to represent the data we need, we’ll need to: Identify the ID of the station we want train information from Issue an HTTP request to the NYC MTA’s GTFS feed for the train line(s) we’re interested in Iterate over the results, comparing the stop_id in the response array with our station ID We can then act on the time information for our specific station and train This represents a few moving parts, but it shouldn’t be anything we can’t handle! Coding It Before running anything on our M5Stack, let’s first make sure our code works locally. We’ll install a few Python packages to make our project easier to build. pip3 install --upgrade gtfs-realtime-bindings
pip3 install protobuf3_to_dict
pip3 install requests The first two packages convert protocol buffers into Python dictionaries (or hashes), which makes for an easier data model to work with. The last package makes it easier to issue HTTP requests from Python. We’ll start our program by importing the Python packages: from google.transit import gtfs_realtime_pb2
import requests
import time Next, we’ll issue our HTTP request to the NYC MTA GTFS feed: api_key = "YOUR_API_KEY"

# Requests subway status data feed from the NYC MTA API
headers = {'x-api-key': api_key}
feed = gtfs_realtime_pb2.FeedMessage()
response = requests.get(
    'https://api-endpoint.mta.info/Dataservice/mtagtfsfeeds/nyct%2Fgtfs-ace',
    headers=headers)
feed.ParseFromString(response.content) So far, so good. The GTFS endpoint we’re using here is the one for the A/C/E trains, which we can identify by the suffix on the URL. (Except, for this demo, we don’t care about the E train—sorry, E train!) -ace Let’s convert that GTFS protocol buffer response into a dictionary: from protobuf_to_dict import protobuf_to_dict
subway_feed = protobuf_to_dict(feed)  # converts MTA data feed to a dictionary
realtime_data = subway_feed['entity'] At this point, I would highly recommend issuing a , so we can see what the actual data structure looks like. If this were a real project, such an analysis might help you identify which keys and values in the dictionary you’d need to iterate over—but since this is a tutorial, we’ve already covered that. print(realtime_data) def station_time_lookup(train_data, station):
   for trains in train_data:
       if trains.__contains__('trip_update'):
           unique_train_schedule = trains['trip_update']
           if unique_train_schedule.__contains__('stop_time_update'):
             unique_arrival_times = unique_train_schedule['stop_time_update']
             for scheduled_arrivals in unique_arrival_times:
                 stop_id = scheduled_arrivals.get('stop_id', False)
                 if stop_id == f'{station}N':
                     time_data = scheduled_arrivals['arrival']
                     unique_time = time_data['time']
                     if unique_time != None:
                         northbound_times.append(unique_time)
                 elif stop_id == f'{station}S':
                     time_data = scheduled_arrivals['arrival']
                     unique_time = time_data['time']
                     if unique_time != None:
                         southbound_times.append(unique_time)

# Keep a global list to collect various train times
northbound_times = []
southbound_times = []

# Run the above function for the station ID for Hoyt-Schermerhorn
station_time_lookup(realtime_data, 'A42') Suddenly, we have a lot of code! But don’t worry—what we’re doing isn’t so complicated: We iterate over the array of train information for the A/C lines. For each array entry, we verify that we have values for all of the keys we need. This is defensive coding because we can’t be 100% certain that this third-party service has what we need when we need it! After that, we iterate through all the station information and stop when we land on the parent ID we need ( ) for both northbound and southbound trains. A42 Finally, we keep lists for the upcoming train arrival times in two separate global variables. Next, let’s present this information: # Sort collected times in chronological order
northbound_times.sort()
southbound_times.sort()

# Pop off the earliest and second earliest arrival times from the list
nearest_northbound_arrival_time = northbound_times[0]
second_northbound_arrival_time = northbound_times[1]

nearest_southbound_arrival_time = southbound_times[0]
second_southbound_arrival_time = southbound_times[1]

### UI FOR M5STACK SHOULD GO HERE ###

def print_train_arrivals(
        direction,
        time_until_train,
        nearest_arrival_time,
        second_arrival_time):
    if time_until_train <= 0:
        next_arrival_time = second_arrival_time
    else nearest_arrival_time:
        next_arrival_time_s = time.strftime(
            "%I:%M %p",
            time.localtime(next_arrival_time))
    print(f"The next {direction} train will arrive at {next_arrival_time_s}")

# Grab the current time so that you can find out the minutes to arrival
current_time = int(time.time())
time_until_northbound_train = int(
    ((nearest_northbound_arrival_time - current_time) / 60))
time_until_southbound_train = int(
    ((nearest_southbound_arrival_time - current_time) / 60))
current_time_s = time.strftime("%I:%M %p")
print(f"It's currently {current_time_s}")

print_train_arrivals(
    "northbound",
    time_until_northbound_train,
    nearest_northbound_arrival_time,
    second_northbound_arrival_time)
print_train_arrivals(
    "southbound",
    time_until_southbound_train,
    nearest_southbound_arrival_time,
    time_until_southbound_train) Most of what we’re doing above is data formatting. The key steps are as follows: We sort the arrival times of the northbound and southbound trains at the station. We take the first two times (the “soonest” trains arriving). We compare those times with the current time to get a distance in minutes for the train’s arrival. We pass those train arrival times to print_train_arrivals. If the next train is arriving in less than a minute, we’ll show the second arrival time—you’re not going to make that train, I’m afraid! Otherwise, we’ll show the nearest arrival time. If you run this script on the terminal, then you should see a message similar to the following: It's currently 05:59 PM
The next northbound train will arrive at 06:00 PM
The next southbound train will arrive at 06:02 PM Deploying to the M5Stack Now that we have tested locally that our Python code can communicate with the NYC MTA API, it’s time to get this code running on our M5Stack. The easiest way to program the M5Stack is through , which is just a web page that communicates with your device through WiFi. You can learn more about how to configure your device for WiFi access through . the free UI Flow IDE their documentation Although the M5Stack can be programmed through WYSIWYG UI elements, it can also accept (and run) Python code. However, the main advantage of the WYSIWYG elements is that it makes visualizing the text drawn on the screen much easier: In this GIF, I’ve created a label with the default string of “Text” on the sample M5Stack screen. When I switch to Python, we see that the label is an instantiation of an object called . As the label is dragged around, its X and Y coordinates (the first two arguments in the constructor) change in Python. This makes it easy to see how your program will be displayed. You can also change the variable used in the Python code (as well as other properties) by clicking on the label itself: M5TextBox For the most part, the Python script we wrote can be used on the M5Stack with some slight modifications. We can copy the Python code from our local machine and paste it into the Python tab of the UI Flow IDE. In our code, we find the comment and replace everything below it with the following code: ### UI FOR M5STACK SHOULD GO HERE ### time_label = M5TextBox(146, 27, "", lcd.FONT_Default, 0xFFFFFF, rotate=0)
northbound_label = M5TextBox(146, 95, "", lcd.FONT_Default, 0xFFFFFF, rotate=0)
southbound_label = M5TextBox(146, 163, "", lcd.FONT_Default, 0xFFFFFF, rotate=0)

def print_train_arrivals(
        direction,
        label,
        time_until_train,
        nearest_arrival_time,
        second_arrival_time):
    if time_until_train <= 0:
        next_arrival_time = second_arrival_time
    else nearest_arrival_time:
        next_arrival_time_s = time.strftime(
            "%I:%M %p",
            time.localtime(next_arrival_time))
    label.setText(f"The next {direction} train will arrive at {next_arrival_time_s}")

while True:
    # Grab the current time so that you can find out the minutes to arrival
    current_time = int(time.time())
    time_until_northbound_train = int(
        ((nearest_northbound_arrival_time - current_time) / 60))
    time_until_southbound_train = int(
        ((nearest_southbound_arrival_time - current_time) / 60))
    current_time_s = time.strftime("%I:%M %p")
    time_label.setText(f"It's currently {current_time_s}")

    print_train_arrivals(
        "northbound",
        northbound_label,
        time_until_northbound_train,
        nearest_northbound_arrival_time,
        second_northbound_arrival_time)
    print_train_arrivals(
        "southbound",
        southbound_label,
        time_until_southbound_train,
        nearest_southbound_arrival_time,
        time_until_southbound_train)
  
    sleep 5 Most of this should look familiar! There are two major modifications to get this code running on the M5Stack. First, we created the labels which will be placeholders for our time and train data: time_label northbound_label southbound_label Second, we’ve put everything inside of a loop, which will grab the current times and set the label text. The loop will sleep for five seconds and then restart the process. while And that’s it! When we hit the button, we should see our train strings update every five seconds with the latest route data. Run Conclusion That’s that! IoT devices are often used by hobbyists, but if you continue working on this project, there are several real-world considerations. One consideration is rate-limiting, making sure you’re requesting data in an efficient way from the MTA API. Another consideration is connectivity. If your device temporarily loses WiFi access, how will it reestablish a connection to fetch the information it needs? Once you start thinking about these production-grade concerns, or if you want to scale your project across multiple devices, you’ll also need to consider API management. I mentioned Gravitee Designer earlier in this article, which is great in the design phase. Gravitee has other tools for API management, like an API gateway, monitoring, real-time analytics, and deployment. IoT application development may seem daunting for developers who are used to writing code for traditional servers and web browsers. However, the leap to IoT devices is actually quite small. Today’s devices, with their built-in support for popular languages and frameworks, make IoT a fun and innovative way to build or integrate with APIs and applications. Also published here

Flow

Fetch

Google

Transit

2022 - HackerNoon Contributor of the Year - Engineering

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Jobs

2022 - HackerNoon Contributor of the Year - Kubernetes

2022 - HackerNoon Contributor of the Year - Npm

2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Jobs

Nominated for 2022 - HackerNoon Contributor of the Year - Npm

Nominated for 2022 - HackerNoon Contributor of the Year - Kubernetes

Nominated for 2022 - HackerNoon Contributor of the Year - Engineering

Too Long; Didn't Read

How to Build an IoT Application Using an HTTP API

How to Build an IoT Application Using an HTTP API

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@alvinslee

RELATED STORIES