Controlling Smart homes with React Native workshop at Chain React Conference

On July 11, 2018 I taught an advanced workshop on controlling smart homes with React Native at amazing Chain React Conference in Portland, OR.

In this post i want to share this workshop to everyone both the presentation, code and general guidelines how to start so you can revisit workshop at home if you were one of workshop attendees or if you missed it, how to study yourself.

Workshops were an important part of Chain React Conference and were in a format of a half day hands on learning experience. Same workshop was done twice before and after lunch with different groups of attendees.

I started it explaining what are smart homes, IoT and what types of IoT devices there are today. I decided to focus on two types of IoT devices. High end Wifi controlled devices like Philips Hue and bluetooth enabled devices.

Workshop was built in 3 parts. First part I’ve explained Philips Hue api and how we can connect to Philips Hue bridge.

The main idea is that Philips Hue bridge can be treated simply as a server running on local network. We can discover it by running discovery service, get user name and then access it’s local api for controlling lights. You can read more about it here.

When you check out the repo you will be on step1 branch. In this branch there is a hueApp application that I’ve built for the workshop. The idea is to fill all places with “TODO” comments to make app look like this:

After finishing part 1, we’ve talked about Bluetooth Low energy.

How BLE protocol looks like, what are central, peripherals, services, characteristics, GAP, GATT and much more. After giving an overview on BLE I showed various ways to reverse engineer bluetooth protocols. It can be done with various tools. First of all NRF Connect app.

This app gives you an ability to search for bluetooth enabled devices around you and scan for services, characteristics etc. With this app available both on AppStore and GooglePlay, you can get the basic idea how to interact with the light bulb. We also looked at hardware sniffing solutions such as Adafruit BLE Sniffer or even better Ubertooth One. I’ve also mentioned hcitool and gatttool which is a part of blueZ protocol stack for Linux for getting basic BLE data and doing the same we’ve done with NRF connect app, but in command line.

Using BLE Sniffer will look similar to this and will work only with old versions of Wireshark.

Ubertooth One:

While there are lots of different solutions to sniff BLE data there is an easier one and this is basically by using your Android phone.

You can enable hci snoop log on android

Then all your bluetooth manipulations on device will be logged in this log.

For workshop i used this lightbulb and it’s dedicated app MagicBlue. After doing various manipulations with lightbulb like changing colors, brightness or turning it on or off, you can pull hci snoop log and load it in WireShark.

That’s what we did in part 2 of the workshop.

On the same repository we’ve cloned at step2, there is a folder called “logs”. In this folder I prepared logs for workshop attendees from BLE Sniffer, Ubertooth One and bluetooth hci snoop log. Attendees were required to go through this log and find out what value they should send to what characteristic. They’ve done that with NRF Connect app. Light bulb which I had there in the room changed colors based on input.

At last it was time for step3 of the workshop. Building an actual app that connects to LED lightbulb and controls it.

In this example we’ve used react-native-ble-plx package for interacting with bluetooth devices. An app that I’ve built for the workshop has two functionalities. First of all it does the same NRF Connect app meaning it serves as a scanner for BLE devices. Second functionality, attendees were required to implement by filling in “TODO” comments in various places under bleApp app folder.

After finishing this three steps workshop, attendees got a general idea as well as hands on experience of controlling various smart home devices, reverse engineering protocols, understanding smart homes architecture and it will help them to build cool and amazing apps for controlling smart home with React Native.

It was really great experience to teach this workshop at Chain React and if you are interested in my next workshops or just interested in things that I do in React Native, IoT, AR, VR or Web, check out my twitter.

And for final words a joke that was born during the workshop:

Q: How many software engineers are needed to turn on a light bulb?

A: Apparently all of them