Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
How to build an iOS messaging app: Part 5, Creating an Open Channel
Share

How to build an iOS messaging app: Part 5, Creating an Open Channel

Jan 24, 2018

This tutorial teaches you to implement a view controller to create an open channel. This view controller uses a channel name, operators, a channel URL, and a cover image. This tutorial also covers how to select an image with Image Picker and how to implement a custom activity indicator view.

Sign up for SendBird's dashboard and build chat into your app

Implementing the Image Picker

In the previous tutorial, you created Create Open Channel View Controller A that had a UIImageView for the channel cover image. This section describes how to add a gesture to the UIImageView for presenting the UIImagePickerController to select an image.

In order to use a photo library or a camera, you have to add properties to info.plist file.

Open info.plist file and add the below keys and values for the properties:

add the key value pairs listed here to info.plist

Features covered in future tutorials will use “Privacy - Media Library Usage Description” and “Privacy - Microphone Usage Description.”

After the user takes a photo with a camera or selects an image from the photo library, it is useful to crop the image. To install the framework for cropping an image, update Podfile in your project.

...waiting for Gist...

The RSKImageCropper is a framework that provides a feature for cropping images.

Now, implement the Image Picker.

Open Main.storyboard and select Create Open Channel View Controller A.

Connect the UIImageView for the channel cover image to the coverImageView in CreateOpenChannelViewControllerA.m.


The UIImageView doesn’t have any actions for the user to interact with. To create one, add a gesture for user interaction to the UIImageView.

Create the UITapGestureRecognizer object and add it to the coverImageView in viewDidLoad. Enable the user interaction for the coverImageView.

...waiting for Gist...

Implement the clickCoverImage method. When clicking the coverImageView, present the UIAlertController. It has a menu to select the photo library or camera.

...waiting for Gist...

To manipulate the UIImagePickerController, add UIImagePickerControllerDelegate and UINavigationControllerDelegate to the CreateOpenChannelViewControllerA class in CreateOpenChannelViewControllerA.h.

To crop an image, import RSKImageCropper.h and add RSKImageCropViewControllerDelegate to the CreateOpenChannelViewControllerA class in CreateOpenChannelViewControllerA.h.

...waiting for Gist...

Implement the delegate methods of UIImagePickerControllerDelegate in the CreateOpenChannelViewControllerA.m. You can get the image data from the method.

...waiting for Gist...

After getting the image data, invoke the cropImage method and pass the data into the RSKImageCropViewController.

...waiting for Gist...

Implement the delegate methods of RSKImageCropViewControllerDelegate.

...waiting for Gist...

Now, you can choose a cover image for an open channel.

animation of the process for selecting your open channel's cover image

Creating an open channel

Gathering properties for an open channe

CreateOpenChannelViewControllerB creates an open channel. It means that the CreateOpenChannelViewControllerB must be able to access all properties required to create an open channel.

Add properties to save a channel name and cover image data to CreateOpenChannelViewControllerB class in CreateOpenChannelViewControllerB.h.

...waiting for Gist...

Implement prepareForSegue:sender: in the CreateOpenChannelViewControllerA.m method to set the properties in the CreateOpenChannelViewControllerB when presenting the view controller.

...waiting for Gist...

The CreateOpenChannelViewControllerB needs operators. In order to access the operators, create a delegate in SelectOperatorsViewController.h.

...waiting for Gist...

Add a property for the delegate to the SelectOperatorsViewController class.

...waiting for Gist...

Implement the delegate in CreateOpenChannelViewControllerB.m. When clicking the OK button in the SelectOperatorsViewController, the SelectOperatorsViewController gives the selected operators to the didSelectUsers: method of the delegate.

Open CreateOpenChannelViewControllerB.h, and add SelectOperatorsDelegate to CreateOpenChannelViewControllerB class.

...waiting for Gist...

Open CreateOpenChannelViewControllerB.m, and add a mutable dictionary property to save the selected operators in CreateOpenChannelViewControllerB class.

...waiting for Gist...

Implement the didSelectUsers: method of SelectOperatorsDelegate. The users has the selected operators. In this method, update the views for the selected operators. This view controller doesn’t use a UITableView for them. The addOperatorView: method adds a view for each operator.

...waiting for Gist...

Implement prepareForSegue:sender: in the CreateOpenChannelViewControllerB.m method to set the properties in the SelectOperatorsViewController before presenting the view controller.

...waiting for Gist...

Implementing the custom activity indicator view

Communication between a client and a server completes the creation of an open channel, so it takes a little time. To notify the user of any progress, most iOS apps use UIActivityIndicatorView. The UIActivityIndicatorView blocks every UI element and rotates an image.

This section covers how to customize the UIActivityIndicatorView and refers to CDActivityIndicatorView viewable at https://github.com/cncool/CDActivityIndicatorView

Create CustomActivityIndicatorView.m and CustomActivityIndicatorView.h as a subclass of UIActivityIndicatorView.

Create CustomActivityIndicatorView.m and .h to be a subclass of UIActivityIndicatorView

Open CustomActivityIndicatorView.m and implement the _init method to initialize the view. This project already has two image assets, loading and bg_loading. The CustomActivityIndicatorView rotates the loading image on the bg_loading image.

Add properties for the images and the animation.

...waiting for Gist...

Implement the _init method.

...waiting for Gist...

Next, override setHidesWhenStopped:, startAnimating, and stopAnimating.

...waiting for Gist...

This completes the implementation of CustomActivityIndicatorView.

Open Main.storyboard in the Interface Builder. Drag an Activity Indicator View in the Objective Library to the View of the Create Open Channel View Controller B. Add the leading, trailing, top, and bottom constraints between the Activity Indicator View and the View.

Change the Class of the Custom Class section to CustomActivityIndicatorView in the Identity Inspector.

Change the Custom Class to CustomActivityIndicatorView in the Identity Inspector

Open the CreateOpenChannelViewControllerB.m in the Assistant Editor. Connect the Activity Indicator View to activityIndicatorView outlet.

...waiting for Gist...

Update the viewDidLoad to initialize the activityIndicatorView.

...waiting for Gist...

Creating an open channel

Open the Assistant Editor and select the Create Open Channel View Controller B in the Preview pane.

Connect the Done button to the clickDoneButton action and implement the action method.

...waiting for Gist...

In the 4th tutorial, you inserted a UINavigationController between the Open Channels View Controller and the Create Open Channel View Controller A. You need to implement a subclass for the UINavigationController from the 4th tutorial. Creating a subclass of UINavigationController allows other view controllers to access it and the additional properties that it contains.

Create CreateOpenChannelNavigationController.m and CreateOpenChannelNavigationController.h as a subclass of UINavigationController.

Implement the CreateOpenChannelDelegate to receive a new open channel in CreateOpenChannelNavigationController.h.

...waiting for Gist...

Open Main.storyboard and select UINavigationController. Change Class in Custom Class section to CreateOpenChannelNavigationController in the Identity Inspector.

And then, open CreateOpenChannelViewControllerB.m and update the clickDoneButton method.

...waiting for Gist...

A UIViewController that implements the CreateOpenChannelDelegate receives the new channel. The next tutorial covers the implementation of the CreateOpenChannelDelegate method.

For now, the app creates an open channel.

Animation showing how your iOS messaging app creates an open channel

The next tutorial will cover how to implement the list of open channels with UITableView.

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
ROMMEL SUNGA
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
HARRY KIM
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
CHRIS HEO
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us