Szybki Start: Rozpoczynanie pracy ze składnikami złożonymi struktury interfejsu użytkownikaQuickstart: Get started with UI Framework Composite Components

Ważne

Funkcje opisane w tym dokumencie są obecnie w prywatnej wersji zapoznawczej.Functionality described on this document is currently in private preview. Prywatna wersja zapoznawcza obejmuje dostęp do zestawów SDK i dokumentacji na potrzeby testowania, które nie są jeszcze publicznie dostępne.Private preview includes access to SDKs and documentation for testing purposes that are not yet available publicly. Zastosuj, aby stać się wczesnym przejęciem, wypełniając formularz dotyczący dostępu do wersji zapoznawczej do usług Azure Communications Services.Apply to become an early adopter by filling out the form for preview access to Azure Communication Services.

Rozpocznij pracę z usługami Azure Communications Services przy użyciu struktury interfejsu użytkownika, aby szybko zintegrować środowiska komunikacji z aplikacjami.Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. W tym przewodniku szybki start dowiesz się, jak zintegrować składniki złożone środowiska interfejsu użytkownika z aplikacją w celu tworzenia rozwiązań komunikacyjnych.In this quickstart, you'll learn how integrate UI Framework Composite Components into your application to build communication experiences.

Wymagania wstępnePrerequisites

KonfigurowanieSetting up

Struktura interfejsu użytkownika wymaga instalacji środowiska reagowania.UI Framework requires a React environment to be setup. Następnie wykonamy tę czynność.Next we will do that. Jeśli masz już aplikację do reagowania, możesz pominąć tę sekcję.If you already have a React App, you can skip this section.

Konfigurowanie aplikacji do reagowaniaSet Up React App

W tym przewodniku szybki start będziemy używać szablonu tworzenia i reagowania na aplikację.We will use the create-react-app template for this quickstart. Aby uzyskać więcej informacji, zobacz: Rozpoczynanie pracy z reagowaniemFor more information, see: Get Started with React


npx create-react-app my-app

cd my-app

Po zakończeniu tego procesu powinna istnieć pełna aplikacja w folderze my-app .At the end of this process, you should have a full application inside of the folder my-app. W tym przewodniku szybki start zmodyfikujemy pliki w src folderze.For this quickstart, we'll be modifying files inside of the src folder.

Zainstaluj pakietInstall the package

Użyj npm install polecenia, aby zainstalować zestaw SDK wywoływania usługi Azure Communications Services dla języka JavaScript.Use the npm install command to install the Azure Communication Services Calling SDK for JavaScript. Przenieś podaną plik tar (prywatna wersja zapoznawcza) do katalogu my-app.Move the provided tarball (Private Preview) over to the my-app directory.


//Private Preview install tarball

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

--saveOpcja zawiera listę bibliotek jako zależność w package.js pliku.The --save option lists the library as a dependency in your package.json file.

Uruchom aplikację Tworzenie aplikacji do reagowaniaRun Create React App

Przetestujmy instalację aplikacji do tworzenia reakcji, uruchamiając:Let's test the Create React App installation by running:


npm run start 

Model obiektówObject model

Poniższe klasy i interfejsy obsługują niektóre główne funkcje zestawu SDK interfejsu użytkownika usługi Azure Communication Services:The following classes and interfaces handle some of the major features of the Azure Communication Services UI SDK:

NazwaName OpisDescription
GroupCallGroupCall Składnik złożony, który renderuje środowisko wywoływania grupy z galerią i kontrolkami uczestników.Composite component that renders a group calling experience with participant gallery and controls.
GroupChatGroupChat Składnik złożony, który renderuje środowisko rozmowy grupowej przy użyciu wątku rozmowy i danych wejściowychComposite component that renders a group chat experience with chat thread and input

Inicjuj składniki złożone wywołania grupy i rozmowy grupowejInitialize Group Call and Group Chat Composite Components

Przejdź do src folderu w programie my-app i Wyszukaj plik app.js .Go to the src folder inside of my-app and look for the file app.js. Tutaj porzucimy Poniższy kod, aby zainicjować nasze składniki złożone dla rozmowy grupowej i nawiązać połączenia.Here we'll drop the following code to initialize our Composite Components for Group Chat and Calling. Możesz wybrać, który z nich ma być używany w zależności od używanego typu środowiska komunikacji.You can choose which one to use depending on the type of communication experience you're building. W razie konieczności można użyć obu jednocześnie.If needed, you can use both at the same time. Aby zainicjować składniki, należy uzyskać token dostępu pobrany z usług Azure Communications Services.To initialize the components, you'll need an access token retrieved from Azure Communication Services. Aby uzyskać szczegółowe informacje na temat uzyskiwania tokenów dostępu, zobacz: Tworzenie tokenów dostępu użytkowników i zarządzanie nimi.For details on how to do get access tokens, see: create and manage user access tokens.

Uwaga

Składniki nie generują tokenów dostępu, identyfikatorów grup ani identyfikatorów wątków.The components don't generate access tokens, group IDs, or thread IDs. Te elementy pochodzą z usług, które przechodzą przez odpowiednie kroki w celu wygenerowania tych identyfikatorów i przekazania ich do aplikacji klienckiej.These elements come from services that go through the proper steps to generate these IDs and pass them to the client application. Aby uzyskać więcej informacji, zobacz: Architektura serwera klienta.For more information, see: Client Server Architecture.

Na przykład: kompozyt rozmowy grupowej oczekuje, że userId skojarzone z token używanym do jego zainicjowania, został już przyłączony do threadId podanego elementu.For Example: The Group Chat composite expects that the userId associated to the token being used to initialize it has already been joined to the threadId being provided. Jeśli token nie został przyłączony do identyfikatora wątku, nastąpi awaria złożona przez rozmowę z grupą.If the token hasn't been joined to the thread ID, then the Group Chat composite will fail. Aby uzyskać więcej informacji na temat rozmowy, zobacz: wprowadzenie z czatemFor more information on chat, see: Getting Started with Chat

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;

Uruchamianie przewodnika Szybki StartRun quickstart

Aby uruchomić kod powyżej, użyj polecenia:To run the code above, use the command:


npm run start 

Aby w pełni przetestować możliwości, potrzebny jest drugi klient z funkcjami wywoływania i rozmowy w celu dołączenia do wątku wywołania i rozmowy.To fully test the capabilities, you will need a second client with calling and chat functionality to join the call and chat thread. Zapoznaj się z naszym Przykładem wywołującym Hero i zaczatem Hero jako potencjalne opcje.See our Calling Hero Sample and Chat Hero Sample as potential options.

Czyszczenie zasobówClean up resources

Jeśli chcesz wyczyścić i usunąć subskrypcję usług komunikacyjnych, możesz usunąć zasób lub grupę zasobów.If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Usunięcie grupy zasobów spowoduje również usunięcie wszystkich skojarzonych z nią zasobów.Deleting the resource group also deletes any other resources associated with it. Dowiedz się więcej o czyszczeniu zasobów.Learn more about cleaning up resources.

Następne krokiNext steps

Więcej informacji można znaleźć w następujących zasobach:For more information, see the following resources: