Building Simon with Angular-IoT

angular-iot

Angular-iot is an experimental project that explores how we can stretch the limits of Angular 2 to bring the same technology to new platforms. It’s a natural extension of the angular2-universal concept, which enables Angular code to run on the back end, allowing Angular to escape the web browser and become more “universal.”

Button — Code Example

HTML with Angular2:

LED — Code Example

HTML with Angular 2:

ng2-simon

One major advantage of using Angular 2 to develop for physical devices is that it allows you to develop the game and/or prototype and test new features without the actual hardware. This means you can develop on your computer, using familiar tools and workflows, and then once you are happy with how it works, deploy it to the actual device. This also makes it easier for 3rd-party developers work on the code and send pull requests if they don’t have the actual hardware (e.g.: https://github.com/urish/ng2-simon/pull/1).

Group effort beating ng2-simon

Code Overview

The ng2-simon code is based off the angular-webpack-starter repo by AngularClass. We added a new webpack configuration for building the IoT variation of the code.

  • simon-blink— Displays the blinking “Click any color to start…” message on the Web version. Does nothing on IoT version.
  • simon-score— Displays the word “PLAY” before the game begins, and the game score during the game. This component uses the DSEG font for the web version to achieve a 7-segment display look, and delegates to the <iot-seven-segment> component on IoT version to display the value on the actual 7-segment display.
  • simon-segment— Combines a button and LED. The web version renders round buttons that can highlight with a given color (simulating physical LEDs), while the IoT version uses the <iot-led> and <iot-button> to communicate with the actual hardware. The class also defines the mapping between the colors and the hardware pins for the respective LEDs and buttons.

The Leaderboard

To make the game more interesting, we also displayed a leaderboard on a TV next to the game. At the conference, we split participants into four groups, by putting colored stickers on their name badges, and displayed the top score and avg. score for each of the games. The Leaderboard was another Angular 2 app, and we used Firebase for the score collection and communication.

How We Built It: Coming Soon

In part 2, I’ll go into the hardware we gathered, built, and assembled into the final game. I’ll also go over how to deploy the angular-iot code to the device and get everything going.

--

--

Google Developer Expert for Web Technologies, Maker and Public Speaker

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Uri Shaked

Uri Shaked

Google Developer Expert for Web Technologies, Maker and Public Speaker