Main menu

You are here

My quest to make a messaging app for iOS

Submitted by bensmiley on Thu, 11/07/2013 - 20:48

Recently I've been designing an app which allows you to chat to people in the local area using Bluetooth. As part of the project I needed to implement a chat interface similar to the standard Messages app. I wanted to be able to display chats between different people using speech bubbles. I wanted to be able to send text, picture and location messages. I also needed all the messages to be backed up to a database and I needed to be able to support multiple conversations. I founds lots of different open source projects which looked promising. However each one had a little bit of useful code bundled with lots of junk. I wanted to create a record of what I found to help save people time in the future.

I started off by looking for open source solutions and I found lots:

PHFComposeBarView - This project is a offers a text field similar to the one in what's app. When you click the text a keyboard pops up and the text field animates above the keyboard. As you type the text field increases in size to accommodate the text. I thought that this project could save me lots of time so I downloaded it and opened it in Xcode. Unfortunately, straightaway there were three obscure errors that stopped me compiling the project - it looks like you have to use Cocoa pods install it! Next I looked at the code to see if there was something that could help me. Unfortunately the code is bad. All the UI was defined programatically and they didn't use Auto-layout - just hundreds of different offsets and other obscure definitions. Maybe it works, but personally I don't like adding spaghetti frameworks to my projects. Overall a thumbs down :( PHFComposeBarView scores 3/10

Acani This looked promising - the open source code to the Acani messaging app. So I logged on to Github and downloaded the project. Unfortunately the first version didn't compile at all. After 45 minutes looking I found a different version which was more current and I'd downloaded all the dependencies and I was ready to open the app. I was presented with a button "Connect with Facebook". I clicked it and Facebook opened. Then the app re-appeared with the same button. Because I didn't fancy digging in and finding the issue with the app I decided to look at the code to see if there were any useful hints... The problem again here was that almost all the UI was defined programatically. Haven't the makers of these frameworks heard of Interface Builder or Autolayout. Also, this is a pretty complicated app that does much more than just chat. I dug through the code for a while but didn't get much valuable information from it. Acani scores 2/10.

UIBubbleTableView Now this looked more promising. Basically exactly what I wanted to do a chat view and it complied first time! This project was pretty useful in terms of working out how to get the text field to stay above the keyboard and make the speech bubbles. Also it's not badly coded and most of the UI is done in Interface Builder. It also supports image messages which is cool. Now the issues. The text field doesn't expand to fit the text you're writing. Also when the keyboard pops up the text field doesn't animate smoothly with it. It kind of jumps up at the end. I know it's not a big deal but when I develop an app I think the user experience is very important. Jerky animations just ruin the enjoyment the user gets from using the app. Finally, this app doesn't include any database code for storing messages. Overall I give this project 6/10 for usefulness.

dmendels - chatDemo This project is an example of how to make a Parse.com chat client. It provides an example of how to show messages in a table view and how to animate the text field above the popup keyboard. The code's fairly concise but again the text view animation isn't smooth and the interface is buggy. Also the text view doesn't expand and you can't send photos. Overall this project gets 4/10.

JSQMessagesViewController This is a project I came across recently. With over 1000 stars on GitHub it's definitely popular. I downloaded it and tried to install. Unfortunately for me, it used Cocoa Pods which I don't use and I'm not familiar with. That meant that initially it wouldn't compile. After 15 minutes of deleting files I managed to get it to compile. The first impressions were good - it looks quite a bit like the native iOS messaging app. However, when you start to use it, the illusion breaks down. The developers have tried to implement a clever wobble animation like iOS messages. Unfortunately, it's very slow. When you drag the messages down all the other messages slowly and jerkily compress together. That really ruined my first impression of the interface. It's also buggy. Sometimes messages don't update and bits of interface fly around. It's a shame because it does have potential it just needs some work fixing bugs and getting it up to production standard. Overall I think this project has potential but it would still require some work. I give it 6/10.

Multipeer Group Chat As you would expect from an Apple test project Multipeer Group Chat is well designed. It gives a good example of how to create a messages view and how to animate the text view above the keyboard (now jerky animations here!). It also supports photos from your gallery and taken directly from the camera. It also shows how the messages can be sent via Bluetooth to other near phones. For me this project was very useful. On a slightly less positive note the code is quite complicated and difficult to follow. It also uses lots of defines to set the positions of different elements and it doesn't have database support. Overall this project gets 8/10.

Last but not least I looked at Chatty an open source Bonjour based chat app. Firstly, this app isn't very useful in terms of developing a chat application. It might help with sending the messages via a network but the interface isn't very pretty. However, if you're interested in Bonjour networking this app is amazing! It demonstrates how to publish services using Bonjour, make a connection and send data. Super cool! Anyway I love this project so even though it's not so useful in this context it still gets 9/10!

So that research took the best part of a day and by the end of it I had identified some good candidates to make my chat interface. If you take the best bits from each project you almost get a functioning app! However no one project has everything and none of them have any database support. In the end I made my own framework. I used Interface Builder and Autolayout and developed a solution that was much less complicated and much more elegant than any of the projects listed. It supports the display of photos (from the camera), text and location. Also all messages are saved to a SQLite database. It also supports multiple conversation threads which are organized by a sender ID (i.e. phone number). It took me a good 80 hours of research and development to create this framework so I wanted to make it available for other people. Licenses start at $99.99 for the user interface and for $199.99 you can buy have fully network integrated real-time chat ready to add to your app. The component can be bought here and comes with a 14 day money back guarantee. If you decide to go it alone, good luck and I hope the information I complied here helps you out!