Microsoft 365 Community Community Demos, 21 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Get started with UI Library for Azure Communication Services

Description

In this 13-minute developer/designer focused demo – Alex Kwan shows viewers actual UX controls not just APIs, developers and UI designers can use to easily create a UI that integrates ACS capabilities. Learn about ACS capabilities including Teams/Microsoft 365 interoperability, product availability, UI Library Design Kit, and the low/no code sample app builder. The UI Library Design Kit has pre-built open-source production ready composites, components and UX guidance enabling you to build secure, connected modern communications user experiences in a short time. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 21, 2022.

Demo Presenter
• Alex Kwan (Microsoft)

Supporting materials
• Documentation - UI Library Overview | aka.ms/acsuilibrary
• Tool - ACS UI Library Design Kit | aka.ms/acsdesignkit
• Documentation – Samples | https://docs.microsoft.com/azure/communication-services/samples/overview
• Article - Microsoft Build 2022: Azure Communication Services updates to build faster and reach further | https://techcommunity.microsoft.com/t5/azure-communication-services/microsoft-build-2022-azure-communication-services-updates-to/ba-p/3416337
• Article - UI Library Design Kit | https://techcommunity.microsoft.com/t5/azure-communication-services/ui-library-design-kit/ba-p/3283411
• Repo – Azure Communication Services - UI Library | https://azure.github.io/communication-ui-library/?path=/story/overview--page
• Tool – Sample Builder | https://portal.azure.com/#view/Microsoft_Azure_VirtualVisitsBuilder/SampleBuilder.ReactView

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hello thanks for joining today's session, everyone, uh my name- is alex kwan, I'm here to talk to you about the azure communication services. Ui library, I'm covering for david, uh he's really good at these types of presentations, but as an engineering manager working in this kind of space, I should be able to talk about it as well. So that's what I'm here to do.

A

So, what is azure communication services before we even go into a concept of what a ui library would be for it. So azure communication services is an azure service to empower developers to build communication experiences.

A

That's all the name as well, but what it's really doing is taking the communications infrastructure uh that powers, skype and teams and making it available through azure. You can also imagine just that by itself is an amazing product, but when you consider the other offerings within azure and m365, it starts to let the mind run with uh with a wide variety of scenarios uh that are possible all right.

A

So uh we just wanted to visibly enumerate through some of the the big pieces that we work through so voice and video calling telephony uh sms and just recently, we've been able to bring email into public preview as well.

A

So, in addition to all these core capabilities, how we communicate uh one massive perk with working with azure communication services is our ability to interrupt with teams or m35 at a larger scope.

A

So that means that you can take an end user that may be on their own type of client, such as you see on the left, that's m365 or ad authenticated and be able to chat with someone who, for all intents and purposes, could be using the exact same client but they're actually able to use the team's client, which is actually a very interesting scenario across a wide range of domains.

A

um Some of these obviously being telehealth a patient being able to get a link through a text to go, join a call that their their physician is now ready to speak to them.

A

Right um in education, teachers be able to host classes where the teachers on teams and the students may be on a client that looks like it's part of their lms, so they feel like they're just within their school system, but in actual fact that teachers using microsoft technology such as teams, um you can imagine a webinar where there's a bunch of people just watching some video off of a website, but the actual presenter is in teams, and so the presenter is able to use all the tools that they're used to in order to create a great performance and even going even further out.

A

Imagine just connecting end users with support staff. So, if you're launching something and a lot of people have questions, and you want to be able to create a great customer service loop having people be able to send stuff and then having other people using teams to to answer through calls or chats or other modalities is all possible with azure communication services.

A

Ultimately, though, this isn't the microsoft experience that you're getting from us. It's something that you're building yourself and so it means bringing in your own identity. It can be an m55 identity, but it could be something else right. uh I shudder the fact whenever I log on to a new website- and they make me a new account, make me like for some type of new account. So if you already have accounts with identity set up, you can use those along with azure communication services. We make zero assumptions about customers already being in m365.

A

We are creating a client-side offering offer client-side offerings across a number of platforms such as web desktop and mobile. So on the website, specifically, we support chrome, safari and edge. Firefox is in the backlog and that's specifically for calling and then finally the look and feel so you're creating this client side. I experience yourself. You should be able to build the complete from scratch or better yet use components that somehow we can provide you to help build out your communications experience cool. So when building communication experience, it's hard to imagine something without ui.

A

uh The ui library is a set of components that many of our developers will often use in piecing together. A calling or chat experience and some of the pieces that we want to highlight are customizability right. Can I change how it looks to match my overall app experience? Accessibility.

A

Am I going to have a fully accessible website, but then, once they start going inside this calling experience it's going to have a subpar experience knows we actually work very, very hard on this and work with a number of accessibility teams across microsoft in order to ensure a really great product that people can fit into their own experiences uh localizable.

A

So we've built out our components. We know what strings go into various spots and we've actually been able to use the localization systems that we use within microsoft to create a set of locales that customers can use for a wide variety of their customers. Speaking a multitude of different languages and finally uh responsive.

A

It's got to look good, whether you're on desktop tablet or phone in a variety of landscape and portrait configurations. uh Today, it's nga on web and will soon be ga on native mobile on ios and android. It's important also that designers have the building blocks to craft these experiences.

A

So internally we built a design kit using figma that helps my team, build out these types of ui components that we're able to share with you today, and so it makes sense that we would actually want to be able to share this design kit with our customers as well, so their designers can build with the exact same tools that we use to help drive some of our amazing experiences across microsoft, uh so maybe I'll just pop out of here and show really quickly the design kit.

A

So this is something that our designer alex pereira has been working on and I can go a little bit more in depth into it later, but I believe this is what you see when you go to acs design kit ak dot. Ms acs design kit, all right, we'll continue on from here. So what is the ui library?

A

It's almost easier to try and drive the value with pictures. So here is a standard and chat type of experience that we can piece together today. You can imagine this major portion on the left side is around this video gallery. Each video gallery represents participants via tiles, so we can see. Carlos here is a remote tile.

A

It's coming in to us, whereas we can see what we are pushing out on our outbound stream in our little preview tile, every single tile, where someone's camera is not being shown, we're using ui that we've seen traditionally in teams such as like personas, uh where it shows the participants initials below the video gallery. We have our control bar. This is a with a bunch of controls, you're probably used to such as like turning on and off your camera meeting and unmeeting and being able to share your screen and then to the right side.

A

We have a message thread where all your messages will show up in real time, as well as an ability to send new messages. So these are the components that people tend to gravitate towards when trying to describe like when people kind of start, to convey to us what they think a ui library is.

A

So what it really is it's uh so this ui library is open source. It's a set of white label, composites and components, they're designed to help get you to those core calling and chat experiences extremely quickly, and that includes team interoperability and, as I mentioned before, it's available on web, the library is based in react, as well as on native on both ios and android.

A

But why should you really use the ui library? Because I can create a button? That's not a problem, but can you create a button that is synced to the underlying logic of the call and guarantee that 100 of the time that it's always going to work?

A

Imagine your microphone looks like you're, muted and you're, not which is another source of nightmare fuel for myself.

A

So that's an area where you would imagine like hey, can't a team just build this, and I can use it right. Why do I have to focus so much on customization? If I'm probably getting the same, customization needs as everyone else accessibility.

A

I, like everyone, can roll out their own type of accessibility, but wouldn't you rather want the microsoft level of accessibility there, where we hold ourselves to extremely high standards, same thing with localization like I'm, going to use english or I'm going to use french, I'm sure other customers are as well and being able to leverage that has so much value and then responsiveness and fast feature adoption. Does it fit just right and can I start using components that are already using new features and azure communication services that I really want to use today?

A

So just to sum up everything we can build custom communication experiences. You can use your m25 identity as an example to power up some of those types of components. You can interrupt with teams joining meetings, webinars being able to call people and chat with people in their teams.

A

Client from your non-teams client, you can customize how you want to look and to be honest, if you want to look like teams all power to you and you can use all these types of functionality in your custom client that you're used to in teams such as, like our typical calling chat and file sharing today, all right, one other minor thing. If that felt like a lot of coding, we do have this sample app builder.

A

That allows people to compile, in a bunch of these components together to create a virtual visit scenario where you can quickly hook it into your types of virtual business flows that you can try out today, well and demos, but I'm going to quickly check the chat. First. Are we out of time for demos.

B

So we do have like three minutes before we need to close so, and demos are always good. If you can, if you have something to show for.

A

Sure, let's go fast, so this is a quick demo of our documentation. So if anyone's been building ui in the last several years is this concept of storybook storybook is really cool because you can actually get to play around and see these various different types of components and how they work together. I talked about the design kit, but what happens when you really hit that duplicate button duplicate button?

A

Well, I clicked it for you folks, so it will actually create an instance of the design kit that you can play around with, as well as creating a really great tool set for designers, so they can piece together, something amazing for you. Now you can take those types of components that you may compile here and you can actually throw them together, and here are some of our ui components that we have and just to show you that this is a sorry.

A

First of all, this sample is coming from our js quick starts, which we can find a link for people are interested, but it's all kind of hooked into the really cool stuff that you're used to when working with like local javascript codes, such as like hot reloading. So maybe I'm in a call with vesa, oh my gosh and myself and michael. So when I hit save here, you can see here that it automatically scales you get that type of video gallery scaling for free by working with the ui library and azure communication services.

A

Now in our storybook, we also have cool things where we put like little sample apps in here, where you just pass. In your token, it all just kind of works, so I'm actually just going to join this call right now. So my videos off here- that's good. So I can turn my video on in here. So this is kind of like a teams experience. You would like to know that you're able to see what you may look like before you actually join the call.

A

So hello, um I'm gonna start and I'm gonna be an anonymous user. uh In this meeting, assuming the stars line, oh cool, I'm here all right. Well, that's enough of that and then finally, the sample app builder that I just talked about. So if you really didn't want to write any code at all, this is this type of experience that you could be using where you could like integrate with your microsoft bookings say if you wanted chat, enabled or disabled what not uh you can change.

A

I think I just have to put in some types here, so let it get. Let me go to the next step, but you can like change your themes, your company name and then here's what it could look like on the various screens with your customizations, so very cool, lower ish code and no code solutions uh that folks can try out with azure communication services.

A

All right, um that's all I have I'm gonna, be reading the chat later, I'm sure there's tons of questions.

B

Really cool stuff. Thank you alex on that. One awesome awesome awesome that is so cool that it's up to that level, that the ux elements are provided for the people who are integrating the azure communication services, not just an api but actual controls, so really really cool stuff.