The Wattl iOS App

Hello, my name is Dr. Matthew Ryan, I am the CTO and developer of the Wattl platform.  In the coming weeks and months I’ll be posting regularly on our progress in the development of Wattl.  It has been an exciting time so far, with highs and lows – long nights, hard work and finally a working product!

The Wattl platform is made up from a number of components, comprising the client which is a native iOS app, and the server side.  I’ll start on the first blog post by talking about the iOS app, and will cover the other aspects in later blogs. Be sure to sign up to the newsletter so that we can let you know when new blogs are posted.

iOS App

The iOS app is  a native app written in  Objective-C using XCode. The app has 3 main  sections, namely the wall, feed and profile.  To navigate between the pages, we developed a prism navigator.

Prism navigator

To navigate between sections you drag from the edge of the screen, which rotates the prism. This is implemented as a 3D prism with 3 sides – each side being a page. As you rotate it, the prism has perspective, and you can see behind it.  We also model the lighting to give a realistic shadow to sides as they turn away.

To navigate between pages, drag from the edge of the screen

The prism has inertia, so just for fun, you can ‘flick’ the prism and it will keep spinning for short time.

We stop video playback of the wall while the prism is being rotated to ensure it rotates smoothly, but actually the iOS views are still being updated. You can see this yourself if you go to a profile page with many images, and then rotate the prism slightly while the images are still loading.

Walls

The wall section is where you can create and view the walls. The first screen you see is a list of the walls, containing the public Wattl wall, and a list of the private walls you have access to.

wall list page
In wattl the first page you see lists your public and private walls

You can select the wall you want to view by tapping on the row. Each wall is a zoomable grid where anyone with access to the wall can upload images or videos.

Close up of cells on the public wattl wall

 

The wall has by far been the most difficult and complex part of wattl to develop. There are many challenges to make it work, with many (sometimes conflicting!) goals.

The wall uses many different technologies to work, and includes:

  • Database to store the information about the cells
  • Cloud storage to store the media
  • Virtual servers to maintain and update the media
  • Micro-services to implement an API for the app

More details about the technologies involved will follow in future posts, so let me know in the comments what you’d like to know about.

Feed

In wattl you receive a notification when things happen you might be interested in. For example, when you get invited to a private wall or someone posts a comment on your cell. All these feed items are listed on the feed page, which shows the relevant cell, the user and other info such as the comment.

Feed shows notifications of things like new cells, or comments

We use push notifications which are triggered when certain events happen. So for example when a user uploads a new cell, we send a push notification to all the people who follow that user.  If the followers have not enabled push notifications, they will just see a new item in their feed when they open the app.

There are a number of improvements we will be making to the feed page, the first being a badge to show the number of unread items.

Profile

Each user has a profile page, which shows things like username, bio, profile picture and public cells they’ve upload.

Profile page in wattl shows details on each user

On this page you can follow /unfollow and see who as pulsed your cells. There is also a settings cog at the top to open the settings page.

 

I hope you’ve found this first post interesting, which was just a very brief overview of the main sections in the iOS app.  The coming posts will talk more about the app, the server and our day-to-day experiences, challenges and successes!