React all the things

name: inverse
layout: true
class: center, middle, inverse, bulletul
.header[.floatleft[.teal[Christopher Biggs] — React all the things].floatright[.teal[@unixbigot] .logo[@accelerando_au]]] .footer[.floatleft[.hashtag[ReactBNE] Jul 2019]]

---
name: callout
layout: true
class: center, middle, italic, bulletul
.header[.floatleft[.teal[Christopher Biggs] — React all the things].floatright[.teal[@unixbigot] .logo[@accelerando_au]]] .footer[.floatleft[.hashtag[ReactBNE] Jul 2019]]

---
template: inverse

# React all the things! \o/
### Talking to the Internet of Things with React Native

.bottom.right[
Christopher Biggs, .logo[Accelerando Consulting]
<br>@unixbigot .logo[@accelerando_au]
]

<!-- Abstract

-->

---
layout: true
template: callout
.crumb[
# Welcome
]

---
class: vtight

# Who am I?
## Christopher Biggs — .teal[@unixbigot] —  .logo[@accelerando_au]

* Brisbane, Australia
* Convenor, Brisbane Internet Of Things Meetup
* Founder, .logo[Accelerando Consulting], a "full service" consultancy - chips to cloud
* Previously: Programmer, Architect, Developer Lead

???

G'day folks, I'm Christopher Biggs.  I've been involved off and on
with embedded systems since my first professional role over 20 years
ago, and nowadays I run a consultancy specialising in the Internet of
Things, which is the new name for embedded systems that don't work
properly.

We work with companies doing IoT to help them choose or create the
right technologies and practices to build test and deploy their
products.

---
template: inverse

# IoT in Sixty Seconds

---

# Devices, Communications, Data

## The pillars of the connected future

???

Actually, first I want to give you my definition of IoT, and that's
this: the internet of things is the fusion of inexpensive embedded
devices, pervasive wireless communications, and cloud data.  The IoT
promises a future where we can extend our vision and reach as far as
we want to go, where each human thrives at the center of their own
extracortical web of sensors and agents.

---

# The why of it all

## It's the cognitive overload, .st[stupid] not-stupid-just-cognitively-overloaded

???

Why would we want to do that?  The problem with being connected to
everything is being connected to everything.

The WHY of IoT for me getting computers to worry about things so that
we don't have to.

I came across a story last week about robots in hospitals...

---

.fig30[
![](neat_cabling.jpg)]

.spacedown[
# The wires of it all]

???

So the benefit of the internet of things is making things run
smoothly, and letting people concentrate on people stuff, and machines
concentrate on machine stuff.

---
.fig40[
![](messy_cabling.jpg)]

.spacedown[
# The .st[wires] .red[horror] of it all]

???

What we want is to carefully curate our attention, and to have semi
intelligent subsystems look after themselves.

What we *get* most of the time is this.  Laziness is easier than
forethought, and it's always easier to just add one more notificaiton,
one more app, one more preference option, so systems become
labrynthine and hideous and I'm not only talking about my iphone home
page.

But also, I am.  The reality is that right now it takes me far longer
to locate and deal with the app that controls the lights in my dining
room than it does to just get up and walk over to the switch.

---

.fig30[
![](dumpster_fire.jpg)]

.spacedown[
# Everything is awful

## and the awful is on fire
]

???
So a few years ago I quit my day job and set out to make the world a
better place.

The first thing I did was go to a shedload of meetups, because
the way you avoid being overwhelmed by a disaster is to look for the
people who are helping.    One person helping is nice, a room full of
people helping is a movement.  That's us.

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
]

---
template: inverse

# It's all about the electrons, baby

???
And by way of that long winded introduction, the point I want to make
is that communication is power.

I was a geek for a decade before I ever got on the Internet.
Nowadays I can barely think of anything to do with a non-networked
computer.   In the internet age a computer without communication is
not much more than an embarrassingly warm rock.

---

# Shut up about wires already Chris

???
Wires, bless em, are still pretty handy.

---

# Telephones

## More tales of the dirt ages

???
When I was in high school and you wanted to ask someone out, you had
the horrible conundrum of using the telephone.   You had to call their house
and run the very real risk of having your call answered by a parent.
Or worse, their sister.

Yes, communication thankfully became wireless, but it also became
personal.

Our phones became smart, but they also became a source of anxiety.
Signal strength, battery life, lost phones, cracked screens, none of
these are things that we had to worry about back in the dirt age.

Now when you want to communicate there's an implicit set of tradeoffs
surrounding power and range and quality that you have to consider.

---

# WiFi

???

The first generation of what we might call smart devices landed in the
2000s, but I hesitate to call them IoT as they actually had pretty
poor networking ability.

When wifi computers became cheap...

---

# There's this other thing called "Bluetooth"...

???
Lower power but still awful.

Harald bluetooth king of norway and denmark c970.
Deposed by own son.

---
# ...which sucks

???
Nokia Siemens Ericcson - remember them?  Me neither.

Sent their most dangerous fools to a committee.
---

# Skip to, Bluetooth 4 aka "Bluetooth Low Energy" (BLE)

## It's a whole other thing

???
Announced 2004.  iPhone 4s 2011.

---

# Services and Characteristics

## Generic Attribute Profile (GATT)

---
template: inverse

# Using BLE in your apps

---

.fig30[
![](ble-plx.png)]

.spacedn[
# react-native-ble-plx]

---

# Installing
## (iOS)

.hugecode[
```bash
npm install --save react-native-ble-plx
react-native link react-native-ble-plx
# horrible hack to force ObjC bridging support
```]

---

# Installing
## (Android)

.hugecode[
```bash
npm install --save react-native-ble-plx

react-native link react-native-ble-plx
# XML editing horror
```]

---
# Expo?

## Yes*

.footnote[if you eject]

---

# Using

.hugecode[
 ```javascript
   this.manager = new BleManager();
    this.manager.onStateChange((state) => {
      if (state === 'PoweredOn') {
        this.scanForDevices();
      }
    });
```]

---

# Scanning

.hugecode[
 ```javascript
  scanForDevices = () => {
    this.manager.startDeviceScan(null, {}, (error, device) => {
      if (error) {
        return this.setState(state => ({ error }));
      }
      if (device.name === 'TheOneILove') {
        this.setState(state => ({ found: true }));
        this.connectToDevice(device);
      }
    });
  };
```]

---

# Connecting
.hugecode[
```javascript
  connectToDevice = (d) => {
    if (this.device) {
      this.device.cancelConnection();
      this.device = null;
    }

this.device = this.manager.connectToDevice(d.id).then((device) => {
      this.setState(state => ({ connected: true, deviceId: device.id }));
      this.device = device;

return this.checkServices();
    });
  }
```]

---

# Discovering services and characteristics

.hugecode[
```javascript
  checkServices = () => {
    if (!this.device) return;

this.device.discoverAllServicesAndCharacteristics()
      .then(() => this.device.services())
      .then((services) => {
        // Find the custom service
        return services.filter(s => s.uuid.match(/split('-')[0] === '0000ffe0')[0];
      })
      .then((service) => service.characteristics())
      .then((characteristics) => characteristics[0].monitor(this.monitorCharacteristic));
  }
```]

---

# Monitoring a characteristic

.hugecode[
```javascript
  monitorCharacteristic = (error, characteristic) => {
    if (!error) {
      const interestingValue =
        Buffer(characteristic.value, 'base64').toString();

if (InterestingValue !== this.state.interestingValue) {
        this.setState(state => ({ interestingValue }));
      }
    }
  }
```]

---

# Mischief Managed

## Now your React app is hooked into the real world

---
template: inverse

# Exploring the world of BT

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
# Bluetooth
# BT+React
# Exploring
]

---

# Grab a browser app

* Adafruit bluefruit explorer
* BLE scanner
* Anything from Nodic Semiconductor

---

# Demo demons

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
# Bluetooth
# BT+React
# Exploring
# Beacons
]

---

# iBeacons

## Crazy apple tech

* TILE and friends
* Key finders
* Selfie buttons

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
# Bluetooth
# BT+React
# Exploring
# Beacons
# COTS
# DIY
]

---

# Off the shelf gadgets

* flowercare
* pokit
* lightbulbs

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
# Bluetooth
# BT+React
# Exploring
# Beacons
# COTS
# DIY
]

---

# Build your own

* ESP32 (Microcontroller with wifi and BLE)
* HM-10 BLE module (BLE retrofit for anything)

---
layout: true
template: callout
.crumb[
# Welcome
# WiFi
# Bluetooth
# BT+React
# Exploring
# Beacons
# COTS
# DIY
# Coda
]

---
.fig30[
![](keep-calm.jpg)
]

# Recap

.nolm.vtight[
* IoT in sixty seconds
* WiFi is great, and awful
* Bluetooth Low Energy
* react-native-ble-plx
* exploring BLE devices
* iBeacons and buttons
* Flowercare
* DIY HM-10
* DIY ESP
]

---

# SHAMELESS SELF-PROMOTION

## **Brisbane Internet of Things Meetup**
* Last monday night of the month at .blue[@Avestix_Lab]
* Weekend practical workshops at .blue[@accelerando_au]
* Find us on Meetup.com

## **Hardware Startup Brisbane**
* If you make stuff, we help each other make better stuff
* .blue[https://www.meetup.com/Hardware-Startup-Brisbane/]

---

# Resources, Questions

## Related talks - [http://christopher.biggs.id.au/#talks](http://christopher.biggs.id.au/#talks)

- Email: .blue[christopher @ biggs.id.au]
- Twitter: .blue[@unixbigot]
- BNE IoT Meetup: .blue[@iotbne]
- Accelerando Consulting - IoT, DevOps, Big Data - .blue[@accelerando_au] https://accelerando.com.au/