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.
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.
Prostředí hovoru
Složené volání poskytuje ucelené prostředí, optimalizuje čas vývoje a zaměřuje se na čisté rozložení.
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 |
|---|---|
|
|
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í.