iOS Chat App Development Guide!

A growing demand for a quick, convenient & reliable chatting/messaging options amongst the iOS users having an installed base of 40 million iPhones, opens the doors to develop iOS Chat App using various fast & powerful frameworks and procedures.

An iOS Chat App with a custom user interface sends and retrieves data from the server. The messages can look pretty with a custom UI list. So, we can use a fully featured messaging platform interfaced with existing messaging infrastructure.

Frameworks used here are XMPP & QuickBlox:

• XMPP referred as “eXtensible Messaging and Presence Protocol” provides a very fast, powerful and flexible framework for chatting/messaging.
• QuickBlox referred as “a proprietary set of client-server solutions that allows to build more powerful, engaging and secure mobile apps.” With your own server, can access the source codes of the running system. Also, images, audios, videos & other documents can be conveniently shared.

iOS Chat App displays various fabulous features on Thread & Message screen.

A Thread screen displays conversations list of participating users. Here the single and grouped both conversations are supported. Each conversation features as follows:

• Participating members name
• Recipient photo
• Receiving date & text of last message
• Indication of unread message
• Date wise ordered threads for last messages receiving.

You can create new and delete unwanted threads.

A Message screen displays a speech bubble view of received messages in a thread. Also, here you can write & send new messages. The main features are illustrated below:

• Clean & flexible architecture
• Real time messaging with Text, Picture and location
• Push message notifications
• Customize color of speech bubble, text & fonts for every message.
• Resize speech bubbles according to text or image.
• Phone vibrator notification on receiving new messages
• Full screen display opens clicking on an image or location
• emails addresses and phone numbers Automatically highlighted
• View messages with Lazy loading
• Select picture messages from gallery or using the camera
• Next to the message displays user’s profile picture

Above features, provides you with the full front end ready to be connected to your message delivery system.

Client (Device) & Server Connection Architecture

Two PHP pages connects iOS device to the server as illustrated below:

Easily get connected with your existing accounts like Facebook, Google, Create new accounts or even for extra security connect to your own server.Your friends also can be invited from Facebook, twitter or linkedin account.

To build an iOS Chat App, a developer can follow the below mentioned road-map :

• Do some databases work with XML on the backend.
• Build it with a custom user interface to send and receive data from the server.
• Chew up the response XML from the server by using the XML parser.
• Build a custom list UI to make your messages look beautiful.

A. Build the server.

Create the database to start. Make sure to change the connection strings in the PHP to match the name of the database. Use following mentioned scripts links:

Listing 1.  chat.sql http://www.ibm.com/developerworks/library/x-ioschat/#l1

Listing 2.  add.php http://www.ibm.com/developerworks/library/x-ioschat/#l2

Listing 3.   test.html http://www.ibm.com/developerworks/library/x-ioschat/#l3

Listing 4.   messages.php http://www.ibm.com/developerworks/library/x-ioschat/#l4

B. Building the client

Install XCode, from the Apple Developer Site. The recent production version is XCode 3 and a newer version called XCode 4 is still in preview mode. After XCode installation, build the App using the new project & develop a view-based iPhone app as shown in Figure :

http://www.ibm.com/developerworks/library/x-ioschat/#f5 

This is the easiest type of application to start with. Place controls wherever you choose most of the UI design. After selecting the controls, select iPhone or iPad you want to simulate on. After clicking Choose, name the application whatever you like. Then XCode IDE builds the core App files. Ensure everything looks right by compiling it once and start it up.

C. The user interface development

 Develop the interface, after the App is created. Start with the view controller XIB file, located in the Resources folder. Double-click on that folder, bring up the Interface Builder as a UI toolkit. Find the link for interface layout:

http://www.ibm.com/developerworks/library/x-ioschat/#f6

D. The view controller development

Add some member variables, properties, and methods to go back to the XCode IDE to view controller class definition shown as link below in

Listing 5. http://www.ibm.com/developerworks/library/x-ioschat/#l5

E. The view controller code development

 (Refer the below mentioned scripts code links)

Listing 6.  http://www.ibm.com/developerworks/library/x-ioschat/#l6

Listing 7. http://www.ibm.com/developerworks/library/x-ioschat/#l7

Listing 8. http://www.ibm.com/developerworks/library/x-ioschat/#l8

Listing 9. http://www.ibm.com/developerworks/library/x-ioschat/#l9  

F. Set up the settings

Fig:  http://www.ibm.com/developerworks/library/x-ioschat/#f7 

Set the titled User and have the key user_preference, where you can use this preference to get the user name for the message sending code.

Listing 10. http://www.ibm.com/developerworks/library/x-ioschat/#l10 

Start testing the App, trying following procedures

1. The page setting

Set the user name in the Settings page. Here click the application you named e.g. ‘iOSChatClient”, then the setting page will display as shown;

2.User name Setting

Now, return to the App on the phone & type a message using the keyboard as in figure:

3. Type new message

After pressing send button, the message will be sent to the server, posted, and then returned from messages.php as shown in Figure:

4. The completed chat application

The server successfully inserts the data into the database to make it into the list. Then in the message list message.php code successfully returns the message for display.

Implement whatever focus you want on the iPhone or the iPad as Apple has given you the tools for it.

The various important features of iOS Chat App:

1. START CHATTING

2. SHARE GALLERY/REAL TIME IMAGES

3. AUDIO/VIDEO OR DOCUMENT FILES

4. SHARE OR SEND LOCATION ON MAP

Going through all above information definitely encourage you to build your own network enabled App.

If you want to get involved with the iOS chatting or wanted any information regarding customized chatting, feel free to send us a query on REACH US !

So, let us start & try to develop something cool.