Smart Bulbs and IoT: Our Workshop at AngularConnect 2016
AngularConnect is the biggest Angular Conference in Europe. This year, it focused around the long anticipated release of Angular 2 (for more, check out the sessions and videos!).
My favorite thing about AngularConnect is that it actually is what the name suggests — people actually connect with each other during the conference, and have a lot of fun, too:
Two friends, Gil Fink from sparXys and François Beaufort from the Google Chrome DevRel Team, and I ran a workshop during the event about — you guessed it! — Angular 2 and IoT.
I mentioned Angular 2 in my angular2-iot blog post about Simon — and showed how we can use Angular 2 to power a game that runs both on the web and physical hardware.
For the workshop, we showed the attendees how they could use Angular to create an interface to control a consumer IoT device. We walked the participants through creating an app with Angular 2, Ionic, and Web Bluetooth to control their bulbs. All the workshop participants got a Smart Light Bulb as SWAG (and to help them follow along), and guess what? It was the same bulb that we wrote about in the previous posts.
The nice thing was that everyone was able to come up with his own user interface to controlling the bulb, and we indeed had some very creative outcomes, such as using SMS to change the bulb color:
Want to Play, Too?
We decided to open up the workshop instructions for everyone, so you can also follow along and “participate” in the workshop.
If you just want to check out the finished product, without going through all the workshop steps, there are two flavors you can choose from:
- Web Version: Web Bluetooth (works on Mac, Android 6+)
- Android App: using cordova-ble-central-plugin (Android 4.3+)
The source code for each of these finished examples is available on GitHub — the Android app version in master branch, and the Web Bluetooth version in web-bluetooth branch.
We also created a Virtual Machine Image that contains everything that you need to develop for Web Bluetooth with Ionic 2 and Angular. Simply install Virtual Box (64 bit), attach a Bluetooth 4.0 dongle, launch the virtual machine, and you are ready to start developing for Web Bluetooth. This works even if you have a platform that is not natively supported by Web Bluetooth, such as Windows. The virtual machine contains a recent Dev build of Chrome, Visual Studio Code, node.js, npm, and the Ionic 2 release candidate.
Don’t have a bulb? No worries; if you have a recent Android phone, you can run my Bluetooth Bulb Simulator. You can also run it on any iOS device, provided that you have an Apple Developer account and can install and compile the app on that device. Check out the source code for the simulator in the GitHub repo. In a future post, I’ll explain how the simulator was built and how you can quickly simulate almost any BLE device on Android/iOS devices.
Why We Choose Ionic
While I love Web Bluetooth, it is still not available for all platforms. You can create amazing applications, but they will only run flawlessly for users with Macs running a recent OS, Android 6, or Chrome OS (as mentioned previously, Linux requires some tinkering, and iOS/Windows is not supported ATM).
When we designed the workshop, we wanted everyone to be able to be able to participate and have the option to create an app that they can share with others. We wanted to cover both iOS and Android, as well as the desktop platforms where possible, so we decided to go with Ionic 2.
Ionic 2 aligns with Angular 2, so it made a natural fit for the workshop. In fact, it aligns so well — and the Ionic developers are so invested in the combination of the two — that the Ionic team told us they were going to release a new version aligned with Angular 2.0.0 final, and because it wasn’t going to be quite ready by the time of the workshop, we got to use an unreleased release candidate version during the workshop — pretty neat!
(Side note: They released the beta version we were using just a few hours after the workshop ended: Go Ionic!)
Some other advantages of Ionic 2:
- Ionic 2 creates apps that can be deployed as Web Apps, compiled to Native Android and iOS apps.
- The same code base powers all platforms — with Angular 2 and its Dependency Injection, this means you can easily separate the platform specific code from the rest of the app.
- Ionic 2 comes with a rich library of native looking UI components, so you can quickly build the app without having to tinker with the layout and styling of the pages.
- Ionic 2 includes command line tools to quickly bootstrap your app, and easily deploy it — you can get up and running quickly just by running a few commands.
- Built on top of Angular 2 and TypeScript 2, taking advantage of advanced features such as AoT (Ahead of Time) template compilation, which gets you excellent performance while speeding up development, too.
The Ionic team was very helpful and shared with us some tips regarding breaking changes they introduced in the upcoming release. They also helped with the issues we encountered while trying to upgrade our code.
TypeScript and Web Bluetooth
Another thing we encountered during the workshop was the lack of TypeScript support for Web Bluetooth. We got to work, and ended up submitting a pull request to the TypeScript project to add it.
(P.S. — if you’re wondering why TypeScript is such a big deal for Angular 2, check out this awesome post by Victor Savkin.)
Workshop Participant Feedback
We wrapped up the conference by asking participants for their feedback. Overall, we had a lot of positive feedback, as well as some constructive feedback for the next time, like a suggestion that we publish the list of prerequisites beforehand, so attendees won’t have to spend workshop time downloading stuff or waiting for `npm install`. After they got everything installed, though, they really hit the ground running:
All in all, it seemed like everyone had a lot of fun, and they really “got” what the workshop was all about. I think one participant phrased it quite brilliantly:
“I think that it’s absolutely amazing that you can do this with a web page.”
The workshop was a lot of fun to do, and loved all the awesome, innovative things the participants did with it. The combination of Angular 2 and IoT is still largely uncharted territory, and it’s exciting to see people exploring different approaches for combining Angular with other technologies (Ionic, NativeScript, Web Bluetooth) to create IoT device interfaces, in addition to working with the IoT devices themselves.
As always, if you have any crazy ideas, questions, or comments about Angular 2, IoT, Ionic, etc., just let me know. There is so much to explore, and I can’t wait to see what crops up in the coming months. I hope you’ll join me and the other presenters and participants in seeing how far we can push this stuff forward.
