UI Kitaplığına Genel Bakış
UI Kitaplığı, Azure İletişim Hizmetleri kullanarak modern iletişim kullanıcı deneyimleri oluşturmanızı kolaylaştırır. Uygulamalarınıza bırakabileceğiniz üretime hazır kullanıcı arabirimi bileşenlerinden oluşan bir kitaplık sunar:
Not
Web Kullanıcı Arabirimi Kitaplığı ile ilgili ayrıntılı belgeler için Web Ui Kitaplığı Hikaye Kitabı'nı ziyaret edin. Burada ek kavramsal belgeler, hızlı başlangıçlar ve örnekler bulabilirsiniz.
Kompozit. Bu bileşenler, yaygın iletişim senaryolarını uygulayan anahtar teslim çözümlerdir. Uygulamalarınıza hızlı bir şekilde görüntülü arama veya sohbet (şu anda yalnızca Web Ui Kitaplığı üzerinden kullanılabilir) deneyimleri ekleyebilirsiniz. Bileşikler, kullanıcı arabirimi bileşenleri kullanılarak oluşturulan açık kaynak yüksek sıralı bileşenlerdir.
UI Bileşenleri. Bu bileşenler, özel iletişim deneyimi oluşturmanıza olanak sağlayan açık kaynak yapı taşlarıdır. Bileşenler, deneyim oluşturmak için birleştirilebilen hem arama hem de sohbet özellikleri için sunulur.
Bu kullanıcı arabirimi istemci kitaplıklarının tümü Microsoft'un Fluent tasarım dilini ve varlıklarını kullanır. Fluent UI, Kullanıcı Arabirimi Kitaplığı için temel bir katman sağlar ve Microsoft ürünlerinde etkin bir şekilde kullanılır.
Kullanıcı arabirimi bileşenleriyle birlikte, KULLANıCı Arabirimi Kitaplığı çağrı ve sohbet için durum bilgisi olan bir istemci kitaplığını kullanıma sunar. Bu istemci belirli bir durum yönetimi çerçevesine göre bağımsızdır ve Redux veya React Context gibi ortak durum yöneticileriyle tümleştirilebilir. Bu durum bilgisi olan istemci kitaplığı, ui bileşenlerinin verileri işlemesi için prop'ları ve yöntemleri geçirmek için UI Bileşenleri ile birlikte kullanılabilir. Daha fazla bilgi için bkz . Durum Bilgisi Olan İstemciye Genel Bakış.
Not
Kullanıcı Arabirimi Kitaplığı'nda sunulan bileşenler ve bileşikler Figma için Tasarım Seti'nde mevcuttur, böylece arama ve sohbet deneyimlerinizi hızlı bir şekilde tasarlayabilir ve prototip oluşturabilirsiniz.
Bileşiklere genel bakış
Bileşikler, Azure İletişim Hizmetleri kullanarak yaygın iletişim senaryoları için anahtar teslimi çözümler sunan kullanıcı arabirimi bileşenlerinden oluşan üst düzey bileşenlerdir. Geliştiriciler Azure İletişim Hizmetleri erişim belirtecini ve arama veya sohbet için öznitelikli gerekli yapılandırmayı kullanarak Bileşik örneği kolayca oluşturabilir.
| Bileşik | Kullanım Örnekleri |
|---|---|
| CallwithChatComposite | Kullanıcıların bir arama ve sohbet yazışması başlatmasına veya bu yazışmaya katılmasına olanak sağlamak için arama ve sohbet özelliklerini birleştirme deneyimi. Bu deneyimde, kullanıcı hem ses hem de video kullanarak iletişim kurabilir ve katılımcılar arasında iletilerin değiş tokuş edilebileceği zengin bir sohbet yazışmasına erişebilir. Teams Birlikte Çalışma desteği içerir. |
| CallComposite | Kullanıcıların bir aramayı başlatmasına veya bir aramaya katılmasına olanak tanıyan arama deneyimi. Deneyimin içinde kullanıcılar cihazlarını yapılandırabilir, görüntülü aramaya katılabilir ve videoyu etkinleştiren katılımcılar da dahil olmak üzere diğer katılımcıları görebilir. Teams Birlikte Çalışma için, kullanıcının kabul edilmeyi beklemesi için lobi işlevi bulunur. |
| ChatComposite | Kullanıcının ileti gönderip alabileceği sohbet deneyimi. Yazma, okuma, giriş ve çıkış gibi yazışma olayları, sohbet yazışmasının bir parçası olarak kullanıcıya görüntülenir. |
UI Bileşenine genel bakış
Saf UI Bileşenleri, geliştiriciler için video kutucuklarını bir kılavuza birleştirerek uzak katılımcıları sergilemeye ve bileşenleri uygulama belirtimlerinize uyacak şekilde düzenlemeye kadar iletişim deneyimleri oluşturmak için kullanılabilir. UI Bileşenleri, bileşenlere bir uygulama markası ve stiliyle eşleşmesi için doğru hissi ve görünümü sağlamak için özelleştirmeyi destekler.
| Alan | Bileşen | Veri Akışı Açıklaması |
|---|---|---|
| Arama | Kılavuz Düzeni | Video Kutucuklarını NxN kılavuzunda düzenlemek için kılavuz bileşeni |
| Video Kutucuğu | Kullanılabilir olduğunda video akışını görüntüleyen bileşen ve mevcut olmadığında varsayılan statik bileşen | |
| Denetim Çubuğu | DefaultButtons'ı sessize alma veya paylaşma ekranı gibi belirli arama eylemlerine bağlanacak şekilde düzenlemek için kapsayıcı | |
| VideoGallery | Katılımcılar eklendikçe dinamik olarak değişen anahtar teslim video galerisi bileşeni | |
| Tuş takımı | Telefon numarası girişini ve DTMF tonlarını destekleyen bileşen | |
| Sohbet | İleti İş Parçacığı | Sohbet iletilerini, sistem iletilerini ve özel iletileri işleyen kapsayıcı |
| Gönderme Kutusu | Ayrık gönderme düğmesi olan metin girişi bileşeni | |
| Zengin Metin Gönderme Kutusu | Biçimlendirme seçenekleri ve ayrık gönderme düğmesi içeren zengin metin girişi bileşeni | |
| İleti Durumu Göstergesi | Gönderilen iletinin durumunu göstermek için çok durumlu okundu bilgisi bileşeni | |
| Yazma göstergesi | Bir iş parçacığında etkin olarak yazan katılımcıları işlemek için metin bileşeni | |
| Yaygın | Katılımcı Öğesi | Avatar ve görünen ad da dahil olmak üzere bir çağrıyı veya sohbet katılımcısını işlemek için ortak bileşen |
| Katılımcı Listesi | Avatar ve görünen ad da dahil olmak üzere arama veya sohbet katılımcı listesini işlemek için ortak bileşen |
Web Kullanıcı Arabirimi Kitaplığını Yükleme
Durum bilgisi olan istemciler paketin @azure/communication-react bir parçası olarak bulunur.
npm i --save @azure/communication-react
Projem için en iyi kullanıcı arabirimi yapıtı hangisidir?
Bu gereksinimleri anlamak doğru istemci kitaplığını seçmenize yardımcı olur:
- Ne kadar özelleştirme istiyorsunuz? Azure İletişim çekirdek istemci kitaplıklarının UX'si yoktur ve istediğiniz UX'i oluşturabilmeniz için tasarlanmıştır. UI Kitaplığı bileşenleri, kullanıcı arabirimi varlıklarını daha az özelleştirme karşılığında sağlar.
- Hangi platformları hedeflediğiniz? Farklı platformların farklı özellikleri vardır.
Kullanıcı Arabirimi Kitaplığı'ndaki özellik kullanılabilirliği hakkındaki ayrıntılara buradan ulaşabilirsiniz, ancak önemli dengeler bir sonraki tabloda özetlenir.
| İstemci kitaplığı / SDK | Uygulama Karmaşıklığı | Özelleştirme Özelliği | Arama | Sohbet | Teams Birlikte Çalışma |
|---|---|---|---|---|---|
| Bileşik Bileşenler | Düşük | Düşük | ✔ | ✔ | ✔ |
| Temel Bileşenler | Orta | Orta | ✔ | ✔ | ✔ |
| Çekirdek istemci kitaplıkları | Yüksek | Yüksek | ✔ | ✔ | ✔ |
Bileşikler , yaygın iletişim senaryolarını uygulayan anahtar teslim çözümlerdir. Uygulamalarınıza görüntülü arama deneyimleri ekleyebilirsiniz. Bileşikler, geliştiricilerin geliştirme süresini ve mühendislik karmaşıklığını azaltmak için yararlanabileceği açık kaynak yüksek sıralı bileşenlerdir.
Bileşiklere genel bakış
| Bileşik | Kullanım Örnekleri |
|---|---|
| CallComposite | Kullanıcıların bir aramayı başlatmasına veya bir aramaya katılmasına olanak tanıyan arama deneyimi. Deneyimin içinde kullanıcılar cihazlarını yapılandırabilir, görüntülü aramaya katılabilir ve video açık olanlar da dahil olmak üzere diğer katılımcıları görebilir. Teams birlikte çalışabilirliği için, CallComposite kullanıcıların kabul edilmeyi bekleyebilmesi için lobi işlevselliğini içerir. |
| ChatComposite | , ChatComposite kullanıcılara gerçek zamanlı bir kısa mesaj deneyimi getirir. Özellikle, kullanıcılar yazma göstergelerinden ve okundu bilgisinden olaylar içeren bir sohbet iletisi gönderip alabilir. Ayrıca kullanıcılar, katılımcının eklendiği veya kaldırıldığı ve sohbet başlığındaki değişiklikler gibi sistem iletilerini de alabilir. |
Çağırma için bileşik senaryolar
Görüntülü/sesli aramaya katılma
Kullanıcılar Teams toplantı URL'sini kullanarak bir aramaya katılabilir veya bir Azure İletişim Hizmetleri Araması ayarlayabilir. Bu yaklaşım, Teams uygulaması gibi daha basit bir deneyim sunar.
Arama öncesi deneyimi
Aramanın katılımcısı olarak bir ad sağlayabilir ve ses ve video cihazları için varsayılan yapılandırmayı ayarlayabilirsiniz. O zaman aramaya başlamaya hazırsınız demektir.
Arama deneyimi
Çağıran bileşik uçtan uca bir deneyim sağlar, geliştirme süresini iyileştirir ve temiz düzene odaklanır.
Çağrı deneyimi, tüm bu özellikleri tek bir bileşik bileşende sağlayarak karmaşık kod içermeyen net bir yol sağlar ve bu da geliştirme süresinin daha hızlı olmasını sağlar.
Kalite ve güvenlik
Çağrı için mobil bileşikler Azure İletişim Hizmetleri erişim belirteçleri kullanılarak başlatılır.
Diğer ayrıntılar
Arama için mobil bileşikler hakkında daha fazla ayrıntıya ihtiyacınız varsa bkz . kullanım örnekleri.
Sohbet için bileşik senaryolar
Önemli
Azure İletişim Hizmetleri'nin bu özelliği şu anda önizleme aşamasındadır.
Önizleme API'leri ve SDK'ları hizmet düzeyi sözleşmesi olmadan sağlanır. Bunları üretim iş yükleri için kullanmamanızı öneririz. Bazı özellikler desteklenmeyebilir veya kısıtlı özelliklere sahip olabilir.
Daha fazla bilgi için Microsoft Azure Önizlemeleri için Ek Kullanım Koşulları'nı gözden geçirin.
Sohbet deneyimi
gerçek ChatComposite zamanlı kısa mesaj deneyimleri sunar. Esneklik ve ölçeklenebilirlik göz önünde bulundurularak, ChatComposite karmaşıklık olmadan uygulamalarınızdan farklı düzen veya görünümlere uyarlanabilir. Görünümü göstermemeyi ChatComposite ve yalnızca farklı iş gereksinimlerinizi karşılayacak bildirimler almayı da seçebilirsiniz.
| iOS | Android |
|---|---|
|
|
Kalite ve güvenlik
benzer şekildeCallComposite, ChatComposite Azure İletişim Hizmetleri erişim belirteçlerini de kullanır. Sohbet deneyimi başlatılmadan önce yalnızca uygun izne sahip kullanıcıların sohbete erişebildiğinden emin olmak için kullanıcı belirteçlerinin geçerli bir sohbet yazışmasına eklenmesi gerekir.
Diğer ayrıntılar
Sohbet için mobil bileşikler hakkında daha fazla ayrıntıya ihtiyacınız varsa bkz . kullanım örnekleri.
Projem için en iyi kullanıcı arabirimi yapıtı hangisidir?
Bu gereksinimler doğru istemci kitaplığını seçmenize yardımcı olur:
Ne kadar özelleştirme istiyorsunuz? Azure İletişim Hizmetleri çekirdek istemci kitaplıklarının UX'si yoktur ve istediğiniz UX'i oluşturabilmeniz için tasarlanmıştır. UI Kitaplığı bileşenleri, kullanıcı arabirimi varlıklarını daha az özelleştirme karşılığında sağlar.
Hangi platformları hedeflediğiniz? Farklı platformların farklı özellikleri vardır.
Bazı önemli dengeler şunlardır:
| İstemci kitaplığı / SDK | Uygulama karmaşıklığı | Özelleştirme özelliği | Arama | Sohbet | Teams birlikte çalışabilirliği |
|---|---|---|---|---|---|
| Bileşik Bileşenler | Düşük | Düşük | ✔ | ✔ | ✔ |
| Çekirdek istemci kitaplıkları | Yüksek | Yüksek | ✔ | ✔ | ✔ |
Kullanıcı Arabirimi Kitaplığı'nda özellik kullanılabilirliği hakkında daha fazla bilgi için bkz . Ui Kitaplığı kullanım örnekleri.