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

Full-Stack Developer

You might also like...

28

Nov.

VR Developer’s Journal Part 2: Content for VR Games & Experiences

The second stage of my VR Developer’s journey began in 2016, when Vive launched with a bit of a problem. Well actually, more that something was missing: content to play. The VR ecosystem in general at this time lacked software games and experiences that a user would love to install and play on their shiny new VR … Continued

2

Oct.

How Will the Oracle Java Licensing Changes Affect You?

Earlier this year, Oracle announced that beginning January 1, 2019, it will no longer provide support and updates to Java SE 8. Instead, the support and updates that have been included as part of the Java license will now be available only through a separate subscription support service. As we are now well into the … Continued

21

Aug.

VR Developer’s Journal Part 1: Getting into VR

This is the first in a new series of Fresh blog posts about Virtual Reality (VR). Eventually we’ll be diving into the more technical aspects of software development for VR; however, this first blog post is more of an introduction, to give you some background and better context to what follows. It’s important to note … Continued