ABETA Mobile

The blueprint

This phase required a highly collaborative process with the client during a detailed requirements gathering phase resulting in a number of documents used to define the application prior to implementation:

Application logic

• Use case definitions: we defined a number of use cases for the main actor we were concerned with (the end user) performing some of the fundamental tasks within the ap such as adding an item to their betting slip and placing a bet.
• Application workflow: we modelled the application logic by defining the transactions between the different aspects of the system, their relationships and how and when they interact with one another.
• User interface workflow: to complement the wireframe diagrams (see below) we created workflows to support the UI interactions and subsequent expected results for the interactions.

UI/UX/Information architecture

Through wireframes we created a detailed blueprint of the information hierarchy and navigation system which enabled us to outline user interfaces and interactive functionality in a prototype.

The resultant prototype was then put through user acceptance testing (UAT) and then tweaked and approved prior to the design and build processes resulting in an intuitive interface and improved user experience (UX).

• 
• 
• 

Branding and design

ABETA provide technology and infrastructure to many betting organisations and outlets around the world and the return on investment for the app comes with it’s white labelled nature: the app has been designed to be re-skinned for their different customers and then deployed on their platform of choice be that as a mobile web app, iPhone/iPad app or Android app.

The branding and design work we undertook for the white labelled version was based on the ABETA International branding, following their brand guidelines.

• 
• 
• 

Application build

Because the app had to be delivered on 3 platforms (and maybe more in the future) there were a number of development routes we could have opted for. For instance, one approach would have been to develop a native iPhone app (in Objective C) and then port it to Java (for Android) but this would have required 2 sets of development paths and we would still be left without a mobile web app version. This wouldn’t make for a particularly efficient approach when trying to cover the 3 key target platforms and as our expertise is in the field of web technologies it made sense to approach the project utilising these skills if we could.

Initially, we dabbled with jQuery Mobile but from a development perspective were not that impressed (it’s more about the front end) and at the time of testing it was too buggy. So we turned to the Sencha Touch framework to build a prototype: Sencha Touch is a HTML5, MVC based JavaScript framework specifically for building cross-platform mobile applications. We then utilised PhoneGap to make use of specific native functionality (such as compass, accelerometer and geolocation to name but a few) and to package it up for native devices such as iOS (iPhone, iPad) and Android (note: you can also package for other mobile operating systems). This approach enabled us to develop using one code base in technologies which we are expert in (win-win). If you are interested in some further reading we have a blog post Native apps Vs mobile web apps: confused? which might be of interest.

Because of its MVC nature, Sencha Touch allows us to build complex applications and ABETA mobile, especially the betting module, involved complex business and application logic so the framework proved a good match for the requirements. Consequently we scrapped the prototype we had originally developed in the first release of Sencha Touch and built the full blown app in Sencha Touch 2 which was released in beta at the time development started and is now in full-blown release. In fact, we liked Sencha Touch so much that we set up the London Sencha Touch User Group!

Finally worth a mention, a pre-requisite of ours when developing applications of this nature is that they have to be built with a test driven approach at the core: as Sencha Touch is a JavaScript framework we were able to write and run unit tests with the aid of Jasmine (a behaviour driven development framework for JavaScript). For distribution and testing of the native iOS app we were able to take advantage a handy beta testing tool TestFlight. More on this can be read on our blog post Native App beta testing with TestFlight.

Deployment

Using the Sencha SDK tools we were able to create a minified production-ready build for the app. The tools use node.js as the wrapper to run the commands whilst the legwork of the optimisation and minification is handled by PhantomJS.

From that point the deployment of the three derivatives of the app are fairly different. Deploying as a mobile web app is relatively easy as it is essentially a website hosted on a webserver however for iOS and Android the process involves packaging the final build in PhoneGap and going through the respective app store acceptance procedures (which we will likely write about in a separate blog post).

Sustain

The end of the white label development means the beginning of rolling out customised versions for ABETA International’s customs as and when they are required.

There are also already plans for further functionality enhancements including live push notifications so that users can be immediately alerted if their bet has won and a feature which will provide betting opportunities specific to a users geolocation (for instance if they are close to Old Trafford on the evening of a Manchester United game they will be pushed betting opportunities for the match).

Related articles

• Sending data to our website via Arduino and end-to-end BDD

  8th February 2013

• We're on the lookout for a talented web developer

  6th February 2013

• Theming Sencha Touch with SASS

  28th August 2012