You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/communication-services/quickstarts/ui-library/get-started-chat-ui-library.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
-
title: Quickstart - Integrate chat experiences in your app by using UI Library
2
+
title: 'Quickstart: Integrate chat experiences in your app by using UI Library'
3
3
titleSuffix: An Azure Communication Services quickstart
4
-
description: Get started with Azure Communication Services UI Library composites to add Chat communication experiences to your applications.
4
+
description: Get started with Azure Communication Services UI Library composites to add chat communication experiences to your applications.
5
5
author: dhiraj
6
6
ms.author: jorgegarc
7
7
ms.date: 11/29/2022
@@ -15,7 +15,7 @@ ms.custom: mode-other
15
15
16
16
Get started with Azure Communication Services UI Library to quickly integrate communication experiences into your applications. In this quickstart, learn how to integrate UI Library chat composites into an application and set up the experience for your app users.
17
17
18
-
Communication Services UI Library renders a full chat experience right in your application. It takes care of connecting to Azure Communication Services chat services, and updates participant's presence automatically. As a developer, you need to worry about where in your app's user experience you want the chat experience to launch and only create the Azure Communication Services resources as required.
18
+
Azure Communication Services UI Library renders a full chat experience right in your application. It takes care of connecting to Azure Communication Services chat services and updates a participant's presence automatically. As a developer, you need to decide about where in your app's user experience you want the chat experience to start and create only the Azure Communication Services resources as required.
19
19
20
20
::: zone pivot="platform-web"
21
21
@@ -37,7 +37,7 @@ Communication Services UI Library renders a full chat experience right in your a
37
37
38
38
## Clean up resources
39
39
40
-
If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group.
40
+
If you want to clean up and remove an Azure Communication Services subscription, you can delete the resource or resource group.
41
41
42
42
Deleting the resource group also deletes any other resources associated with it.
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-chat) in the opensource Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
11
+
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-chat) in the open-source Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
12
12
13
13
## Prerequisites
14
14
15
15
- An Azure account and an active Azure subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
16
16
- An OS running [Android Studio](https://developer.android.com/studio).
17
-
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md), note the endpoint URL.
17
+
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md). Note the endpoint URL.
18
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) with above user added to it.
20
-
19
+
- An Azure Communication Services [chat thread](../../../chat/get-started.md) with the user from the previous step added to it.
21
20
22
21
## Set up the project
23
22
24
23
Complete the following sections to set up the quickstart project.
25
24
26
25
### Create a new Android project
27
26
28
-
In Android Studio, create a new project:
27
+
In Android Studio, create a new project.
29
28
30
-
1.In the **File** menu, select **New** > **New Project**.
29
+
1.On the **File** menu, select **New** > **New Project**.
31
30
32
-
1.In**New Project**, select the **Empty Activity** project template.
31
+
1.On**New Project**, select the **Empty Activity** project template.
33
32
34
33
:::image type="content" source="../../media/composite-android-new-project.png" alt-text="Screenshot that shows the New Project dialog in Android Studio with Empty Activity selected.":::
35
34
36
35
1. Select **Next**.
37
36
38
-
1.In**Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 23: Android 6.0 (Marshmallow)** or later.
37
+
1.On**Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 23: Android 6.0 (Marshmallow)** or later.
39
38
40
39
1. Select **Finish**.
41
40
@@ -59,11 +58,11 @@ dependencies {
59
58
60
59
### Add Maven repositories
61
60
62
-
The Azure package repository is required to integrate the library:
61
+
The Azure package repository is required to integrate the library.
63
62
64
63
To add the repository:
65
64
66
-
1. In your project Gradle scripts, ensure that the following repositories are added. For Android Studio (2020.\*), `repositories` is in `settings.gradle`, under `dependencyResolutionManagement(Gradle version 6.8 or greater)`. For earlier versions of Android Studio (4.\*), `repositories` is in the project-level `build.gradle`, under `allprojects{}`.
65
+
1. In your project Gradle scripts, ensure that the following repositories are added. For Android Studio (2020.\*), `repositories` is in `settings.gradle`, under `dependencyResolutionManagement(Gradle version 6.8 or greater)`. For earlier versions of Android Studio (4.\*), `repositories` is in the project-level `build.gradle`, under `allprojects{}`.
67
66
68
67
```groovy
69
68
// dependencyResolutionManagement
@@ -110,7 +109,7 @@ To initialize the composite:
110
109
111
110
1. Go to `MainActivity`.
112
111
113
-
1. Add the following code to initialize your composite components for calling. Replace the string values for properties (kotlin) or functions (java) for `endpoint`, `acsIdentity`, `displayName`, `accessToken` and `ThreadId`. Replace `endpoint` with the URL for your resource as provided by Azure Communication Services. Replace `acsIdentity` and `accessToken` with the values provided by Azure Communication Services when you created the access token and use a relevant displayName. Replace `ThreadId` with the value returned when you created the thread. Remember to add the user to the thread via REST API call, or the az commandline interface client before you try to run the quick start sample or the client will be denied access to join the thread.
112
+
1. Add the following code to initialize your composite components for calling. Replace the string values for properties (`kotlin`) or functions (`java`) for `endpoint`, `acsIdentity`, `displayName`, `accessToken`, and `ThreadId`. Replace `endpoint` with the URL for your resource as provided by Azure Communication Services. Replace `acsIdentity` and `accessToken` with the values provided by Azure Communication Services when you created the access token, and use a relevant `displayName`. Replace `ThreadId` with the value returned when you created the thread. Add the user to the thread via REST API call or the az command-line interface client before you try to run the quickstart sample. Otherwise, the client is denied access to join the thread.
114
113
115
114
#### [Kotlin](#tab/kotlin)
116
115
@@ -335,10 +334,10 @@ public class MainActivity extends AppCompatActivity {
335
334
336
335
## Run the code
337
336
338
-
In Android Studio, build and start the application:
337
+
In Android Studio, build and start the application.
339
338
340
339
1. Select **Start Experience**.
341
-
1. The chat client will join the chat thread and you can start typing and sending messages
342
-
1. If the client is not 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` commandline interface.
340
+
1. The chat client joins the chat thread, and you can start typing and sending messages.
341
+
1. If the client can't join the thread and you see `chatJoin` failed errors, verify that your user's access token is valid and that the user was added to the chat thread by REST API call or by using the `az` command-line interface.
343
342
344
343
:::image type="content" source="../../media/quickstart-chat.gif" alt-text="GIF animation that shows an example of how the project runs on an Android device.":::
Get the sample iOS application for this [quickstart](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-chat) in the opensource Azure Communication Services [UI Library for iOS](https://github.com/Azure/communication-ui-library-ios).
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
12
13
13
## Prerequisites
14
14
15
15
- An Azure account and an active Azure subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
16
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.
17
+
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md). Note the endpoint URL.
18
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.
19
+
- An Azure Communication Services [chat thread](../../../chat/get-started.md). Add the user you created in the previous step to this chat thread.
20
20
21
21
## Set up the project
22
22
23
23
Complete the following sections to set up the quickstart project.
24
24
25
25
### Create a new Xcode project
26
26
27
-
In Xcode, create a new project:
27
+
In Xcode, create a new project.
28
28
29
-
1.In the **File** menu, select **New** > **Project**.
29
+
1.On the **File** menu, select **New** > **Project**.
30
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.
31
+
1.On**Choose a template for your new project**, select the **iOS** platform and select the **App** application template. The quickstart uses the UIKit storyboards.
32
32
33
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
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.
35
+
1.On**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
36
37
37
:::image type="content" source="../../media/xcode-new-project-details.png" alt-text="Screenshot that shows setting new project options in Xcode.":::
38
38
@@ -69,7 +69,7 @@ To initialize the composite:
69
69
70
70
1. Go to `ViewController`.
71
71
72
-
2. 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).
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
73
74
74
```swift
75
75
import UIKit
@@ -149,14 +149,14 @@ To initialize the composite:
149
149
150
150
```
151
151
152
-
3. If you choose to put chat view in a frame that is smaller than the screen size, the recommended minimum width is250and the recommended minimum height is300.
152
+
1. If you choose to put chat view in a frame that's smaller than the screen size, we recommend the minimum width of 250 and the minimum height of 300.
153
153
154
154
## Run the code
155
155
156
-
To build and run your app on the iOS simulator, select**Product**>**Run**oruse the (⌘-R) keyboard shortcut. Then, try out the chat experience on the simulator:
156
+
To build and run your app on the iOS simulator, select **Product** > **Run**. You can also use the (⌘-R) keyboard shortcut. Then, try out the chat experience on the simulator.
157
157
158
158
1. Select **Start Experience**.
159
-
2. The chat client will join the chat thread and you can start typing and sending messages.
160
-
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 RESTAPI call,or by using the az commandline interface.
159
+
1. The chat client joins the chat thread, and you can start typing and sending messages.
160
+
1. If the client can't join the thread and you see `chatJoin` failed errors, verify that your user's access token is valid and that the user was added to the chat thread by REST API call or by using the az command-line interface.
161
161
162
162
:::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