Get started with PubNub Chat Components for iOS

This page outlines the steps to follow to set up a sample application with PubNub Chat Components for iOS. It covers the basics of integrating PubNub in your application, setting up the default chat components, and displaying an empty component when the app is started.

Prerequisites

Name	Requirement
Xcode	>= 13.0
Platform	iOS, iPad, macOS
Language	>= Swift 5
UI Framework	UIKit
PubNub Swift SDK	>= 4.1.0

Create a PubNub account

Sign in or set up an account on the Admin Portal. Create an app to get the keys you will need to use in your application.
When you create a new app, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments.
Additional features
Depending on your use case, you may want your app to have some PubNub features, such as Presence, Storage and Playback (including correct Retention), or Objects. To use them, you must first enable them on your Admin Portal keysets. If you decide to use Objects, be sure to select a geographic region corresponding to most users of your application.

Create a new project for your app

Install and open Xcode.
In Xcode, click Create a new Xcode project in the Welcome to Xcode window or select File > New > Project from the menu.
Follow the prompts to select the appropriate application. Enter both the name and the bundle ID in the desired app.

For any additional questions, refer to Apple documentation.

Install chat components

Inside your Xcode project, select File > Add Packages..., and enter the project repository URL.
If your GitHub account is added to Xcode's preferences, you can search for PubNubChatComponents in the Github section. If it's not added, search using the package URL https://github.com/pubnub/chat-components-ios.
After the package details load, click the Add Package button in the lower right corner.

For any additional questions, refer to Apple documentation.

Work with chat components

The first required step is to call ChatProvider, which initializes all the data components. These components are responsible for providing data to UI, setting the default theme, and communicating with the PubNub service. The best way to achieve it is by modifying the application theme functionality.

Open SceneDelegate and import PubNub, PubNubChat, and PubNubChatComponents.
```
import PubNub
import PubNubChat
import PubNubChatComponents
```

Declare a ChatProvider instance property that is populated by the initial Scene in the following steps.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?
    var chatProvider: PubNubChatProvider?
...

Complete the PubNub Configuration. To do that, use your Publish and Subscribe Keys from your PubNub account dashboard on the Admin Portal.
```
var pubnubConfig = PubNubConfiguration(
      publishKey: "pub-c-key", subscribeKey: "sub-c-key"
)
```
You can configure the UUID to associate a current user with the PubNub messages. You can get it from a previously cached entry.
```
pubnubConfig.uuid = UserDefaults.standard.currentUserId ?? "uuid-of-current-user"
```
Create ChatProvider. This object is used to facilitate the majority of the functionality provided by PubNub Chat Components for iOS.
```
self.chatProvider = PubNubChatProvider(pubnubConfiguration: pubnubConfig)
```
For more information, refer to the ChatProvider section.

Create a default ChannelListViewModel that is used to display all the channels that are associated with the current user.

guard let defaultChannelViewModel = chatProvider?
      .senderMembershipsChanneListComponentViewModel() else { return }

// Create navigation structure
let componentNavigation = UINavigationController()
componentNavigation.viewControllers = [defaultChannelViewModel.configuredComponentView()]

Set the component as the root view controller and display the window.

window.rootViewController = componentNavigation
self.window = window
window.makeKeyAndVisible()

At the end, SceneDelegate should resemble the following:

import UIKit

import PubNub
import PubNubChat
import PubNubChatComponents

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

  var window: UIWindow?
  var chatProvider: PubNubChatProvider?

  func scene(
    _ scene: UIScene,
    willConnectTo session: UISceneSession,
    options connectionOptions: UIScene.ConnectionOptions
  ) {

    guard let windowScene = (scene as? UIWindowScene) else { return }
    let window = UIWindow(windowScene: windowScene)

    if chatProvider == nil {
      var pubnubConfig = PubNubConfiguration(publishKey: "pub-c-key", subscribeKey: "sub-c-key")
      pubnubConfig.uuid = UserDefaults.standard.currentUserId ?? "uuid-of-current-user"

      chatProvider = PubNubChatProvider(
        pubnubConfiguration: pubnubConfig
      )
    }

    // Create the default Channel List Component
    guard let defaultChannelViewModel = chatProvider?.senderMembershipsChanneListComponentViewModel() else { return }

    // Create navigation structure
    let navigation = UINavigationController()
    navigation.viewControllers = [defaultChannelViewModel.configuredComponentView()]

    // Set the component as the root view controller
    window.rootViewController = navigation
    self.window = window
    window.makeKeyAndVisible()
  }
}

REACT

ANDROID

IOS