chat uikit flutter
version: 4.0.0
Sie müssen nur Chat SDK integrieren, um einfach Chat, Gespräch und Gruppenfunktionen zu erhalten, und Sie können auch mit anderen Produkten wie Whiteboards über Signalisierungsnachrichten kommunizieren. Der Chat kann verschiedene Geschäftsszenarien abdecken, den Zugang und die Nutzung verschiedener Plattformen unterstützen und die Kommunikationsbedürfnisse vollständig erfüllen.
In diesem Dokument werden die Chat -Demo auf der iOS -Plattform schnell ausgeführt. Informationen zu den anderen Plattformen finden Sie in Dokument::
CHAT SDK wird mit Tuikit geliefert, einem offiziellen Satz von UI-Komponenten, die Chat Business Logic integrieren. Tuikit umfasst Komponenten wie Konversation, Chat, Beziehungskette und Gruppe. Weitere Informationen finden Sie unter Tuikit Library -Übersicht.
Entwickler können diese UI-Komponenten verwenden, um ihren mobilen Anwendungen schnell und einfach In-App-Chat-Module hinzuzufügen.
Derzeit enthält Flutter Tuikit die folgenden Hauptkomponenten:
Zusätzlich zu diesen Komponenten stehen weitere nützliche Komponenten und Widgets zur Verfügung, mit der Entwickler ihre geschäftlichen Anforderungen erfüllen können, z.
Die Plattformen sind mit der Bereitstellung unseres Chat -Uikit kompatibel.
Weitere Informationen finden Sie in einer vollständigen und detaillierten Anleitung zum Einstieg.
In der folgenden Anleitung wird beschrieben, wie man eine einfache Chat -Anwendung mit Flutter Tuikit schnell erstellt. Siehe Anhang, wenn Sie über die Details und Parameter jedes Widgets erfahren möchten.
Melden Sie sich an und melden Sie sich bei der Chat -Konsole an.
Erstellen Sie eine Anwendung und geben Sie sie ein. Klicken Sie auf Benutzer und erstellen Sie zwei Konten.
Die korrekte Möglichkeit zur Verteilung
UserSigbesteht darin, den Berechnungscode fürUserSigin Ihren Server zu integrieren und eine anwendungsorientierte API anzugeben. WennUserSigbenötigt wird, kann Ihre Anwendung eine Anforderung an den Business Server für einen dynamischenUserSig.Weitere Informationen finden Sie unter Wie berechnen ich Benutzer auf dem Server?.
Erstellen Sie schnell eine Flutter -App, indem Sie der Flutter -Dokumentation folgen.
Tuikit benötigt die Berechtigungen von Shooting/Album/Aufnahme/Netzwerk für grundlegende Messaging -Funktionen. Sie müssen diese Berechtigungen manuell deklarieren, um die entsprechenden Funktionen normal zu nutzen.
Öffnen Sie android/app/src/main/AndroidManifest.xml und fügen Sie die folgenden Zeilen zwischen <manifest> und </manifest> hinzu.
< 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 " /> Öffnen Sie ios/Podfile und fügen Sie die folgenden Zeilen zum Ende der Datei hinzu.
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
Hinzufügen von tencent_cloud_chat_uikit unter dependencies in der Datei pubspec.yaml oder fügen Sie den folgenden Befehl aus:
flutter pub add tencent_cloud_chat_uikitEs unterstützt standardmäßig Android und iOS. Wenn Sie es auch im Web verwenden möchten, finden Sie in der folgenden Anleitung.
Version 0.1.4 oder höher ist erforderlich, um das Web zu unterstützen.
Wenn Ihr vorhandenes Flutter -Projekt kein Web unterstützt, führen Sie flutter create . im Projektroot -Verzeichnis zum Hinzufügen von Web -Support.
Installieren Sie JavaScript -Abhängigkeiten an web/ Verwenden von npm oder yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Öffnen Sie web/index.html und fügen Sie die folgenden zwei Zeilen zwischen <head> und </head> hinzu, um sie zu importieren.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Initialisieren Sie Tuikit, wenn Ihre App startet. Sie müssen die Initialisierung nur einmal durchführen, damit das Projekt startet.
Holen Sie sich die Instanz von Tuikit zuerst mit TIMUIKitCore.getInstance() , gefolgt von der Initialisierung mit Ihrem 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 ();
}}Möglicherweise möchten Sie hier auch eine Rückruffunktion für
onTUIKitCallbackListenerregistrieren. Siehe Anhang.
Sie können sich jetzt in einem der in Schritt 0 generierten Testkonten anmelden, um das Tencent Cloud -Chat -Modul zu starten.
Melden Sie sich mit _coreInstance.login an.
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
_coreInstance. login (userID : userID, userSig : userSig);Hinweis: Das Importieren von Benutzern in Ihre Anwendung dient nur für Debugging -Zwecke und kann nicht für die Versionsversion verwendet werden. Bevor Sie Ihre App veröffentlichen, sollten Sie Ihren Benutzer von Ihrem Server generieren. Siehe: Signatur erzeugen.
Sie können die List -Seite (CHANKE) als Homepage Ihres Chat -Moduls (Channel) verwenden, die alle Konversationen mit Benutzern und Gruppen mit Chat -Datensätzen enthält.
Sie können eine Conversation mit TIMUIKitConversation als Körper erstellen, um die Gesprächsliste zu rendern. Sie müssen nur den onTapItem -Rückruf bereitstellen, mit dem Benutzer für jede Konversation zur Chat -Seite navigieren können. Im nächsten Schritt stellen wir die Chat -Klasse vor.
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,
),
));
},
),
);
}
}Die Chat -Seite besteht aus der Hauptmeldungsliste und einer Nachricht, die unten sendet.
Sie können eine Chat -Klasse mit TIMUIKitChat als Körper erstellen, um die Chat -Seite zu rendern. Wir empfehlen, eine onTapAvatar -Rückruffunktion anzubieten, um zum aktuellen Kontakt zur Profilseite zu navigieren, die wir im nächsten Schritt vorstellen werden.
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),
));
},
);
}Diese Seite zeigt das Profil eines bestimmten Benutzers und behält die Beziehung zwischen dem aktuell angemeldeten Benutzer und dem anderen Benutzer bei.
Sie können eine UserProfile -Klasse mit TIMUIKitProfile als Körper erstellen, um die Benutzerprofilseite zu rendern.
Der einzige Parameter, den Sie bereitstellen müssen, ist userID , während diese Komponente automatisch die Seite Profil und Beziehung auf der Grundlage der Existenz der Freundschaft generiert.
Tipp : Bitte verwenden Sie
profileWidgetBuilderzuerst, um einige Profil -Widgets anzupassen und ihre vertikale Sequenz mitprofileWidgetsOrderzu bestimmen, wenn Sie diese Seite anpassen möchten. Wenn diese Methode Ihre Geschäftsanforderungen nicht erfüllen kann, können Sie stattdessenbuilderverwenden.
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,
),
);
}
}Jetzt kann Ihre App Nachrichten senden und empfangen, die Konversationsliste anzeigen und Kontaktfreundschaften verwalten. Sie können andere Komponenten von Tuikit verwenden, um das vollständige Chat -Modul schnell und einfach zu implementieren.
Nein, Sie müssen Chat SDK nicht wieder integrieren. Wenn Sie APIs mit Chat -SDK -verwandten APIs verwenden möchten, können Sie sie über TIMUIKitCore.getSDKInstance() erhalten. Diese Methode wird empfohlen, um die Konsistenz der Chat -SDK -Version zu gewährleisten.
Überprüfen Sie, ob Sie die Kamera , das Mikrofon , das Album oder andere damit verbundene Berechtigungen aktiviert haben.
Bezieht sich auf Schritt 1 oben.
Überprüfen Sie, ob das Gerät nicht von anderen Ressourcen besetzt ist. Klicken Sie alternativ auf Build, um ein APK -Paket zu generieren, es in den Simulator zu ziehen und auszuführen.
Wenn nach der Konfiguration ein Fehler auftritt, klicken Sie auf Produkt> Ordner "Reinigen Sie" , reinigen Sie das Produkt und führen Sie pod install aus oder flutter run .
Schalten Sie den Flugzeugmodus auf Ihrer Apple Watch ein und gehen Sie zu Einstellungen> Bluetooth auf Ihrem iPhone, um Bluetooth auszuschalten.
Starten Sie Xcode (falls geöffnet) neu und führen Sie flutter run erneut aus.
androidappsrcmainAndroidManifest.xml und komplette xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" wie folgt "wie folgt. < 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 und komplette minSdkVersion und targetSdkVersion in defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Für diejenigen, die neben unserem Chat-UIKIT-Voice- und Videoanruffunktionen in Echtzeit benötigen, empfehlen wir unser dediziertes Voice- und Video-Call-UI-Komponentenpaket Tencent_calls_uikit. Dieses robuste und feature-reichen Paket wurde speziell für die Ergänzung zu unserer vorhandenen Lösung entwickelt und sich nahtlos in sie integrieren und bietet Ihren Benutzern ein umfassendes, einheitliches Kommunikationserlebnis.
