Building a 'Nosedive' rating app in a couple of hours

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.


One month with the Apple Watch

While I am an Apple fan, and got a lot of their hardware devices, I was never really enamoured by the Apple Watch when they announced it, and never really planned to get one.

However, about 6 weeks ago, I got a special promotional offer from one of my credit cards companies for an Apple Watch Sport edition which was essentially free, because of the points activity on my business card.

So I decided to take them up on it and place an order.  It arrived within a week and I have been using it every day since then.  Bear in mind that I haven't worn any sort of watch for nearly 20 years now, it took some getting used to, having this metal weight on my wrist again.

Here are my observations on the device.

The Good

I must say that I have been pleasantly surprised at how comfortable, and how quickly I became used to wearing a watch again.  This is the smaller Sport watch edition, and I think the size and understated band suits my skinny wrist better.

I like the fact that I can customise the watch face, and I love that pairing it up with my iPhone 6 automatically loaded up all the Watch compatible apps on the device immediately.

Things I have especially loved is using Siri on the watch - far easier that the phone, especially when I have been cooking and I can just raise my wrist to my mouth as ask Siri to set timers etc.  Same as when I have been working in the garden, although in that situation, there have been a couple of cases where the reminder settings (to move the sprinklers) didn't take because the actual phone was in a distant room inside the house.  

The need to pair the watch to the phone to do simple tasks is one thing that needs to be revisited I believe.  A little more independence for quick tasks would be handy.

I have also started using the Gyroscope app in the past few months, and I like that the watch will integrate with Apple HealthKit, which then integrated with Gyroscope.  Love that my heartbeat stats and steps taken are recorded and consolidated in one place.

However, there have been a few issues because I think I have interconnected too many apps!  I linked RunKeeper with Gyroscope before I got the watch, and now I think the combination of RunKeeper and HealthKit trying to update my steps concurrently is causing some issues with inaccurate data.  I will have to try and unlink some of the apps to simplify.

The Bad

The biggest issue I have with the watch is the battery life.  I have to charge it up at least once a day, and it takes around 90 minutes to charge up fully on the magnetic charger that Apple provided.  The watch always seems to go flat at inopportune times for me, so I end up doing things where I needed the watch (e.g. exercising) without it.

I also wanted to get the watch to replace my old FitBit and Misfit fitness tracking devices - mainly for sleep tracking.  Both the MisFit and FitBit could automatically track whenever I was asleep and generate stats for my movement and rest periods, but the Apple Watch required an app for that.

I ended up purchasing "Sleep Pulse" and I bitterly regret doing so.  I find it quite useless for tracking sleep as you have to manually activate and deactivate it when going to bed.  The interface is also really clunky and there are LONG delays between tapping on the screen and getting feedback.  It never works properly and I am missing reports and stats almost every second day.

Another thing that I could not believe wasn't a built in feature on the watch, is the ability to select podcasts on the device.  When I am walking in the morning, I always listen to a selection of podcasts, and I would dearly love to be able to select from my list of subscribed casts.  Sure I can start/stop and wind back/forwards once one is playing, but I cannot get a list of my subscriptions on the watch.

I do love the way I can just raise the watch and say "Hey Siri, next podcast" to skip through them, but so far have had no luck trying to specify them by name, e.g. "Hey Siri, play me the podcast by Tim Ferris".


Overall, I am quite happy with the watch, although I still wouldn't actually pay money for one at this stage.  

I remember when I got the iPhone and iPad, I was excited about developing apps for the device and seeing how I could push the boundaries of my coding skills.  The Apple Watch unfortunately hasn't given me that feeling.  I feel no compulsion to try and write any apps for it to see how I can improve my life.

It will be interesting to see how Apple develop this device in the future, or whether they will simply abandon it, but in either case, it has been a fun experiment to try it out, and I will likely keep wearing the one I have until it finally breaks.