Aracılığıyla paylaş


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.

Gif animasyonu, Android'de toplantı öncesi deneyimi ve katılma deneyimini gösterir.

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.

Katılımcı için ileti içeren bir sayfa olan toplantı öncesi deneyimi gösteren ekran görüntüsü.

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.

Katılımcıların simgeleri veya videosuyla toplantı deneyimini gösteren ekran görüntüsü.

Ç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
Gif animasyonu, iOS'ta sohbet deneyimini gösterir. Gif animasyonu, Android'deki sohbet deneyimini gösterir.

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.

Bilinen sorunlar