Udostępnij za pośrednictwem


Omówienie biblioteki interfejsu użytkownika

Biblioteka interfejsu użytkownika ułatwia tworzenie nowoczesnych środowisk użytkownika komunikacji przy użyciu usług Azure Communication Services. Udostępnia ona bibliotekę składników interfejsu użytkownika gotowych do produkcji, które można umieścić w aplikacjach:

Uwaga

Aby uzyskać szczegółową dokumentację dotyczącą biblioteki interfejsu użytkownika sieci Web, odwiedź podręcznik biblioteki interfejsu użytkownika sieci Web. W tym miejscu znajdziesz dodatkową dokumentację koncepcyjną, przewodniki Szybki start i przykłady.

  • Kompozyty. Te składniki są kluczowymi rozwiązaniami, które implementują typowe scenariusze komunikacji. Możesz szybko dodać połączenia wideo lub czat (obecnie dostępne tylko za pośrednictwem biblioteki interfejsu użytkownika sieci Web) do aplikacji. Składniki złożone to składniki o wyższej kolejności typu open source utworzone przy użyciu składników interfejsu użytkownika.

  • Składniki interfejsu użytkownika. Te składniki to bloki konstrukcyjne typu open source, które umożliwiają tworzenie niestandardowego środowiska komunikacji. Składniki są oferowane zarówno na potrzeby połączeń telefonicznych, jak i funkcji czatu, które można połączyć w celu tworzenia środowisk.

Te biblioteki klienckie interfejsu użytkownika używają języka i zasobów projektowych Fluent firmy Microsoft. Interfejs użytkownika Fluent udostępnia podstawową warstwę biblioteki interfejsu użytkownika i jest aktywnie używany w produktach firmy Microsoft.

W połączeniu ze składnikami interfejsu użytkownika biblioteka interfejsu użytkownika uwidacznia stanową bibliotekę klienta do wywoływania i czatu. Ten klient jest niezależny od dowolnej konkretnej struktury zarządzania stanem i może być zintegrowany z typowymi menedżerami stanu, takimi jak Redux lub React Context. Tej stanowej biblioteki klienta można używać ze składnikami interfejsu użytkownika do przekazywania rekwizytów i metod składników interfejsu użytkownika do renderowania danych. Aby uzyskać więcej informacji, zobacz Stateful Client Overview (Omówienie klienta stanowego).

Uwaga

Te same składniki i składniki złożone oferowane w bibliotece interfejsu użytkownika są dostępne w zestawie Design Kit for Figma, dzięki czemu można szybko zaprojektować i zaprojektować środowiska rozmów i czatów.

Omówienie złożonych

Złożone są składnikami wyższego poziomu składającymi się z składników interfejsu użytkownika, które dostarczają kluczowe rozwiązania dla typowych scenariuszy komunikacyjnych przy użyciu usług Azure Communication Services. Deweloperzy mogą łatwo utworzyć wystąpienie złożone przy użyciu tokenu dostępu usług Azure Communication Services i wymaganej konfiguracji przypisanej do połączenia lub rozmowy.

Złożone Przypadki użycia
CallwithChatComposite Doświadczenie w połączeniu funkcji rozmów i czatów, aby umożliwić użytkownikom rozpoczęcie lub dołączenie do rozmowy i wątku czatu. W środowisku użytkownik ma możliwość komunikowania się za pomocą głosu i wideo oraz dostępu do rozbudowanego wątku czatu, w którym można wymieniać wiadomości między uczestnikami. Obejmuje ona obsługę aplikacji Teams Interop.
CallComposite Środowisko wywołujące, które umożliwia użytkownikom uruchamianie lub dołączanie do połączenia. Wewnątrz środowiska użytkownicy mogą konfigurować swoje urządzenia, uczestniczyć w połączeniu z wideo i zobaczyć innych uczestników, w tym tych uczestników z włączeniem wideo. W przypadku aplikacji Teams Interop jest włączona funkcja lobby, aby użytkownik czekał na przyjęcie.
ChatComposite Środowisko czatu, w którym użytkownik może wysyłać i odbierać wiadomości. Zdarzenia wątku, takie jak wpisywanie, odczyty, uczestnicy wchodzący i opuszczający są wyświetlane użytkownikowi w ramach wątku czatu.

Omówienie składnika interfejsu użytkownika

Składniki czystego interfejsu użytkownika mogą służyć deweloperom do tworzenia środowisk komunikacyjnych, od łączenia kafelków wideo w siatkę w celu zaprezentowania uczestników zdalnych, organizowania składników w celu dopasowania ich do specyfikacji aplikacji. Składniki interfejsu użytkownika obsługują dostosowywanie, aby zapewnić składnikom odpowiednie działanie i wygląd, aby dopasować znakowanie i styl aplikacji.

Obszar Składnik opis
Wywołanie Układ siatki Składnik siatki do organizowania kafelków wideo w siatce NxN
Kafelek wideo Składnik, który wyświetla strumień wideo, gdy jest dostępny i domyślny składnik statyczny, gdy nie
Pasek sterowania Kontener do organizowania elementu DefaultButtons w celu podłączenia do określonych akcji wywołań, takich jak wyciszenie lub ekran udostępniania
VideoGallery Składnik galerii wideo z kluczem, który dynamicznie zmienia się podczas dodawania uczestników
Klawiatura wybierania numerów Składnik do obsługi numeru telefonu wejściowego i tonów DTMF
Czat Wątek komunikatu Kontener, który renderuje komunikaty czatu, komunikaty systemowe i niestandardowe wiadomości
Wyślij pole Składnik wprowadzania tekstu z dyskretnym przyciskiem wysyłania
Pole wysyłania tekstu sformatowanych Składnik wprowadzania tekstu sformatowanego z opcjami formatowania i dyskretnym przyciskiem wysyłania
Wskaźnik stanu komunikatu Składnik potwierdzenia odczytu z wieloma stanami w celu wyświetlenia stanu wysłanej wiadomości
Wskaźnik wpisywania Składnik tekstowy renderujący uczestników, którzy aktywnie wpisać w wątku
Popularny Element uczestnika Wspólny składnik renderowania połączenia lub uczestnika czatu, w tym awatar i nazwa wyświetlana
Lista uczestników Wspólny składnik renderowania listy uczestników rozmów lub rozmów, w tym awatara i nazwy wyświetlanej

Instalowanie biblioteki interfejsu użytkownika sieci Web

Klienci stanowi są znajdowani w ramach @azure/communication-react pakietu.

npm i --save @azure/communication-react

Jaki artefakt interfejsu użytkownika jest najlepszy dla mojego projektu?

Zrozumienie tych wymagań pomaga wybrać odpowiednią bibliotekę klienta:

  • Jak bardzo chcesz dostosować? Podstawowe biblioteki klienckie usługi Azure Communication nie mają środowiska użytkownika i są zaprojektowane tak, aby można było tworzyć dowolne środowiska użytkownika. Składniki biblioteki interfejsu użytkownika zapewniają zasoby interfejsu użytkownika kosztem mniejszego dostosowywania.
  • Jakie platformy są przeznaczone dla Ciebie? Różne platformy mają różne możliwości.

Szczegółowe informacje o dostępności funkcji w bibliotece interfejsu użytkownika są dostępne tutaj, ale kluczowe kompromisy zostały podsumowane w następnej tabeli.

Biblioteka klienta/zestaw SDK Złożoność implementacji Możliwość dostosowywania Wywołanie Czat Teams Interop
Składniki złożone Niski Niski
Podstawowe składniki Śred. Śred.
Podstawowe biblioteki klienckie Wys. Wys.

Złożone to przełomowe rozwiązania, które implementują typowe scenariusze komunikacji. Możesz dodawać środowiska rozmów wideo do aplikacji. Złożone są składnikami o wyższej kolejności typu open source, które deweloperzy mogą wykorzystać, aby skrócić czas programowania i złożoność inżynieryjną.

Omówienie złożonych

Złożone Przypadki użycia
CallComposite Środowisko wywołujące, które umożliwia użytkownikom uruchamianie lub dołączanie do połączenia. W środowisku użytkownicy mogą konfigurować swoje urządzenia, uczestniczyć w połączeniu z wideo i zobaczyć innych uczestników, w tym tych z włączonym wideo. W przypadku współdziałania usługi Teams obejmuje funkcje lobby, CallComposite dzięki czemu użytkownicy mogą czekać na przyjęcie.
ChatComposite Dzięki funkcji ChatComposite wiadomości sms w czasie rzeczywistym użytkownicy mogą korzystać z funkcji obsługi komunikatów tekstowych. W szczególności użytkownicy mogą wysyłać i odbierać wiadomość na czacie z zdarzeniami z wpisywania wskaźników i odczytywania potwierdzenia. Ponadto użytkownicy mogą również odbierać komunikaty systemowe, takie jak dodany lub usunięty uczestnik, oraz zmiany tytułu czatu.

Scenariusze złożone do wywoływania

Dołączanie do połączenia wideo/audio

Użytkownicy mogą dołączyć do połączenia przy użyciu adresu URL spotkania usługi Teams lub skonfigurować połączenie usług Azure Communication Services. To podejście oferuje prostsze środowisko, podobnie jak aplikacja Teams.

Animacja gif przedstawia środowisko przed spotkaniem i środowisko dołączania w systemie Android.

Środowisko przed wywołaniem

Jako uczestnik połączenia możesz podać nazwę i skonfigurować domyślną konfigurację dla urządzeń audio i wideo. Następnie możesz przejść do połączenia.

Zrzut ekranu przedstawia środowisko przed spotkaniem, stronę z komunikatem dla uczestnika.

Środowisko połączeń

Wywołanie złożone zapewnia kompleksowe środowisko, optymalizuje czas programowania i koncentruje się na czystym układzie.

Zrzut ekranu przedstawia środowisko spotkania z ikonami lub wideo uczestników.

Środowisko wywołujące zapewnia wszystkie te możliwości w jednym składniku złożonym, zapewniając wyraźną ścieżkę bez złożonego kodu, co prowadzi do szybszego czasu programowania.

Jakość i bezpieczeństwo

Złożone urządzenia przenośne do wywoływania są inicjowane przy użyciu tokenów dostępu usług Azure Communication Services.

Więcej szczegółów

Jeśli potrzebujesz więcej szczegółowych informacji na temat złożonych urządzeń przenośnych do wywoływania, zobacz przypadki użycia.

Scenariusze złożone na potrzeby czatu

Ważne

Ta funkcja usług Azure Communication Services jest obecnie dostępna w wersji zapoznawczej.

Interfejsy API i zestawy SDK w wersji zapoznawczej są udostępniane bez umowy dotyczącej poziomu usług. Zalecamy, aby nie używać ich w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą nie być obsługiwane lub mogą mieć ograniczone możliwości.

Aby uzyskać więcej informacji, zapoznaj się z dodatkowymi warunkami użytkowania dla wersji zapoznawczych platformy Microsoft Azure.

Środowisko czatu

Zapewnia ChatComposite obsługę komunikatów tekstowych w czasie rzeczywistym. Mając na uwadze elastyczność i skalowalność, ChatComposite można dostosować go do różnych układów lub widoków z aplikacji bez złożoności. Możesz również nie mieć wyświetlanego ChatComposite widoku i otrzymywać tylko powiadomienia spełniające różne potrzeby biznesowe.

iOS Android
Animacja gif pokazuje środowisko czatu w systemie iOS. Animacja gif pokazuje środowisko czatu w systemie Android.

Jakość i bezpieczeństwo

Podobnie jak w przypadku CallCompositeprogramu , ChatComposite usługa korzysta również z tokenów dostępu usług Azure Communication Services. Aby mieć pewność, że tylko użytkownicy z odpowiednimi uprawnieniami będą mogli uzyskiwać dostęp do czatu, przed rozpoczęciem korzystania z czatu należy dodać tokeny użytkowników do prawidłowego wątku czatu.

Więcej szczegółów

Jeśli potrzebujesz dodatkowych szczegółów dotyczących złożonych aplikacji mobilnych na potrzeby czatu, zobacz przypadki użycia.

Jaki artefakt interfejsu użytkownika jest najlepszy dla mojego projektu?

Te wymagania pomagają wybrać odpowiednią bibliotekę klienta:

  • Jak bardzo chcesz dostosować? Podstawowe biblioteki klienckie usług Azure Communication Services nie mają środowiska użytkownika i są zaprojektowane tak, aby można było tworzyć dowolne środowiska użytkownika. Składniki biblioteki interfejsu użytkownika zapewniają zasoby interfejsu użytkownika kosztem mniejszego dostosowywania.

  • Jakie platformy są przeznaczone dla Ciebie? Różne platformy mają różne możliwości.

Oto kilka kluczowych kompromisów:

Biblioteka klienta/zestaw SDK Złożoność implementacji Możliwość dostosowywania Wywołanie Czat Współdziałanie usługi Teams
Składniki złożone Niski Niski
Podstawowe biblioteki klienckie Wys. Wys.

Aby uzyskać więcej informacji na temat dostępności funkcji w bibliotece interfejsu użytkownika, zobacz Przypadki użycia biblioteki interfejsu użytkownika.

Znane problemy