Chat UIKit iOS v3
Chat UIKit iOS
Chat UIKit
iOS
Version 3

Integrating UIKit into an Existing App

Copy link

This tutorial walks you through the process of integrating UIKit into your existing application.


Prerequisites

Copy link
  • Sendbird UIKit library. If you don't have it yet, follow the steps in Send your first message to install the library.
  • Sendbird account and Sendbird application to use the UIKit library. If you don't have an account, you can create one here.
  • At least two users should be created in the Sendbird dashboard to test the chat functionality. You can create users on Sendbird Dashboard.

How to customize

Copy link

Step 1 Clone the starter code

Copy link

In most cases, you will already have an existing application that you want to add chat functionality to. In this tutorial, we will build a simple delivery app first to demonstrate how to integrate UIKit into an existing app. This app requires a chat feature so that users can communicate with their delivery person.

To get started, clone the starter code from the GitHub repository. You can find the code in the integrate-with-existing-app/before folder.

The app basically has two screens as follows:

  • Login Screen: A simple form to enter the user ID.
  • Order Status Screen: A screen to show the order details and the status.

Step 2 Integrate SendbirdUIKit

Copy link

Now we will integrate the UIKit library to create a channel and open the chat screen when the chat button is tapped. Follow the three steps below to integrate the UIKit library.

  1. Initialize SendbirdUIKit
  2. Save the userId in the Login screen
  3. When the chat button is clicked, create a channel and open the chat screen.

Step 2-1 Initialize SendbirdUIKit

Copy link

First, initialize SendbirdUIKit in the AppDelegate class.

  • Replace YOUR_APP_ID with your Sendbird application ID.
import UIKit
import SendbirdUIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let APP_ID = "YOUR_APP_ID"    // TODO: 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: {
            // 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.
        }
        // Override point for customization after application launch.

        return true
    }
}

Step 2-2 Save the userId in the Login screen

Copy link

Let's change the loginButtonTapped function in LoginViewController.swift to set the current user and navigate to the order status screen. By using the SBUGlobals.currentUser, you can set the current user.

// import SendbirdUIKit in LoginViewController.swift

@objc private func loginButtonTapped() {
    if let userId = self.userIdTextField.text {
        SBUGlobals.currentUser = SBUUser(userId: userId)
        let orderStatusVC = OrderStatusViewController()
        navigationController?.pushViewController(orderStatusVC, animated: true)
    }
}

Step 2-3 Open a chat screen

Copy link

Let's change the chatButtonTapped function in OrderStatusViewController.swift to create a channel and open the chat screen.

  1. By using the SendbirdUI.connect, you can connect to the Sendbird server.
  2. By using the GroupChannel.createChannel, you can create a channel.
  3. By using the SBUGroupChannelViewController, you can open the chat screen.
  • Be sure to replace self.orderDetails.deliveryPersonId with the actual delivery person's user ID.
// import SendbirdUIKit, SendbirdChatSDK in OrderStatusViewController.swift
@objc private func chatButtonTapped() {
    // 1. Connect to Sendbird server.
    SendbirdUI.connect { user, error in
        if let user = user {
            // 2. Create a group channel between the user and the delivery person.
            let params = GroupChannelCreateParams()
            params.addUserIds([user.id, self.orderDetails.deliveryPersonId])
            params.isDistinct = true  // Reuse the channel if it already exists
            GroupChannel.createChannel(params: params) { (channel, error) in
                guard let channel = channel, error == nil else {
                    print("Error creating a channel:", error?.localizedDescription ?? "unknown error")
                    return
                }
                
                // 3. Open the channel by pushing `SBUGroupChannelViewController`.
                let chattingVC = SBUGroupChannelViewController(channel: channel)
                self.navigationController?.pushViewController(chattingVC, animated: true)
            }
        }
    }
}

Step 3 Run the app

Copy link

Now, you can run the app and test the chat functionality.


Full code

Copy link

You can refer the full code from the GitHub repository.

Other samples

Copy link

We have more samples available in our GitHub repository.