Design the UI


In the Build a Zoom Meetings App section, you learned how to set up your iOS project. This section demonstrates how to create a simple UI for your app and connect the UI elements to user actions.

1. Create the UI

In this demo app, you are going to add two buttons to the first screen of the app. When clicked, one button(Join Meeting) displays a UIAlertController that prompts a user to provide the Meeting Number and Meeting Passcode to join a meeting.

The second button(Start an instant Meeting) displays another UIAlertController to prompt a user to enter their Zoom login credentials and upon being authenticated, the user can immediately start a Zoom instant meeting as a host.

Below you can see the images of what the UI of this demo app may look like:

You can be creative and design the buttons and the UI based on your preferences. However, to follow along with this tutorial, we recommend that you:

a. Embed the ViewContoller to a NavigationController for the SDK to properly control the UI.

b. Add the two Buttons to a View in the ViewController. In this demo app, we are using a Vertical Stack View to house our buttons.

We will not be covering the storyboard design details here. If you are new to iOS development, refer to iOS Design Themes, iOS Storyboards in Xcode and iOS Storyboards Getting Started guides to learn more about iOS App Design.

To implement a UI similar to the one we created for this demo app, refer to this Main.storyboard file.

2. Connect the UI elements to code

Once you have your UI ready, the next step is to connect the UI elements of your app to code by binding the buttons with actions.

The tabs below show instructions for both Objective-C and Swift. Follow the instructions that are relevant to you depending on the programming language that you are using for this project.

In addition to your existing Main.storyboard tab, open a new editor tab by clicking the button highlighted in the image below. Once the second tab appears, click anywhere within that second tab to select it. Then, search for ViewController by using the command: command+shift+O.

ViewController.m should now be in the right tab and main.storyboard should be in the left. While holding the control key, click and drag from the Join a Meeting button to the ViewController.m file.

If prompted to specify the details of this action, name the action “joinAMeetingButtonPressed”, set the type to UIButton and click Connect.

Repeat the previous steps for the next button.

After successfully completing the above steps, your ViewController.m file should look similar to this:

ViewController.h
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
		[super viewDidLoad];
// Do any additional setup after loading the view.
}


- (IBAction)joinAMeetingButtonPressed:(UIButton *)sender {
}


- (IBAction)startAnInstantMeetingButtonPressed:(UIButton *)sender {
}

@end

Next, in the ViewController.m file, import the Zoom SDK and pass the Navigation Controller into the Zoom SDK, so that it can navigate views for your app.

ViewController.m
#import "ViewController.h"
// 1. Import the Zoom SDK.
#import <MobileRTC/MobileRTC.h>

@interface ViewController ()

@end

@implementation ViewController

#pragma mark - LifeCycle

- (void)viewDidLoad {
    [super viewDidLoad];
// 2.  Pass the  Navigation Controller into the Zoom SDK
    UINavigationController *navController = self.navigationController;

if (navController)
        [[MobileRTC sharedRTC] setMobileRTCRootController:navController];

#pragma mark - IBOutlets


- (IBAction)joinAMeetingButtonPressed:(UIButton *)sender {
}


- (IBAction)startAnInstantMeetingButtonPressed:(UIButton *)sender {
}

@end

After completing the steps listed above, you should have a simple UI ready in your app. In the next section, learn how to make the UI interactive, implement some features and run your app.