Requirements

The minimum requirements for QuickBlox UIKit for iOS are:

• iOS 15.0
• Xcode 14

Before you begin

Register a new account following this link. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
Create the app clicking New app button.
Configure the app. Type in the information about your organization into corresponding fields and click Add button.
Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .

🚧

Users are required for messaging!

To successfully create a private p2p dialogue or group dialogue and a full-fledged messaging, you need more users besides the one under which you logged into the Quickblox system.

If you just created a new application in your Quickblox account, then there will be no users in this application.

You can read how to add new users using the admin panel of your account at this link.

There is also an easier way to add a new user - just run our UIKitSample and register another new user on the SignUp screen

Install QuickBlox UIKit

To add QuickBlox UIKit to your project using SPM, you can follow these steps:

Open your Xcode project and navigate to File > Swift Packages > Add Package Dependency.
In the search bar, enter the QuickBlox UIKit repository URL: https://github.com/QuickBlox/ios-ui-kit.git and click Add Package.
Xcode will then fetch the SDK and you can add it to your project by clicking Add Package.
You can then import QuickBloxUIKit modules into your code and use its API.

import QuickBloxUIKit

Init QuickBlox SDK

To init QuickBlox SDK you need to pass Application ID, Authorization Key, Authorization Secret, and Account Key to the initWithApplicationId() method.

Quickblox.initWithApplicationId(92, authKey: "wJHdOcQSxXQGWx5", authSecret: "BTFsj7Rtt27DAmT", accountKey: "7yvNe17TnjNUqDoPwfqp")

❗️

Security

It's not recommended to keep your authKey and authSecret inside an application in production mode, instead of this, the best approach will be to store them on your backend. Instead you can initialize QuickBlox SDK without Authorization Key and Secret

Authentication and show QuickBlox UI Kit screen

Before using the QuickBlox iOS UI Kit you need to authenticate users in the QuickBlox system. You can read more about different ways of authentication by this link.

In our example, we will show how to authenticate a user with a username and password, then log in to QuickBlox Chat (Connect to Chat). Upon successful authorization, the UIKit’s Dialogues screen will automatically open.

📘

If you need to handle the exit event from the QuickBlox iOS UI Kit, you can do this in a closure onExit: {}

import QuickBloxUIKit
import Quickblox
struct ContentView: View {
    @State private var isPresented = false
    var body: some View {
        Button("Present!") {
            authenticateUser()
        }
        .fullScreenCover(isPresented: $isPresented) {
        // show Dialogs screen
            QuickBloxUIKit.dialogsView(onExit: {
            // Handling an event when exiting the QuickBloxUIKit e.g. disconnect and logout
            })
        }
    }
    
    func authenticateUser() {
    QBRequest.logIn(withUserLogin: "userLogin",
    password: "userPassword",
    successBlock: { (response, user) in
            // Block with response and user instances if the request is succeeded.
            isPresented.toggle()
            print("Success login")
        }, errorBlock: { (response) in
            // Block with response instance if the request is failed.
        })
    }
}

Sample

Download and setup:

• To use the UIKitSample you need a QuickBlox account. Register a new account by following the step-by-step guide in this section or use an existing one.
• Download the UIKitSample and open it in Xcode by double-clicking the .xcodeproj file.
• In UIKitSample, go to the Connect class and fill in the appropriate fields:

class Connect: ObservableObject {
    @Published var state: ConnectState = .waiting
    
    init(state: ConnectState = .disconnected) {
        self.state = state
        Quickblox.initWithApplicationId(0, // Your_Application_ID
                                        authKey: "", // Your_Authorization_Key
                                        authSecret: "", // Your_Authorization_Secret
                                        accountKey: "") // Your_Account_Key


        
        QBSettings.carbonsEnabled = true
        QBSettings.autoReconnectEnabled = true
    }
    ...
}

That's all you need to start using UIKitSample!

Features:

UIKitSample contains screens:

1. LoginScreen.
   Before using the QuickBlox iOS UI Ki, you need to authenticate users to the QuickBlox system. If the user is not already signed in to the app, they will be able to sign in as a user on this screen using their username, display name, and password. Upon successful registration, you will be automatically logged into Quickblox and connected to the Quickblox chat.
   Once the user is logged in, UIKit immediately opens when the application is opened, or if the user is logged out, they can log into the sample using their username and password. The connection to the Quickblox chat will be established automatically.

🚧

Users are required for messaging!

To successfully create a private p2p dialogue or group dialogue and a full-fledged messaging, you need more users besides the one under which you logged into the Quickblox system.

If you just created a new application in your Quickblox account, then there will be no users in this application.

To add a new user, simply run this sample and register another user on the SignUp screen!

The struct LoginScreen contains a boolean variable showChangeColorTheme with a default value of false:

let showChangeColorTheme: Bool = false

with this setting, the UIKit's screen will open immediately after the user successfully logs into the system:

var body: some View {
        
    container()
        .if(showChangeColorTheme == false && connect.state == .connected, transform: { view in
            view.fullScreenCover(isPresented: $connect.isConnected) {
                QuickBloxUIKit.dialogsView(onExit: {
                // Handling an event when exiting the QuickBloxUIKit e.g. disconnect and logout
                })
            }
        })
}

If you want to see an option with the ability to change the theme by the user, then set this variable to true:

let showChangeColorTheme: Bool = true

And then, after successful authorisation of the user in the system, the Choice of Color Theme Screen will open.

2. Choice of color theme. On this screen, the user can select a color theme for the whale. After the user selects the color theme he needs, the Enter the chat screen will open.
3. Enter the chat.

struct EnterToChatView: View {
    
    @ObservedObject var theme: AppTheme
    
    @State var isPresented = false
    
    init(theme: AppTheme) {
        self.theme = theme
        QuickBloxUIKit.settings.theme = theme
    }
    
    var body: some View {
        ZStack {
                // Button to enter the QuickBlox iOS UI Kit.
                Button(action: {
                    self.isPresented = true
                }, label: {
                    Text("Enter to SwiftUIChat")
                })
        }
        .fullScreenCover(isPresented: $isPresented) {
            QuickBloxUIKit.dialogsView(onExit: {
            // Handling an event when exiting the QuickBloxUIKit e.g. disconnect and logout
            })
        }
    }
}

Pressing the "Enter to SwiftUIChat" button will open the Dialogs screen of QuickBlox iOS UI Kit.