Snabb start: kom igång med grundläggande komponenter i UI FrameworkQuickstart: Get started with UI Framework Base Components

Viktigt

Funktioner som beskrivs i det här dokumentet finns för närvarande i privat för hands version.Functionality described on this document is currently in private preview. Privat för hands version innehåller åtkomst till SDK: er och dokumentation för testnings ändamål som ännu inte är tillgängliga offentligt.Private preview includes access to SDKs and documentation for testing purposes that are not yet available publicly. Ansök om att bli en tidig antagande genom att fylla i formuläret för för hands versions åtkomst till Azure Communication Services.Apply to become an early adopter by filling out the form for preview access to Azure Communication Services.

Kom igång med Azure Communication Services genom att använda UI-ramverket för att snabbt integrera kommunikations upplevelser i dina program.Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. I den här snabb starten får du lära dig hur du integrerar grundläggande komponenter i GRÄNSSNITTs ramverket i programmet för att bygga kommunikations upplevelser.In this quickstart, you'll learn how integrate UI Framework base components into your application to build communication experiences.

UI Framework-komponenter levereras i två varianter: Base och Composite.UI Framework components come in two flavors: Base and Composite.

  • Bas komponenter representerar diskreta kommunikations funktioner; de är de grundläggande Bygg stenarna som kan användas för att skapa komplexa kommunikations upplevelser.Base components represent discrete communication capabilities; they're the basic building blocks that can be used to build complex communication experiences.
  • Sammansatta komponenter är insikter om vanliga kommunikations scenarier som har skapats med bas komponenter som bygg stenar och paketerade för att enkelt integreras i program.Composite components are turn-key experiences for common communication scenarios that have been built using base components as building blocks and packaged to be easily integrated into applications.

FörutsättningarPrerequisites

KonfigureraSetting up

UI-ramverket kräver att en reagerar-miljö ska installeras.UI Framework requires a React environment to be setup. Nu ska vi göra det.Next we will do that. Om du redan har en reagerar-app kan du hoppa över det här avsnittet.If you already have a React App, you can skip this section.

Konfigurera appen reageraSet Up React App

Vi använder mallen Create-reagerar-app för den här snabb starten.We'll use the create-react-app template for this quickstart. Mer information finns i: Kom igång med reageraFor more information, see: Get Started with React


npx create-react-app my-app

cd my-app

I slutet av den här processen bör du ha ett fullständigt program i mappen my-app .At the end of this process, you should have a full application inside of the folder my-app. I den här snabb starten kommer vi att ändra filer i src mappen.For this quickstart, we'll be modifying files inside of the src folder.

Installera paketetInstall the package

Använd npm install kommandot för att installera Azure Communication Services som anropar SDK för Java Script.Use the npm install command to install the Azure Communication Services Calling SDK for JavaScript. Flytta den angivna tarball (privat förhands granskning) till katalogen My-app.Move the provided tarball (Private Preview) over to the my-app directory.


//For Private Preview install tarball

npm install --save ./{path for tarball}

I det här --save alternativet visas biblioteket som ett beroende i package.jsi filen.The --save option lists the library as a dependency in your package.json file.

Kör skapa reakta appRun Create React App

Låt oss testa installationen av att reagera på appen genom att köra:Let's test the Create React App installation by running:


npm run start   

Objekt modellObject model

Följande klasser och gränssnitt hanterar några av de viktigaste funktionerna i Azure Communication Services UI SDK:The following classes and interfaces handle some of the major features of the Azure Communication Services UI SDK:

NameName BeskrivningDescription
LeverantörProvider Fluent UI-provider som gör det möjligt för utvecklare att ändra underliggande komponenter i Fluent UIFluent UI provider that allows developers to modify underlying Fluent UI components
CallingProviderCallingProvider Anropar Provider för att instansiera ett anrop.Calling Provider to instantiate a call. Krävs för att lägga till extra komponenterRequired to add extra components
ChatProviderChatProvider Chat-providern för att instansiera en chatt-tråd.Chat Provider to instantiate a chat thread. Krävs för att lägga till extra komponenterRequired to add extra components
MediaGalleryMediaGallery Bas komponent som visar samtals deltagare och deras fjärranslutna video strömmarBase component that shows call participants and their remote video streams
MediaControlsMediaControls Bas komponent för att styra anrop, inklusive ljud av, video, dela skärmBase component to control call including mute, video, share screen
ChatThreadChatThread Bas komponent som återger en chatt med Skriv indikatorer, Läs kvitton osv.Base component that renders a chat thread with typing indicators, read receipts, etc.
SkickaSendBox Bas komponent som låter användaren skicka meddelanden som skickas till den anslutna trådenBase component that allows user to input messages that will be sent to the joined thread

Initiera anropande och chatt-providers med Azure Communication Services-autentiseringsuppgifterInitialize Calling and Chat Providers using Azure Communication Services credentials

Gå till src mappen i my-app och leta efter filen app.js .Go to the src folder inside of my-app and look for the file app.js. Här ska vi ta bort följande kod för att initiera våra leverantörer av samtal och chatt.Here we'll drop the following code to initialize our Calling and Chat providers. Dessa leverantörer ansvarar för att upprätthålla kontexten för samtals-och chatt upplevelser.These providers are responsible for maintaining the context of the call and chat experiences. Du kan välja vilken som ska användas beroende på vilken typ av kommunikations upplevelse som du skapar.You can choose which one to use depending on the type of communication experience you're building. Om det behövs kan du använda båda samtidigt.If needed, you can use both at the same time. För att initiera komponenterna behöver du en åtkomsttoken som hämtats från Azure Communication Services.To initialize the components, you'll need an access token retrieved from Azure Communication Services. Mer information om hur du hämtar åtkomsttoken finns i: skapa och hantera åtkomsttoken.For details on how to get access tokens, see: create and manage access tokens.

Anteckning

Komponenterna genererar inte åtkomsttoken, grupp-ID eller tråd-ID.The components don't generate access tokens, group IDs, or thread IDs. Dessa element kommer från tjänster som går igenom de rätta stegen för att generera dessa ID: n och skicka dem till klient programmet.These elements come from services that go through the proper steps to generate these IDs and pass them to the client application. Mer information finns i: klient server arkitektur.For more information, see: Client Server Architecture.

Exempel: chatt-providern förväntar sig att den userId associerade till den som token används för att initiera den redan är ansluten till den som threadId tillhandahålls.For Example: The Chat Provider expects that the userId associated to the token being used to initialize it has already been joined to the threadId being provided. Om token inte har anslutits till tråd-ID: t kommer chatt-providern att Miss sen.If the token hasn't been joined to the thread ID, then the Chat Provider will fail. Mer information om chatt finns i: komma igång med chattFor more information on chat, see: Getting Started with Chat

Vi använder ett Fluent UI-tema för att förbättra utseendet och känslan av programmet:We'll use a Fluent UI theme to enhance the look and feel of the application:

App.js


import {CallingProvider, ChatProvider} from "@azure/acs-ui-sdk"
import { mergeThemes, teamsTheme } from '@fluentui/react-northstar';
import { Provider } from '@fluentui/react-northstar/dist/commonjs/components/Provider/Provider';
import { svgIconStyles } from '@fluentui/react-northstar/dist/es/themes/teams/components/SvgIcon/svgIconStyles';
import { svgIconVariables } from '@fluentui/react-northstar/dist/es/themes/teams/components/SvgIcon/svgIconVariables';
import * as siteVariables from '@fluentui/react-northstar/dist/es/themes/teams/siteVariables';

const iconTheme = {
  componentStyles: {
    SvgIcon: svgIconStyles
  },
  componentVariables: {
    SvgIcon: svgIconVariables
  },
  siteVariables
};

function App(props) {

  return (
    <Provider theme={mergeThemes(iconTheme, teamsTheme)}>
        <CallingProvider
        displayName={/*Insert Display Name to be used for the user*/}
        groupId={/*Insert GUID for group call to be joined*/}
        token={/*Insert the Azure Communication Services access token*/}
        refreshTokenCallback={/*Optional, Insert refresh token call back function*/}
        >
            // Add Calling Components Here
        </CallingProvider>

        {/*Note: Make sure that the userId associated to the token has been added to the provided threadId*/}

        <ChatProvider
        token={/*Insert the Azure Communication Services access token*/}
        displayName={/*Insert Display Name to be used for the user*/}
        threadId={/*Insert id for group chat thread to be joined*/}
        endpointUrl={/*Insert the environment URL for the Azure Resource used*/}
        refreshTokenCallback={/*Optional, Insert refresh token call back function*/}
        >
            //  Add Chat Components Here
        </ChatProvider>
    </Provider>
  );
}

export default App;

När den här providern har initierats kan du bygga en egen layout med hjälp av grundläggande komponenter i GRÄNSSNITTs ramverket och eventuell extra layout logik.Once initialized, this provider lets you build your own layout using UI Framework Base Components and any extra layout logic. Providern tar hand om att initiera all underliggande logik och korrekt ansluta de olika komponenterna till varandra.The provider takes care of initializing all the underlying logic and properly connecting the different components together. Härnäst ska vi använda olika bas komponenter som tillhandahålls av UI Framework för att bygga kommunikations upplevelser.Next we'll use various base components provided by UI Framework to build communication experiences. Du kan anpassa layouten för dessa komponenter och lägga till andra anpassade komponenter som du vill återge med dem.You can customize the layout of these components and add any other custom components that you want to render with them.

Bygg användar gränssnitts ramverk som anropar komponent upplevelserBuild UI Framework Calling Component Experiences

För att anropa ska vi använda- MediaGallery och- MediaControls komponenterna.For Calling, we'll use the MediaGallery and MediaControls Components. Mer information om dem finns i UI Framework-funktioner.For more information about them, see UI Framework Capabilities. Starta genom att src skapa en ny fil med namnet i mappen CallingComponents.js .To start, in the src folder, create a new file called CallingComponents.js. Här initierar vi en funktions komponent som innehåller våra bas komponenter och sedan importerar i app.js .Here we'll initialize a function component that will hold our base components to then import in app.js. Du kan lägga till extra layout och formatering runt komponenterna.You can add extra layout and styling around the components.

CallingComponents.js


import {MediaGallery, MediaControls, MapToCallConfigurationProps, connectFuncsToContext} from "@azure/acs-ui-sdk"

function CallingComponents(props) {

  if (props.isCallInitialized) {props.joinCall()}

  return (
    <div style = {{height: '35rem', width: '30rem', float: 'left'}}>
        <MediaGallery/>
        <MediaControls/>
    </div>
  );
}

export default connectFuncsToContext(CallingComponents, MapToCallConfigurationProps);

Längst ned i den här filen exporterade vi de anropande komponenterna med hjälp av- connectFuncsToContext metoden från UI-ramverket för att ansluta de anropande gränssnitts komponenterna till det underliggande läget med hjälp av mappnings funktionen MapToCallingSetupProps .At the bottom of this file, we exported the calling components using the connectFuncsToContext method from the UI Framework to connect the calling UI components to the underlying state using the mapping function MapToCallingSetupProps. Den här metoden ger komponenten en ifylld egenskap, som vi använder för att kontrol lera status och ansluta till anropet.This method yields the component having its props populated, which we then use to check state and join the call. isCallInitializedAnvänd egenskapen för att kontrol lera om CallAgent är redo och Använd sedan joinCall metoden för att ansluta i.Using the isCallInitialized property to check whether the CallAgent is ready and then we use the joinCall method to join in. UI Framework stöder anpassade mappnings funktioner som används för scenarier där utvecklare vill styra hur data skickas till komponenterna.UI Framework supports custom mapping functions to be used for scenarios where developers want to control how data is pushed to the components.

Utveckla gränssnitt för användar gränssnitts ramverkets ChatBuild UI Framework Chat Component Experiences

För chatt kommer vi att använda- ChatThread och- SendBox komponenterna.For Chat, we will use the ChatThread and SendBox components. Mer information om dessa komponenter finns i UI Framework-funktioner.For more information about these components, see UI Framework Capabilities. Starta genom att src skapa en ny fil med namnet i mappen ChatComponents.js .To start, in the src folder, create a new file called ChatComponents.js. Här initierar vi en funktions komponent som innehåller våra bas komponenter och sedan importerar i app.js .Here we'll initialize a function component that will hold our base components to then import in app.js.

ChatComponents.js


import {ChatThread, SendBox} from '@azure/acs-ui-sdk'

function ChatComponents() {

  return (
    <div style = {{height: '35rem', width: '30rem', float: 'left'}}>
        <ChatThread />
        <SendBox />
    </div >
  );
}

export default ChatComponents;

Lägga till uppringnings-och chatt komponenter i huvud programmetAdd Calling and Chat Components to the main application

I app.js filen kommer vi nu att lägga till komponenterna i CallingProvider och ChatProvider som visas nedan.Back in the app.js file, we will now add the components to the CallingProvider and ChatProvider like shown below.

App.js


import ChatComponents from './ChatComponents';
import CallingComponents from './CallingComponents';

<Provider ... >
    <CallingProvider .... >
        <CallingComponents/>
    </CallingProvider>

    <ChatProvider .... >
        <ChatComponents />
    </ChatProvider>
</Provider>

Kör snabb startRun quickstart

Om du vill köra koden ovan använder du kommandot:To run the code above use the command:


npm run start   

Om du vill testa funktionerna fullständigt behöver du en andra klient med anropa och chatta för att ansluta till anrops-och chatt-tråden.To fully test the capabilities, you will need a second client with calling and chat functionality to join the call and chat thread. Se vårt exempel på samtals hjälte och chatt-exempel som möjliga alternativ.See our Calling Hero Sample and Chat Hero Sample as potential options.

Rensa resurserClean up resources

Om du vill rensa och ta bort en kommunikations tjänst prenumeration kan du ta bort resursen eller resurs gruppen.If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Om du tar bort resurs gruppen raderas även andra resurser som är kopplade till den.Deleting the resource group also deletes any other resources associated with it. Läs mer om att Rensa resurser.Learn more about cleaning up resources.

Nästa stegNext steps

Mer information finns i följande resurser:For more information, see the following resources: