>> Learn how to get started with
Azure Communication Services and build
a chat app in this first of two episodes of Azure Tips and Tricks.
Building applications that use communication features like chat,
SMS, and voice calls can be hard.
Azure Communication Services makes it easier by
providing APIs that provide capabilities like chat.
This video is the first of a series of two and
explains how to get started with Azure Communication Services.
We'll start by creating
a new communication services resource
in the Azure portal. Here it is.
First, I'll select a resource group,
and now, I'll fill in a name like this one. That's it.
Now, I can create it. There we go.
I'll skip to when it is done.
Here it is, an Azure Communication Services resource.
With this, I can build apps that can chat, send,
and receive SMS, do voice over IP calls and more.
To use the APIs for these services,
I need the details from here,
the endpoint and connection string. Let's create an app.
I've already created an ASP.NET core web app in Visual Studio,
and I'll walk you through what I've done.
First, I created a standard ASP.NET core MVC app,
which is what you see here.
Next, I added two services with
interfaces: a ChatService and an AccessTokenService.
This is the ChatService.
Here in the constructor,
it gets an AccessTokenService,
which we'll see in a bit,
and the endpoint of the Azure Communication Service.
It uses those to first get
an AccessToken from the AccessTokenService,
which creates a communication credential,
which we use to create a ChatClient,
and ultimately, a chatThreadClient,
which we use to send and receive chat messages.
This ChatClient and the other classes
come from the communication services SDK,
which I've added as NuGet packages
to the application. Here they are.
An Administration one for getting
the AccessToken and a ChatService package.
Now, I inject the services into the app,
in the startup class,
in the configure services method here.
Here, I pass the service details like
the end point and
connection string of the Azure communications service,
which I keep in my appsettings.json file here.
Remember that you can find these in
the keys menu of the communication service in the Azure portal.
Let's go back to the ChatService.
With all of this,
I issue a new AccessToken to get access to
the communication service in the AccessTokenService here.
Once I'm authenticated and have created the chatThreadClient,
I sent the first message to
the chatThread with the SendMessage method,
the app acts like a bot
telling the user to provide a phone number.
Now let's see the UI.
I showed a chat window in the Index view here.
In here, there's a text box and
a button that the user can use to send messages,
and there is a View components that I load, that is this one.
This loops over the chat messages
that are in the thread and displays them,
and it gets those messages in the ChatViewComponent class here.
It uses the GetMessages method of the ChatService class.
This gets the latest messages from the chatThread,
and checks if the message contains a phone number.
If it does, it tells the user.
If it doesn't, it asks the user for a valid number.
Those messages go into the chatTread,
and again, get displayed in the ViewComponent.
Let's run this and see what it does.
Here it is, and it has sent
the first message asking me for a phone number. Let's see.
No. This gets checked as not a valid phone number,
so the app asks me again.
All right. Now I'll give it my number. That's it.
The app recognizes it, and tells me.
This simple example shows how you can easily use
the Azure Communication Services SDK into add chat in your app.
Go and check it out.