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).

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.)

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.

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.