chat uikit flutter
version: 4.0.0
채팅, 대화, 그룹 기능을 쉽게 얻으려면 채팅 SDK를 통합하면 신호 메시지를 통해 화이트 보드와 같은 다른 제품과 통신 할 수도 있습니다. 채팅은 다양한 비즈니스 시나리오를 다루고, 다양한 플랫폼의 액세스 및 사용을 지원하며, 커뮤니케이션 요구를 완전히 충족시킬 수 있습니다.
이 문서는 iOS 플랫폼에서 채팅 데모를 빠르게 실행하는 방법을 소개합니다. 다른 플랫폼은 문서를 참조하십시오 ：
Chat SDK는 채팅 비즈니스 로직이 내장 된 공식 UI 구성 요소 세트 인 Tuikit과 함께 제공됩니다. Tuikit에는 대화, 채팅, 관계 체인 및 그룹과 같은 구성 요소가 포함되어 있습니다. 자세한 내용은 Tuikit Library 개요를 참조하십시오.
개발자는 이러한 UI 구성 요소를 사용하여 모바일 애플리케이션에 인앱 채팅 모듈을 빠르고 쉽게 추가 할 수 있습니다.
현재 Flutter Tuikit에는 다음과 같은 주요 구성 요소가 포함되어 있습니다.
이러한 구성 요소 외에도 개발자가 Group Entry Entry Application List 및 Group Member List와 같은 비즈니스 요구를 충족시키는 데 도움이되는 다른 유용한 구성 요소 및 위젯이 있습니다.
플랫폼은 채팅 Uikit의 배포와 호환됩니다.
시작에 대한 완전하고 자세한 가이드는 실행 데모를 참조하십시오.
다음 안내서는 Flutter Tuikit을 사용하여 간단한 채팅 응용 프로그램을 신속하게 구축하는 방법에 대해 설명합니다. 각 위젯의 세부 사항 및 매개 변수에 대해 배우려면 부록을 참조하십시오.
가입하고 채팅 콘솔에 로그인하십시오.
응용 프로그램을 작성하고 입력하십시오. 사용자를 클릭하고 두 계정을 만듭니다.
UserSig배포하는 올바른 방법은UserSig의 계산 코드를 서버에 통합하고 응용 프로그램 지향 API를 제공하는 것입니다.UserSig필요한 경우 응용 프로그램은 동적 인UserSig.자세한 내용은 서버에서 UsersIG를 계산하는 방법을 참조하십시오.
Flutter Documentation을 따라 Flutter 앱을 빠르게 만듭니다.
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를 지원합니다. 웹에서 사용하려면 다음 안내서를 참조하십시오.
웹을 지원하려면 버전 0.1.4 이상이 필요합니다.
기존 플러터 프로젝트가 웹을 지원하지 않으면 flutter create . 프로젝트 루트 디렉토리에서 웹 지원을 추가합니다.
npm 또는 yarn 사용 web/ 에 JavaScript 종속성을 설치하십시오.
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을 초기화하십시오. 프로젝트가 시작하려면 초기화를 한 번만 수행하면됩니다.
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를 생성해야합니다. 다음을 참조하십시오 : 서명을 생성하십시오.
대화 (채널) 목록 페이지를 채팅 모듈의 홈페이지로 사용할 수 있으며 여기에는 채팅 기록이있는 사용자 및 그룹과의 모든 대화가 포함됩니다.
대화 목록을 렌더링하기 위해 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를 다시 통합 할 필요가 없습니다. 채팅 SDK 관련 API를 사용하려면 TIMUIKitCore.getSDKInstance() 를 통해 얻을 수 있습니다. 이 방법은 채팅 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 " >defaultConfig 에서 androidappbuild.gradle 및 완전한 minSdkVersion 및 targetSdkVersion 열어줍니다. defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Chat Uikit과 함께 실시간 음성 및 화상 통화 기능이 필요한 사람들을 위해 전용 음성 및 화상 통화 UI 구성 요소 패키지 인 Tencent_Calls_Uikit을 적극 권장합니다. 이 강력하고 기능이 풍부한 패키지는 기존 솔루션을 보완하고 이와 완벽하게 통합하여 사용자에게 포괄적이고 통합 된 커뮤니케이션 경험을 제공하도록 특별히 설계되었습니다.
