هندسة

جولة في Sendbird UIKit for React: المكونات والوحدات الأساسية التي تحتاج إلى معرفتها

Blog author
Michelle Wong Developer Advocate
Share
جولة في Sendbird UIKit for React: المكونات والوحدات الأساسية التي تحتاج إلى معرفتها

بناء الدردشة داخل التطبيق هو مسعى رائع ولكنه معقد. سواء كنت تقوم بالبناء من أجل الألعاب أو البيع بالتجزئة أو الصحة الرقمية أو عند الطلب ، من الضروري أن يكون لديك واجهة مستخدم دردشة مبسطة على الويب أو تطبيق الجوال. سيندبيرد ييكيت يجعل من السهل تنفيذ واجهة مستخدم دردشة سهلة الاستخدام. ال Sendbird UIKit لـ React يوفر الموارد اللازمة لبناء تجربة محادثة وظيفية وجذابة مع مكونات واجهة المستخدم المبنية مسبقًا من Sendbird SDK. يعد UIKit for React مفيدًا لأنه من الضروري للمطورين أن يكونوا قادرين على تحديد العناصر اللازمة لبناء دردشة غنية بالميزات ومبسطة بالطريقة التي تتخيلها.

في هذه المدونة ، سنتعرف على مكونات Sendbird UIKit for React ، بالإضافة إلى كل حالة من حالات استخدامها. بنهاية هذه المدونة ، سوف تفهم كيفية تنفيذ هذه المكونات لإنشاء تكامل مخصص خاص بك.

UIKit for React: إعداد البيئة

للبدء ، قم بإنشاء تطبيق على لوحة معلومات Sendbird. هذا هو المكان الذي يمكنك فيه الوصول إلى كل ما هو ضروري لخدمة الدردشة الخاصة بك ، بما في ذلك التطبيقات والمستخدمين والرسائل والقنوات. بمجرد إنشاء تطبيق ، ستحتاج إلى معرف التطبيق لتهيئة Chat SDK.

بعد ذلك ، قم بإنشاء بيئة مشروع جديدة باستخدام تطبيق create-react-app. ثم أضف ملف .env لتخزين معرف التطبيق ومعرف المستخدم واللقب الذي تم إنشاؤه من لوحة معلومات Sendbird. الآن ، قم بتثبيت Sendbird UIKit من خلال npm أو الغزل:

بمجرد تثبيت UIKit for React ، نريد تنفيذه في التطبيق باستخدام المكونات. أول ما سنتعرف عليه هو مكون التطبيق.

مكون التطبيق

مكون التطبيق عبارة عن مجموعة من مكونات واجهة المستخدم التي تنشئ واجهة دردشة وظيفية. سيعرض التطبيق أو مكون التطبيق عرضًا يحتوي على قائمة القنوات ومحادثة القناة وإعدادات القناة ، وكل ذلك ضمن مكون واحد.

لاستخدام هذا ، قم باستيراد مكون UIKit SendbirdApp وورقة أنماط UIKit في ملف App.js:

 

يتطلب مكون التطبيق إدخال معرف التطبيق ومعرف المستخدم. يوضح الكود التالي كيفية استخدام مكون التطبيق:

بعد ذلك ، حدد الارتفاع والعرض لواجهة الدردشة في ورقة الأنماط:

تأكد من استيراد ورقة الأنماط هذه في ملف App.js.

في هذه المرحلة ، لدينا تطبيق دردشة يعمل بنجاح يمكنك من خلاله إنشاء قناة جديدة وإرسال الرسائل. يجب أن تبدو هذه:

تطبيق دردشة ناجح

إذا كنت ترغب في تخصيص تجربة الدردشة الخاصة بك ، يمكنك القيام بذلك باستخدام المكونات والوحدات الأساسية التي توفرها UIKit. أولاً ، دعنا نتعمق في المكونات الأساسية.

المكونات الأساسية في UIKit لـ React

المكونات الأساسية هي اللبنات الأساسية لـ UIKit. تتضمن المكونات الأساسية SendbirdProvider و sendbirdSelectors و userSendbirdStateContext و withSenbird (). يخزن كل من هذه البيانات ويعمل على جميع البيانات اللازمة لتشغيل التطبيق.

كيف تعمل المكونات الأساسية؟ يحصلون على البيانات من مثيل Chat SDK ، والاتصال بخادم Sendbird ، والتحدث إلى الوحدات النمطية للأحداث التي تحدث في العرض ، وتكوين الميزات والترجمة. تعمل هذه المكونات على إنشاء وتنفيذ العروض ؛ ومع ذلك ، فهم لا يوفرون أو يعرضون واجهة مستخدم. هذا هو المكان الذي تلعب فيه الوحدات النمطية: توفر الوحدات طريقة عرض واجهة المستخدم للمكون الأساسي المستخدم.

SendbirdProvider _ هو أهم مكون أساسي لأنه يوفر السياق ويمرر بيانات Chat SDK وكذلك الحالة الحالية إلى أي مكونات تابعة. يجب أن يكون SendbirdProvider في المستوى الأعلى حتى يتمكن التطبيق بأكمله من الوصول إلى بيانات Sendbird.

باستخدام SendbirdProvider ، يمكننا استخدام useSendbirdStateContext () المكون لتنفيذ Sendbird Chat SDK لـ Javascript في المكونات الفرعية لـ SendbirdProvider. سيسمح لنا مكون useSendbirdStateContext بالوصول إلى حالة SendbirdProvider ، وربط إجراءات SDK ، ويمكن استخدامه مع sendbirdSelectors لتنفيذ وظائف مثل إرسال رسالة أو تحديثها.

قبل UIKit v4 ، تم استخدام المكون withSendbird () لتمرير البيانات بين Chat SDK والوحدات النمطية ، ولكن مع تحديث UIKit ، نوصي باستخدام useSendbirdStateContext () بدلاً من ذلك.

أخيرًا ، محددو الإرسال تُستخدم لإجراء عمليات البيانات وتمنحك الوصول إلى SDK. ال تتضمن وظائف المحدد الرئيسي getSdk و getCreateOpenChannel و getDeleteMessage.

معالجات

يوفر UIKit معالجات أحداث متنوعة لإدارة الأنشطة والأحداث التي تحدث في تطبيق العميل. منذ الترقية من v3 إلى v4 في نفذت Chat SDK و UIKit معالجات أحداث القناة التي يمكن استيرادها بدلاً من استدعاء معالج القناة من sdkInstance. تتضمن معالجات أحداث القناة ConnectionHandler و GroupChannelHandler و OpenChannelHandler و UserEventHandler. بعد ذلك ، يستخدم SDK ملفات معالجات الجلسة لتجديد رمز الجلسة. يتم استخدام الرمز المميز للجلسة لمصادقة مستخدم بشكل آمن عندما تقوم Chat SDK بتوصيل المستخدم بخادم Sendbird حيث يمكنهم إرسال طلبات البيانات إليه قبل انتهاء صلاحية الرمز المميز.

الوحدات النمطية في UIKit لـ React

الآن بعد أن عرفنا عن المكونات الأساسية لـ UIKit ، من المهم التعرف على الوحدات وكيف تعمل كل وحدة مع المكونات الأساسية. الوحدات تعمل كمكونات ذكية توفر واجهة مستخدم قابلة للتخصيص. تحتوي هذه الوحدات النمطية على موفري ومكونات واجهة مستخدم مبنية مسبقًا تنشئ طريقة عرض دردشة وظيفية.

الوحدات الثمانية في UIKit هي:

  1. فقط بضعة أسئلة سريعة
  2. قم بإنشاء قناة
  3. قناة المجموعة
  4. إعدادات قناة المجموعة
  5. اتمنا من كل زوجه قناة فتح
  6. افتح إعدادات القناة
  7. البحث عن الرسائل
  8. تحرير ملف تعريف المستخدم

تحتوي كل وحدة نمطية على موفر سياق ومجموعة من مكونات واجهة المستخدم. يدير الموفر البيانات الضرورية من Chat SDK بينما تعرض مكونات واجهة المستخدم الواجهات لعرض عرض الوحدة. لتمرير البيانات بين الموفر ومكونات واجهة المستخدم ، نستخدم خطاف useContext. يجب أن تكون روابط السياق داخل الموفر للسماح لكل مكون من مكونات واجهة المستخدم بالوصول إلى البيانات من الموفر. على الرغم من وجود مجموعة افتراضية من مكونات واجهة المستخدم لكل وحدة نمطية ، فإن جميع مكونات واجهة المستخدم قابلة للتخصيص عن طريق تعيين دعامات الإدخال بمكونات مخصصة.

فقط بضعة أسئلة سريعة

قائمة القنوات يعرض قائمة قنوات المجموعة التي يكون المستخدم الحالي عضوًا فيها. تتضمن بعض خصائص ChannelList onBeforeCreateChannel و onChannelSelect و renderChannelPreview.

تسمح لك خصائص onBeforeCreateChannel و onChannelSelect بتنفيذ الإجراءات بينما يتفاعل المستخدم مع واجهة مستخدم UIKit. تتيح لك الخاصية renderChannelPreview استبدال واجهة المستخدم الافتراضية لمعاينة القناة بمكونك المخصص. يمكن استخدام هذا لضبط معاينة القناة بحيث يتم عرض اسم المستخدم المستعار ببساطة في قائمة القنوات.

موفر السياق المستخدم لهذه الوحدة هو ChannelListProvider. يدير هذا المزود المنطق والبيانات المستخدمة في عرض قائمة القنوات. لذلك ، إذا كان التطبيق الخاص بك يتطلب فقط عرض قائمة القنوات ، فيمكنك استخدام وحدة ChannelList لعرض عرض قائمة القنوات وتغليف هذه الوحدة داخل ChannelListProvider ، والتي ستنقل أي بيانات ضرورية إلى ChannelList.

يمكنك أيضًا استخدام useChannelListContext ربط للوصول إلى بيانات المزود. تمت تهيئة بعض خصائص useChannelListContext وتحميلها و currentChannel.

مكونات واجهة المستخدم التي تشكل طريقة عرض ChannelList هي ChannelListUI و ChannelListHeader و ChannelPreview. ال ChannelListUI يعرض الشاشة الأساسية للوحدة ، بما في ذلك الرؤوس ومعاينة القناة. وهي تتضمن قائمة بالخصائص التي يجب استخدامها مثل RenderHeader و RenderPlaceHolderError و RenderPlaceHolderLoading. ال ChannelListHeader هو رأس ChannelListUI الذي يعرض العنوان وزرًا لإنشاء قناة جديدة. هناك ثلاث خصائص لاستخدامها مع واجهة المستخدم هذه ، وهي RenderHeader و renderIconButton و allowProfileEdit. ال معاينة القناة يعرض مكون واجهة المستخدم قناة واحدة في قائمة القنوات. خصائص ChannelPreview هي channel و onClick و renderChannelAction و isActive.

إليك كيفية تنفيذ ChannelList باستخدام ChannelListProvider و useChannelListContext:

هذا هو التصميم الافتراضي لمكون ChannelList:

واجهة المستخدم الافتراضية لمكون ChannelList

CreateChannel

قناة CreateChannel يتم استخدام الوحدة النمطية لإنشاء قناة مجموعة جديدة. يتطلب CreateChannel تمرير الخاصية channelUrl إليه. تتضمن الخصائص الاختيارية الإضافية onBeforeCreateChannel و onCreateChannel و onCancel. يتم تنفيذ جميع هذه الخصائص الثلاثة في إجراءات معينة داخل واجهة مستخدم UIKit ، مما يتيح لك تمرير وتشغيل مجموعة العمليات الخاصة بك.

على سبيل المثال ، يمكنك استخدام onBeforeCreateChannel لتشغيل دالة ليتم استدعاؤها عندما ينقر المستخدم لإنشاء قناة مجموعة وقبل أن تنشئ قناة جديدة. الوظيفة التي يتم استدعاؤها ، على سبيل المثال ، يمكن أن تحدد صورة المجموعة للقناة التي يتم إنشاؤها. سيسمح لك استخدام الخاصية onCreateChannel بتنفيذ إجراء بعد إنشاء القناة مباشرةً. يمكنك استخدام هذا لعرض رسالة نجاح على الشاشة بمجرد إنشاء قناتك. إذا كنت تريد تشغيل حدث عند النقر فوق الزر “إلغاء” ، فيمكنك استخدام خاصية onCancel. يمكنك اختيار تنفيذ واجهة المستخدم المخصصة الخاصة بك من هنا واستدعاء وظيفة لتقديم عرض يسألك عما إذا كنت متأكدًا من رغبتك في إلغاء إنشاء القناة.

كائنات السياق التي يمكن استخدامها لإنشاء قناة مجموعة وتمرير البيانات من الموفر إلى مكونات واجهة المستخدم هما CreateChannelProvider و useCreateChannel صنارة صيد. يتطلب CreateChannelProvider تمرير الخاصية channelUrl. الخصائص الاختيارية الإضافية هي التوابع ، onCreateChannel ، onBeforeCreateChannel و queries.applicationUserListQuery.

مكونات واجهة المستخدم التي تؤلف طريقة العرض CreateChannel هي CreateChannelUI و InviteMembers و SelectChannelType. يتم استخدام CreateChannelUI و SelectChannelType معًا لإظهار الخطوة الأولى من الوحدة النمطية CreateChannel. يعرض InviteMembers الخطوة الثانية بعد إنشاء القناة. يحتوي CreateChannelUI على خصائص onCancel و renderStepOne. يعرض SelectChannelType طريقة العرض حيث يمكن للمستخدم الحالي اختيار نوع القناة المراد إنشاؤها. دعوة المستخدمين يعرض طريقة عرض حيث يمكن للمستخدم الحالي دعوة مستخدمين آخرين للانضمام إلى القناة. يحتوي كل من SelectChannelType و InviteMembers على خاصية onCancel.

توضح التعليمات البرمجية التالية كيفية استخدام الوحدة النمطية CreateChannel مع CreateChannelProvider والخطاف useCreateChannel:

يوجد أدناه التخطيط الافتراضي لوحدة CreateChannel:

إنشاء قناة جديدة

إضافة مستخدمين إلى قناة جديدة

قناة

القناة _ تعرض الوحدة محادثة قناة جماعية. يمكن للمستخدمين الوصول إلى قناة المجموعة فقط إذا تمت دعوتهم ليكونوا أعضاء في القناة. تتطلب هذه الوحدة تعيين خاصية channelUrl. تتضمن الخصائص الاختيارية الأخرى isReactionEnabled و showSearchIcon و onBeforeSendUserMessage.

تتحكم خصائص isReactionEnabled و showSearchIcon في ما إذا كان يتم استخدام الميزة وعرضها أم لا. يمكن استخدام الخاصية onBeforeSendUserMessage لتنفيذ منطق مخصص في الخلفية عندما ينقر المستخدم لإرسال رسالة ، ولكن أكمل العمليات قبل إرسال الرسالة إلى القناة. لذلك ، عند النقر فوق إرسال رسالة ، سيؤدي ذلك إلى تشغيل الوظيفة التي تقوم بتمريرها لإكمال الإجراء ، ثم إرسال الرسالة. يمكن أن يكون هذا مفيدًا في الحالة التي تريد فيها التحقق من نص الرسالة التي يتم إرسالها وإذا كانت تحتوي على كلمة معينة ، فقم بتشغيل رسم متحرك عند إرسال الرسالة.

كائنات السياق المستخدمة لتخزين وإدارة البيانات المستخدمة لإنشاء قناة مجموعة هما ChannelProvider و useChannelContext صنارة صيد. يتطلب ChannelProvider خاصية channelUrl ويتضمن خصائص إضافية مثل isMessageGroupingEnabled و isReactionEnabled و selectedMessage. تشتمل الخصائص الاختيارية لربط سياق سياق useChannelContext على channelUrl و startPoint و onBeforeSendFileMessage.

مكونات واجهة المستخدم في الوحدة النمطية للقناة هي ChannelUI و ChannelHeader و MessageInput و MessageList و FileViewer و FrozenNotification و Message و RemoveMessageModal و TypingIndicator و UnreadCount. ChannelUI يعرض الشاشة الأساسية للوحدة النمطية ويحتوي على عدد من الخصائص مثل renderPlaceholderLoader و renderMessageInput و renderTypingIndicator. رأس القناة هو رأس مكون ChannelUI الذي يعرض عنوان القناة ورمز البحث في الرسالة وأيقونة معلومات القناة. إدخال الرسالة هو المكون الذي يمكن للمستخدمين من خلاله إدخال رسالة أو إرسال رسالة ملف.

قائمة الرسائل يعرض قائمة بجميع الرسائل في قناة مجموعة ولها ثلاث خصائص: renderMessage ، و renderPlaceholderEmpty ، و renderCustomSeperator. FileViewer يعرض جميع الرسائل التي تحتوي على ملفات صور أو فيديو وله خاصيتان اختياريتان: onCancel و message. الإخطار المجمدة هو مكون يعرض لافتة تنبه المستخدمين إلى أن القناة الحالية مجمدة. رسالة هو مكون داخل MessageList يعرض رسالة واحدة في القناة. يتطلب خاصية message وله خصائص اختيارية إضافية مثل hasSeperator و chainTop و renderEditInput. يُظهر RemoveMessageModal شكلاً يؤكد أنه سيتم حذف الرسالة المحددة من القناة وله خاصيتان اختياريتان: onCancel و message. مؤشر يعرض العضو في القناة الذي يقوم بكتابة رسالة بشكل نشط. و اخيرا، عدد غير مقروء يعرض عدد الرسائل غير المقروءة في القناة. خصائص UnreadCount هي count و time و onClick.

الكود التالي هو كيفية تنفيذ الوحدة النمطية للقناة باستخدام ChannelProvider و useChannelContext:

هذا هو التخطيط الافتراضي لمكون القناة:

تخطيط مكونات القناة

اعدادات القناة

إعدادات القناة تعرض الوحدة النمطية قائمة بمعلومات قناة المجموعة وخيارات الإعدادات. يمكن للأعضاء التحقق من قائمة الأعضاء ودعوة مستخدم إلى القناة ومغادرة القناة. إذا كان المستخدم هو مشغل قناة ، فسيكون لديه خيارات إضافية متاحة له (في الإعدادات) ، مثل القدرة على إضافة أو إزالة المشغلين ، وكتم صوت الأعضاء أو حظرهم ، والاطلاع على قائمة المستخدمين الذين تم كتم صوتهم والمحظور عليهم ، والمغادرة أو تجميد القناة.

تتطلب ChannelSettings خاصية channelUrl ولها خصائص اختيارية مثل onCloseClick و onChannelModified و renderLeaveChannel. يتم تشغيل خصائص onCloseClick و onChannelModified بواسطة حدث تم إطلاقه من واجهة المستخدم نفسها وتنفيذ المنطق المخصص الذي تمرره. يمكنك استخدام onCloseClick في حالة قيام المستخدم بالنقر فوق الزر لإغلاق شريط الإعدادات. يمكنك تمرير وظيفة حيث تريد تعديل واجهة المستخدم لعدم عرض مكون الإعدادات. إذا كنت ترغب في إطلاق حدث بمجرد تغيير الإعدادات ، يمكنك عرض رسالة نجاح على الشاشة باستخدام الخاصية onChannelModified. عند استخدام ChannelSettings ، قد ترغب في تغيير تصميم زر “مغادرة القناة”. يمكنك القيام بذلك باستخدام الخاصية renderLeaveChannel التي يمكنك بواسطتها تمرير واجهة المستخدم المخصصة الخاصة بك إلى وحدة الإعدادات.

كائنات السياق لإنشاء قائمة إعدادات القناة لهذه الوحدة هما ChannelSettingsProvider و useChannelSettingsContext. ال ChannelSettingsProvider يتطلب channelUrl ليتم تمريره. بعض الخيارات الأخرى لهذا الموفر هي onCloseClick و onBeforeUpdateChannel وalidChannel. ال يحتوي الخطاف useChannelSettingsContext على العديد من الخصائص التي يمكن استخدامها ، مثل onCloseClick و onChannelModified و onBeforeUpdateChannel.

مجموعة ChannelSettings لمكونات واجهة المستخدم التي تشكل طريقة عرض إعدادات قناة المجموعة هي ChannelSettingsUI و ModerationPanel و UserPanel و ChannelProfile و EditDetailsModal و LeaveChannel و UserListItem. إعدادات القناة يعرض العرض الذي يتضمن عرض ملف تعريف القناة وعرض قائمة الإشراف وزر مغادرة القناة. يحتوي المكون على أربع خصائص اختيارية: RenderPlaceHolderError و renderChannelProfile و RenderModerationPanel و RenderLeaveChannel. ال الاعتدال ينشئ عرض قائمة الإعدادات لمشغلي القنوات. يتضمن ذلك قائمة المشغلين ، والأعضاء ، والمستخدمين المحظورين والمكتومين ، وزر تبديل قناة التجميد ، وخيار مغادرة القناة. ال لوحة المستخدم يُنشئ المكون عرض قائمة الإعدادات لأعضاء القناة والذي يتضمن قائمة بالأعضاء وخيارًا لدعوة مستخدمين آخرين إلى القناة وخيارًا لمغادرة القناة. ال يقوم مكون ChannelProfile بإنشاء عرض ملف تعريف القناة بما في ذلك عنوان القناة والصورة وزر التحرير مما يسمح للمستخدمين بتغيير معلومات القناة. تحرير التفاصيل يعرض شكلاً حيث يمكن للمستخدمين تحرير اسم القناة وصورة الملف الشخصي. لها خاصيتان اختياريتان يمكن استخدامهما: onSubmit و onCancel. ال ترك قناة يتم عرض مشروط عندما ينقر المستخدم لمغادرة القناة في قائمة الإعدادات ويطلب من المستخدم تأكيد هذا الإجراء. يحتوي LeaveChannel على خاصية onSubmit و onCancel التي يمكن استخدامها معها. ال UserListItem يعرض مستخدمًا فرديًا ضمن قائمة مستخدمين. يتطلب هذا المكون تعيين خاصية مستخدم وله ثلاث خصائص اختيارية: currentUser ، و className ، و action.

إليك كيفية تنفيذ وحدة ChannelSettings باستخدام ChannelSettingsProvider و useChannelSettingsContext:

هذه هي واجهة المستخدم الافتراضية لـ ChannelSetting لغير المشغلين:

إعدادات القناة الافتراضية واجهة المستخدم

هذه هي إعدادات القناة التي سيتم عرضها لمشغلي القنوات:

واجهة مستخدم إعدادات القناة لمشغلي القنوات

اتمنا من كل زوجه قناة فتح

القناة المفتوحة هي قناة عامة يمكنها التعامل مع عدد كبير من المستخدمين الذين يتفاعلون في الدردشة. ال تتطلب الوحدة النمطية OpenChannel خاصية channelUrl ولها نطاق من الخصائص الاختيارية مثل العناصر الفرعية و isMessageGroupingEnabled و messageLimit و renderUserProfile.

تعرض الخاصية الفرعية المكونات الفرعية لـ OpenChannel ، وهي البيانات التي يوفرها OpenChannelProvider. تتحقق الخاصية isMessageGroupingEnabled من تنشيط الميزة حتى تعرف كيفية عرض واجهة المستخدم. إذا تم تمكين تجميع الرسائل ، فسيتم تجميع كل رسالة يتم إرسالها خلال دقيقة واحدة في رسالة واحدة. توفر الخاصية messageLimit الحد الأقصى لعدد الرسائل التي سيتم تخزينها في مكون OpenChannelMessageList للقناة. إذا كنت ترغب في تخصيص معاينة الملف الشخصي عند النقر فوق الصورة الرمزية للمستخدم ، فيمكنك تمرير مكون واجهة المستخدم الخاص بك باستخدام خاصية renderUserProfile لتجاوز التصميم الافتراضي.

كائنات السياق التي يمكن استخدامها لوحدة OpenChannel النمطية لتخزين البيانات ومعالجتها هي OpenChannelProvider و useOpenChannel hook. ال OpenChannelProvider يتطلب تعيين خاصية channelUrl. تتضمن بعض الخصائص الاختيارية isMessageGroupingEnabled و messageLimit و onChatHeaderActionClick. ال يحتوي رابط سياق useOpenChannelContext على عدد من الخصائص التي يمكن استخدامها ، مثل RenderUserProfile و currentOpenChannel و allMessages.

مجموعة مكونات واجهة المستخدم التي تشكل وحدة OpenChannel هي OpenChannelUI و OpenChannelHeader و OpenChannelInput و OpenChannelMessageList و OpenChannelMessage. OpenChannelUI يعرض الشاشة الأساسية للوحدة النمطية وعرض الرأس والرسالة وقائمة الرسائل في قناة مفتوحة. يحتوي OpenChannelUI على قائمة بالخصائص الاختيارية مثل renderMessage و RenderHeader و RenderInput. يعرض OpenChannelHeader عنوان القناة وأيقونة المعلومات. OpenChannelInput هو المكان الذي يمكن للمستخدمين من خلاله إرسال رسالة أو ملف رسالة مثل صورة أو مقطع فيديو أو مستند. ال OpenChannelMessageList يعرض قائمة بجميع الرسائل في قناة مفتوحة. لها خاصيتان اختياريتان: renderMessage و RenderPlaceHolderEmptyList. OpenChannelMessage يظهر الرسالة الفردية في القناة. يتطلب هذا المكون خاصية message وله عدد من الخصائص الاختيارية مثل hasSeperator و chainTop و editDisabled.

فيما يلي كيفية استخدام الوحدة النمطية OpenChannel مع OpenChannelProvider و useOpenChannelContext:

هذا ما يبدو عليه التصميم الافتراضي لـ OpenChannel:

واجهة المستخدم الافتراضية لـ OpenChannel

OpenChannelSettings

إعدادات OpenChannelSettings تعرض الوحدة النمطية قائمة بالإعدادات مثل توفير اسم القناة وصورة القناة وعنوان URL للتطبيق وقائمة المشاركين. إذا كان المستخدم الحالي عامل تشغيل ، فلديه إعدادات إضافية مثل إضافة عمليات أو إزالتها ، وعرض قائمة بالمستخدمين الذين تم كتم صوتهم أو حظرهم ، والقدرة على كتم صوت المشاركين أو حظرهم ، وخيار لحذف القناة.

يتطلب OpenChannelSettings تمرير خاصية channelUrl. بعض الخصائص الأخرى المتوفرة هي onChannelModified و onDeleteChannel و onCloseClick. ستقوم هذه الخصائص بتشغيل مجموعة من العمليات حيث يتفاعل المستخدم مع سمات محددة في واجهة المستخدم. في إعدادات القناة المفتوحة ، باستخدام onCloseClick ، يمكنك تعيين حالة شريط الإعدادات لإغلاقه وإزالة مكون الإعدادات من عرض الدردشة. تنطبق الفكرة نفسها عند استخدام onChannelModified و onDeleteChannel ، حيث إذا نقر المستخدم لحفظ أي تعديلات أجراها أو إذا نقر على الزر لحذف القناة ، فيمكنك تعديل واجهة المستخدم في تطبيقك للحصول على مكون مخصص ليظهر على شاشة.

كائنات السياق المستخدمة لإنشاء قائمة إعدادات قناة وظيفية هما OpenChannelSettingsProvider وخطاف useOpenChannelSettingsContext. ال OpenChannelSettingsProvider يتطلب تمرير channelUrl ويتضمن خصائص إضافية مثل onBeforeUpdateChannel و disableUserProfile و RenderUserProfile. ال يحتوي الخطاف useOpenChannelSettingsContext على قائمة بالخصائص مثل onDeleteChannel و onChanelModified و setChannel.

مكونات واجهة المستخدم التي تؤلف وحدة OpenChannelSetting الشاملة هي OpenChannelSettingsUI و OperatorUI و ParticipantUI و OpenChannelProfile و EditDetailsModal. OpenChannelSettingsUI يعرض الشاشة الأساسية للوحدة التي تحتوي على OperatorUI و ParticipantUI. الخواص الاختيارية لـ OpenChannelSettingsUI هما renderOperatorUI و renderParticipantList. يعرض OperatorUI قائمة الإعدادات لمشغلي القنوات وله خاصية اختيارية renderChannelProfile. تعرض واجهة المستخدم الخاصة بالمشارك قائمة بالمشاركين في القناة المفتوحة. يقوم OpenChannelProfile بإنشاء عرض ملف تعريف القناة الذي يعرض عنوان القناة وصورتها. تحرير التفاصيل يظهر عندما يريد المستخدم تعديل اسم القناة وصورة الملف الشخصي. يحتوي على خاصية onCancel التي يمكن تشغيلها عند النقر فوق زر الإلغاء.

الكود التالي هو كيفية استخدام الوحدة النمطية OpenChannelSettings مع OpenChannelSettingsProvider و useOpenChannelSettingsContext:

هذا ما يتم عرض OpenChannelSettings على النحو التالي:

واجهة المستخدم الافتراضية لإعدادات القناة

رسالة البحث

البحث عن الرسائل تسمح الوحدة النمطية للمستخدمين بالبحث عن الرسائل داخل القنوات التي ينتمون إليها. مطلوب خاصية channelUrl ليتم تعيينها لـ MessageSearch. اختياري إضافي الخصائص المتاحة للاستخدام مثل onResultLoaded و onResultClick و RenderPlaceholderEmptyList.

عند استخدام وحدة MessageSearch ، قد ترغب في عرض جميع نتائج البحث في نافذة واجهة مستخدم منفصلة تُعرض كطبقة منبثقة أعلى الدردشة. يمكنك القيام بذلك باستخدام الخاصية onResultLoaded حيث يتم استدعاء الوظيفة بمجرد استلام النتائج. باستخدام onResultClick ، يمكنك تشغيل منطق مخصص بمجرد قيام المستخدم بتحديد نتيجة بحث. تتيح لك الخاصية renderPlaceholderEmptyList إنشاء واجهة مستخدم مخصصة للعنصر النائب عندما تعود قائمة البحث بدون نتائج. لذلك ، عندما لا تحتوي قائمة البحث على أي شيء تسرده ، يمكن أن يظهر لك إشعار.

بالنسبة لـ MessageSearch ، يمكنك استخدام MessageSearchProvider و useMessageSearch hook لتخزين وإدارة البيانات المستخدمة لإنشاء واجهة مستخدم للبحث عن الرسائل. MessageSearchProvider يتطلب تحديد channelUrl وله خصائص اختيارية إضافية مثل onResultClick و messageSearchQuery و onResultLoaded. ال يحتوي الخطاف useMessageSearchContext على عدد من الخصائص الاختيارية مثل onResultLoaded و requestString و selectedMessageId.

MessageSearchUI هي مكون واجهة المستخدم الوحيد في وحدة MessageSearch ويعرض طريقة عرض نتائج البحث.

إليك كيفية تنفيذ MessageSearch باستخدام MessageSearchProvider و useMessageSearchContext:

تبدو واجهة المستخدم الافتراضية لوحدة MessageSearch كما يلي:

واجهة المستخدم الافتراضية لـ MessageSearch

EditUserProfile

الملف الشخصي EditUserProfile الوحدة النمطية تسمح للمستخدم الحالي بإجراء تغييرات على ملفه الشخصي. من خلال النقر على الصورة الرمزية الخاصة بهم ، تظهر نافذة منبثقة تحتوي على معلومات ملفهم الشخصي. هنا ، يتوفر للمستخدمين خيار تحرير صورة ملفهم الشخصي واللقب ، ويمكنهم تبديل المظهر ليكون في الوضع الفاتح أو المظلم.

يحتوي EditUserProfile على 4 خصائص اختيارية التي تشمل الأطفال و onCancel و onThemeChange و onEditProfile. تُستخدم الخاصية الفرعية لمشاهدة المكونات الفرعية في EditUserProfile التي يوفرها لنا EditUserProfileProvider. يتم استخدام onCancel لتشغيل عملية عندما يتم تشغيل واجهة المستخدم من خلال نقر المستخدم لإلغاء أي تعديلات قام بها. إذا كنت ترغب في إضافة نمط إضافي بناءً على ما إذا كانت الدردشة في الوضع الفاتح أو المظلم ، فيمكنك استخدام onThemeChange لاستدعاء وظيفة تنفذ CSS مخصصًا عندما ينقر المستخدم لتغيير السمة. أخيرًا ، يتيح لك onEditProfile تنفيذ مجموعة من الإجراءات بمجرد أن يقوم المستخدم بتحديث ملفه الشخصي.

يوفر UIKit EditUserProfileProvider و useEditUserProfileProviderContext ربط ككائنات سياق للوحدة النمطية EditUserProfile. كلاهما يمكن أن يستخدم نفس الخصائص الاختيارية مثل EditUserProfile: الأطفال ، onCancel ، onThemeChange و onEditProfile.

مكون واجهة المستخدم الوحيد في الوحدة النمطية EditUserProfile هو EditUserProfileUI ، والذي يعرض طريقة عرض ملف تعريف المستخدم.

سيبدو التصميم الافتراضي لـ EditUserProfile كما يلي:

واجهة المستخدم الافتراضية لتحرير ملف تعريف المستخدم

الخلاصة والخطوات التالية

لقد راجعنا بالتفصيل المكونات والوحدات الأساسية التي يوفرها لنا Sendbird UIKit for React. مع مجموعة الأساس القوية هذه ، سنتمكن الآن من تحديد المكونات والوحدات الضرورية لدعم حالات الاستخدام المختلفة. كمثال ، تحقق من موقعنا مقالات حول كيفية إنشاء نسخة من WhatsApp messenger باستخدام Sendbird UIKit لـ React. في هذه المدونة ، ستفهم كيفية إنشاء تجربة دردشة مخصصة تشبه WhatsApp باستخدام المكونات والوحدات الأساسية التي ناقشناها خلال منشور المدونة هذا.

لمزيد من المعلومات ، يرجى مراجعة مستنداتنا أو استكشاف ثروة دروس UIKit على بوابة المطورين الخاصة بنال. إذا كنت بحاجة إلى مساعدة في Sendbird UIKit ، تحقق من منتديات المجتمع أو اتصل بنا. خبراؤنا مستعدون دائمًا للمساعدة!

بناء محادثة سعيد! ✨

 

Categories: هندسة