Skip to content

Commit 581a38c

Browse files
ktoliverktoliver
authored
Merge pull request #289418 from ShawnJackson/get-started-calling-with-chat
[AQ] edit pass: get-started-calling-with-chat
2 parents eabf1ab + a229eb5 commit 581a38c

File tree

3 files changed

+66
-73
lines changed

3 files changed

+66
-73
lines changed

‎articles/communication-services/quickstarts/ui-library/get-started-calling-with-chat.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Add calling and chat functionality
33
titleSuffix: An Azure Communication Services how-to guide
4-
description: Add calling and chat functionality using the Azure Communication Services UI Library.
4+
description: Add calling and chat functionality by using the Azure Communication Services UI Library.
55
author: pavelprystinka
66

77
ms.author: pprystinka
@@ -12,12 +12,12 @@ ms.date: 10/28/2024
1212
ms.custom: template-how-to
1313
zone_pivot_groups: acs-plat-ios-android
1414

15-
#Customer intent: As a developer, I want to add calling and chat functionality to my App.
15+
#Customer intent: As a developer, I want to add calling and chat functionality to my app.
1616
---
1717

18-
# Integrate Calling and Chat UI Libraries
18+
# Integrate calling and chat by using the UI Library
1919

20-
## Set up the feature
20+
In this article, you learn how to integrate calling and chat functionality in your Android or iOS app by using the Azure Communication Services UI Library.
2121

2222
::: zone pivot="platform-android"
2323
[!INCLUDE [Integrate Calling with Chat in the Android UI Library](./includes/get-started-calling-with-chat/android.md)]
@@ -27,20 +27,18 @@ zone_pivot_groups: acs-plat-ios-android
2727
[!INCLUDE [Integrate Calling with Chat in the iOS UI Library](./includes/get-started-calling-with-chat/ios.md)]
2828
::: zone-end
2929

30-
3130
## Run the code
3231

33-
To build and run your app on the device.
32+
Run the code to build and run your app on the device.
3433

3534
### More features
3635

37-
The list of [use cases](../../concepts/ui-library/ui-library-use-cases.md?branch=main&pivots=platform-mobile) has detailed information about more features.
36+
The [list of use cases](../../concepts/ui-library/ui-library-use-cases.md?branch=main&pivots=platform-mobile) has detailed information about more features.
3837

3938
## Add notifications to your mobile app
4039

4140
Azure Communication Services integrates with [Azure Event Grid](../../../event-grid/overview.md) and [Azure Notification Hubs](../../../notification-hubs/notification-hubs-push-notification-overview.md), so you can [add push notifications](../../concepts/notifications.md) to your apps in Azure. You can use push notifications to send information from your application to users' mobile devices. A push notification can show a dialog, play a sound, or display an incoming call UI.
4241

43-
44-
## Next steps
42+
## Related content
4543

4644
- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)

‎articles/communication-services/quickstarts/ui-library/includes/get-started-calling-with-chat/android.md

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,37 @@ ms.service: azure-communication-services
1313
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md).
1414
- An Azure Communication Services [access token](../../../identity/quick-create-identity.md).
1515

16-
## A complete sample
16+
## Get a complete sample
1717

18-
You can get a [complete sample project](https://github.com/Azure-Samples/communication-services-calling-ui-with-chat-android) from the GitHub.
18+
You can get a [complete sample project](https://github.com/Azure-Samples/communication-services-calling-ui-with-chat-android) from GitHub.
1919

20-
:::image type="content" source="../../media/call-chat-android-experience.gif" alt-text="animation to showcase the experience on Android using call and chat in the same app.":::
20+
:::image type="content" source="../../media/call-chat-android-experience.gif" alt-text="Animation to showcase the experience on Android using call and chat in the same app.":::
2121

2222
## Set up the project
2323

24-
Complete the following sections to set up the quickstart project.
25-
26-
### Create a new Android project
27-
2824
In Android Studio, create a new project:
2925

30-
1. In the **File** menu, select **New** > **New Project**.
26+
1. On the **File** menu, select **New** > **New Project**.
3127

3228
1. In **New Project**, select the **Empty Activity** project template.
3329

3430
:::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.":::
3531

3632
1. Select **Next**.
3733

38-
1. In **Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 26: Android 8.0 (Oreo)** or later.
34+
1. In **Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java** or **Kotlin**. For the minimum SDK, select **API 26: Android 8.0 (Oreo)** or later.
3935

4036
1. Select **Finish**.
4137

42-
:::image type="content" source="../../media/composite-android-new-project-finish.png" alt-text="Screenshot that shows new project options and the Finish button selected.":::
38+
:::image type="content" source="../../media/composite-android-new-project-finish.png" alt-text="Screenshot that shows new project options and the Finish button.":::
4339

4440
## Install the packages
4541

4642
Complete the following sections to install the required application packages.
4743

4844
### Add a dependency
4945

50-
In your app-level *UILibraryQuickStart/app/build.gradle* file (in the app folder), add the following dependency:
46+
In your app-level *UILibraryQuickStart/app/build.gradle* file, add the following dependency:
5147

5248
```groovy
5349
dependencies {
@@ -57,7 +53,8 @@ dependencies {
5753
...
5854
}
5955
```
60-
Add META-INF exclusion to the *UILibraryQuickStart/app/build.gradle* `android` section
56+
57+
Add a `META-INF` exclusion to the *UILibraryQuickStart/app/build.gradle* `android` section:
6158

6259
```groovy
6360
packaging {
@@ -67,9 +64,9 @@ packaging {
6764

6865
### Add Maven repositories
6966

70-
Two Maven repositories are required to integrate the library:
67+
You need two Maven repositories to integrate the library:
7168

72-
- MavenCentral
69+
- The `mavenCentral` repository
7370
- The Azure package repository
7471

7572
```groovy
@@ -83,15 +80,13 @@ Two Maven repositories are required to integrate the library:
8380
}
8481
```
8582
83+
## Connect to the Teams meeting with calling and chat
8684
87-
## Connect to the Teams Meeting with Calling and Chat
85+
You use `CallComposite` to connect to the call. After a user is admitted to the call, `CallComposite` notifies you by changing the status to `connected`. Then the user can be connected to the chat thread.
8886
89-
- First we will use CallComposite to connect to the call
90-
- Once user is admitted to the call, CallComposite will notify us by changing status to `connected`
91-
- Then user can be connected to the chat thread
92-
- When user clicks `Chat button`, a custom button added to the CallComposite, CallComposite will be minimized and Chat is displayed
87+
When the user selects the **Chat** button, a custom button is added to `CallComposite`. `CallComposite` is minimized, and **Chat** appears in Teams.
9388
94-
## Add button and chat container view to Activity_main.xml
89+
## Add a button and chat container view to Activity_main.xml
9590
9691
In the *app/src/main/res/layout/activity_main.xml* layout file, add the following code to create a button to start the composite:
9792
@@ -134,27 +129,27 @@ In the *app/src/main/res/layout/activity_main.xml* layout file, add the followin
134129
</androidx.constraintlayout.widget.ConstraintLayout>
135130
```
136131

137-
## Download a Chat Icon
132+
## Download a Chat icon
138133

139-
- Download an icon from [here](https://github.com/microsoft/fluentui-system-icons/blob/master/android/library/src/main/res/drawable/ic_fluent_chat_24_regular.xml).
140-
- Save it to the *UILibraryQuickStart/app/src/main/res/drawable*
141-
- Open it and change `android:fillColor` to the `@color/white`
134+
1. Download an icon from the [GitHub repository](https://github.com/microsoft/fluentui-system-icons/blob/master/android/library/src/main/res/drawable/ic_fluent_chat_24_regular.xml).
135+
1. Save the icon to *UILibraryQuickStart/app/src/main/res/drawable*.
136+
1. Open the icon and change `android:fillColor` to `@color/white`.
142137

143-
## Initialize the composites
138+
## Initialize the composite
144139

145-
To initialize the Call composite:
140+
To initialize the call composite, go to `MainActivity` and update connection settings:
146141

147-
- Go to `MainActivity` and update connection settings:
148-
- Replace `TEAM_MEETING_LINK` with the Teams meeting link.
149-
- Replace `ACS_ENDPOINT` with your ACS resource's endpoint.
150-
- Replace `DISPLAY_NAME` with your name.
151-
- Replace `USER_ID` with ACS user ID.
152-
- Replace `USER_ACCESS_TOKEN` with your token.
142+
- Replace `TEAM_MEETING_LINK` with the Teams meeting link.
143+
- Replace `ACS_ENDPOINT` with your Azure Communication Services resource's endpoint.
144+
- Replace `DISPLAY_NAME` with your name.
145+
- Replace `USER_ID` with your Azure Communication Services user ID.
146+
- Replace `USER_ACCESS_TOKEN` with your token.
153147

154-
### Get a Teams meeting chat thread for a Communication Services user
155-
The Teams meeting details can be retrieved using Graph APIs, detailed in [Graph documentation]()(/graph/api/onlinemeeting-createorget). The Communication Services Calling SDK accepts a full Teams meeting link or a meeting ID. They're returned as part of the `onlineMeeting` resource, accessible under the [joinWebUrl](/graph/api/resources/onlineMeeting) property
148+
### Get a Teams meeting chat thread for an Azure Communication Services user
156149

157-
With the Graph APIs, you can also obtain the threadID. The response has a chatInfo object that contains the threadID.
150+
You can retrieve Teams meeting details by using Graph APIs, as described in the [Graph documentation](/graph/api/onlinemeeting-createorget). The Azure Communication Services Calling SDK accepts a full Teams meeting link or a meeting ID. They're returned as part of the `onlineMeeting` resource, which is accessible under the [joinWebUrl](/graph/api/resources/onlineMeeting) property.
151+
152+
With the Graph APIs, you can also obtain the `threadID` value. The response has a `chatInfo` object that contains the `threadID` value.
158153

159154
#### [Kotlin](#tab/kotlin)
160155

@@ -234,8 +229,8 @@ class MainActivity : AppCompatActivity() {
234229
.build()
235230

236231
callComposite.addOnCallStateChangedEventHandler { callState ->
237-
// When user is admitted to the the Teams meeting, call state becoms connected.
238-
// Only users admitted to the meeting, can connect the meeting's chat thread.
232+
// When a user is admitted to the Teams meeting, the call state becomes connected.
233+
// Only users admitted to the meeting can connect to the meeting's chat thread.
239234
if (callState.code == CallCompositeCallStateCode.CONNECTED) {
240235
connectChat()
241236
}
@@ -367,8 +362,8 @@ public class MainActivity extends AppCompatActivity {
367362
.build();
368363

369364
callComposite.addOnCallStateChangedEventHandler(callState -> {
370-
// When user is admitted to the the Teams meeting, call state becoms connected.
371-
// Only users admitted to the meeting, can connect the meeting's chat thread.
365+
// When a user is admitted to the Teams meeting, the call state becomes connected.
366+
// Only users admitted to the meeting can connect to the meeting's chat thread.
372367
if (callState.getCode() == CallCompositeCallStateCode.CONNECTED) {
373368
connectChat();
374369
}
@@ -419,4 +414,3 @@ public class MainActivity extends AppCompatActivity {
419414
}
420415
}
421416
```
422-

‎articles/communication-services/quickstarts/ui-library/includes/get-started-calling-with-chat/ios.md

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ ms.service: azure-communication-services
99
## Prerequisites
1010

1111
- An Azure account and an active Azure subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
12-
- 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.
12+
- 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.
1313
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md).
1414
- An Azure Communication Services [access token](../../../identity/quick-create-identity.md).
1515

16-
## A complete sample
16+
## Get a complete sample
1717

18-
You can get a [complete sample project](https://github.com/Azure-Samples/communication-services-calling-ui-with-chat-ios) from the GitHub.
18+
You can get a [complete sample project](https://github.com/Azure-Samples/communication-services-calling-ui-with-chat-ios) from GitHub.
1919

20-
:::image type="content" source="../../media/call-chat-ios-experience.gif" alt-text="animation to showcase the experience on iOS using call and chat in the same app.":::
20+
:::image type="content" source="../../media/call-chat-ios-experience.gif" alt-text="Animation to showcase the experience on iOS using call and chat in the same app.":::
2121

2222
## Set up the project
2323

@@ -27,7 +27,7 @@ Complete the following sections to set up the quickstart project.
2727

2828
In Xcode, create a new project:
2929

30-
1. In the **File** menu, select **New** > **Project**.
30+
1. On the **File** menu, select **New** > **Project**.
3131

3232
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. The quickstart doesn't create tests, so you can clear the **Include Tests** checkbox.
3333

@@ -39,7 +39,7 @@ In Xcode, create a new project:
3939

4040
### Install the package and dependencies
4141

42-
1. (Optional) For MacBook with M1, install, and enable [Rosetta](https://support.apple.com/HT211861) in Xcode.
42+
1. (Optional) For MacBook with M1, install and enable [Rosetta](https://support.apple.com/HT211861) in Xcode.
4343

4444
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.
4545

@@ -57,13 +57,13 @@ In Xcode, create a new project:
5757

5858
1. Run `pod install --repo-update`.
5959

60-
1. In Xcode, open the generated.xcworkspace* file.
60+
1. In Xcode, open the *generated.xcworkspace* file.
6161

6262
### Request access to device hardware
6363

64-
To access the device's hardware, including the microphone, and camera, update your app's information property list. Set the associated value to a string that's included in the dialog the system uses to request access from the user.
64+
To access the device's hardware, including the microphone and camera, update your app's information property list. Set the associated value to a string that's included in the dialog that the system uses to request access from the user.
6565
66-
1. Right-click the `Info.plist` entry of the project tree and select **Open As** > **Source Code**. Add the following lines to the top level `<dict>` section, and then save the file.
66+
1. Right-click the `Info.plist` entry of the project tree and select **Open As** > **Source Code**. Add the following lines to the top-level `<dict>` section, and then save the file.
6767
6868
```xml
6969
<key>NSCameraUsageDescription</key>
@@ -74,7 +74,7 @@ To access the device's hardware, including the microphone, and camera, update yo
7474
7575
Here's an example of the `Info.plist` source code in an Xcode file:
7676

77-
:::image type="content" source="../../media/xcode-info-plist-source-code.png" alt-text="Screenshot that shows an example of the info plist source code in an Xcode file.":::
77+
:::image type="content" source="../../media/xcode-info-plist-source-code.png" alt-text="Screenshot that shows example source code for the information property list in an Xcode file.":::
7878

7979
1. To verify that device permission requests are added correctly, select **Open As** > **Property List**. Check that the information property list looks similar to the following example:
8080

@@ -86,27 +86,28 @@ In the Xcode project, under **Build Settings**, set the **Enable Bitcode** optio
8686

8787
:::image type="content" source="../../media/xcode-bitcode-option.png" alt-text="Screenshot that shows the Build Settings option to turn off Bitcode.":::
8888

89-
### Download a Chat Icon
89+
### Download a Chat icon
9090

91-
- Download an icon from [here](https://github.com/microsoft/fluentui-system-icons/blob/master/assets/Chat/SVG/ic_fluent_chat_24_regular.svg).
92-
- Open downloaded file and change `fill` to the `fill="#FFFFFF"`.
93-
- In the Xcode go to Assets. Create a new image set and name it ic_fluent_chat_24_regular. Select downloaded file as universal icon.
91+
1. Download an icon from the [GitHub repository](https://github.com/microsoft/fluentui-system-icons/blob/master/assets/Chat/SVG/ic_fluent_chat_24_regular.svg).
92+
1. Open the downloaded file and change `fill` to `fill="#FFFFFF"`.
93+
1. In Xcode, go to **Assets**. Create a new image set and name it **ic_fluent_chat_24_regular**. Select the downloaded file as the universal icon.
9494

9595
## Initialize the composite
9696

97-
To initialize the composite:
97+
To initialize the composite, go to `ViewController` and update connection settings:
9898

99-
- Go to `ViewController` and update connection settings:
100-
- Replace `TEAM_MEETING_LINK` with the Teams meeting link.
101-
- Replace `ACS_ENDPOINT` with your ACS resource's endpoint.
102-
- Replace `DISPLAY_NAME` with your name.
103-
- Replace `USER_ID` with ACS user ID.
104-
- Replace `USER_ACCESS_TOKEN` with your token.
99+
- Replace `TEAM_MEETING_LINK` with the Teams meeting link.
100+
- Replace `ACS_ENDPOINT` with your Azure Communication Services resource's endpoint.
101+
- Replace `DISPLAY_NAME` with your name.
102+
- Replace `USER_ID` with your Azure Communication Services user ID.
103+
- Replace `USER_ACCESS_TOKEN` with your token.
105104
106-
### Get a Teams meeting chat thread for a Communication Services user
107-
The Teams meeting details can be retrieved using Graph APIs, detailed in [Graph documentation](/graph/api/onlinemeeting-createorget). The Communication Services Calling SDK accepts a full Teams meeting link or a meeting ID. They're returned as part of the `onlineMeeting` resource, accessible under the [joinWebUrl](/graph/api/resources/onlinemeeting) property
105+
### Get a Teams meeting chat thread for an Azure Communication Services user
106+
107+
You can retrieve Teams meeting details by using Graph APIs, as described in the [Graph documentation](/graph/api/onlinemeeting-createorget). The Azure Communication Services Calling SDK accepts a full Teams meeting link or a meeting ID. They're returned as part of the `onlineMeeting` resource, which is accessible under the [joinWebUrl](/graph/api/resources/onlineMeeting) property.
108+
109+
With the Graph APIs, you can also obtain the `threadID` value. The response has a `chatInfo` object that contains the `threadID` value.
108110

109-
With the Graph APIs, you can also obtain the threadID. The response has a chatInfo object that contains the threadID.
110111
```swift
111112
import UIKit
112113
import AzureCommunicationCalling

0 commit comments

Comments
 (0)