Snelstartgids: aan de slag met basis onderdelen van UI FrameworkQuickstart: Get started with UI Framework Base Components

Belangrijk

De functionaliteit die wordt beschreven in dit document, is momenteel beschikbaar als beperkte preview.Functionality described on this document is currently in private preview. Persoonlijke preview biedt toegang tot Sdk's en documentatie voor test doeleinden die nog niet openbaar zijn.Private preview includes access to SDKs and documentation for testing purposes that are not yet available publicly. Word een early adopter door het formulier in te vullen voor preview-toegang tot Azure Communication Services.Apply to become an early adopter by filling out the form for preview access to Azure Communication Services.

Ga aan de slag met Azure Communication Services met behulp van het UI-Framework om snel communicatie ervaringen in uw toepassingen te integreren.Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. In deze Quick Start leert u hoe u de basis onderdelen van UI Framework integreert in uw toepassing om communicatie-ervaringen te bouwen.In this quickstart, you'll learn how integrate UI Framework base components into your application to build communication experiences.

UI Framework-onderdelen zijn beschikbaar in twee soorten: basis en samengesteld.UI Framework components come in two flavors: Base and Composite.

  • Basis onderdelen vertegenwoordigen discrete communicatie mogelijkheden. ze zijn de basis bouwstenen die kunnen worden gebruikt voor het bouwen van complexe communicatie-ervaringen.Base components represent discrete communication capabilities; they're the basic building blocks that can be used to build complex communication experiences.
  • Samengestelde onderdelen zijn een belang rijke ervaring voor veelvoorkomende communicatie scenario's die zijn gebouwd met basis onderdelen als bouw stenen en verpakt om eenvoudig te worden geïntegreerd in toepassingen.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.

VereistenPrerequisites

InstellenSetting up

Voor UI-Framework moet een reageer omgeving worden ingesteld.UI Framework requires a React environment to be setup. Nu gaan we dat doen.Next we will do that. Als u al een reagerende app hebt, kunt u deze sectie overs Laan.If you already have a React App, you can skip this section.

App reageren instellenSet Up React App

We gebruiken de sjabloon Create-reageert-app voor deze Quick Start.We'll use the create-react-app template for this quickstart. Zie voor meer informatie: aan de slag met reagerenFor more information, see: Get Started with React


npx create-react-app my-app

cd my-app

Aan het einde van dit proces moet u een volledige toepassing in de map hebben my-app .At the end of this process, you should have a full application inside of the folder my-app. Voor deze Snelstartgids worden de bestanden in de src map gewijzigd.For this quickstart, we'll be modifying files inside of the src folder.

Het pakket installerenInstall the package

Gebruik de npm install opdracht om de Azure Communication Services-aanroepende SDK voor Java script te installeren.Use the npm install command to install the Azure Communication Services Calling SDK for JavaScript. Verplaats de meegeleverde tarball (private preview) naar de map 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}

Met de optie --save wordt de bibliotheek als een afhankelijkheid in bestand package.json vermeld.The --save option lists the library as a dependency in your package.json file.

App voor reageren maken uitvoerenRun Create React App

We gaan de installatie voor het maken van een reageren-app testen door uit te voeren:Let's test the Create React App installation by running:


npm run start   

ObjectmodelObject model

De volgende klassen en interfaces verwerken enkele van de belangrijkste functies van de gebruikers interface-SDK van Azure Communication Services:The following classes and interfaces handle some of the major features of the Azure Communication Services UI SDK:

NaamName BeschrijvingDescription
ProviderProvider Fluent-UI-provider waarmee ontwikkel aars onderliggende elementen van de gebruikers interface kunnen wijzigenFluent UI provider that allows developers to modify underlying Fluent UI components
CallingProviderCallingProvider Aanroepende provider voor het instantiëren van een aanroep.Calling Provider to instantiate a call. Vereist om extra onderdelen toe te voegenRequired to add extra components
ChatProviderChatProvider Chat provider voor het instantiëren van een chat thread.Chat Provider to instantiate a chat thread. Vereist om extra onderdelen toe te voegenRequired to add extra components
MediaGalleryMediaGallery Basis onderdeel waarin deel nemers en hun externe video-streams worden weer gegevenBase component that shows call participants and their remote video streams
MediaControlsMediaControls Basis onderdeel voor het beheren van de oproep, waaronder dempen, video, share schermBase component to control call including mute, video, share screen
ChatThreadChatThread Basis onderdeel dat een chat thread weergeeft met typen indicatoren, lees bevestigingen, enzovoort.Base component that renders a chat thread with typing indicators, read receipts, etc.
SendBoxSendBox Basis onderdeel dat gebruikers in staat stelt berichten in te voeren die naar de gekoppelde thread worden verzondenBase component that allows user to input messages that will be sent to the joined thread

Providers voor bellen en chatten initialiseren met Azure Communication Services-referentiesInitialize Calling and Chat Providers using Azure Communication Services credentials

Ga naar de src map in my-app en zoek naar het bestand app.js .Go to the src folder inside of my-app and look for the file app.js. Hier gaan we de volgende code neerzetten om de providers voor bellen en chatten te initialiseren.Here we'll drop the following code to initialize our Calling and Chat providers. Deze providers zijn verantwoordelijk voor het onderhouden van de context van de gespreks-en chat-ervaringen.These providers are responsible for maintaining the context of the call and chat experiences. U kunt kiezen welke er moet worden gebruikt, afhankelijk van het type communicatie-ervaring dat u bouwt.You can choose which one to use depending on the type of communication experience you're building. Als dat nodig is, kunt u beide tegelijk gebruiken.If needed, you can use both at the same time. Voor het initialiseren van de onderdelen hebt u een toegangs token opgehaald van Azure Communication Services.To initialize the components, you'll need an access token retrieved from Azure Communication Services. Zie toegangs tokens maken en beherenvoor meer informatie over het verkrijgen van toegangs tokens.For details on how to get access tokens, see: create and manage access tokens.

Notitie

De onderdelen genereren geen toegangs tokens, groeps-Id's of thread-Id's.The components don't generate access tokens, group IDs, or thread IDs. Deze elementen zijn afkomstig van services die de juiste stappen door lopen om deze Id's te genereren en door te geven aan de client toepassing.These elements come from services that go through the proper steps to generate these IDs and pass them to the client application. Zie voor meer informatie: client-server architectuur.For more information, see: Client Server Architecture.

Bijvoorbeeld: de chat provider verwacht dat de userId gekoppelde voor de token initialisatie hiervan al is toegevoegd aan de die wordt gebruikt threadId .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. Als het token niet is toegevoegd aan de thread-ID, zal de chat provider mislukken.If the token hasn't been joined to the thread ID, then the Chat Provider will fail. Zie voor meer informatie over chatten: aan de slag met chatFor more information on chat, see: Getting Started with Chat

We gebruiken een Fluent-gebruikers interface thema om het uiterlijk van de toepassing te verbeteren: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;

Zodra u deze provider hebt geïnitialiseerd, kunt u uw eigen indeling bouwen met behulp van de basis onderdelen van het interface raamwerk en eventuele extra indelings logica.Once initialized, this provider lets you build your own layout using UI Framework Base Components and any extra layout logic. De provider zorgt voor het initialiseren van alle onderliggende logica en het op de juiste wijze verbinden van de verschillende onderdelen.The provider takes care of initializing all the underlying logic and properly connecting the different components together. Vervolgens gebruiken we verschillende basis onderdelen van UI Framework om communicatie-ervaringen te bouwen.Next we'll use various base components provided by UI Framework to build communication experiences. U kunt de indeling van deze onderdelen aanpassen en andere aangepaste onderdelen toevoegen die u met hen wilt renderen.You can customize the layout of these components and add any other custom components that you want to render with them.

UI Framework bouwen onderdeel ervaringen aanroepenBuild UI Framework Calling Component Experiences

Voor aanroepen gebruiken we de- MediaGallery en- MediaControls onderdelen.For Calling, we'll use the MediaGallery and MediaControls Components. Zie UI Framework-mogelijkhedenvoor meer informatie hierover.For more information about them, see UI Framework Capabilities. Maak een nieuw bestand met de naam in de map om te starten src CallingComponents.js .To start, in the src folder, create a new file called CallingComponents.js. Hier wordt een functie component geïnitialiseerd waarmee de basis onderdelen worden opgeslagen in app.js .Here we'll initialize a function component that will hold our base components to then import in app.js. U kunt extra lay-out en stijlen rond de onderdelen toevoegen.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);

Onder aan dit bestand zijn de aanroepende onderdelen geëxporteerd met behulp connectFuncsToContext van de methode vanuit het Framework van de gebruikers interface om de aanroepende UI-componenten te verbinden met de onderliggende status met behulp van de toewijzings functie 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. Deze methode levert het onderdeel met de bijbehorende eigenschappen, die we gebruiken om de status te controleren en deel te nemen aan de aanroep.This method yields the component having its props populated, which we then use to check state and join the call. Gebruik de isCallInitialized eigenschap om te controleren of de CallAgent is gereed en vervolgens de joinCall methode gebruiken om lid te worden van.Using the isCallInitialized property to check whether the CallAgent is ready and then we use the joinCall method to join in. UI Framework ondersteunt aangepaste toewijzings functies die moeten worden gebruikt voor scenario's waarin ontwikkel aars willen bepalen hoe gegevens worden gepusht naar de onderdelen.UI Framework supports custom mapping functions to be used for scenarios where developers want to control how data is pushed to the components.

Chat onderdeel ervaringen van UI Framework bouwenBuild UI Framework Chat Component Experiences

Voor chat worden de-en- ChatThread SendBox onderdelen gebruikt.For Chat, we will use the ChatThread and SendBox components. Zie UI Framework capabilities(Engelstalig) voor meer informatie over deze onderdelen.For more information about these components, see UI Framework Capabilities. Maak een nieuw bestand met de naam in de map om te starten src ChatComponents.js .To start, in the src folder, create a new file called ChatComponents.js. Hier wordt een functie component geïnitialiseerd waarmee de basis onderdelen worden opgeslagen in 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;

Onderdelen voor bellen en chatten toevoegen aan de hoofd toepassingAdd Calling and Chat Components to the main application

In het app.js bestand gaan we de onderdelen nu toevoegen aan de CallingProvider en ChatProvider zoals hieronder wordt weer gegeven.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>

Snelstartgids uitvoerenRun quickstart

Gebruik de opdracht om de bovenstaande code uit te voeren:To run the code above use the command:


npm run start   

Als u de mogelijkheden volledig wilt testen, moet u een tweede client hebben met de functie voor bellen en chatten om lid te worden van de aanroep-en chat-thread.To fully test the capabilities, you will need a second client with calling and chat functionality to join the call and chat thread. Bekijk het voor beeld van een held -en Chat Room als mogelijke opties.See our Calling Hero Sample and Chat Hero Sample as potential options.

Resources opschonenClean up resources

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen.If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd.Deleting the resource group also deletes any other resources associated with it. Meer informatie over het opschonen van resources.Learn more about cleaning up resources.

Volgende stappenNext steps

Zie de volgende resources voor meer informatie:For more information, see the following resources: