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