chat uikit flutter
version: 4.0.0
チャットSDKを統合してチャット、会話、グループ機能を簡単に獲得するだけで、シグナリングメッセージを介してホワイトボードなどの他の製品と通信することもできます。チャットは、さまざまなビジネスシナリオをカバーし、さまざまなプラットフォームのアクセスと使用をサポートし、通信ニーズを完全に満たすことができます。
このドキュメントでは、iOSプラットフォームでチャットデモをすばやく実行する方法を紹介します。他のプラットフォームについては、ドキュメントを参照してください。
Chat SDKには、Chat Business Logicが組み込まれているUIコンポーネントの公式セットであるTuikitが付属しています。 Tuikitには、会話、チャット、関係チェーン、グループなどのコンポーネントが含まれています。詳細については、Tuikitライブラリの概要を参照してください。
開発者は、これらのUIコンポーネントを使用して、モバイルアプリケーションにアプリ内チャットモジュールをすばやく簡単に追加できます。
現在、Flutter Tuikitには次の主なコンポーネントが含まれています。
これらのコンポーネントに加えて、グループエントリアプリケーションリストやグループメンバーリストなど、開発者がビジネスニーズを満たすのに役立つ他の便利なコンポーネントやウィジェットがあります。
プラットフォームは、チャットUikitの展開と互換性があります。
開始に関する完全で詳細なガイドについては、Run Demoを参照してください。
次のガイドでは、Flutter Tuikitを使用して簡単なチャットアプリケーションをすばやく構築する方法について説明します。各ウィジェットの詳細とパラメーターについて学びたい場合は、付録を参照してください。
サインアップしてチャットコンソールにログインします。
アプリケーションを作成して入力します。 [ユーザー]をクリックして、2つのアカウントを作成します。
UserSigを配布する正しい方法は、UserSigの計算コードをサーバーに統合し、アプリケーション指向のAPIを提供することです。UserSigが必要な場合、アプリケーションは動的UserSig.詳細については、サーバー上のusersigを計算するにはどうすればよいですか？
フラッタードキュメントに従って、フラッターアプリをすばやく作成します。
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
pubspec.yamlファイルのdependenciesの下にtencent_cloud_chat_uikitを追加するか、次のコマンドを実行します。
flutter pub add tencent_cloud_chat_uikitデフォルトでAndroidとiOSをサポートします。ウェブでも使用したい場合は、次のガイドを参照してください。
Webをサポートするには、バージョン0.1.4以降が必要です。
既存のFlutterプロジェクトがWebをサポートしていない場合は、 flutter create . Webサポートを追加するプロジェクトルートディレクトリで。
javaScript依存関係をweb/ npmまたはyarnを使用してインストールします。
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin web/index.htmlを開き、 <head>と</head>の間に次の2行を追加してインポートします。
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >アプリの起動時にTuikitを初期化します。プロジェクトを開始するには、初期化を1回実行する必要があります。
TIMUIKitCore.getInstance()を使用して最初にtuikitのインスタンスを取得し、その後、 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 Cloud Chatモジュールを開始できます。
_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);注：アプリケーションにusersigをインポートすることはデバッグ目的でのみであり、リリースバージョンには使用できません。アプリを公開する前に、サーバーからusersigを生成する必要があります。参照：署名を生成します。
チャットモジュールのホームページとして、会話（チャンネル）リストページを使用できます。これには、チャットレコードを持つユーザーとグループとのすべての会話が含まれます。
TIMUIKitConversationがその身体として、会話リストをレンダリングするために、 Conversationクラスを作成できます。 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,
),
));
},
),
);
}
}チャットページは、メインのメッセージリストと下部にバーを送信するメッセージで構成されています。
TIMUIKitChatをボディとして使用して、チャットページをレンダリングするChatクラスを作成できます。 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),
));
},
);
}このページは、特定のユーザーのプロファイルを表示し、現在のログインユーザーと他のユーザーとの関係を維持します。
ユーザープロファイルページをレンダリングするために、 TIMUIKitProfileボディとして使用して、 UserProfileクラスを作成できます。
提供する必要がある唯一のパラメーターは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を再び統合する必要はありません。 Chat SDK関連のAPIを使用する場合は、 TIMUIKitCore.getSDKInstance()を介して入手できます。この方法は、Chat SDKバージョンの一貫性を確保するために推奨されます。
カメラ、マイク、アルバム、またはその他の関連する権限を有効にしたかどうかを確認してください。
上記のステップ1を参照してください。
デバイスが他のリソースによって占有されていないことを確認してください。または、[ビルド]をクリックしてAPKパッケージを生成し、シミュレータにドラッグして実行します。
構成後にエラーが発生した場合は、 [製品]> [ビルド]フォルダーのクリーンをクリックし、製品をクリーニングし、 pod installを実行するか、 flutter run 。
Apple Watchの飛行機モードをオンにし、iPhoneの設定> Bluetoothに移動して、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とdefaultConfigの完全なtargetSdkVersionを開きます。 defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}チャットUIKITと一緒にリアルタイムの音声およびビデオ通話機能を必要とする場合は、専用の音声およびビデオ通話UIコンポーネントパッケージTencent_Calls_uikitを強くお勧めします。この堅牢で機能が豊富なパッケージは、既存のソリューションを補完し、シームレスに統合するように特別に設計されており、ユーザーに包括的な統一されたコミュニケーションエクスペリエンスを提供します。
