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

• 03/10/2021
• 6 minuter för att läsa
• • d
  • o

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

• Ett Azure-konto med en aktiv prenumeration.An Azure account with an active subscription. Skapa ett konto kostnads fritt.Create an account for free.
• Node.js Aktiva LTS-och underhålls LTS-versioner (nod 12 rekommenderas).Node.js Active LTS and Maintenance LTS versions (Node 12 Recommended).
• En Active Communication Services-resurs.An active Communication Services resource. Skapa en kommunikations tjänst resurs.Create a Communication Services resource.
• En token för användar åtkomst för att instansiera anrops klienten.A User Access Token to instantiate the call client. Lär dig hur du skapar och hanterar användar åtkomst-token.Learn how to create and manage user access tokens.

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:

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.

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:

• Översikt över UI FrameworkUI Framework Overview
• Funktioner i UI FrameworkUI Framework Capabilities