Skip to content

Channelize iOS UI SDK Documentation

Jump to bottom
rohitphogat19 edited this page Apr 10, 2019 · 10 revisions

The following documentation is built to help you with integration of our Channelize iOS UI SDK into your project.

The Channelize UI SDK can be installed using the following method.

NOTE: Channelize UI SDK is using Channelize API SDK for networking and real time events.

The Channelize SDKs help you to build the UI with real-time messaging. Our Channelize UI SDK provides you with various methods to initialize and configure UI sdk, and set the data into various pre-built screen. This section presents a brief overview of the SDK’s abilities and logic, then lets you go through the preliminary steps of implementing the SDK in your own app.

Install and configure iOS UI SDK

Installing and Configuring iOS UI SDK

  1. Dependencies
  2. Pods Installation
  3. Required Files
  4. App Permission
  5. Using SDKs Method and Properties
  6. Configuring
  7. Launching Channelize
  8. Handling Push Notifications
  9. Customizing UI

Dependencies

Requirement

Before we begin, please do make sure that

  • Your application is built on iOS 9.0 or above. Since Channelize SDK as of now only supports Version 9.0 or higher.
  • You have Xcode 9.4.1 or later as your IDE to install and run Channelize SDK on iOS.
  • Swift 4 / 4.1 / 4.2

Pods Installation

  • You need to install few dependency pods just after you are done copying SDK in you project otherwise the project will not compile.
  • Following Pods Are required for UI SDK. Add these pods to your existing pod-file which we create when installing API sdk
pod 'ChannelizeUI'
pod 'Chatto',  :git => 'https://github.com/BigStepTechnologies/Chatto', :branch => 'bigstep/v1.0'
pod 'ChattoAdditions',  :git => 'https://github.com/BigStepTechnologies/Chatto', :branch => 'bigstep/v1.0'
  • Run pod install after setting up pods in your project.

Required Files

You need to create .plist file with name as Channelize-Info.plist, and put following keys **Note: If you don't want location messages, you are not required to set MAP_API_KEY. But you have to disable location messages as given in this section. Also same as if you don't stickers or gif messages, you are not required to set GIPHY_API_KEY.But you have to disable sticker and gif messages

<key>MAP_API_KEY</key>
<string>xxxx Map Key xxxx</string>
<key>PUBLIC_KEY</key>
<string>xxxx PublicKey xxxx</string>
<key>API_URL</key>
<string>xxxx API URL xxxxx </string>
<key>MQTT_URL</key>
<string>xxxxxxx MQTT URL xxxxxx</string>
<key>GIPHY_API_KEY</key>
<string>xxxx GIPHY API Key xxxx</string>

You also need to create a .string file with name as "CHLocalizable.strings" in your project directory. Copy all entries from this file and change them according to you. CHLocalizable.strings

App Permission

Make sure you have the following permissions in your Info.plist file.

  • NSCameraUsageDescription is for camera permission. If you don't want image messages and your app is not using any camera functionality, then remove this key from info.plist file. Same goes for all other keys
  • NSLocationAlwaysUsageDescription -> For location for location messages
  • NSLocationWhenInUseUsageDescription -> For location for location messages
  • NSPhotoLibraryUsageDescription -> For photo Library permission for image messages.
  • NSMicrophoneUsageDescription -> For microphone permission to send audio messages.
<key>NSAppTransportSecurity</key>
  <dict>
  	<key>NSAllowsArbitraryLoads</key>
  	<true/>
  </dict>
  <key>NSCameraUsageDescription</key>
  <string>You can take photos to document your job.</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>This app wants to access your location</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>This app wants to access your location</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>You can select photos to attach to reports.</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>This app wants to access your Microphone</string>

Using SDKs Method and Properties

**Note: Where ever you want to use Channelize, please import following

import Channelize
import Channelize_API

Configuring

Configuring Channelize

  • To configure Channelize you need to add the following code in didFinishLaunchingWithOptions function of your project's AppDelegate.swift file
Channelize.configure()

Login into Channelize

  • To login into Channelize, use following code
Channelize.main.login(username: email, password: password){(user,error) in 
   guard error == nil else {
       return }
}

Launching Channelize

  • To launch channelize from your app use following code. Make sure to launch app after user logged in else it will not launch.
if(Channelize.main.currentUserId() != nil) {
   if let navigationController = UIApplication.shared.keyWindow?.rootViewController as? UINavigationController {
       CHMain.instance.launchApp(navigationController: navigationController, data: nil)
    }      
}

Handling Push Notifications

To handle Push Notification for Channelize, you need Firebase and its Messaging Framework. Simply add following pods

pod 'Firebase/Messaging'
pod 'Firebase/Core'

In AppDelegate.swift file in didFinishLaunchingWithOptions functions call this

FirebaseApp.configure()
Messaging.messaging().delegate = self

Write MessagingDelegate functions and update fcmToken using Channelize.updateToken(token: fcmToken)

extension AppDelegate : MessagingDelegate {
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String) {
        print("FCM Token -> \(fcmToken)")
        Channelize.updateToken(token: fcmToken)
    }
    func messaging(_ messaging: Messaging, didReceive remoteMessage: MessagingRemoteMessage) {
        print("Message Recieved \(remoteMessage.appData)")
    }
}

To handle Push Notifications, you have to put a check to differentiate your app push notifications and Channelize notifications. Put a check as given Below

func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
let userInfo = response.notification.request.content.userInfo
if userInfo["isMessenger"] != nil{
    openPrimeMessenger(contentInfo: userInfo)
}else{
    // Handle yours app notifications
}
}

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
if application.applicationState != UIApplicationState.background{
if userInfo["isMessenger"] != nil{
openPrimeMessenger(contentInfo: userInfo)
}else{
    // Handle yours app notifications
}
}

func openPrimeMessenger(contentInfo: [AnyHashable : Any]){
        if let recipient = contentInfo["recipient"]{
            if let jsonData = (recipient as! String).data(using: .utf8){
                if let data = try? JSONSerialization.jsonObject(with: jsonData, options:    []) as! [String:Any]{
                    if(data["recipientId"] as! String == Channelize.main.currentUserId()!){
                        if let navigationController = UIApplication.shared.keyWindow?.rootViewController as? UINavigationController{
                            CHMain.instance.launchApp(navigationController: navigationController, data: contentInfo)
                        }
                    }
                }
            }
        }
        
    }

Customizing UI

1.To set up your custom UI option, you can create a class in your project and can initialize below all variables which you need to change. Initialize this class once most preferred in didFinishLaunchingWithOptions in AppDelegate.swift. For e.g

class CustomUi {
    open static func setUIVariables() {
    /* Set variables in this Function
    }
}

and call this function in didFinishLaunchingWithOptions in AppDelegate.swift file

CustomUi.setUIVariables()

Various Customizable Options

  1. Tab Bar Customization
  2. Conversation Screen Customization
  3. Recent Screen Customization
  4. Contact Screen Customization
  5. Groups List Screen Customization
  6. Some Global Customization

Tab Bar Customization

TabBar has Four Tabs

  1. Recent Message Screen
  2. Contacts Screen
  3. Groups List Screen
  4. Settings Screen

You can customize tabBar using below Variables

  • showTabNames => To show tabs Names with Image or Not
  • recentScreenTabImage => Recent Messages Screen Tab Image
  • recentScreenSelectedTabImage => Recent Message Screen Tab Image when it is Tapped or Selected
  • contactScreenTabImage => Contact Screen Tab Image
  • contactScreenSelectedTabImage => Contact Screen Tab Image When it is Tapped or Selected
  • groupsScreenTabImage => Groups List Screen Tab Image
  • groupsScreenSelectedTabImage => Groups Screen tab Image When it is Tapped or Selected
  • settingsScreenTabImage => Settings Screen Tab Image
  • settingsScreenSelectedTabImage => Settings Screen Tab Image When it is Selected or Tapped
  • tabBarBgColor => Tab Bar Background Color
  • tabBarTintColor => Tab Bar Tint Color i.e It is used to color text and image of Selected Tab item
  • isTabBarSolid => Is Tab Bar Background Solid or translucent
  • tabBarItemTextColor => Text Color for Tab Items Text
  • tabBarItemImageColor => Image Color for unselected Tab items Images. Useful if your images are not originally in color in which you want

** Note: If you are setting Tab Bar image then you have to set selectedTabBar Image or you can assign nil. If you did not set selectedTabImages then SDK Default selected images will be shown when tab is selected**

CHCustomStyles.showTabNames = true
CHCustomStyles.recentScreenTabImage = UIImage(named: "recent22")
CHCustomStyles.recentScreenSelectedTabImage = nil
CHCustomStyles.contactScreenTabImage = UIImage(named: "contacts")
CHCustomStyles.contactScreenSelectedTabImage = nil
CHCustomStyles.groupsScreenTabImage = UIImage(named: "groups")
CHCustomStyles.groupsScreenSelectedTabImage = nil
CHCustomStyles.settingsScreenTabImage = UIImage(named: "settings")
CHCustomStyles.settingsScreenSelectedTabImage = nil
CHCustomStyles.tabBarBgColor = UIColor(hex: "#48c6ef")
CHCustomStyles.tabBarTintColor = .white
CHCustomStyles.isTabBarSolid = true
CHCustomStyles.tabBarItemTextColor = .black
CHCustomStyles.tabBarItemImageColor = .black

Conversation Screen Customization

Conversation Screen Chat Bubbles Customization

/*
- baseMessageIncomingBackgroundColor => For Setting background color of Incoming Message
- baseMessageOutgoingBackgroundColor => For Setting background color of Outgoing Message
- messageDateSeperatorColor => For setting color of Date Seperator Message
- messadeDateSeparatorFont => For Setting Font for Date Seperator Message
*/

CHCustomStyles.baseMessageIncomingBackgroundColor = UIColor.lightGray
CHCustomStyles.baseMessageOutgoingBackgroundColor = appDefaultColor
CHCustomStyles.messageDateSeperatorColor = UIColor.darkGray
CHCustomStyles.messadeDateSeparatorFont = UIFont.systemFont(ofSize: 12)
/*
- incomingMessageTextColor => for setting incoming Message Text Color
- outgoingMessageTextColor => for setting outgoing Message Text Color
- incomingMessageFont => For Setting incoming Message Text Font
- outgoingMessageFont => For Setting outgoing Message Text Font
- quotedIncomingMessageColor => For Setting Color of Incoming quoted Message
- quotedOutgoingMessageColor => For Setting Color of Outgoing quoted Message
*/

CHCustomStyles.incomingMessageTextColor = .black
CHCustomStyles.outgoingMessageTextColor = .white
CHCustomStyles.incomingMessageFont = UIFont(name: "Courier", size: 15.0)!
CHCustomStyles.outgoingMessageFont = UIFont(name: "Menlo-Regular", size: 15.0)!
CHCustomStyles.quotedIncomingMessageColor = UIColor.blue
CHCustomStyles.quotedOutgoingMessageColor = UIColor.black
/*
- photoBubbleSize => For setting Photo message Bubble Size
- stickerMessageSize => For setting Sticker or GIF message Bubble Size
- gifMessageSize => For setting Sticker or GIF message Bubble Size
- locationMessageSize => For setting Location message Bubble Size
- videoMessageSize => For setting Video message Bubble Size
*/
CHCustomStyles.photoBubbleSize = CGSize(width: 210, height: 136)
CHCustomStyles.stickerMessageSize = CGSize(width: 100, height: 100)
CHCustomStyles.gifMessageSize = CGSize(width: 210, height: 136)
CHCustomStyles.locationMessageSize = CGSize(width: 210, height: 136)
CHCustomStyles.videoMessageSize = CGSize(width: 210, height: 136)

Variables for Message Types or attachments

/*
- enableAttachments => Allow or not allow attachments in Conversation Screen
- enableAudioMessages => Allow or not Sending Audio Messages
- enableImageMessages => Allow or not Sending Images
- enableVideoMessages => Allow or not Sending Video Messages
- enableLocationMessages => Allow or not Sending Location Messages
- enableStickerAndGifMessages => Allow or not sending GIF and Sticker Messages
*/   

//MARK:- Variables for Chat Screens
CHCustomOptions.enableAttachments = true
CHCustomOptions.enableAudioMessages = true
CHCustomOptions.enableImageMessages = true
CHCustomOptions.enableVideoMessages = true
CHCustomOptions.enableLocationMessages = true
CHCustomOptions.enableStickerAndGifMessages = true

Variables to set size of messages attachment to be send (Set this variables if you enabled them)

/*
- maximumVideoSize => Maximum Video Size in MB
- maximumAudioSize => Maximum Audio Size in MB
- maximumImageSize => Maximum Image Size in MB
*/
//MARK:- Variables for Attachments Size In MB
CHCustomOptions.maximumVideoSize = 25.0
CHCustomOptions.maximumAudioSize = 25.0
CHCustomOptions.maximumImageSize = 5.0

Other Conversation Screen Options

/*
- enableQuoteMessage => Allow Quoted Messages
- enableUserLastSeen => Show User Last Seen Status
- enableUserOnlineStatus => Show User Online Status on Conversation Screen
- showMemberCountInHeader => Show Members Count In Group Header.
*/
CHCustomOptions.enableQuoteMessage = false
CHCustomOptions.enableUserLastSeen = true
CHCustomOptions.enableUserOnlineStatus = false
CHCustomOptions.showMemberCountInHeader = false

Recent Screen Customization

You can customize Message Heading,Last message,Last message Time, MessageCount labels text color and fonts. You can also customized view background color, table background color, cell background color. Good if you have dark theme app.

/*
VariableName => For setting ... On Recent Screen or Messages List Screen
- recentScreenNameLabelFont => User Name or GroupName
- recentScreenNameLabelColor => UserName or Group Name Color
- recentScreenMessageLabelColor => Message Color
- recentScreenTimeLabelFont => Message Font
- recentScreenTimeLabelFont => Recent Message Time Font
- recentScreenTimeLabelColor => Recent Message Time color
- recentScreenMessageCountColor => Recent Unread Message count color
- recentScreenMessageCountBgColor => Recent Unread Message count BG color
- recentScreenTableBackgroundColor => Table Background Color
- recentScreenTableCellBackgroundColor => Table Cell Background Color
*/

CHCustomStyles.recentScreenNameLabelFont = UIFont(name: "Courier-Bold", size: 15.0)!
CHCustomStyles.recentScreenNameLabelColor = UIColor.white
CHCustomStyles.recentScreenMessageLabelColor = UIColor.lightText
CHCustomStyles.recentScreenTimeLabelFont = UIFont(name: "PingFangSC-Regular", size: 12.0)!
CHCustomStyles.recentScreenTimeLabelColor = UIColor.lightText
CHCustomStyles.recentScreenMessageCountColor = UIColor.black
CHCustomStyles.recentScreenMessageCountBgColor = UIColor.white
CHCustomStyles.recentScreenTableBackgroundColor = UIColor.black
CHCustomStyles.recentScreenTableCellBackgroundColor = UIColor.black

Groups List Screen Customization

You can customize labels color and font for Groups list cell and background color and cell color for groups table

/*
- groupNameLabelColor => Group Name Color
- groupNameLabelFont => Group Name Font
- groupStatusLabelColor => Group Status Color
- groupStatusLabelFont => Group Status Font
- groupMemberCountLabelColor => Group Members Count Color
- groupMemberCountLabelFont => Group Members Count Font
- groupsTableBackgroundColor => Groups List Background Color
- groupCellBackgroundColor => Groups List Cell Background Color
- groupsTableCellShadowColor => Group Cell Shadow Color
*/

CHCustomStyles.groupNameLabelColor = UIColor.white
CHCustomStyles.groupNameLabelFont = UIFont.systemFont(ofSize: 15.0, weight: .heavy)
CHCustomStyles.groupStatusLabelColor = UIColor.white
CHCustomStyles.groupStatusLabelFont = UIFont.systemFont(ofSize: 12.0)
CHCustomStyles.groupMemberCountLabelColor = UIColor.white
CHCustomStyles.groupMemberCountLabelFont = UIFont.systemFont(ofSize: 14.0, weight: .bold)
CHCustomStyles.groupsTableBackgroundColor = .black
CHCustomStyles.groupCellBackgroundColor = .black
CHCustomStyles.groupsTableCellShadowColor = UIColor.white.cgColor

Contact Screen Customization

You can Customize Contact Screen Labels colors and Font and cell background and table color.

/*
- contactNameLabelFont => Contact Name Font
- contactNameLabelColor => Contact Name Color
- contactTableBackgroundColor => Contacts Table BG Color
- contactsTableCellBackgroundColor => Contacts Table Cell BG Color
- contactTableSeperatorColor => Contact Table Cell seperator Color
*/

CHCustomStyles.contactNameLabelFont = UIFont.systemFont(ofSize: 14.0, weight: .bold)
CHCustomStyles.contactNameLabelColor = .white
CHCustomOptions.contactsTableCellBackgroundColor = .black
CHCustomOptions.contactTableBackgroundColor = .black
CHCustomOptions.contactTableSeperatorColor = .white

Some Global Customization

// Allow Searching
CHCustomOptions.allowSearching = false
Clone this wiki locally