Blog: Building an Internet-of-Things (IoT) Gate App Using a Raspberry Pi, React (JavaScript), Node, HTML and CSS

Manny Becerra as a child

June 2019

My good friends at 720 in Reno recently asked if I could help them with identifying and creating a simple, affordable solution to help alleviate their parking delemna. After learning more about the situation, collecting feedback from tenants, and understanding the property owner's initial criteria/wishes and resource constraints, we settled on designing and developing an IoT web app that tenants and guests of the property could easily use to open and close the analog gate on the lot for whenever they needed to ensure parking was more available to them and their clients during peak times.

Some additional background

The property is located in Midtown Reno, which has experienced a surge in traffic the past few years. The property has one of the few, existing parking lots in the area which has made it one of the go-to lots for anyone-and-everyone in town to park when visiting the Midtown area. This has made it difficult at times for students and customers to find nearby parking when visiting the 720 property to attend yoga classes and salon appointments, and conduct general business.

The level of polish and professionalism on this app is amazing - User feedback

The solution

Screen shot of IoT front-end app for controlling the 720 Tahoe Street parking lot gate

Tech overview

From the tech side, this problem was prime for leveraging a Raspberry Pi (R-Pi) and custom node API server for interfacing with the analog gate hardware, specifically, controlling the R-Pi's GPIO input/output pins for triggering the gate arm to either open or close. For communicating with the API server, I built a front-end app using JavaScript, HTML and CSS, more specifically, React w/hooks, my Bristlecone design system and semantic, accessible-friendly markup. Learn more about other tidbits to the final solution.

Design approach

Partial visual of the 720 IoT solution's QR code for directing users to product and training material

Since users of the app would range across the entire spectrum, from novice to seasoned smartphone users, the user interface and overall experience (UI/X) had to be extra considerate of keeping the learning curve low while delivering a user-friendly, rich experience. After some initial design iterations, it made sense to have the UI/X reflect a typical push-button keypad that the majority of the app's users would already be familiar with in one form or another. Couple this common real-life user interface (a keypad) with a thought out color state management approach that reflects the gate and user interface's state (based on user input). Along with motion effects, the final product and UI/X turned out better than originally expected.

Reliable connectivity

Since this is an IoT solution, reliable and consistent Internet connectivity between the API server hosted on the R-Pi and the outer world was paramount. Since the Internet router sits physically inside the building and the R-Pi is located securely outside a good amount of time was spent experimenting with various antennas from the building to the R-Pi. After the first several attempts, it seemed like we were going to hit a blocker, but with persistence, curiousity and collaboration with others, we arrived at a reliable solution that can be further fine-tuned over time as we collect user feedback. I learned a bit about antenna theory during this phase of the project.

Product + training material

To complement the rollout of the app, I created a customer-facing, by-invite product page -- under the brand Park with Ease -- that encompasses the same look and feel as the app's UI/X, which contains helpful training and educational material for tenants and their customers, such as how to access and use the IoT app for controlling the on-site gate arm. This product page was also used for creating the hard-copy assets for in-person training, which contains a custom QR code that users can, for ease of access, scan with their phones to be redirected to the app's how-to product page at any time when needed.

Project collage

Other tidbits and features

  • Working with the property owner, John, we installed a physical keypad next to the gate as an "escape hatch" that folks can use should they forget their smartphone or simply don't have one to begin with (again, our users range from tech savvy to tech avoidant and we wanted to ensure there was more than one way to get in-and-out of the lot if the gate was closed when someone arrived)

  • The app allows for many concurrent users at once and syncs the gate's state across all active user sessions. For example, if user A opens the gate, user B's app session is automagically updated to reflect the most current state of the physical gate, in this case, opened. Now, if user B then closes the gate, user A's app session would reflect this too

  • The node API server resides on the R-Pi, while the secure front-end (F/E) app I have hosted in the "cloud" with Zeit's excellent serverless hosting services. The F/E app that users use to interact with the on-site gate communicates with the API server via secure DNS and port-forwarding configurations

  • The node API server is auto-started anytime the R-Pi is rebooted, intentionally or, for example, if there is a power outage, then the power comes back online

  • I integrated a live video stream on the F/E app using the R-Pi's camera capabilities; this way if a user is inside the property and cannot visually see the gate while wanting to operate it, they can get a real-time visual before and after operating the gate using the app's user interface

  • User events, such as the toggling of the gate to the open or close state, are logged to help the property owner and myself review the analytic trends from time-to-time. The data and reviewing of it can help us better understand peak-times and general usage of the app for helping adapt and improve the app further in the future as needed to reflect the ongoing real-life needs as they evolve

  • SMS notification is sent whenever the gate is toggled (closed/opened)

Collaborators and Contributors

While I played several, active roles in this project, from UI/X designer, dev/coder, devops and architecture, educational trainer to product and project manager, the final deliverable couldn't have been reached as well as it did without the collaborative contributions of the following individuals (in no particular order):

  • John J. Jesse, property owner, co-lead; also filled in my gaps in knowledge with how analog, dry-contact connections work
  • Greg Warren, networking + WiFi hardware
  • Randy Sloan, antenna theory
  • Launie Gardner, copy editing and UX
  • Tenants and customers of 720 and their feedback

With the contributions and cross-functional collaboration from these individuals, the IoT gate app's quality and deliverable increased better than originally anticipated in system uptime reliability, physical design implementation, clearer training material and Web content, and overall user experience.

Closing remarks

While the initial product has been delivered, it's been designed and architected -- from the API server, frontend app, even the physical gate configuration with the Raspberry Pi -- to be easily extended as needed or desired in the future; for example, we may want to add some LEDs down the road that turn on/off, of various colors, depending on user interaction and the state of the physical gate. There's another feature enhancement in the pipeline that I will do a follow-up post on, as it deserves its own dedicated piece.

If you have questions about how to rollout your own, similar IoT solution using a Raspberry Pi, node API server and robust F/E web app, feel free to connect with me and ask away - I'd be happy to share and consult.

Manny