I'm a creator, product manager and programmer based in London
AudiuThumb4.png

Audiu

A project I worked on building the Audiu mobile apps for iOS and Android using Xamarin Forms. Audiu is a platform for music makers to get feedback from industry pros on their tracks and also for music lovers to discover new music.

Audiu

An app for iOS and Android that allows music lovers to share and discover new music and for music creators to get valuable feedback from fellow producers and the Audiu community

Position: Mobile Developer (Freelance) - iOS & Android
Built with: Xamarin.Forms and MvvmCross

The music industry is phenomenally hard to break into and tough for music producers to get constructive feedback out of. Audiu helps solve this by providing a platform across web and mobile that allows music creators to upload their tracks and get valuable feedback from industry experts and the Audiu community, and provides a way for music-lovers to discover new music and follow its development.

I spent three months with the Audiu team in early 2017 helping to design and build the first versions of their apps on iPhone and Android using Xamarin Forms. The app has been a hit with the artists and has boosted conversation and interaction around new tracks uploaded to the service since launch. 

For the past few years I've been a member of Camden Collective, a free co-working space funded by the Mayor of London, Camden Council and various businesses in the area. We are a fantastically diverse group of people working on business ideas from next generation food for agriculture, to fashion magazines, birdsong recognition and coffee. In 2017 I was taking the difficult step of shutting my first startup, Foundbite, and I began looking for freelance projects. A chance conversation about mobile frameworks with Mike and Ed from Audiu in the collective's kitchen led to them asking me to spearhead development of their mobile apps which they had just begun looking into building.

The idea was to provide a slimmed-down version of the full Audiu web portal as an app to allow members of the community to listen to new tracks uploaded that week and matching their taste preferences. They could listen and leave feedback for a producer, rating key elements of the track. Producers would get a profile page for interested users to discover their other work and the ability to receive notifications with new feedback.

 The Audiu UI on Android and iOS showing the player, discover and track feedback pages.

The Audiu UI on Android and iOS showing the player, discover and track feedback pages.

Mike, the CTO, had already begun looking at Xamarin.Forms, a framework that, in theory, allows developers to write their code once for Android, iOS and Windows Phone. In reality, it isn't quite "write once, run everywhere" but given the tight budget and timescale the ability for Forms to create two separate native apps, maximising shared code was a big plus. From my perspective, having built Foundbite using Xamarin.iOS and Xamarin.Android, and also XAML user interfaces in previous Windows Phone projects, it was something I was happy to work and experiment with.

Xamarin.Forms, like Windows, supports data-binding out of the box. Using the XAML Binding mark-up extension you can have your interface seamlessly updating as your properties change in your code-behind. For some added MVVM goodness and it's navigation service and dependency injection support - we also chose to use the excellent MvvmCross library. Once the plumbing was all in place, work progressed quickly.

 With Xamarin.Forms and some hard work we were able to create a beautiful native app for Android and iOS simultaneously.

With Xamarin.Forms and some hard work we were able to create a beautiful native app for Android and iOS simultaneously.

Xamarin mainly market Forms as a way for enterprises to quickly create business apps for internal use or for rapid prototyping with quite basic UIs. While you can add the key elements, for example a Grid, an Entry field and Button, onto a page using XAML and have the Framework translate these controls into the native platforms controls (UIView, UITextField and UIButton for iOS and RelativeLayout, EditText and Button for Android) with basic styling, it's not going to look all that great as a consumer app. For more heavily customised controls, to give them a platform-specific style or add support for other controls that aren't included in Forms such as custom loading indicators you have to create Renderers. We created a fairly extensive number of custom renderers which took time but paid dividends in the polished look and feel of the app. Many of the controls have also subsequently been used in Audiu's other Xamarin.Forms app, RepostExchange.

Behind the scenes, using MvvmCross and its reflection-powered dependency injection allowed us to create services with different implementations on each platform. Although Xamarin.Forms does wrap some platform APIs (like storage) anything more complex, like manipulating an audio file, which we needed, required creating an interface laying out the functions we required (Play, Pause, Skip forward) and then creating implementations for this on iOS and Android (using the AVPlayer and MediaPlayer respectively). As with our custom renderers these should come in useful for later apps.

After three months building, testing and polishing, the app was released  simultaneously on the App Store and Google Play. Although using Xamarin.Forms to build a consumer app with audio support wasn't as simple as advertised (something I hope to write more about later) we were able to build and release an attractive and stable app for two platforms in a short time and to a tight budget. With around 80% shared code between iOS and Android this solution is also far easier for a small team to maintain than two completely separate code-bases with less time spent context-switching between frameworks/languages and more time focusing on creating an experience that users enjoy.

If you love listening to new music or are creating music and want to share your work set up an Audiu account and download the apps today! (Google Play | App Store)