This month, the family and I have been watching the NetFlix series "Black Mirror", catching up older seasons and devouring Season 3. One of our favourite episodes was 'Nosedive', and so I don't give out spoiler alerts here, I won't go into the plot line, but nevertheless, we were all fascinated by the 'Rating' app that everyone used on the show.
So much so, that my wife, the kids and I all started 'air gesturing' each other the 'swipe and flick' routine as if we were using the app to rate each other throughout the day.
This made me think - how about if we actually had a dummy app that we could use? I noticed that NetFlix had created a demo site on the internet to promote the show, so I (ahem) "borrowed" some of the assets like the background, star graphics and the rating sounds, and mocked up a small dummy 'Nosedive' app in a couple of hours that I had spare.
Now I can really annoy the kids. "Didn't do your homework?, ONE star for you!" (dew dew dew dew dew). Wife brings me a nice hot cup of tea? "Five stars, my dear..." (dinga ding ding ding DING!).
I never intended to make money from this little side project - I just installed it on our phones using my developer account. I am releasing the source code on GitHub in case any others want to take things further.
Please note that this is nothing like the actual app - there is no facial recognition (although I have been playing around with the Microsoft Face API to see if I can do something there). There is not aggregate rating for people, and there is no central database that things are stored in (though I have thought about using Firebase to store rating data in the cloud). It is purely a gimmick - although there is no reason that anyone can't take this starting code and build all that on. Have at it! :)
Building the App
The app itself is built using the Ionic framework, which I have been using for over a year now, and really love. It facilitates creating a hybrid app quickly and easily that can be used on iOS and Android devices. No need for Swift or Objective-C, it is all done in javascript and HTML/CSS.
Nothing too tricky about this app - it is a simple one page application, which is the rating page. As I mentioned all the assets, including the background swirling pink video, the rating star graphics and the notification sounds, were all downloaded from the NetFlix promotional site I mentioned above. That is 90% of the work right there.
The rest was just implementing the swipe gestures to set the star level, and then the flick gesture to 'send' the rating and play the sounds.
Setting the ratings was one area that stumped me for a while. Initially, I was playing around with the $ionicGesture event handler, and trying to trap left and right swipes including the distance swiped and the swipe velocity to try and calculate the star rating to give. That all turned out to be extremely tricky and difficult, so in the end, I ended up using a typical programmers shortcut - in that I cheated! :)
I ended up placing an HTML range slider control on the screen, just under the stars. I then made this slider element invisible, and used CSS to reverse offset the slider to that it lay just on top of the stars themselves.
This way, if anyone put their finger on the stars and moved left or right, it effectively moved the hidden slider left and right. The upside is very accurate tracking of where the user lifted their finger, as the rating value would correspond with the star where they lifted their finger.
The downside is that on some devices, the slider will not move unless the user starts their finger on the current star (e.g. if you wanted to go from 2 stars to 5 stars, you would have to place your finger on the second start, then slide to the fifth star. If you just tapped the fifth star or started on the third star to slide up, the slider would not move). Most users I tested this on (well, my wife and kids) seemed to naturally start at the current star anyway, so I figured I could get away with this. At least it worked with minimal (read: NO) coding required.
The last thing so do was to implement the Cordova Native Audio plugin to generate the sounds. This was pretty trivial to do, and was only a few lines of code. I had to capture the swipe up gesture to trigger the 'send' sound at first, then wait one second, then play the 'rating' sound depending on the rating (one to five) that the user had chosen. Check the code for details.
Yes, yes, yes, the pedants among you might say well the sending phone only plays the 'send' sound and the rating sound is played on the receiver's phone, but for our app, we aren't really 'sending' the rating anywhere, and are just using it as a too to tease or annoy others, so the rating playing on our own phone after a delay is enough to let the other person know exactly what we think of them (as long as they are in hearing range in a relatively quiet environment).
Anyhow, I will let others feel free to build upon the code base and see what they come up with. I won't be releasing this app on the App Stores or anything, as I don't want to push things too far and be hit with a copyright violation from NetFlix! Have fun.
