3. IM 콘솔에서 애플리케이션을 선택하고 왼쪽 사이드바에서 보조 툴->UserSig Generation & Verification을 클릭하여 두 개의 UserID와 해당 UserSig를 생성하고 UserID, 서명(Key), UserSig를 복사하여 이후 로그인에 사용합니다.
설명:
이 계정은 개발 및 테스트 전용입니다. 애플리케이션 런칭 전에 올바른 UserSig 배포 방식은 서버에서 생성하여, App 지향 인터페이스를 제공하는 것입니다. UserSig가 필요할 때, App은 비즈니스 서버에 동적 UserSig 가져오기 요청을 발송합니다. 자세한 내용은 Generating UserSig를 참고하십시오.
Flutter SDK 통합에 적합한 솔루션 선택
IM은 통합하는 세 가지 방법을 제공하며, 통합에 가장 적합한 솔루션을 선택할 수 있습니다.
IM의 UI 컴포넌트 라이브러리 TUIKit은 일반 UI 컴포넌트를 제공하며, 예를 들어 대화 목록, 채팅 인터페이스 및 연락처 목록 등 개발자는 실제 비즈니스 요구에 따라 이 컴포넌트 라이브러리를 통해 사용자 정의 IM 애플리케이션을 빠르게 구축할 수 있습니다. 이 방법을 먼저 사용할 것을 권장합니다.
오른쪽 상단의 Device Manager를 클릭하고 Create devices를 클릭한 다음 시뮬레이터를 생성합니다. Google FCM 푸시 기능이 필요한 경우 Google Play Store를 지원하는 기기를 설치하는 것이 좋습니다.
5. 프로젝트를 실행합니다.
필요에 따라 왼쪽의 Run 버튼 또는 오른쪽의 Debug 버튼을 클릭하여 프로젝트를 실행합니다.
설명:
UI에 일부 조정 업데이트가 있을 수 있으니 최신 버전을 기준으로 하십시오.
1. Xcode에서 im-flutter-uikit/ios 디렉터리를 엽니다.
2. iPhone을 연결하고 Build And Run을 클릭한 후 iOS 프로젝트 컴파일이 완료되어 Xcode 프로젝트 창이 팝업될 때까지 기다립니다.
3. iOS 프로젝트를 열고 기본 Target이 iPhone에서 프로젝트를 실행하도록 Signing & Capabilities(Apple 개발자 계정 필요)를 설정합니다.
4. 프로젝트를 실행하고, 디바이스에서 Demo 디버깅을 진행합니다.
Demo 코드 구조 개요
설명:
Demo의 UI 및 비즈니스 로직 부분은 Flutter TUIKit을 사용합니다. Demo 레이어 자체는 App을 구축하고, 내비게이션 리디렉션을 처리하고, 인스턴스화된 TUIKit의 개별 컴포넌트 호출에만 사용됩니다.
폴더
소개
lib
프로그램 코어 디렉터리
lib/i18n
국제화 관련 코드. 여기서 국제화에는 TUIKit 자체의 국제화 능력 및 국제화 표제를 포함되지 않으므로 필요에 따라 가져올 수 있습니다.
lib/src
프로젝트 엔터티 디렉터리
lib/src/pages
이 Demo의 몇 가지 주요 내비게이션 페이지입니다. 프로젝트가 초기화된 후 app.dart는 로딩 애니메이션을 표시하고 로그인 상태를 판단하여 사용자를 login.dart 또는 home_page.dart로 이동합니다. 사용자가 로그인하면 로그인 정보가 shared_preference 플러그 인을 통해 로컬에 저장됩니다. 이후 애플리케이션을 실행할 때마다 원래 로그인 정보가 로컬에서 발견되면 자동으로 해당 정보를 사용하여 로그인합니다. 이 정보가 없거나 로그인에 실패하면 로그인 페이지로 이동합니다. 자동 로그인 프로세스 동안 사용자는 여전히 app.dart에 있고 로딩 애니메이션을 볼 수 있습니다. home_page.dart에는 이 Demo의 네 가지 주요 기능 페이지 전환을 지원하는 하단 Tab이 포함되어 있습니다.
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(대화 내 검색) 컴포넌트 사용
위의 Demo는 2차 개발을 위해 직접 수정하거나 비즈니스 요구 사항을 달성하기 위해 참고할 수 있습니다.
솔루션2: UI 라이브러리 및 TUIKit 컴포넌트 라이브러리를 사용하여 반나절 만에 IM 기능 이식
TUIKit은 Tencent Cloud IM SDK 기반의 UI 컴포넌트 라이브러리로 대화 목록, 채팅 인터페이스, 연락처 목록과 같은 일반적인 UI 컴포넌트를 제공하며 개발자는 실제 비즈니스 요구에 따라 이 컴포넌트 라이브러리를 통해 사용자 정의 IM 애플리케이션을 빠르게 구축할 수 있습니다.TUIKit 그래픽 소개를 참고하십시오.
다음은 TUIKit을 시작하는 데 도움이 되는 간단한 가이드입니다. 자세한 가이드는 TUIKit 기본 기능 통합을 참고하십시오.
전제 조건
Flutter 프로젝트 생성을 완료했거나 구축할 Flutter 프로젝트가 있습니다.
액세스 단계
권한 설정
TUIKit의 실행으로 인해 촬영/갤러리/녹음/네트워크 등의 권한이 필요하며, Native 파일에 수동으로 선언해야 관련 기능을 정상적으로 사용할 수 있습니다.
Android
android/app/src/main/AndroidManifest.xml 을 열고, <manifest></manifest>에서 다음 권한을 추가합니다.
이 계정은 개발 및 테스트 전용입니다. 애플리케이션 런칭 전에 올바른 UserSig 배포 방식은 서버에서 생성하여, App 지향 인터페이스를 제공하는 것입니다. UserSig가 필요할 때, App은 비즈니스 서버에 동적 UserSig 가져오기 요청을 발송합니다. 자세한 내용은 Generating UserSig를 참고하십시오.
구현: 대화 목록 페이지
대화 기록이 있는 모든 사용자와 그룹 채팅 대화를 포함한 대화 목록을 IM 기능의 메인 화면으로 사용할 수 있습니다.
}, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.
);
}
구현: 사용자 세부 정보 페이지
기본적으로 이 페이지는 사용자가 친구인지 여부를 결정하고 하나의 'userID'만 전달된 후에 사용자 세부 정보 페이지를 생성합니다.
UserProfile 클래스를 생성하고, body의 TIMUIKitProfile 컴포넌트를 사용하여 사용자 세부 정보 및 관계 체인 페이지를 렌더링합니다.
설명:
이 페이지를 사용자 정의하려면 먼저 profileWidgetBuilder를 사용하여 사용자 지정할 profile 컴포넌트를 전달하고 profileWidgetsOrder를 사용하여 수직 표시 순서를 결정하는 것을 고려하십시오. 요구 사항을 충족할 수 없는 경우 builder를 대신 사용하십시오.
TIMUIKitNewContact: 연락처/친구 요청 목록. 배지를 표시하려면 리스너를 자동으로 마운트할 수 있는 TIMUIKitUnreadCount 배지 컴포넌트를 사용할 수 있습니다.
로컬 검색: TIMUIKitSearch는 연락처, 그룹 및 채팅 기록의 글로벌 검색을 지원하는 글로벌 검색 컴포넌트입니다. TIMUIKitSearchMsgDetail을 사용하여 특정 대화에서 채팅 기록을 검색할 수도 있습니다. 두 가지 검색 모드 중에서 선택하기 위해 conversation을 전달할지 여부를 선택할 수 있습니다.
V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login(
userID: userID,
userSig: userSig,
);
설명:
이 계정은 개발 테스트 전용입니다. 애플리케이션이 런칭되기 전에 정확한 UserSig 발급 방식은 다음과 같습니다. UserSig 계산 코드를 귀하의 서버에 통합하고 App 방향의 인터페이스를 제공합니다. UserSig가 필요할 때 귀하의 App이 비즈니스 서버로 동적 UserSig를 요청합니다. 자세한 내용은 Generating UserSig를 참고하십시오.
당사의 no-UI SDK(tencent_cloud_chat_sdk) 4.1.9 이상은 macOS 및 Windows 클라이언트와 완벽하게 호환됩니다. macOS 및 Windows에 대한 지원을 활성화하려면 Android 및 iOS에 대한 지원을 활성화하는 단계와 비교하여 다음 추가 단계를 수행해야 합니다.
Flutter 3.x로 업그레이드
Flutter 3.0 이상에서만 desktop 클라이언트를 지원합니다. 따라서 desktop 클라이언트를 사용해야 하는 경우 Flutter를 Flutter 3.x로 업그레이드하십시오.
Flutter for Desktop 플러그인 SDK 가져오기
flutter pub add tencent_im_sdk_plugin_desktop
macOS 구성 수정
macos/Runner/DebugProfile.entitlements 파일을 엽니다.
<dict></dict>에서 다음 key-value 키 값 쌍을 추가합니다.
<key>com.apple.security.app-sandbox</key>
<false/>
FAQ
iOS에서 Pods 종속성 설치에 실패하면 어떻게 해야 하나요?
솔루션1: 구성 후, 오류가 발생하면 Product > Clean Build Folder를 클릭하고 제품을 지운 후 pod install 또는 flutter run을 다시 실행하십시오.
솔루션2:ios/Pods 폴더와 ios/Podfile.lock 파일을 수동으로 삭제하고 다음 명령을 실행하여 종속성을 다시 설치합니다.
1. M1과 같은 최신 Apple Silicon 칩 시리즈가 탑재된 Mac 장치.
cd ios
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install --repo-update
2. 이전 버전의 Intel 칩이 탑재된 Mac 장치.
cd ios
sudo gem install ffi
pod install --repo-update
Apple Watch를 착용한 상태에서 실제 iOS 기기에서 디버깅 중 오류가 발생하면 어떻게 해야 하나요?
Apple Watch를 비행 모드로 조정해 주시고, iPhone의 설정 => 블루투스로 이동하여 블루투스를 끕니다.
Xcode를 다시 시작하고(열린 경우), flutter run을 다시 실행합니다.
Flutter 환경 문제
Flutter 환경에 문제가 있는지 알려면 Flutter Doctor를 실행하여 Flutter 환경이 설치되어 있는지 점검하십시오.
Flutter에서 자동으로 생성된 항목을 사용하여 TUIKit을 도입한 후 Android를 실행하면 오류가 보고됨
1. android\app\src\main\AndroidManifest.xml을 열고, 다음과 같이 xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" 및 tools:replace="android:label"을 완료합니다.