How to build an iOS messaging app: Part 4, Selecting Operators for Open Channel

Part 4 and 5 of this series teach you how to implement a view controller to create an open channel. This view controller focuses on UI elements typical of open channels.

In this tutorial, you will create the view controllers that accept user input and create an open channel. It will split them into two view controllers:

• CreateOpenChannelViewControllerA – accepts a Cover Image and Channel Name
• CreateOpenChannelViewControllerB – accepts a Channel URL and a list of operators

Create your iOS messaging app by signing up for the SendBird Dashboard

What is an Open Channel in SendBird?

An open channel is a public chat similar to an IRC channel. No one requires permission to participate in an open channel. Thousands of people can chat with each other simultaneously. Even though an open channel doesn’t require permissions, each channel has operators who can ban or mute other users or bad actors.

Implementing a view controller to create an open channel

Many iOS apps have a navigation bar directing users to different view controllers. To implement the navigation bar, you should use a navigation controller. The navigation controller has a navigation bar which supports iOS 11 and iPhone X, where the height of the navigation bar is higher than the previous iPhone. It is easy to implement the Large Titles in the navigation bar of the navigation controller.

To add a UINavigationController, select the view controller that you will use for the open channel view controller in the Interface Builder.

Then, select Editor > Embed In > Navigation Controller.

Now, a navigation controller is inserted between the Main Tab Bar Controller and the UIViewController for open channels.

Select Navigation Bar of the Navigation Controller. Turn on Prefers Large Titles in the Navigation Bar section of the Attributes Inspector.

Select the Navigation Item of the open channel’s view controller. Change the Title to Open Channels in the Navigation Item section of the Attributes Inspector. Next, change the Large Title to Automatic.

Now, create a button to show the view controller for creating an open channel.

Drag a Bar Button Item in the Objective Library to the Navigation Bar of the Open Channels View Controller.

Select the Bar Button Item and change the System Item to Custom in the Bar Button Item section of the Attributes Inspector.

To set an image for the Bar Button Item, change the Image to the name of that image asset in Bar Item section of the Attributes Inspector.

Now, the navigation bar has the Bar Button Item with an image.

There are some basic options required for an open channel. This project requires that the user input the following properties when creating an open channel:

• Channel Name
• Cover Image
• Channel URL
• Operators (users who have the privilege to ban or mute other users)

This sample project has two view controllers to accept the options for creating an open channel from the user. The first view controller has the views to accept a cover image and a channel name. The second view controller has the views to accept a channel URL and operators. The button to create the open channel is in the second view controller.

Drag a UIViewController to the Preview pane of the Interface Builder. Right-click the Bar Button Item to create an open channel and drag to the UIViewController.

Then, select Present As Popover in the context menu.

Select the UIViewController and choose Editor > Embed In > Navigation Controller. A navigation controller appears between the view controller for Open Channels and the UIViewController for creating an open channel.

Select the Navigation Item of the UIViewController that creates an open channel. Change the Title to Create Open Channel in the Navigation Item section of the Attributes Inspector. Next, change the Large Title to Never.

Now, the Bar Button Item opens the Create Open Channel View Controller that allows users to create an open channel.

Add new files for the view controller to create an open channel.

Open Main.storyboard and select the view controller in the Interface Builder.

Change Class to CreateOpenChannelViewControllerA in the Custom Class section. Set Storyboard ID to CreateOpenChannelViewControllerA and turn on the Use Storyboard ID.

Add a UIImageView for a channel cover image. Set the constraints between the UIImageView and the Safe Area.

Change the name of the UIImageView to Channel Cover Image View.

To signal to users that the Channel Cover Image View can be changed, add a UIImageView for a camera icon to the corner of the Channel Cover Image View.

Add a UITextField for a channel name. Set the constraints between the UITextField and the Safe Area.

Change the name of the UITextField to Channel Name Text Field.

Set Clear Button to Is always visible in the Attributes Inspector, then the UITextField has X button to clear.

Set Placeholder to Open Channel Name.

To add two bar button items to the both sides of the navigation bar, drag a Bar Button Item in the Objective Library to the left side of the Navigation Bar of the Create Open Channels View Controller A. The left button item is Cancel.

Drag a Bar Button Item in the Objective Library to the right side. The right button item is Next.

Now, add another UIViewController to get a channel URL and operators. The UIViewController creates an open channel with the cover image, channel name, channel URL, and the operators.

Drag a UIViewController to the Preview pane of the Interface Builder. Change the name of the view controller to Create Open Channel View Controller B.

Drag the Next button of the Create Open Channel View Controller A to the Create Open Channel View Controller B. Select Show in the context menu.

Select the Navigation Item of the Create Open Channel View Controller B. Change Title to Create Open Channel in the Attributes Inspector. Change Large Title to Never.

Drag a Bar Button Item in the Objective Library to the right side. The right button item is Done.

The Create Open Channel View Controller B has UI elements for two options:

• Channel URL
• Operators

For the options, add UITextField and Button. The UITextField gets the channel URL. The UIButton presents another view controller to select users for operators. The UI elements has to be in UIScrollView, because the number of operators is dynamic.

Add a UIViewController for selecting operators. Right-click the Add Operator Button and drag the the UIViewController. Select Show in the context menu. Change the title of the UIViewController to Select Operators. Drag a Bar Button Item in the Objective Library to the right side of the Navigation Bar. The right button item is OK(O). The OK button shows the number of selected users.

To add a UITableView to present users on the Selector Operator View Controller, drag a UITableView in the Objective Library to the View of the Selector Operators View Controller.

Create a SelectorOperatorsViewController.m and SelectorOperatorsViewController.h as a subclass of UIViewController. Change the Class of Selector Operators View Controller to SelectorOperatorsViewController in the Custom Class section of Identity Inspector.

Open the Assistant Editor and select the Selector Operators View Controller in the Preview pane.

Connect OK button to okButtonItem outlet in SelectorOperatorsViewController.m.

To implement the UITableView, connect the UITableView to tableView outlet in SelectorOperatorsViewController.m. Add UITableViewDelegate and UITableViewDataSource to SelectorOperatorsViewController class in SelectorOperatorsViewContoller.h.

Before implementing the UITableViewDelegate and UITableViewDataSource, create UITableViewCell for each user.

Create a SelectorOperatorsTableViewCell.m and SelectorOperatorsTableViewCell.h as a subclass of UITableViewCell with a XIB file. The SelectorOperatorsTableViewCell must have two UIImageViews and UILabel. One of the UIImageViews is for the profile image of a user. The UILabel is for the user’s nickname. Another UIImageView shows whether the user is selected or not.

Connect each UI element to properties in SelectorOperatorsTableViewCell.h.

This project has to load an image from a server and the image loading must not block UI. In order to prevent this, use an image loader.

Open Podfile in your project folder, and add `pod ‘AFNetworking’, ‘~> 3.0’` to the file. And then, run `pod update`.

Open SelectOperatorsViewController.m and import two header files for SelectorOperatorsTableViewCell and the image loader of AFNetworking. To manage the user list, add an NSMutableArray property to hold SBDUser object. To query the user list, add a SBDUserListQuery property. To implement pull-to-refresh for the tableView, add a UIRefreshControl property.

Initialize the properties in the viewDidLoad method.

The viewDidLoad invokes refreshUserList to load the first page of the user list.

The refreshUserList invokes the loadUserListNextPage method. The loadUserListNextPage has a parameter for refreshing the user list.

Implement delegates for the tableView.

The number of rows of the tableView is `send.users.count`.

The height of each cell is 64.

To draw each cell, implement `tableView:cellForRowAtIndexPath:`. The delegate is invoked when calling `self.tableView reloadData`. In this delegate, use the image loader of AFNetworking. If you scroll to the end of the rows, load the next page.

To manage the selected users, add an NSMutableDictionary to SelectOperatorsViewController in SelectOperatorsViewController.h. The key of the dictionary is a user ID and the value is a user object

When clicking the row of the tableView, add the user to the dictionary or remove the user from the dictionary. Besides, the okButtonItem shows how many users are selected.

Now, the SelectOperatorsViewController shows the user list.

In the next tutorial, you will use Image Picker for selecting the cover image and create an open channel with the properties set by the user.