chat uikit flutter
version: 4.0.0
تحتاج فقط إلى دمج دردشة SDK للحصول على الدردشة والمحادثة وقدرات المجموعة بسهولة ، ويمكنك أيضًا التواصل مع منتجات أخرى مثل ألواح البيض من خلال الرسائل الإشارة. يمكن أن تغطي الدردشة سيناريوهات الأعمال المختلفة ، ودعم الوصول إلى مختلف المنصات واستخدامها ، وتلبية احتياجات الاتصالات بالكامل.
يقدم هذا المستند كيفية تشغيل عرض الدردشة بسرعة على منصة iOS. للمنصات الأخرى ، يرجى الرجوع إلى الوثيقة ：
يأتي Chat SDK مع Tuikit ، وهي مجموعة رسمية من مكونات واجهة المستخدم التي لديها منطق أعمال الدردشة مدمج. يتضمن Tuikit مكونات مثل المحادثة والدردشة وسلسلة العلاقات والمجموعة. انظر نظرة عامة على مكتبة Tuikit لمزيد من التفاصيل.
يمكن للمطورين استخدام مكونات واجهة المستخدم هذه لإضافة وحدات الدردشة في التطبيق بسرعة وسهولة إلى تطبيقاتهم المحمولة.
حاليًا ، يحتوي Flutter Tuikit على المكونات الرئيسية التالية:
بالإضافة إلى هذه المكونات ، هناك مكونات وعملاء مفيدة أخرى متاحة لمساعدة المطورين على تلبية احتياجات أعمالهم ، مثل قائمة تطبيقات إدخال المجموعة وقائمة أعضاء المجموعة.
تتوافق المنصات مع نشر الدردشة Uikit الخاصة بنا.
يرجى الرجوع إلى تشغيل العرض التوضيحي للحصول على دليل كامل ومفصل عند البدء.
يصف الدليل التالي كيفية إنشاء تطبيق دردشة بسيط باستخدام Flutter Tuikit. ارجع إلى التذييل إذا كنت ترغب في معرفة تفاصيل ومعلمات كل عنصر واجهة مستخدم.
قم بالتسجيل وتسجيل الدخول إلى وحدة التحكم في الدردشة.
إنشاء تطبيق وأدخله. انقر فوق المستخدمين وإنشاء حسابين.
تتمثل الطريقة الصحيحة لتوزيع
UserSigفي دمج رمز الحسابUserSigفي الخادم الخاص بك وتوفير واجهة برمجة تطبيقات موجهة نحو التطبيق. عند الحاجة إلىUserSig، يمكن للتطبيق الخاص بك إرسال طلب إلى خادم الأعمال للحصول علىUserSig.لمزيد من المعلومات ، راجع كيف يمكنني حساب useriG على الخادم؟.
قم بإنشاء تطبيق رفرفة بسرعة باتباع وثائق الرفرفة.
يحتاج Tuikit إلى أذونات التصوير/الألبوم/التسجيل/الشبكة لوظائف المراسلة الأساسية. تحتاج إلى إعلان هذه الأذونات يدويًا لاستخدام القدرات ذات الصلة بشكل طبيعي.
افتح android/app/src/main/AndroidManifest.xml وأضف الأسطر التالية بين <manifest> و </manifest> .
< uses-permission android : name = " android.permission.INTERNET " />
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
< uses-permission android : name = " android.permission.FOREGROUND_SERVICE " />
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />
< uses-permission android : name = " android.permission.VIBRATE " />
< uses-permission android : name = " android.permission.ACCESS_BACKGROUND_LOCATION " />
< uses-permission android : name = " android.permission.WRITE_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.READ_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.CAMERA " />
< uses-permission android : name = " android.permission.READ_MEDIA_IMAGES " />
< uses-permission android : name = " android.permission.READ_MEDIA_VIDEO " /> افتح ios/Podfile وأضف الأسطر التالية إلى نهاية الملف.
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
end
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
'PERMISSION_PHOTOS=1',
]
end
end
end
أضف tencent_cloud_chat_uikit ضمن dependencies في ملف pubspec.yaml ، أو قم بتشغيل الأمر التالي:
flutter pub add tencent_cloud_chat_uikitوهو يدعم Android و iOS افتراضيًا. إذا كنت ترغب أيضًا في استخدامه على الويب ، راجع الدليل التالي.
الإصدار 0.1.4 أو الأحدث مطلوب لدعم الويب.
إذا لم يدعم مشروع Flutter الحالي الخاص بك الويب ، فاستمر في flutter create . في دليل جذر المشروع لإضافة دعم الويب.
تثبيت تبعيات JavaScript على web/ باستخدام npm أو yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin افتح web/index.html وأضف الخطين التاليين بين <head> و </head> لاستيرادهما.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >تهيئة Tuikit عند بدء تطبيقك. ما عليك سوى إجراء التهيئة مرة واحدة حتى يبدأ المشروع.
احصل على مثيل Tuikit أولاً باستخدام TIMUIKitCore.getInstance() ، يليه تهيئته مع sdkAppID الخاص بك.
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
@override
void initState () {
_coreInstance. init (
sdkAppID : 0 , // Replace 0 with the SDKAppID of your Tencent Cloud Chat application
loglevel : LogLevelEnum . V2TIM_LOG_DEBUG ,
listener : V2TimSDKListener ());
super . initState ();
}}قد ترغب أيضًا في تسجيل وظيفة رد الاتصال لـ
onTUIKitCallbackListenerهنا. الرجوع إلى الملحق.
يمكنك الآن تسجيل الدخول إلى أحد حسابات الاختبار التي تم إنشاؤها في الخطوة 0 لبدء وحدة الدردشة السحابية Tencent.
تسجيل الدخول باستخدام _coreInstance.login .
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
_coreInstance. login (userID : userID, userSig : userSig);ملاحظة: يعد استيراد المستخدمين إلى تطبيقك فقط لأغراض تصحيح الأخطاء ولا يمكن استخدامه لإصدار الإصدار. قبل نشر تطبيقك ، يجب عليك إنشاء ustervesig من الخادم الخاص بك. الرجوع إلى: توليد التوقيع.
يمكنك استخدام صفحة قائمة المحادثة (القناة) كصفحة رئيسية لوحدة الدردشة الخاصة بك ، والتي تتضمن جميع المحادثات مع المستخدمين والمجموعات التي لديها سجلات الدردشة.
يمكنك إنشاء فئة Conversation ، مع TIMUIKitConversation كجسمها ، لتقديم قائمة المحادثة. تحتاج فقط إلى توفير رد اتصال onTapItem ، والذي يتيح للمستخدمين الانتقال إلى صفحة الدردشة لكل محادثة. في الخطوة التالية ، سنقدم فئة Chat .
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class Conversation extends StatelessWidget {
const Conversation ({ Key ? key}) : super (key : key);
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : const Text (
"Message" ,
style : TextStyle (color : Colors .black),
),
),
body : TIMUIKitConversation (
onTapItem : (selectedConv) {
Navigator . push (
context,
MaterialPageRoute (
builder : (context) =>
Chat (
selectedConversation : selectedConv,
),
));
},
),
);
}
}تتكون صفحة الدردشة من قائمة الرسائل الرئيسية وشريط إرسال رسالة في الأسفل.
يمكنك إنشاء فئة Chat ، مع TIMUIKitChat كجسمها ، لتقديم صفحة الدردشة. نوصي بتوفير وظيفة رد اتصال onTapAvatar للانتقال إلى صفحة الملف الشخصي لجهة الاتصال الحالية ، والتي سنقدمها في الخطوة التالية.
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class Chat extends StatelessWidget {
final V2TimConversation selectedConversation;
const Chat ({ Key ? key, required this .selectedConversation}) : super (key : key);
String ? _getConvID () {
return selectedConversation.type == 1
? selectedConversation.userID
: selectedConversation.groupID;
}
@override
Widget build ( BuildContext context) {
return TIMUIKitChat (
conversationID : _getConvID () ?? '' ,
conversationType : selectedConversation.type ?? 1 ,
conversationShowName : selectedConversation.showName ?? "" ,
onTapAvatar : (_) {
Navigator . push (
context,
MaterialPageRoute (
builder : (context) => UserProfile (userID : userID),
));
},
);
}تعرض هذه الصفحة ملف تعريف مستخدم معين وتحافظ على العلاقة بين المستخدم الحالي المسجل والمستخدم الآخر.
يمكنك إنشاء فئة UserProfile ، مع TIMUIKitProfile كجسمها ، لتقديم صفحة ملف تعريف المستخدم.
المعلمة الوحيدة التي يجب عليك توفيرها هي userID ، بينما يقوم هذا المكون تلقائيًا بإنشاء صفحة صيانة الملف الشخصي والعلاقات بناءً على وجود الصداقة.
نصيحة : يرجى استخدام
profileWidgetBuilderأولاً لتخصيص بعض مصادر الملف الشخصي وتحديد تسلسلها الرأسي باستخدامprofileWidgetsOrderإذا كنت ترغب في تخصيص هذه الصفحة. إذا لم تتمكن هذه الطريقة من تلبية احتياجات عملك ، فيمكنك التفكير في استخدامbuilderبدلاً من ذلك.
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class UserProfile extends StatelessWidget {
final String userID;
const UserProfile ({ required this .userID, Key ? key}) : super (key : key);
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : const Text (
"Message" ,
style : TextStyle (color : Colors .black),
),
),
body : TIMUIKitProfile (
userID : widget.userID,
),
);
}
}الآن يمكن لتطبيقك إرسال واستقبال الرسائل ، وعرض قائمة المحادثة ، وإدارة صداقات الاتصال. يمكنك استخدام مكونات أخرى من Tuikit لتنفيذ وحدة الدردشة الكاملة بسرعة وسهولة.
لا ، لا تحتاج إلى دمج الدردشة SDK مرة أخرى. إذا كنت ترغب في استخدام واجهات برمجة التطبيقات ذات الصلة بالدردشة SDK ، فيمكنك الحصول عليها عبر TIMUIKitCore.getSDKInstance() . يوصى بهذه الطريقة لضمان اتساق إصدار الدردشة SDK.
تحقق مما إذا كنت قد قمت بتمكين الكاميرا أو الميكروفون أو الألبوم أو غيرها من الأذونات ذات الصلة.
يشير إلى الخطوة 1 أعلاه.
تحقق من أن الجهاز لا يشغله موارد أخرى. بدلاً من ذلك ، انقر فوق "إنشاء" لإنشاء حزمة APK ، واسحبها إلى المحاكاة ، وقم بتشغيلها.
في حالة حدوث خطأ بعد التكوين ، انقر فوق Product> Clean Build Folder ، وقم بتنظيف المنتج ، وقم بتشغيل pod install أو flutter run مرة أخرى.
قم بتشغيل وضع الطائرة على Apple Watch ، وانتقل إلى الإعدادات> Bluetooth على جهاز iPhone لإيقاف تشغيل Bluetooth.
أعد تشغيل Xcode (إذا تم فتحه) وقم flutter run مرة أخرى.
androidappsrcmainAndroidManifest.xml وكمال xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" على سبيل المثال. < manifest xmlns : android = " http://schemas.android.com/apk/res/android "
package = " Replace it with your Android package name "
xmlns : tools = " http://schemas.android.com/tools " >
< application android : label = " @string/android_label " tools : replace = " android:label "
android : icon = " @mipmap/ic_launcher "
// Specify an icon path
android : usesCleartextTraffic = " true "
android : requestLegacyExternalStorage = " true " >androidappbuild.gradle وأكمل minSdkVersion و targetSdkVersion في defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}بالنسبة لأولئك الذين يحتاجون إلى إمكانيات مكالمات الصوت والفيديو في الوقت الفعلي إلى جانب uikit الدردشة لدينا ، نوصي بشدة بتعبيرنا عن حزمة مكونات UI الصوتية والفيديو المخصصة ، Tencent_Calls_Uikit. تم تصميم هذه الحزمة القوية والغنية بالميزات خصيصًا لاستكمال حلنا الحالي والتكامل معه بسلاسة ، مما يوفر تجربة اتصال شاملة وموحدة للمستخدمين.
