Development

Technology

Web Apps

How to Get Started with the Internet of Things (IoT)

November 10, 2017

We live in a time when most of the hardware we use is connected to the internet. “Smart devices” started with phones and TVs, but there are now many other internet-connected devices like cars, refrigerators, and home automation systems.

The Internet of Things – or IoT – is growing as an industry, with new devices automating our lives and making them both easier and more interesting. While it might seem like a challenging field for a programmer to enter, here’s how to get started with the Internet of Things, and it’s as easy as pie.

In this post, I’ll guide you through my experience building a To Do List created with Internet of Things connectivity in mind, using:

  1. A Raspberry Pi
  2. A GPIO
  3. A Progressive Web App
  4. Some lights and a phone

What is a Raspberry PI?

A Raspberry Pi is a mini computer that runs the Raspbian operating system. At its core, it’s a basic computer that can connect to displays, lights, buttons, and thousands of other pieces of hardware.

Each piece of hardware is controlled with code through GPIO. I bought my Raspberry Pi 3 kit for a little over $80 from Canakit (note: this does not include mouse, keyboard, or display).

Raspberry Pie 3 Kit

What is GPIO?

GPIO stands for “general purpose input/output.” The GPIO is a computer board peripheral that will allow you to connect lights, buttons, and many other devices depending on your hardware project. In my case, the GPIO was a key piece of creating my To Do List prototype.

The Raspberry Pi included an educational GPIO kit with 2 buttons, a breadboard, 7 color lights, some resistors, and cables.

What is a Progressive Web App?

A Progressive Web App is a web app optimized to feel like a mobile native app. Google outlines three guidelines for building Progressive Web Apps. They should be:

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience.

Bottom line, Progressive Web Apps are a “new way to deliver amazing user experiences on the web.” The simple To Do List I created is a basic example of an Internet of Things progressive web app – the To Do List is connected to both my phone and my computer, and it’s progressive in that it doesn’t need to be downloaded, only accessed via the web.

While the To Do List is a basic example, the boundaries of IoT-driven Progressive Web Applications are as limitless as your imagination.

So How Did I Build It?

I wanted the To Do List to be displayable on screen and controllable by phone.

After completing a goal on the To Do List, the idea is that the user taps “Complete,” and the feedback would be the reward of colorful lights, relayed with the Raspberry Pi. Providing these type of sensory rewards is a great way of completing goals and gathering statistics about the user’s achievements in a game-like setting. (Games definitely sound more fun than tasks, right? Here is a Ted Talk about becoming more productive through gamification.)

progressive web application Raspberry Pi

I chose the Angular 4 JavaScript framework and Firebase Database to power my app. Angular 4 is a modern framework to build applications. It has great performance; a big, supportive community; and it is backed up by Google and Microsoft. Firebase is perfect for this project because it updates the data of all devices connected to it automatically through websockets.

Here are the steps I took to create the web application – which connected my phone and a display screen – and gives users a colorful reward upon checking off tasks:

  1. I installed Node.js in my Raspberry Pi which made it really simple to code in JavaScript.
  2. I also installed Johnny-Five, a robotics platform for IoT to control my lights.
  3. I created an Angular 4 Progressive Web App with Firebase on the back-end.
  4. I connected my Node.js server with Firebase to listen to changes.
  5. I updated the Raspberry Pi to run my Angular 4 app and my Node.js server when booting.

What Were the Results?

Now, I have a screen that tells me what my goals for the week are. In the end, I really enjoyed coding for a mini computer. I like to think of this experience as playing advanced LEGOs, which is as fun as it sounds. 

IoT to do list

Beyond experimentation – and looking at the bigger picture – this simple example shows that prototyping a piece of software or hardware is very accessible. As the frontiers of IoT expand, so too will the need for creative developers and tech-savvy designers who think outside the box about how to connect the physical and digital world in a meaningful way.

Some examples of Internet of Things applications people have built include automatic pet feeders, musical instruments, and camera motion detectors. There are also many popular IoT products like the Amazon Echo and the Apple Watch. This comprehensive list will give you a better idea of what this growing industry is coming up with.

I hope this blog inspires you to start working on some cool Internet of Things projects!

Interested in collaborating? Give us a call to see what we can build together.

Xavier Reyes

Front-End Developer

You might also like...

25

Apr.

How to Create a Fuzzy Search-as-You-Type Feature with Elasticsearch and Django

Tutorial: How to Create a Fuzzy Search-as-you-type Feature with Elasticsearch and Django Recently, I had to figure out how to implement a fuzzy search-as-you-type feature for one of our Django web APIs. I couldn’t find any comprehensive tutorial on how to build this specific feature, so I decided to combine multiple sources and document the … Continued

12

Apr.

6 Things to Look For in a Web Hosting Provider

People often ask us who we recommend for web hosting. Different needs dictate different solutions but there are some universal requirements which almost always need to be met. We have client sites running on many different hosting providers but rather than discuss specific companies let’s go over what we recommend looking for in a web … Continued

26

Mar.

Why HTTPS Matters

What’s HTTPS? Hypertext Transfer Protocol (HTTP) is the underlying data communication system for the Internet. A simple example of the protocol is when you landed on this page, your browser (e.g. Chrome, Safari, etc.) made an HTTP request to the computer that’s hosting this website, and then the hosting computer sent back an HTTP response … Continued

Pacific Science Center

application maintenance and development

Pacific Science Center

Cisco

mobile development

Cisco

Deloitte

web design, microsite development

Deloitte

Seattle Public Library

ui/ux design, microsite development

Seattle Public Library