UIKit
Overview
The QuickBlox UIKit for iOS is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications.
The main goal of the QuickBlox UIKit for iOS is to offer developers a streamlined and efficient way to implement chat functionality within their iOS applications.
The QuickBlox UIKit for iOS offers modules that encapsulate complex chat functionalities, such as dialogs and chat management and real-time updates. These modules provide a simplified interface for integrating chat features into applications without the need for extensive knowledge of the underlying protocols or server-side infrastructure.
Features
- QuickBlox UIKit for iOS provides next functionality:
- List of dialogs
- Create dialog(Private or Group)
- Dialog screen
- Send text, image, video, audio, file messages
- Dialog info screen
- List, invite, remove members
Source code
You can find QuickBlox UIKit for Android source code here
Send your first message
The QuickBlox UIKit for iOS comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities. Our development kit encompasses light and dark themes, colors, and various other features. These components can be personalized to fashion an engaging messaging interface that reflects your brand's distinct identity.
The QuickBlox UIKit fully supports both private and group dialogs. To initiate the process of sending a message from the ground up using Java or Kotlin, please refer to the instructions provided in the guide below.
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 .
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
Before sending your first message 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 show how to authenticate user with login and password.
QBRequest.logIn(withUserLogin: "userLogin", password: "userPassword", successBlock: { (response, user) in
// Navigate user to the UIKit
}, errorBlock: { (response) in
})
Show UIKit screen
struct ShowQuickBlox: View {
var body: some View {
QuickBloxUIKit.dialogsView()
}
}
Customization
The QuickBlox UIKit for iOS allows you to create your own unique view of the UIKit.
Default themes
The QuickBlox UIKit for iOS by default supports Light and Dark themes, which theme will be applied depending on device settings.
Use your own theme
You can create and use your own theme. To do this you need to create class that implements QuickBloxUIKit.ThemeColorProtocol
class CustomThemeColor: QuickBloxUIKit.ThemeColorProtocol {
var mainElements: Color = Color("MainElements")
var secondaryElements: Color = Color("SecondaryElements")
var tertiaryElements: Color = Color("TertiaryElements")
var disabledElements: Color = Color("DisabledElements")
var mainText: Color = Color("MainText")
var secondaryText: Color = Color("SecondaryText")
var caption: Color = Color("Caption")
var mainBackground: Color = Color("MainBackground")
var secondaryBackground: Color = Color("SecondaryBackground")
var tertiaryBackground: Color = Color("TertiaryBackground")
var incomingBackground: Color = Color("IncomingBackground")
var outgoingBackground: Color = Color("OutgoingBackground")
var dropdownBackground: Color = Color("DropdownBackground")
var inputBackground: Color = Color("InputBackground")
var divider: Color = Color("Divider")
var error: Color = Color("Error")
var success: Color = Color("Success")
var highLight: Color = Color("HighLight")
var system: Color = Color("System")
init() {}
}
And use it later to create your own theme
var customTheme: CustomTheme = CustomTheme(color: CustomThemeColor(),
font: QuickBloxUIKit.ThemeFont(),
image: QuickBloxUIKit.ThemeImage())
QuickBloxUIKit.settings.theme = customTheme
Updated 8 days ago