環境 | バージョン |
Flutter | Chat SDKの最小要件はFlutterバージョン 3.0.0 が必要。TUIKit コンポーネントライブラリの最小要件はFlutterバージョン3.19.0が必要。 |
Android | Android Studio Dolphin | 2021.3.1以降のバージョン。AppにはAndroid 7.0以降を搭載したデバイスが必要です。 |
iOS | Xcode 12.0以降のバージョン。プロジェクトに有効な開発者署名があることを確認してください。 |
プラットフォーム | ||
iOS | 対応可 | 対応可 |
Android | 対応可 | 対応可 |
対応可、4.1.1+2以降のバージョンは対応可 | 対応可、0.1.5とそれ以降のバージョンは対応可 | |
対応可、4.1.9以降のバージョンは対応可 | 近日リリース | |
対応可、4.1.9以降のバージョンは対応可 | 近日リリース | |
混合開発 (Flutter SDKを既存のネイティブアプリケーションに追加します) | 5.0.0以降のバージョンは対応可 | 1.0.0とそれ以降のバージョンは対応可 |
モバイルAPP | WEB - H5 |
iOS/Android APP、プラットフォームのダウンロードを自動的に判断します | 携帯電話でコードをスキャンしてオンラインWeb版DEMOを体験します |
SDKAppID
を記録していること。UserID
、署名(Key)
、UserSig
の3つをコピーし、その後のログインで使用します。
UserSig
の正しい発行方法は、サーバーで生成し、Appのインターフェース向けに提供する方法となります。UserSig
が必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSig
を取得します。詳細はサーバーでのUserSig新規作成をご参照ください。統合方法 | 適用シナリオ |
IM Demoは完全なチャットAppであり、コードはオープンソース化されています。チャットライクなユースケースを実装したい場合は、Demoを使用して二次開発を行うことができます。今すぐDemo体験が可能です。 | |
IMのUIコンポーネントリポジトリ TUIKit は、セッションリスト、チャットインターフェース、連絡先リストなどの共通のUIコンポーネントを提供しています。開発者は実際の業務ニーズに応じて、このコンポーネントリポジトリによってカスタムIMアプリケーションをスピーディーにビルドすることができます。この方法を優先して用いることを推奨します。 | |
アプリケーションインターフェースのニーズがTUIKitでは満たせない場合、または多くのカスタマイズが必要な場合は、この方法を用いることができます。 |
# Clone the codegit clone https://github.com/TencentCloud/tc-chat-demo-flutter.git# Install dependenciesflutter pub get
#demoプロジェクトを起動します。SDK_APPID、KEYの2つのパラメータを置き換えてくださいflutter run --dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
--dart-define=SDK_APPID={YOUR_SDKAPPID}
の中の{YOUR_SDKAPPID}
をご自分のアプリケーションのSDKAppIDに置き換える必要があります。--dart-define=ISPRODUCT_ENV=false
は開発環境か本番環境かを判断します。開発環境の場合、falseとしてください。--dart-define=KEY={YOUR_KEY}
の中の{YOUR_KEY}
を、その1:テストユーザーの作成のキー(Key)
情報に置き換える必要があります。im-flutter-uikit
ディレクトリを開きます。
このパスでコマンドを実行して、依存関係を実行します。flutter pub get
main.dart
にマウスをhoverし、Edit Configurations
を設定します。
Additional run args
を設定し、環境変数(SDKAPPIDなどの情報)を入力します。例:# SDK_APPID、KEYの2つのパラメータを置き換えてください--dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
im-flutter-uikit/ios
ディレクトリを開きます。フォルダ | 説明 |
lib | プログラムのコアディレクトリ |
lib/i18n | 国際化関連コードです。ここでの国際化には、TUIKit自体の機能の国際化や多言語対応は含まれません。必要に応じてインポートできます |
lib/src | プロジェクトのメインディレクトリ |
lib/src/pages | このDemoのいくつかの重点ナビゲーションページです。プロジェクトの初期化完了後、 app.dart はアニメーションをロードして表示し、ログインセッションを判断して、ユーザーをlogin.dart またはhome_page.dart に誘導します。ユーザーのログイン後、ログイン情報はshared_preference プラグインを通じてローカルに保存されます。その後、毎回のアプリケーション起動の際、ローカルに保存されたログイン情報を発見すると、自動的にその情報を使用してログインし、情報がない場合やログインに失敗した場合はログインページに誘導します。自動ログイン中、ユーザーはまだapp.dart で、ロードしたアニメーションを見ることができます。home_page.dart にはボトムTabが含まれ、このDemoの4つの主要機能ページの切り替えを担います。 |
lib/utils | いくつかのツール関数クラス |
lib/src
内の各dartファイルはTUIKitコンポーネントをインポートしており、ファイル内でコンポーネントをインスタンス化すると、ページレンダリングが可能になります。lib/srcの主要なファイル | ファイルの説明 |
add_friend.dart | フレンド追加申請ページです。 TIMUIKitAddFriend コンポーネントを使用します |
add_group.dart | グループ参加申請ページです。 TIMUIKitAddGroup コンポーネントを使用します |
blacklist.dart | ブラックリスト一覧ページです。 TIMUIKitBlackList コンポーネントを使用します |
chat.dart | メインチャットページです。TUIKitのフルセットのチャット機能、 TIMUIKitChat コンポーネントを使用します |
chatv2.dart | メインチャットページです。アトミック機能、 TIMUIKitChat コンポーネントを使用します |
contact.dart | 連絡先ページです。 TIMUIKitContact コンポーネントを使用します |
conversation.dart | セッションリストインターフェースです。 TIMUIKitConversation コンポーネントを使用します |
create_group.dart | グループチャット開始ページです。Demoのみで実装でき、コンポーネントは使用しません |
group_application_list.dart | グループ参加申請リストページです。 TIMUIKitGroupApplicationList コンポーネントを使用します |
group_list.dart | グループリストページです。 TIMUIKitGroup コンポーネントを使用します |
group_profile.dart | グループプロファイルおよびグループ管理ページです。 TIMUIKitGroupProfile コンポーネントを使用します |
newContact.dart | 連絡先フレンド申請ページです。 TIMUIKitNewContact コンポーネントを使用します |
routes.dart | Demoのルートです。ログインページ login.dart またはホームページhome_page.dart にナビゲートします。 |
search.dart | グローバル検索およびセッション内検索ページです。 TIMUIKitSearch (グローバル検索)およびTIMUIKitSearchMsgDetail (セッション内検索)コンポーネントを使用します |
user_profile.dart | ユーザー情報およびリレーションシップチェーン保守ページです。 TIMUIKitProfile コンポーネントを使用します |
Navigator
の処理が必要です。android/app/src/main/AndroidManifest.xml
を開き、<manifest></manifest>
に次の権限を追加します。<uses-permissionandroid:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.FOREGROUND_SERVICE"/><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permissionandroid:name="android.permission.VIBRATE"/><uses-permissionandroid:name="android.permission.ACCESS_BACKGROUND_LOCATION"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.CAMERA"/>
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['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1','PERMISSION_CAMERA=1','PERMISSION_PHOTOS=1',]endendend
tencent_cloud_chat_uikit
をインストールすれば、基本のIM SDKをインストールする必要はありません。#コマンドラインでの実行:flutter pub add tencent_cloud_chat_uikit
TIMUIKitCore.getInstance()
を実行してから、初期化関数init()
を呼び出し、sdkAppID
を渡すよう、必ず確認してください。/// main.dartimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();@overridevoid initState() {_coreInstance.init(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating// language: LanguageEnum.en, // インターフェース言語の設定です。設定されていない場合は、システム言語に従いますloglevel: LogLevelEnum.V2TIM_LOG_DEBUG,onTUIKitCallbackListener: (TIMCallback callbackValue){}, // [設定をお勧めします。詳細については、この部分を参照](https://www.tencentcloud.com/document/product/1047/50054#onTUIKitCallbackListener)してくださいlistener: V2TimSDKListener());super.initState();}}
_coreInstance.login
メソッドを呼び出して、テストアカウントにログインします。import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();_coreInstance.login(userID: userID, userSig: userSig);
UserSig
の正しい発行方法は、サーバーで生成し、Appのインターフェース向けに提供する方法となります。UserSig
が必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSig
を取得します。詳細はサーバーでのUserSig新規作成をご参照ください。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);@overrideWidget 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,),));},),);}}
onTapAvatar
イベントの処理関数を渡すとよいでしょう。UserProfile
クラスに関しては、次の手順で説明します。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;}@overrideWidget build(BuildContext context) {return TIMUIKitChat(conversationID: _getConvID() ?? '', // groupID or UserIDconversationType: selectedConversation.type ?? 1, // Conversation typeconversationShowName: selectedConversation.showName ?? "", // Conversation display nameonTapAvatar: (_) {Navigator.push(context,MaterialPageRoute(builder: (context) => UserProfile(userID: userID),));}, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.);}
userID
を渡すだけで、フレンドかどうかに基づいて自動的にユーザー詳細ページを生成できるものです。profileWidgetBuilder
でカスタマイズが必要なprofileを渡すことを優先し、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);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Message",style: TextStyle(color: Colors.black),),),body: TIMUIKitProfile(userID: widget.userID,),);}}
TIMUIKitProfile
と基本的に同じです。TIMUIKitUnreadCount
小さな赤い点コンポーネントを使用できます。TIMUIKitSearch
グローバル検索コンポーネントです。連絡先/グループ/チャット記録のグローバル検索をサポートし、TIMUIKitSearchMsgDetail
を使用して特定のセッションでチャット記録を検索することもサポートします。2つのモードは、conversation
が渡されるかどうかによって異なります。flutter pub add tencent_cloud_chat_sdk
initSDK
を呼び出して、SDKの初期化を完了します。sdkAppID
を渡します。import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';TencentImSDKPlugin.v2TIMManager.initSDK(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integratingloglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Loglistener: V2TimSDKListener(),);
TencentImSDKPlugin.v2TIMManager.login
メソッドを呼び出し、テストアカウントにログインします。res.code
が0の場合、ログインは成功です。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login(userID: userID,userSig: userSig,);
UserSig
の正しい発行方法は、UserSig
の計算コードをサーバーに統合し、Appのインターフェース向けに提供する方法となります。UserSig
が必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSig
を取得します。詳細はサーバーでのUserSig新規作成をご参照ください。createTextMessage(String)
を呼び出してテキストメッセージを作成します。sendMessage()
を呼び出して、このIDのメッセージを送信します。receiver
には、その前に作成した別のテストアカウントIDを入力できます。シングルチャットメッセージを送信する場合はgroupID
の入力は不要です。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<V2TimMsgCreateInfoResult> createMessage =await TencentImSDKPlugin.v2TIMManager.getMessageManager().createTextMessage(text: "The text to create");String id = createMessage.data!.id!; // The message creation IDV2TimValueCallback<V2TimMessage> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage(id: id, // Pass in the message creation ID toreceiver: "The userID of the destination user",groupID: "The groupID of the destination group",);
nextSeq
を保守し、現在の位置を記録する必要があります。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';String nextSeq = "0";getConversationList() async {V2TimValueCallback<V2TimConversationResult> res = await TencentImSDKPlugin.v2TIMManager.getConversationManager().getConversationList(nextSeq: nextSeq, count: 10);nextSeq = res.data?.nextSeq ?? "0";}
await TencentImSDKPlugin.v2TIMManager.getConversationManager().setConversationListener(listener: new V2TimConversationListener(onConversationChanged: (List<V2TimConversation> list){_onConversationListChanged(list);},onNewConversation:(List<V2TimConversation> list){_onConversationListChanged(list);},
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';List<V2TimConversation> _conversationList = [];_onConversationListChanged(List<V2TimConversation> list) {for (int element = 0; element < list.length; element++) {int index = _conversationList.indexWhere((item) => item!.conversationID == list[element].conversationID);if (index > -1) {_conversationList.setAll(index, [list[element]]);}else{_conversationList.add(list[element]);}}
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<List<V2TimMessage>> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().getGroupHistoryMessageList(groupID: "groupID",count: 20,lastMsgID: "",);List<V2TimMessage> msgList = res.data ?? [];// here you can use msgList to render your message list}
V2TimAdvancedMsgListener.onRecvNewMessage
から受信します。onRecvNewMessage
コールバックがトリガーされると、必要に応じて新しいメッセージをメッセージ履歴リストに追加することができます。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';final adVancesMsgListener = V2TimAdvancedMsgListener(onRecvNewMessage: (V2TimMessage newMsg) {_onReceiveNewMsg(newMsg);},/// ... other listeners related to message);TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener: adVancesMsgListener);
flutter pub add tencent_im_sdk_plugin_web
flutter create .
を実行してWebサポートを追加してください。web/
に進み、npm
またはyarn
を使用して関連するJSの依存関係をインストールします。プロジェクトを初期化するときは、画面指示に従って進めてください。cd webnpm initnpm i tim-js-sdknpm i tim-upload-plugin
web/index.html
を開き、<head> </head>
にJSファイルを導入します。次のとおりです。<script src="./node_modules/tim-upload-plugin/index.js"></script><script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>
flutter pub add tencent_im_sdk_plugin_desktop
macos/Runner/DebugProfile.entitlements
ファイルを開きます。<dict></dict>
に次のkey-value
キーと値のペアを追加します。<key>com.apple.security.app-sandbox</key><false/>
pod install
またはflutter run
を行うことができますios/Pods
フォルダおよびios/Podfile.lock
ファイルを手動で削除し、次のコマンドを実行して、依存関係を再インストールしますcd iossudo arch -x86_64 gem install ffiarch -x86_64 pod install --repo-update
cd iossudo gem install ffipod install --repo-update
設定 => Bluetooth
で完全にオフにしてください。flutter run
を実行します。android\\app\\src\\main\\AndroidManifest.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="Android端末のパッケージ名に置き換える"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:label="@string/android_label"tools:replace="android:label"android:icon="@mipmap/ic_launcher" // iconパスを指定するandroid:usesCleartextTraffic="true"android:requestLegacyExternalStorage="true">
android\\app\\build.gradle
を開き、defaultConfig
のminSdkVersion
およびtargetSdkVersion
への入力を補完します。defaultConfig {applicationId "" // Android端末のパッケージ名に置き換えるminSdkVersion 21targetSdkVersion 30}
この記事はお役に立ちましたか?