Subscribe rss
Blog categories
All | Backendless features
How to Create a Chat App that Supports Images
May 28, 2019 by Olga Danilova

Backendless Chat App with Images

In this series of articles, we are going to show you how to make a beautiful chat app that supports sending, editing, and deleting messages with both text and images.

You can download the prepared template from the author’s GitHub repo here and switch to the basicTemplate  branch. Go to the root of the downloaded project and run the `pod install`  / `pod update`  command to install all necessary dependencies. After the dependencies are installed, open the created .xcworkspace file. The basic project contains a description of ViewControllers , table cells, resources (pictures used in this app) and the keyboard appearance logic.

Main.storyboard  contains three ViewControllers : LoginViewController , SignUpViewController  and СhatViewController :

Chat App ViewControllers

Firstly, we’ll tell you what each ViewController  consists of and then we’ll move on to the code writing.

LoginViewController  contains the fields for entering a user’s email and password and switch to remember user when logging in. If the switch is on and the user is already logged in, the app won’t ask for an email and login the next time it launches. If the user is logged out, he/she should enter the credentials again.

Pressing the “Start chatting” button opens the chat view. The “Forgot password?” button allows the user to restore their password. If the user is not yet registered, he/she should press the “New user? Sign up” button to open the registration form ( SignUpViewController ), where the user can enter his/her name, email and password. Pressing the “Sign up” button will finish registration.

ChatViewController  is the main ViewController  of our app. It consists of the table displaying messages, field to enter a new message, and send and logout buttons. The attachment adding button is currently unavailable; we’ll come back to it later.

Every new message in chat is the new table cell. The cell with current user’s (your) message is named MyTextMessageCell  and its message has a green background. The cell with another user’s message is named TextMessageCell  and its message has a grey background. Every message contains sender name, sending time and the message itself.

Chat Message Cell Structure

Now that we’ve dealt with the ViewControllers  contents, let’s get down to the code.

First, let’s configure our app to work with Backendless. Open the Info.plist  file and add the App Transport Security Settings ( NSAppTransportSecurity  key) with Allow Arbitrary Loads = YES:

Backendless Chat App with Images

Then you should initialize Backendless. In the AppDelegate.swift  file, change the didFinishLaunchingWithOptions :

Now let’s move to the LoginViewController  and add the properties necessary for our further coding work.

  • yourUser  – is currently logged in user. This property is necessary to pass current user’s data into the chat.
  • chatSegue  – is  segue’s name for moving onto the ChatViewController .
  • alert  – is the Alert’s class entity, used to display in-app notifications.

The Alert.swift  class looks like:

Now let’s describe the user’s login process that occurs by clicking the “Start Chatting” button.

At first, we need to check if the “remember user mode” is on. If it is, the UserService property is  setStayLoggedIn = true . Then we need to check that the email and password fields are filled and call the login function with the specified params. After completing the login, the logged in user will be saved to the yourUser  variable and the chat view will open.

If value of one of the fields is not entered or an error occurs when trying to login, the user receives the appropriate notification. Let’s add the showErrorAlert  function to the Alert.swift  class:

When switching to the chat screen, we need to pass data about the logged in user to that screen:

The email and password fields are cleared when the function is called.

Let’s add the auto login processing for the previously logged in user in the ViewDidAppear  function:

If the user forgets his/her password and presses the “Forgot password?” button, the restore password form appears:

Let’s add the showRestorePasswordAlert  function to the Alert.swift  class:

Last thing to do in the LoginViewController  is to add the unwindToLoginVC  function needed to return on the login screen.

Now let’s move to the SignUpViewController  and add the alert  property:

Registration of a new user occurs by clicking on the “Sign Up” button:

The key fields for registration are email and password, so we need to be sure to check that they are filled out and then call the registration function. After the registration is completed, all text fields will be cleared:

The user will the receive the alert  about successful registration. So we need to add the appropriate method in the Alert.swift  class:

If the value of one of the necessary fields is not entered or an error occurs when trying to login, the user receives the appropriate error notification.

Now that the user can sign up and sign in to chat, let’s head to the ChatViewController .

First, let’s add the necessary properties:

  • channel  – channel for chatting,
  • yourUser  – your currently logged in user,
  • messages  – array of messages, dataSource for tableView,
  • channelName  – chatting channel name. You can change its value manually.

Also we need to call the view.endEditing(true)  in the clearMessageField  function to make the keyboard disappear from the screen when we finish working with the message input field.

Let’s add the messages  array initialization and channel subscription for receiving messages into the viewDidLoad  function:

We receive the message as a dictionary and convert it to the MessageObject  to store in the messages  array:

Since messages  is our table’s dataSource , we should change the numberOfRowsInSection  function:

The function cellForRowAt   indexPath  is used to display messages in table:

When receiving a message, we should check whether the sender is the current user (you) or not and, depending on this, display a message in MyTextMessageCell  or TextMessageCell :

Also, we can include the tap gesture recognizer, but we won’t do anything with it for now.

When clicking the send button, the  MessagingService  publish function is called and the message is published to the specified channel. Everyone subscribed to this channel receives this message.

In the event the user wants to leave the chat and unsubscribe from the channel, the  UserService  logout and  MessagingService  unsubscribe functions are used. Let’s return to the LoginViewConrtoller  and change the unwindToLoginVC  function as follows:

That’s all for today! The app we’ve written today allows users to login, subscribe to a channel, and send and receive text messages. A short example of the application’s usage can be seen on this video:

Next time we’ll show you how to store the correspondence history and edit and delete messages. You are welcome modify our app – add the ability to switch between different chats or add user profile pictures (using Backendless FileService to store them of course :)).

Everything we wrote today can be found when switching to the textMessagingPart1 branch of downloaded project.

Thanks for reading and happy coding!


Share this post
Tweet about this on TwitterShare on FacebookGoogle+