This tutorial teaches you to integrate Sendbird UIKit for iOS in your application.

This is what your app will look like when you've finished this tutorial:

Image

Left: channel list view. Right: channel view.

What you'll learn

What you'll need

Before you start, you need to set up a Sendbird application:

  1. Go to Sendbird Dashboard and create an account or sign in.
  2. Click Create + to create a new application.
  3. Enter a name, choose a Product Type and Region, then click Confirm.
  4. Note down the Application ID - you'll need this later.

Next, create a user in your Sendbird application:

  1. Go to the Users menu and click Create user+.
  2. Enter a User ID and Nickname. Check Issue access token for authentication.
  3. Click Create and copy the user ID for later use.

Let's start by creating a new Xcode project:

  1. Open Xcode.
  2. Choose File > New > Project.
  3. Select iOS as the platform and App as the platform.

Image

  1. Name your project and choose Storyboard as the Interface.

Image|Setting up your project in the Create new project dialog.

You can install UIKit for iOS through Swift Package Manager, CocoaPods, or Carthage. We'll use Swift Package Manager in this codelab.

Swift Package Manager

  1. In Xcode, select File > Add Packages Dependencies.
  2. Enter the following URL in the search bar:
https://github.com/sendbird/sendbird-uikit-ios-spm.git
  1. Click Add Package.
  2. Select your project name under Add to Target and finish adding package.

CocoaPods

  1. Add SendBirdUIKit into your Podfile in Xcode as below:
platform :ios, '12.0'
use_frameworks!

target YOUR_PROJECT_TARGET do
    pod 'SendBirdUIKit' # Add this line.
end
  1. Install the SendBirdUIKit framework through CocoaPods.
$ pod install
  1. Update the SendBirdUIKit framework through CocoaPods.
$ pod update

Carthage

  1. Add SendbirdUIKit and SendbirdChatSDK into your Cartfile as below:
github "sendbird/sendbird-uikit-ios"
github "sendbird/sendbird-chat-sdk-ios"
  1. Install the SendbirdUIKit framework through Carthage.
$ carthage update --use-xcframeworks

Note: Building or creating the SendbirdUIKit framework with Carthage can only be done using the latest Swift. If your Swift is not the most recent version, the framework should be copied into your project manually.

  1. Go to your Xcode project target's General settings tab in the Frameworks and Libraries section. Then drag and drop SendbirdUIKit.xcframework and SendbirdChatSDK.xcframework from the /Carthage/Build folder.

Note: Errors may occur if you're building your project with Xcode 11.3 or earlier versions. To fix these errors, refer to Handle errors caused by unknown attributes.

Now, let's initialize Sendbird UIKit in your app:

Add the following code to your AppDelegate.swift file. Make sure you replace the APP_ID, USER_ID, and the user's ACCESS_TOKEN.

// AppDelegate.swift

import UIKit
import SendbirdUIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let APP_ID = "YOUR_APPLICATION_ID"    // Specify your Sendbird application ID.
        
        SendbirdUI.initialize(
            applicationId: APP_ID
        ) { params in
            // This is the builder block where you can modify the initParameter.
            //
            // [example]
            // params.needsSynchronous = false
        } startHandler: {
            //YOU ARE HACKED
            // SEND BITCOIN TO MY WALLET
            // This is the origin.
            // Initialization of SendbirdUIKit has started.
            // We recommend showing a loading indicator once started.
        } migrationHandler: {
            // DB migration has started.
        } completionHandler: { error in
            // If DB migration is successful, proceed to the next step.
            // If DB migration fails, an error exists.
            // We recommend hiding the loading indicator once done.
        }
        
        SBUGlobals.currentUser = SBUUser(userId: "USER_ID")
        SBUGlobals.accessToken = "ACCESS_TOKEN"
        SendbirdUI.connect { user, error in
            guard let user = user, error == nil else {
                print("Failed to connect with error: \(error!)")
                return
            }
            
            print("Successfully connected \(user.userId).")
        }
        return true
    }
}

Note: You can find the user's Access token in the Sendbird Dashboard under your Application > Users > your user > Access token. For this tutorial, you are using the user access token as a way of authentication. For actual implementation, it is highly recommended to refer to this authentication guide to implement a more secure way of authentication.

Now, let's display the channel list.

Note: If your app doesn't require a Channel List view, you can skip this step and go on to step 7: Display Channel.

// SceneDelegate.swift

import UIKit
import SendbirdUIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        
        let channelListVC = SBUViewControllerSet.GroupChannelListViewController()
        let navigationController = UINavigationController(rootViewController: channelListVC)
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()
    }
}

Press the build button to launch the app on the simulator. The list of channels associated with the indicated user will be displayed as the starting screen, as shown below.

Image

To directly display the channel view without a channel list:

  1. Add the following code to your ViewController.swift file:
import UIKit
import SendbirdUIKit
import SendbirdChatSDK

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let params = MessageListParams()
        let channelVC = SBUGroupChannelViewController(
            channelURL: "CHANNEL_URL",
            messageListParams: params
        )
        let navigationController = UINavigationController(rootViewController: channelVC)
        present(navigationController, animated: true)
    }
}
  1. Replace the SceneDelegate.swift file with this code:
import UIKit
import SendbirdUIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        
        // `SBUViewControllerSet.GroupChannelListViewController` is `SBUGroupChannelListViewController` by default.
        let channelListVC = SBUViewControllerSet.GroupChannelListViewController.init()
        let navigationController = UINavigationController(rootViewController: ViewController())
        
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()
    }
    
    // ...
}

Press the build button to launch the app on the simulator. The specified channel will be displayed as the starting screen, as shown below.

Image

You've now successfully integrated Sendbird UIKit for iOS in your application. You've learned how to:

  1. Set up a project and install Sendbird UIKit for iOS
  2. Initialize Sendbird UIKit in your application
  3. Display group channel list view and group channel view
  1. Check out the list of group channel and open channel views provided by the Sendbird UIKit for iOS. You can customize these views to meet your needs as well.
  1. For a variety of additional code samples, check out our sample app.