Code your own Fridays – Part three

By Ed Francis, Digital Project Director
18/04/2019

In the final part of this year’s Code your own Fridays, we go deep and technical with Xamarin, Vue.js, and Async in MVC (with a dash of Twitter). These three technologies and frameworks are in full use already at CoalFace, and give a little nudge in the right direction when it comes to good practice, time-saving and outputting the highest quality.

Joe Pickering – Back-end developer

 

Intros is a mobile app, where the objective is to guess the song from the intro. The app is hooked up to Spotify to control all of the music being played. There are multiple categories to choose from (all, pop, indie, rock and hip-hop), with plenty of room for more. When you start a game, the app takes the difficulty, number of rounds and category to find all of the songs to play for that game. You then have 20 seconds to listen, and 30 seconds to guess the name and artist of each song.

I implemented the app using Xamarin.Forms, which allows you to build fully native Android, iOS, and Universal Windows Platform apps using C# in Visual Studio. The app controls Spotify using the Spotify App Remote SDK for iOS and Android. This allows the app to play, pause, resume and stop any song. The app also uses the Spotify Web API to allow you to search for songs when guessing.

Intros admin area and demo screens

 

What we liked about it

This combines so many aspects – an MVC back-end management system to content control the app, the app itself, and cutting out the legwork with the Spotify API. Most importantly, it already works and is a blast to play. With a bit of polish on the UI and UX (and a bit of head-scratching around commercial licencing with Spotify), this could easily be a hit on the App Store.

Cass Woodhill – Senior Front-end developer


“I played around with Vue.js to try and understand how to connect components together. I also implemented it into Google Firebase (Realtime Database) as an extra challenge. This is a p
owerful tool for creating anything from a poster site, to an app, as the information is loading asynchronously, as well as the database input. The bigger learning curve was understanding how to create one input field component to be reused between different parts of the layout, while using the same layout throughout.”

 

Vue the demo (get it!? LOL.)

What we liked about it

Knowing the benefits of Vue.js compared to the old days of manually creating this type of async functionality makes a massive difference. It may seem simple seeing this in action across the internet, but there’s layers upon layers of ‘things’ going on in the background. Vue.js allows for seamless interactions for users, which makes a big difference in performance and user experience.

Jon Cove – Back-end developer

 

“I revisited and familiarised myself with the finer features of MVC, including submitting asynchronous partial views. This was followed up with a refresher on Bootstrap setups and skins. To top it all off, I integrated with the MessageBird API to send SMS messages and Twitter webhooks API to listen for and react to events on Twitter. In this instance, a text is sent to you every time a certain American political figurehead sends a tweet out.”

What we liked about it

Jon’s demo showed how multiple systems can be utilised through APIs to create a whole new experience. This is something we encourage on a day-to-day basis, as it promotes creativity for clients and encourages a much stronger product for great value.

All in all, we think there’s a pretty strong offering at CoalFace and the ability to turn something solid out of just a day or so’s work. We always have a strong foundation of pushing what’s possible for our clients and try our best to promote development outside of bog-standard website/CMS development. With our personal development, this is the icing on the cake and lets the team produce bigger and better work over the years.

Part one and part two are still available for your reading pleasure.

Let's turn heads steal hearts change minds hold hands raise eyebrows open eyes kick arse dance