|
| 1 | +--- |
| 2 | +author: leahxia |
| 3 | +ms.author: leahxia |
| 4 | +ms.date: 01/04/2023 |
| 5 | +ms.topic: include |
| 6 | +ms.service: azure-communication-services |
| 7 | +--- |
| 8 | + |
| 9 | +[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)] |
| 10 | + |
| 11 | +Get the sample iOS application for this [quickstart](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-chat) in the open source Azure Communication Services [UI Library for iOS](https://github.com/Azure/communication-ui-library-ios). |
| 12 | + |
| 13 | +## Prerequisites |
| 14 | + |
| 15 | +- An Azure account and an active Azure subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). |
| 16 | +- A Mac running [Xcode](https://go.microsoft.com/fwLink/p/?LinkID=266532) 13 or later and a valid developer certificate installed in your keychain. [CocoaPods](https://cocoapods.org/) must also be installed to fetch dependencies. |
| 17 | +- A deployed [Azure Communication Services resource](../../../create-communication-resource.md), note the endpoint URL. |
| 18 | +- An Azure Communication Services [access token](../../../identity/quick-create-identity.md) and user identifier. |
| 19 | +- An Azure Communication Services [chat thread](../../../chat/get-started.md) and now add the user you created in the last step to this chat thread. |
| 20 | + |
| 21 | +## Set up the project |
| 22 | + |
| 23 | +Complete the following sections to set up the quickstart project. |
| 24 | + |
| 25 | +### Create a new Xcode project |
| 26 | + |
| 27 | +In Xcode, create a new project: |
| 28 | + |
| 29 | +1. In the **File** menu, select **New** > **Project**. |
| 30 | + |
| 31 | +1. In **Choose a template for your new project**, select the **iOS** platform and select the **App** application template. The quickstart uses the UIKit storyboards. |
| 32 | + |
| 33 | + :::image type="content" source="../../media/xcode-new-project-template-select.png" alt-text="Screenshot that shows the Xcode new project dialog, with iOS and the App template selected."::: |
| 34 | + |
| 35 | +1. In **Choose options for your new project**, for the product name, enter **UILibraryQuickStart**. For the interface, select **Storyboard**. The quickstart doesn't create tests, so you can clear the **Include Tests** checkbox. |
| 36 | + |
| 37 | + :::image type="content" source="../../media/xcode-new-project-details.png" alt-text="Screenshot that shows setting new project options in Xcode."::: |
| 38 | + |
| 39 | +### Install the package and dependencies |
| 40 | + |
| 41 | +1. (Optional) For MacBook with M1, install and enable [Rosetta](https://support.apple.com/en-us/HT211861) in Xcode. |
| 42 | + |
| 43 | +1. In your project root directory, run `pod init` to create a Podfile. If you encounter an error, update [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) to the current version. |
| 44 | + |
| 45 | +1. Add the following code to your Podfile. Replace `UILibraryQuickStart` with your project name. |
| 46 | + |
| 47 | + ```ruby |
| 48 | + platform :ios, '14.0' |
| 49 | + |
| 50 | + target 'UILibraryQuickStart' do |
| 51 | + use_frameworks! |
| 52 | + pod 'AzureCommunicationUIChat', '1.0.0-beta1' |
| 53 | + end |
| 54 | + ``` |
| 55 | + |
| 56 | +1. Run `pod install --repo-update`. |
| 57 | + |
| 58 | +1. In Xcode, open the generated *.xcworkspace* file. |
| 59 | + |
| 60 | +### Turn off Bitcode |
| 61 | + |
| 62 | +In the Xcode project, under **Build Settings**, set the **Enable Bitcode** option to **No**. To find the setting, change the filter from **Basic** to **All** or use the search bar. |
| 63 | + |
| 64 | +:::image type="content" source="../../media/xcode-bitcode-option.png" alt-text="Screenshot that shows the Build Settings option to turn off Bitcode."::: |
| 65 | + |
| 66 | +## Initialize the composite |
| 67 | + |
| 68 | +To initialize the composite: |
| 69 | + |
| 70 | +1. Go to `ViewController`. |
| 71 | + |
| 72 | +1. Add the following code to initialize your composite components for a chat. Replace `<USER_ID>` with user identifier. Replace `<USER_ACCESS_TOKEN>` with your access token. Replace `<ENDPOINT_URL>` with your endpoint URL. Replace `<THREAD_ID>` with your chat thread ID. Replace `<DISPLAY_NAME>` with your name. (The string length limit for `<DISPLAY_NAME>` is 256 characters). |
| 73 | + |
| 74 | + ```swift |
| 75 | + import UIKit |
| 76 | + import AzureCommunicationCommon |
| 77 | + import AzureCommunicationUIChat |
| 78 | + |
| 79 | + class ViewController: UIViewController { |
| 80 | + var chatAdapter: ChatAdapter? |
| 81 | + |
| 82 | + override func viewDidLoad() { |
| 83 | + super.viewDidLoad() |
| 84 | + |
| 85 | + let button = UIButton() |
| 86 | + button.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0) |
| 87 | + button.layer.cornerRadius = 10 |
| 88 | + button.backgroundColor = .systemBlue |
| 89 | + button.setTitle("Start Experience", for: .normal) |
| 90 | + button.addTarget(self, action: #selector(startChatComposite), for: .touchUpInside) |
| 91 | + |
| 92 | + button.translatesAutoresizingMaskIntoConstraints = false |
| 93 | + self.view.addSubview(button) |
| 94 | + button.widthAnchor.constraint(equalToConstant: 200).isActive = true |
| 95 | + button.heightAnchor.constraint(equalToConstant: 50).isActive = true |
| 96 | + button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true |
| 97 | + button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true |
| 98 | + } |
| 99 | + |
| 100 | + @objc private func startChatComposite() { |
| 101 | + let communicationIdentifier = CommunicationUserIdentifier("<USER_ID>") |
| 102 | + guard let communicationTokenCredential = try? CommunicationTokenCredential( |
| 103 | + token: "<USER_ACCESS_TOKEN>") else { |
| 104 | + return |
| 105 | + } |
| 106 | + |
| 107 | + self.chatAdapter = ChatAdapter( |
| 108 | + endpoint: "<ENDPOINT_URL>", identifier: communicationIdentifier, |
| 109 | + credential: communicationTokenCredential, |
| 110 | + threadId: "<THREAD_ID>", |
| 111 | + displayName: "<DISPLAY_NAME>") |
| 112 | + |
| 113 | + Task { @MainActor in |
| 114 | + guard let chatAdapter = self.chatAdapter else { |
| 115 | + return |
| 116 | + } |
| 117 | + try await chatAdapter.connect() |
| 118 | + let chatCompositeViewController = ChatCompositeViewController( |
| 119 | + with: chatAdapter) |
| 120 | + |
| 121 | + let closeItem = UIBarButtonItem( |
| 122 | + barButtonSystemItem: .close, |
| 123 | + target: nil, |
| 124 | + action: #selector(self.onBackBtnPressed)) |
| 125 | + chatCompositeViewController.title = "Chat" |
| 126 | + chatCompositeViewController.navigationItem.leftBarButtonItem = closeItem |
| 127 | + |
| 128 | + let navController = UINavigationController(rootViewController: chatCompositeViewController) |
| 129 | + navController.modalPresentationStyle = .fullScreen |
| 130 | + |
| 131 | + self.present(navController, animated: true, completion: nil) |
| 132 | + } |
| 133 | + } |
| 134 | + |
| 135 | + @objc func onBackBtnPressed() { |
| 136 | + self.dismiss(animated: true, completion: nil) |
| 137 | + Task { @MainActor in |
| 138 | + self.chatAdapter?.disconnect(completionHandler: { [weak self] result in |
| 139 | + switch result { |
| 140 | + case .success: |
| 141 | + self?.chatAdapter = nil |
| 142 | + case .failure(let error): |
| 143 | + print("disconnect error \(error)") |
| 144 | + } |
| 145 | + }) |
| 146 | + } |
| 147 | + } |
| 148 | + } |
| 149 | +
|
| 150 | + ``` |
| 151 | + |
| 152 | +## Run the code |
| 153 | + |
| 154 | +To build and run your app on the iOS simulator, select **Product** > **Run** or use the (⌘-R) keyboard shortcut. Then, try out the chat experience on the simulator: |
| 155 | + |
| 156 | +1. Select **Start Experience**. |
| 157 | +2. The chat client will join the chat thread and you can start typing and sending messages. |
| 158 | +3. If the client isn't able to join the thread, and you see `chatJoin` failed errors, verify that your user's access token is valid and that the user has been added to the chat thread by REST API call, or by using the az command line interface. |
| 159 | + |
| 160 | +:::image type="content" source="../../media/quick-start-chat-composite-running-ios.gif" alt-text="GIF animation that demonstrates the final look and feel of the quickstart iOS app."::: |
0 commit comments