Snabb start: kom igång med sammansatta UI Framework-komponenterQuickstart: Get started with UI Framework Composite Components

• 03/10/2021
• 3 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 integrerade GRÄNSSNITTs Ramverks komponenter i ditt program för att bygga kommunikations upplevelser.In this quickstart, you'll learn how integrate UI Framework Composite Components into your application to build communication experiences.

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 åtkomsttoken för att instansiera anropet.A User Access Token to instantiate the call composite. 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 kommer att använda mallen Create-reakta-app för den här snabb starten.We will 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.

//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 grupp anrop och sammansatta grupp Chat-komponenterInitialize Group Call and Group Chat Composite Components

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 sammansatta komponenter för grupp-chatt och anropa.Here we'll drop the following code to initialize our Composite Components for Group Chat and Calling. 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 token för användar åtkomst.For details on how to do get access tokens, see: create and manage user access tokens.

App.js

import {GroupCall, GroupChat} from "@azure/acs-ui-sdk"

function App(){

    return(<>
        {/* Example styling provided, developers can provide their own styling to position and resize components */}
        <div style={{height: "35rem", width: "50rem", float: "left"}}>
            <GroupCall
                displayName={DISPLAY_NAME} //Required, Display name for the user entering the call
                token={TOKEN} // Required, Azure Communication Services access token retrieved from authentication service
                refreshTokenCallback={CALLBACK} //Optional, Callback to refresh the token in case it expires
                groupId={GROUPID} //Required, Id for group call that will be joined. (GUID)
                onEndCall = { () => {
                    //Optional, Action to be performed when the call ends
                }}
            />
        </div>

        {/*Note: Make sure that the userId associated to the token has been added to the provided threadId*/}
        {/* Example styling provided, developers can provide their own styling to position and resize components */}
        <div style={{height: "35rem", width: "30rem", float: "left"}}>
            <GroupChat 
                displayName={DISPLAY_NAME} //Required, Display name for the user entering the call
                token={TOKEN} // Required, Azure Communication Services access token retrieved from authentication service
                threadId={THREADID} //Required, Id for group chat thread that will be joined.
                endpointUrl={ENDPOINT_URL} //Required, URL for Azure endpoint being used for Azure Communication Services
                onRenderAvatar = { (acsId) => {
                    //Optional, function to override the avatar image on the chat thread. Function receives one parameters for the Azure Communication Services Identity. Must return a React element.
                }}
                refreshToken = { () => {
                    //Optional, function to refresh the access token in case it expires
                }}
                options = {{
                    //Optional, options to define chat behavior
                    sendBoxMaxLength: number | undefined //Optional, Limit the max send box length based on viewport size change.
                }}
            />
        </div>
    </>);
}

export default App;

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