Message:

Subscribe rss
Blog categories
All | Backendless features
Modify the Backendless Chat app to support sending images (Part 1)
October 20, 2018 by Olga Danilova

Did you know you can use the Backendless Code Generator, which is a part of Backendless Console, to easily generate a simple real-time chat application for iOS, Android and JavaScript? You get full source code and can see how to use Backendless APIs for sending text-based chat messages in real time. In this article I will describe how to modify the generated iOS application so you can send both pictures and text messages.

If you would like to jump to the completed app, I put the source code for the finished project into my personal GitHub repository at:  https://github.com/olgadanylova/ChatWithImages.git.

To get started, use the code generator to get the basic project. If you have not used the code generator, it is very easy to use:

  1. Login to your Backendless account and select/create your app.
  2. Click the Code Generator icon (it is in the lower left corner of the user interface).
  3. Select iOS in the Category drop-down list.
  4. Locate and click the Real time chat code generator.
  5. Click the GENERATE button in the popup. Backendless generates a project for your backend and the browser will download a zip file with all the source code and the project files.
    generate ios chat - Modify the Backendless Chat app to support sending images (Part 1)
  6. To prepare the downloaded project, make sure to unzip the downloaded file, open a command prompt window, change the current directory to the project’s root folder and run the pod install command. The command will download the required dependencies (including Backendless SDK).
  7. Make sure to open the .xcworkspace file to open the project in Xcode.

Now that the project is set up, run it and make sure it works – you should be able to send text-based messages into the chat channel. To see the full effect, you would need to run the app in at least two emulators/devices.

Let’s move on to the fun part, adding support for sending images into the chat.

  1. Add the  ChatMessage class to the project:

    Since messages now can contain both text and a picture, this class will be used to represent messages sent through Backendless. 

    To send pictures, the Backendless File Service will be used – for each sent image a link is generated and is sent into the chat. That link will be set in the pictureUrl field in the ChatMessage objects. To send a text-based message, you need to create a ChatMessage object with the necessary text in the messageText field.

  2. Open main.storyboard  navigate to the Chat View Controller Scene as shown below:
    1. Delete Chat Text View:
      20181012 image9 - Modify the Backendless Chat app to support sending images (Part 1)
    2. In the Object Library, select Table View and drag it to the Chat View Controller Scene, then set the following constraints for this Table View:
      20181012 image4 - Modify the Backendless Chat app to support sending images (Part 1)
    3. Set  ChatViewController as the  delegate and the  dataSource for Table View:
      20181012 image12 - Modify the Backendless Chat app to support sending images (Part 1)
    4. Drag the two cells to into TableView :
      20181012 image6 - Modify the Backendless Chat app to support sending images (Part 1)
  3. Create the  MessageCell and PictureCell classes:
    Depending on the content of the received message, the data will be displayed in one of two types of cells – MessageCell  for the text, PictureCell  – for the picture. These classes will correspond to the two cells overlaid on the Table View in the previous step.

  4. Now let’s return to the Chat View Controller Scene and to the created cells:
    On one of the cells you need to add two labels – this will be a cell for text messages.  This cell should be tied to the MessageCell class, and labels should be assigned to the nameLabel and messageLabel properties, respectively:

    20181012 image7 - Modify the Backendless Chat app to support sending images (Part 1)20181012 image11 - Modify the Backendless Chat app to support sending images (Part 1)
    In order for the size of the cell to change in accordance with the length of the received message, you need to set the following constraints on messageLabel and specify the number of lines = 0.
    20181012 image1 - Modify the Backendless Chat app to support sending images (Part 1)
    The second created cell must be tied to the PictureCell class. Make sure to add a label, imageView and an activity indicator to it.
    20181012 image8 - Modify the Backendless Chat app to support sending images (Part 1)
  5. Now that we have a Table View with two cells, we need to change the ChatViewController.swift class as follows:
    1. You must bind the created Table View in main.storyboard  to the Table View property.
    2. Sending pictures will be possible by selecting already finished images from the photographs already on the device (using UIImagePickerControlelr ) or by creating a new image using the device camera (does not work in emulators).

Below is the source code of the class ChatViewController  – it is slightly different from what was originally in the generated project – added code working with the table and the ability to select images. 

Instructions to use the enhanced chat app:

  1. The sender enters their username to start the chat.
    20181012 image2 - Modify the Backendless Chat app to support sending images (Part 1)
  2. To send a text message, you must enter a text message in the input field and click the Send button.
    20181012 image3 - Modify the Backendless Chat app to support sending images (Part 1)
  3. In order to send an image, you must click the “attach” button represented by the clip icon, and select an image from the gallery or take a new picture on your own. Once an image is selected, it will be uploaded to the Backendless Files section of your app, and sent to all chat users who listen to the “realtime-example” channel.
    20181012 image10 - Modify the Backendless Chat app to support sending images (Part 1)20181012 image5 - Modify the Backendless Chat app to support sending images (Part 1)

 

Now the RT Chat application can send and receive picture images. In the next article I will show how to save pictures from the chat to the device and how to delete already sent messages.

Happy Coding!

If you have any questions about this procedure, please post your questions in in our support forum (https://support.backendless.com) or on Slack (http://slack.backendless.com).

Share this post
Tweet about this on TwitterShare on FacebookGoogle+