Sdílet prostřednictvím


Přehled knihovny uživatelského rozhraní

Knihovna uživatelského rozhraní usnadňuje vytváření moderních komunikačních uživatelských prostředí pomocí služeb Azure Communication Services. Poskytuje knihovnu komponent uživatelského rozhraní připraveného pro produkční prostředí, které můžete umístit do svých aplikací:

Poznámka:

Podrobnou dokumentaci ke knihovně webového uživatelského rozhraní naleznete v článku o knihovně webových uživatelských rozhraní. Najdete zde další koncepční dokumentaci, rychlá zprovoznění a příklady.

  • Kompozity. Tyto komponenty jsou řešení na klíč, která implementují běžné komunikační scénáře. Do aplikací můžete rychle přidávat videohovory nebo chat (aktuálně dostupné jenom přes knihovnu webových uživatelských rozhraní). Složené komponenty jsou opensourcové komponenty vyššího řádu vytvořené pomocí komponent uživatelského rozhraní.

  • Součásti uživatelského rozhraní. Tyto komponenty jsou opensourcové stavební bloky, které umožňují vytvářet vlastní komunikační prostředí. Komponenty jsou nabízeny pro možnosti volání i chatu, které je možné kombinovat a vytvářet prostředí.

Všechny tyto klientské knihovny uživatelského rozhraní používají jazyk a prostředky microsoftu pro návrh Fluent. Fluent UI poskytuje základní vrstvu pro knihovnu uživatelského rozhraní a aktivně se používá napříč produkty Microsoftu.

Ve spojení s komponentami uživatelského rozhraní knihovna uživatelského rozhraní zveřejňuje stavovou klientskou knihovnu pro volání a chat. Tento klient je nezávislý na jakékoli konkrétní rozhraní pro správu stavu a může být integrován s běžnými správci stavů, jako je Redux nebo React Context. Tuto stavovou klientskou knihovnu lze použít s komponentami uživatelského rozhraní k předávání props a metod pro komponenty uživatelského rozhraní k vykreslení dat. Další informace naleznete v tématu Přehled stavových klientů.

Poznámka:

Stejné komponenty a složené součásti nabízené v knihovně uživatelského rozhraní jsou k dispozici v sadě Design Kit for Figma, takže můžete rychle navrhovat a prototypovat vaše volající a chatovací prostředí.

Přehled složených objektů

Složené komponenty jsou komponenty vyšší úrovně složené z komponent uživatelského rozhraní, které poskytují řešení pro běžné scénáře komunikace pomocí Azure Communication Services. Vývojáři můžou snadno vytvořit instanci složeného pomocí přístupového tokenu služby Azure Communication Services a požadované konfigurace přiřazené pro volání nebo chat.

Složené Případy použití
CallwithChatComposite Zkušenosti s kombinováním funkcí volání a chatu, které uživatelům umožňují zahájit nebo se připojit ke vláknu hovoru a chatu. V prostředí má uživatel možnost komunikovat pomocí hlasu i videa a přístup k bohatému vláknu chatu, kde se dají zprávy vyměňovat mezi účastníky. Zahrnuje podporu pro interoperabilitu Teams.
CallComposite Prostředí volání, které uživatelům umožňuje zahájit hovor nebo se k němu připojit. Uvnitř prostředí můžou uživatelé nakonfigurovat svá zařízení, účastnit se hovoru s videem a zobrazit další účastníky, včetně účastníků s zapnutím videa. Pro interop Teams je součástí předsálí funkce, aby uživatel čekal na přijetí.
ChatComposite Prostředí chatu, ve kterém může uživatel posílat a přijímat zprávy. Události vlákna, jako je psaní, čtení, vstup účastníků a opuštění, se uživateli zobrazí jako součást vlákna chatu.

Přehled součástí uživatelského rozhraní

Čistě součásti uživatelského rozhraní je možné použít pro vývojáře k vytváření komunikačních prostředí, od spojování video dlaždic do mřížky až po prezentaci vzdálených účastníků až po uspořádání komponent tak, aby vyhovovaly specifikacím aplikací. Součásti uživatelského rozhraní podporují přizpůsobení, které komponentám dává správný pocit a vzhled tak, aby odpovídaly značkám a stylu aplikací.

Plocha Komponenta Popis
Volání Rozložení mřížky Komponenta Grid pro uspořádání dlaždic videa do mřížky NxN
Dlaždice videa Komponenta, která zobrazuje video stream, pokud je k dispozici, a výchozí statickou komponentu, pokud ne
Ovládací panel Kontejner pro uspořádání výchozích tlačítek pro připojení ke konkrétním akcím volání, jako je ztlumení nebo sdílení obrazovky
Videogalerie Komponenta galerie videí s klíčem, která se dynamicky mění při přidání účastníků
Číselník Součást pro podporu vstupu telefonního čísla a tónů DTMF
Chat Vlákno zprávy Kontejner, který vykreslí zprávy chatu, systémové zprávy a vlastní zprávy
Pole pro odeslání Komponenta textového vstupu s samostatným tlačítkem pro odeslání
Textové pole pro odeslání ve formátu RTF Součást pro zadávání formátovaného textu s možnostmi formátování a samostatným tlačítkem pro odeslání
Ukazatel stavu zprávy Součást potvrzení o přečtení ve více stavech pro zobrazení stavu odeslané zprávy
Indikátor psaní Textová komponenta pro vykreslení účastníků, kteří aktivně zapisují do vlákna
Běžný Položka účastníka Společná komponenta pro vykreslení hovoru nebo účastníka chatu včetně avataru a zobrazovaného jména
Seznam účastníků Společná součást pro vykreslení seznamu účastníků hovoru nebo chatu včetně avataru a zobrazovaného jména

Instalace knihovny webového uživatelského rozhraní

Stavoví klienti se nacházejí jako součást @azure/communication-react balíčku.

npm i --save @azure/communication-react

Jaký artefakt uživatelského rozhraní je pro můj projekt nejvhodnější?

Vysvětlení těchto požadavků vám pomůže zvolit správnou klientskou knihovnu:

  • Kolik přizpůsobení si přejete? Klientské knihovny Azure Communication Core nemají uživatelskou architekturu a jsou navržené tak, abyste mohli sestavit libovolné uživatelské rozhraní, které chcete. Komponenty knihovny uživatelského rozhraní poskytují prostředky uživatelského rozhraní za cenu sníženého přizpůsobení.
  • Na jaké platformy cílíte? Různé platformy mají různé možnosti.

Podrobnosti o dostupnosti funkcí v knihovně uživatelského rozhraní jsou k dispozici tady, ale klíčové kompromisy jsou shrnuté v další tabulce.

Klientská knihovna / sada SDK Složitost implementace Možnost přizpůsobení Volání Chat Spolupráce v Teams
Složené komponenty Nízká Nízká
Základní komponenty Střední Střední
Základní klientské knihovny Vysoká Vysoká

Složené soubory jsou klíčová řešení, která implementují běžné komunikační scénáře. Do aplikací můžete přidat prostředí videohovorů. Složené komponenty jsou opensourcové komponenty vyššího řádu, které můžou vývojáři využít ke zkrácení doby vývoje a technické složitosti.

Přehled složených objektů

Složené Případy použití
CallComposite Prostředí volání, které uživatelům umožňuje zahájit hovor nebo se k němu připojit. V prostředí můžou uživatelé nakonfigurovat svá zařízení, účastnit se hovoru s videem a zobrazit další účastníky, včetně těch se zapnutým videem. Pro interoperabilitu Teams zahrnuje funkce předsálí, CallComposite aby uživatelé mohli čekat na povolení.
ChatComposite Přináší ChatComposite uživatelům prostředí pro zasílání textových zpráv v reálném čase. Konkrétně můžou uživatelé posílat a přijímat chatovací zprávy s událostmi z psaní indikátorů a potvrzení o přečtení. Kromě toho můžou uživatelé také přijímat systémové zprávy, jako je přidání nebo odebrání účastníka, a změny názvu chatu.

Scénáře složených objektů pro volání

Připojení k videohovoru nebo zvukovému hovoru

Uživatelé se můžou připojit k hovoru pomocí adresy URL schůzky v Teams nebo můžou nastavit volání služeb Azure Communication Services. Tento přístup nabízí jednodušší prostředí, stejně jako aplikace Teams.

Animace gifu zobrazuje prostředí před schůzkou a možnosti připojení v Androidu.

Prostředí před voláním

Jako účastník hovoru můžete zadat jméno a nastavit výchozí konfiguraci pro zvuková a obrazová zařízení. Pak jste připraveni skočit do hovoru.

Snímek obrazovky znázorňující prostředí před schůzkou, stránku se zprávou pro účastníka

Prostředí hovoru

Složené volání poskytuje ucelené prostředí, optimalizuje čas vývoje a zaměřuje se na čisté rozložení.

Snímek obrazovky znázorňující prostředí schůzky s ikonami nebo videem účastníků

Prostředí volání poskytuje všechny tyto funkce v jedné složené komponentě a poskytuje jasnou cestu bez složitého kódu, což vede k rychlejšímu vývoji.

Kvalita a zabezpečení

Mobilní složené složky pro volání se inicializují pomocí přístupových tokenů azure Communication Services.

Další podrobnosti

Pokud potřebujete další podrobnosti o mobilních složených souborech pro volání, podívejte se na případy použití.

Scénáře složených objektů pro chat

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview.

Rozhraní API a sady SDK verze Preview jsou poskytovány bez smlouvy o úrovni služeb. Doporučujeme je nepoužívat pro produkční úlohy. Některé funkce nemusí být podporované nebo můžou mít omezené možnosti.

Další informace najdete v dodatečných podmínkách použití pro verze Preview Microsoft Azure.

Prostředí chatu

Poskytuje ChatComposite prostředí pro zasílání textových zpráv v reálném čase. S ohledem na flexibilitu a škálovatelnost ChatComposite se může přizpůsobit různým rozložením nebo zobrazením vašich aplikací bez složitosti. Můžete se také rozhodnout, že se zobrazení nezobrazí ChatComposite a dostávat oznámení jenom tak, aby vyhovovalo vašim různým obchodním potřebám.

iOS Android
Animace gifu zobrazuje prostředí chatu v iOSu. Animace gifu zobrazuje prostředí chatu v Androidu.

Kvalita a zabezpečení

CallCompositeChatComposite Podobně jako přístupové tokeny služby Azure Communication Services využívá také přístupové tokeny služby Azure Communication Services. Aby měli přístup k chatu jenom uživatelé s příslušnými oprávněními, před zahájením chatu je potřeba jejich tokeny uživatelů přidat do platného vlákna chatu.

Další podrobnosti

Pokud potřebujete další podrobnosti o mobilních složených souborech pro chat, podívejte se na případy použití.

Jaký artefakt uživatelského rozhraní je pro můj projekt nejvhodnější?

Tyto požadavky vám pomůžou zvolit správnou klientskou knihovnu:

  • Kolik přizpůsobení si přejete? Základní klientské knihovny Azure Communication Services nemají uživatelskou architekturu a jsou navržené tak, abyste mohli sestavit libovolné uživatelské rozhraní, které chcete. Komponenty knihovny uživatelského rozhraní poskytují prostředky uživatelského rozhraní za cenu sníženého přizpůsobení.

  • Na jaké platformy cílíte? Různé platformy mají různé možnosti.

Tady jsou některé klíčové kompromisy:

Klientská knihovna / sada SDK Složitost implementace Možnost přizpůsobení Volání Chat Interoperabilita Teams
Složené komponenty Nízká Nízká
Základní klientské knihovny Vysoká Vysoká

Další informace o dostupnosti funkcí v knihovně uživatelského rozhraní najdete v tématu Případy použití knihovny uživatelského rozhraní.

Známé problémy