Now for the implementation itself, this is just following the steps that I went through and the order I chose to tackle the problems:

Day One (Tweet)

So in this particular app, I knew the main component was going to be the detailed movie view which contained all the information about the particular film. I wanted to get this formed first as it was a requirement for a lot of other views!

I created a very simple UITableView which converted a list of items (in a separate class) into a cell view. At this point, each view was hardcoded and wasn’t even fully styled.

This gave me the foundation to start working on the design part of this view. I went through each of the XIBs one view at a time and styled it as per the designs I had. It began to look like a thing!

The next step was to use Moya and follow their basic documentation to get a ODEON “provider” created. This enabled me to make a network request to load movie details for a hardcoded movie. You’ll notice for the first days of the project I was actually using the exact same film because it was hardcoded!

Once I had the networking being fetched I was able to pass that information into the “structure mapper” above. I then started to pass view models into each of the items which could be used to replace the hardcoded data in the views with a value actually in the data.

Day Two (Tweet)

While I knew the work I did on day one wasn’t complete, it was important to keep the momentum going. So I moved onto the next view — in this case I chose to do the show selection view as this was the next step in the ticket purchase flow.

Show chooser UI with date selection and screening type chooser

The main difficulties with this page was the use of a vertical UICollectionView for the grid, inside of a horizontally scrolling container for the individual days. I also needed the ability to change the screening type which updates all of the showings!

Going back to what I said earlier about choosing your battles and allowing the use of dependencies to save time in favour of not repeating past learnings. In this case, I chose to use XLPagerTabStrip to provide the horizontally scrolling interface and the individual day labels. I also took advantage of ContextMenu to provide an easy dropdown mechanism to change the screening type.

These were two libraries that, while I knew how to achieve the functionality they produced, I had never actually used directly. I can say now that both of them were extremely easy and intuitive to implement which was fantastic!

Day Three (Tweet)

On the third day, which just happened to also be Christmas, I decided to tackle the seat chooser interface. Now this was actually something I was quite looking forward to! I had the most designs looking at how it would work but really didn’t turn out the best in my own opinion.

The data I was receiving to construct this view was fairly difficult to work with for a start so it took longer than expected to do the JSON decoding. The solution itself wasn’t particularly bad but it took a lot of investigation to work out what each value in the data was for.

An image showing part of the JSON used to render the seat data

I also had to create my own UICollectionViewLayout which was not something I was super familiar with. In order to achieve my view I converted the JSON data into a single array of all the seats and then converted the seat’s absolute positional information to simply be the row/column it sits within. This meant I could easily multiply the seat’s position by the seat width/height to get the new absolute position.

This system does work for most of the cases I tested it within. But on smaller screens (because I attempted to fill as much of the space as possible) not everything could fit. This problem is likely exasperated on smaller screens.

In the future, I’d like to address this by enabling zooming and a more intelligent sizing mechanism which centers seats on the first draw.

Day Five (Tweet)

The astute will have noticed I missed day four and this was simply because very little looked good at the end of it. I had set myself the intention of having one “list view” and having different “structure mappers” for each view which would let the contents of it be changed.

However, once I got to the home screen I started seeing a couple of issues with the specific way I had implemented it so needed to do some cleanup.

This was also the first point in the project where I started having to create a UITabBarController with separate pages for home and settings! (There’s also a third members tab that has nothing in it)

A basic scroller on the new home page

By the end of day five, I had some very simple horizontal scrollers on the main home screen as well as a cinema selection mechanism in the settings page. This wasn’t fully wired up though and it was still hardcoded to a single cinema.

Day Six (Tweet)

So today was the final day I was going to be developing on the project and set the goal of adding more information to the home screen as well as introducing cast profile pages.

Luckily as I had made the list views so flexible it was a breeze to add cast profiles as soon as I had the networking added to the Moya provider I created earlier. It’s beautiful when a plan comes together.

Basic profile for Donald Glover with Filmography and Biography

The rest was pure beautification and linking all of the components together including allowing tapping on films in the home screen to open a film, changing your cinema selection would change the show information, etc.