This tutorial teaches you to integrate Sendbird's Chat SwiftUI in your iOS 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 need

Before you start, you need the following:

Application ID

  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.

Image|Screen showing application ID on Sendbird Dashboard.

User ID

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.

Image|Screen highlighting bot ID on Manage bots page on Sendbird Dashboard.

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 template.

Image

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

Image

You can install Sendbird Chat SwiftUI using either Swift Package Manager or CocoaPods.

Swift Package Manager

  1. In Xcode, select File > Add Packages Dependencies.
  2. Enter the following URL in the search field:
    https://github.com/sendbird/sendbird-swiftui-ios.git
    

Image

  1. Click Add Package.
  2. Select your project name under Add to Target and finish adding package.

CocoaPods

  1. Create a Podfile in your project directory if you don't have one
  2. Add the following line to your Podfile:
    pod 'SendbirdSwiftUI'
    
  3. Run pod install in your terminal

Now, let's initialize Sendbird Chat SwiftUI in your app:

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

import SwiftUI
import SendbirdSwiftUI

@main
struct MyApp: App {
    init() {
        setupSendbird()
        setupCurrentUser()
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

private extension MyApp {
    func setupSendbird() {
        let APP_ID = "APP_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: {
            // Initialization of SendbirdSwiftUI 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.
        }
    }
    
    func setupCurrentUser() {
        // Set current user.
        SBUGlobals.currentUser = SBUUser(userId: "USER_ID")
        SBUGlobals.accessToken = "ACCESS_TOKEN"
    }
}

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.

  1. Create a new SwiftUI view file named ContentView.swift
  2. Replace its content with:
import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    var body: some View {
        GroupChannelListView()
    }
}
  1. In your MyApp.swift, update the body to use ContentView:
var body: some Scene {
    WindowGroup {
        ContentView()
    }
}

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. Create a new SwiftUI view file named ContentView.swift
  2. Replace its content with:
import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    var body: some View {
        GroupChannelView(channelURL: "CHANNEL_URL")
    }
}
  1. In your MyApp.swift, update the body to use ContentView:
var body: some Scene {
    WindowGroup {
        ContentView()
    }
}

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 Chat SwiftUI in your iOS application. You've learned how to:

  1. Set up a project and install Sendbird Chat SwiftUI
  2. Initialize Sendbird Chat SwiftUI in your application
  3. Display group channel list view and group channel view
  1. Check out the list of group channel views and open channel views provided by the Sendbird Chat SwiftUI.
  1. See how you can customize these views in our Docs.
  2. For a variety of additional code samples, check out our sample app.