نظرة عامة على مكتبة واجهة المستخدم
تسهل لك مكتبة واجهة المستخدم إنشاء تجارب مستخدم اتصالات حديثة باستخدام Azure Communication Services. فهو يوفر لك مكتبة من مكونات واجهة المستخدم الجاهزة للإنتاج التي يمكنك إسقاطها في تطبيقاتك:
ملاحظة
للحصول على وثائق مفصلة حول مكتبة واجهة مستخدم الويب، تفضل بزيارة كتاب قصة مكتبة واجهة مستخدم ويب. ستجد هناك وثائق مفاهيمية إضافية، وقوالب التشغيل السريع والأمثلة.
المركبه. هذه المكونات هي حلول أساسية تقوم بتنفيذ سيناريوهات الاتصال الشائعة. يمكنك إضافة تجارب مكالمات الفيديو أو الدردشة بسرعة (متوفرة حاليا فقط عبر مكتبة واجهة مستخدم الويب) إلى تطبيقاتك. المركبة هي مكونات ذات ترتيب أعلى مفتوح المصدر تم إنشاؤها باستخدام مكونات واجهة المستخدم.
مكونات واجهة المستخدم. هذه المكونات هي كتل إنشاء مفتوحة المصدر تتيح لك إنشاء تجربة اتصالات مخصصة. يتم تقديم المكونات لكل من قدرات الاتصال والدردشة التي يمكن دمجها لبناء التجارب.
تستخدم مكتبات عملاء واجهة المستخدم هذه جميعها لغة وأصول التصميم Fluent من Microsoft. توفر واجهة المستخدم Fluent طبقة أساسية لمكتبة واجهة المستخدم وتستخدم بنشاط عبر منتجات Microsoft.
بالاقتران مع مكونات واجهة المستخدم، تعرض مكتبة واجهة المستخدم مكتبة عميل ذات حالة للاتصال والدردشة. هذا العميل غير محدد لأي إطار عمل محدد لإدارة الحالة ويمكن دمجه مع مديري الحالة الشائعين مثل Redux أو React Context. يمكن استخدام مكتبة العميل ذات الحالة هذه مع مكونات واجهة المستخدم لتمرير الخصائص والأساليب لمكونات واجهة المستخدم لعرض البيانات. لمزيد من المعلومات، راجع نظرة عامة على العميل ذي الحالة.
ملاحظة
تتوفر نفس المكونات والمركبات المقدمة في مكتبة واجهة المستخدم في مجموعة أدوات التصميم ل Figma، بحيث يمكنك تصميم تجارب الاتصال والدردشة الخاصة بك ونموذجها بسرعة.
نظرة عامة على المركبات
المركبات هي مكونات ذات مستوى أعلى تتكون من مكونات واجهة المستخدم التي توفر حلولا تسليم المفتاح لسيناريوهات الاتصال الشائعة باستخدام Azure Communication Services. يمكن للمطورين إنشاء مثيل مركب بسهولة باستخدام رمز وصول Azure Communication Services والتكوين المطلوب المنسوب للاتصال أو الدردشة.
| مركب | استخدام الحالات |
|---|---|
| CallwithChatComposite | تجربة الجمع بين ميزات المكالمات والدردشة للسماح للمستخدمين ببدء أو الانضمام إلى مكالمة ومؤشر ترابط الدردشة. في التجربة، يتمتع المستخدم بالقدرة على التواصل باستخدام الصوت والفيديو، بالإضافة إلى الوصول إلى مؤشر ترابط دردشة غني حيث يمكن تبادل الرسائل بين المشاركين. وهو يتضمن دعم Teams Interop. |
| CallComposite | تجربة الاتصال التي تسمح للمستخدمين ببدء مكالمة أو الانضمام إليها. داخل التجربة، يمكن للمستخدمين تكوين أجهزتهم، والمشاركة في المكالمة باستخدام الفيديو، ورؤية المشاركين الآخرين، بما في ذلك المشاركين الذين يقومون بتشغيل الفيديو. على سبيل Teams يتضمن Interop وظائف ساحة الانتظار للمستخدم للانتظار ليتم قبوله. |
| ChatComposite | تجربة الدردشة حيث يمكن للمستخدم إرسال الرسائل وتلقيها. يتم عرض أحداث مؤشر الترابط مثل الكتابة والقراءة والمشاركين الذين يدخلون ويغادرون للمستخدم كجزء من مؤشر ترابط الدردشة. |
نظرة عامة على مكون واجهة المستخدم
مكونات واجهة المستخدم النقية التي يمكن استخدامها من قبل المطورين لإنشاء تجارب الاتصال، من خياطة لوحات الفيديو إلى شبكة لعرض المشاركين عن بعد، إلى تنظيم المكونات لتناسب مواصفات التطبيقات الخاصة بك. تدعم مكونات واجهة المستخدم التخصيص لمنح المكونات الشعور الصحيح وتبدو لمطابقة العلامة التجارية للتطبيقات ونمطها.
| المجال | المكون | الوصف |
|---|---|---|
| الاتصال | تخطيط الشبكة | مكون الشبكة لتنظيم تجانبات الفيديو في شبكة NxN |
| لوحة فيديو | المكون الذي يعرض دفق الفيديو عند توفره ومكون ثابت افتراضي عندما لا | |
| شريط التحكم | حاوية لتنظيم DefaultButtons لربط إجراءات استدعاء معينة مثل كتم الصوت أو مشاركة الشاشة | |
| VideoGallery | مكون معرض الفيديو الذي يتغير ديناميكيا مع إضافة المشاركين | |
| دردشة | مؤشر ترابط الرسالة | الحاوية التي تعرض رسائل الدردشة ورسائل النظام والرسائل المخصصة |
| إرسال مربع | مكون إدخال النص مع زر إرسال منفصل | |
| مؤشر حالة الرسالة | مكون إيصال قراءة متعدد الحالات لإظهار حالة الرسالة المرسلة | |
| مؤشر الكتابة | مكون نصي لعرض المشاركين الذين يكتبون بنشاط على مؤشر ترابط | |
| عام | عنصر المشارك | مكون شائع لعرض مكالمة أو مشارك دردشة بما في ذلك الأفاتار واسم العرض |
| قائمة المشاركين | مكون شائع لعرض مكالمة أو قائمة المشاركين في الدردشة بما في ذلك الأفاتار واسم العرض |
تثبيت مكتبة واجهة مستخدم الويب
يتم العثور على العملاء المناسبين كجزء من الحزمة @azure/communication-react .
npm i --save @azure/communication-react
ما هي أداة واجهة المستخدم الأفضل لمشروعي؟
سيساعدك فهم هذه المتطلبات على اختيار مكتبة العميل المناسبة:
- ما مقدار التخصيص الذي تريده؟ لا تحتوي مكتبات عميل Azure Communication core على UX وهي مصممة حتى تتمكن من إنشاء ما تريده من تجربة مستخدم. توفر مكونات مكتبة واجهة المستخدم أصول واجهة المستخدم على حساب التخصيص المنخفض.
- ما هي الأنظمة الأساسية التي تستهدفها؟ الأنظمة الأساسية المختلفة لها قدرات مختلفة.
تتوفر تفاصيل حول توفر الميزات في مكتبة واجهة المستخدم هنا، ولكن يتم تلخيص المفاضلات الرئيسية أدناه.
| مكتبة العميل / SDK | تعقيد التنفيذ | إمكانية التخصيص | الاتصال | دردشة | Teams Interop |
|---|---|---|---|---|---|
| المكونات المركبة | منخفض | منخفض | ✔ | ✔ | ✔ |
| المكونات الأساسية | متوسط | متوسط | ✔ | ✔ | ✔ |
| مكتبات العملاء الأساسية | درجة عالية | درجة عالية | ✔ | ✔ | ✔ |
هام
هذه الميزة من خدمات اتصالات Azure موجودة حاليًا في المعاينة العامة. يتم توفير APIs وSDKs للمعاينة بدون اتفاقية مستوى الخدمة، ولا يوصى بها لأحمال العمل الإنتاجية. بعض الميزات ربما لا تكون مدعمة أو قد يكون بها بعض القدرات المقيدة. لمزيد من المعلومات، راجع شروط الاستخدام التكميلية لمعاينات Microsoft Azure.
- المركبه. هذه المكونات هي حلول أساسية تقوم بتنفيذ سيناريوهات الاتصال الشائعة. يمكنك إضافة تجربة مكالمات الفيديو بسرعة إلى تطبيقاتك. المركبات هي مكونات ذات ترتيب أعلى مفتوح المصدر يمكن لهذا المطور الاستفادة من تقليل وقت التطوير والتعقيد الهندسي.
نظرة عامة على المركبات
| مركب | استخدام الحالات |
|---|---|
| CallComposite | تجربة الاتصال التي تسمح للمستخدمين ببدء مكالمة أو الانضمام إليها. داخل التجربة، يمكن للمستخدمين تكوين أجهزتهم، والمشاركة في المكالمة باستخدام الفيديو، ورؤية المشاركين الآخرين، بما في ذلك المشاركين الذين تم تشغيل الفيديو معهم. بالنسبة Teams Interop، يتم تضمين وظائف ساحة الانتظار حتى يتمكن المستخدمون من الانتظار ليتم قبولهم. |
السيناريوهات
الانضمام إلى مكالمة فيديو/صوت
يمكن للمستخدمين الانضمام بسهولة عبر المكالمة باستخدام عنوان URL للاجتماع Teams أو يمكنهم إعداد مكالمة Azure Communication Services لتجربة أبسط ورائعة، تماما مثل تطبيق Teams. إضافة قدرة المستخدم على أن يكون جزءا من مكالمة فيديو أو صوت حية واسعة النطاق، دون فقدان تجربة البساطة والتركيز في ما يهم حقا.
تجربة ما قبل المكالمة
بصفتك مشاركا في المكالمات، يمكنك توفير اسم وإعداد تكوين افتراضي لأجهزة الصوت والفيديو، وأنت جاهز للانتقال إلى المكالمة.
تجربة الاتصال
يوفر مركب الاستدعاء تجربة نهاية ثنائية، وتحسين وقت التطوير، والتركيز في تخطيط نظيف.
توفر تجربة الاستدعاء جميع هذه القدرات في مكون مركب واحد، ما يوفر مسارا واضحا دون تعليمة برمجية معقدة مما يؤدي إلى وقت تطوير أسرع.
جودة وأمان
تتم تهيئة الأجهزة المحمولة المركبة باستخدام الرموز المميزة للوصول إلى Azure Communication Services.
مزيد من التفاصيل
إذا كنت بحاجة إلى مزيد من التفاصيل حول المركبات المحمولة، يرجى زيارة موقع حالات الاستخدام لاكتشاف المزيد.
ما هو "UI Artifact" الأفضل Project الخاص بي؟
سيساعدك فهم هذه المتطلبات على اختيار مكتبة العميل المناسبة:
ما مقدار التخصيص الذي تريده؟ لا تحتوي مكتبات عميل Azure Communication الأساسية على UX وتم تصميمها حتى تتمكن من إنشاء ما تريده من UX. توفر مكونات مكتبة واجهة المستخدم أصول واجهة المستخدم على حساب التخصيص المنخفض.
ما هي الأنظمة الأساسية التي تستهدفها؟ الأنظمة الأساسية المختلفة لها قدرات مختلفة.
تتوفر هنا تفاصيل حول توفر الميزة في مكتبة واجهة المستخدم، ولكن يتم تلخيص المفاضلات الرئيسية أدناه.
| مكتبة العميل / SDK | تعقيد التنفيذ | إمكانية التخصيص | الاتصال | Teams Interop |
|---|---|---|---|---|
| المكونات المركبة | منخفض | منخفض | ✔ | ✔ |
| مكتبات العملاء الأساسية | درجة عالية | درجة عالية | ✔ | ✔ |