chat uikit flutter
version: 4.0.0
Il vous suffit d'intégrer le SDK de chat pour gagner facilement le chat, la conversation, les capacités de groupe, et vous pouvez également communiquer avec d'autres produits tels que les tableaux blancs via des messages de signalisation. Le chat peut couvrir divers scénarios commerciaux, prendre en charge l'accès et l'utilisation de diverses plates-formes et répondre pleinement aux besoins de communication.
Ce document présente comment exécuter rapidement la démonstration de chat sur la plate-forme iOS. Pour les autres plateformes, veuillez vous référer au document:
Chat SDK est livré avec Tuikit, qui est un ensemble officiel de composants d'interface utilisateur qui ont un chat commercial de chat intégré. Tuikit comprend des composants comme la conversation, le chat, la chaîne de relations et le groupe. Voir Aperçu de la bibliothèque Tuikit pour plus de détails.
Les développeurs peuvent utiliser ces composants d'interface utilisateur pour ajouter rapidement et facilement des modules de chat dans l'application à leurs applications mobiles.
Actuellement, Flutter Tuikit contient les principales composantes suivantes:
En plus de ces composants, il existe d'autres composants et widgets utiles disponibles pour aider les développeurs à répondre à leurs besoins commerciaux, tels que la liste des applications d'entrée de groupe et la liste des membres du groupe.
Les plates-formes sont compatibles avec le déploiement de notre Chat Uikit.
Veuillez vous référer à Run Demo pour un guide complet et détaillé sur le démarrage.
Le guide suivant décrit comment créer rapidement une application de chat simple à l'aide de Flutter Tuikit. Reportez-vous à l'annexe si vous souhaitez en savoir plus sur les détails et les paramètres de chaque widget.
Inscrivez-vous et connectez-vous à la console de chat.
Créez une application et entrez-la. Cliquez sur les utilisateurs et créez deux comptes.
La bonne façon de distribuer
UserSigest d'intégrer le code de calcul pourUserSigdans votre serveur et de fournir une API axée sur l'application. LorsqueUserSigest nécessaire, votre application peut envoyer une demande au serveur commercial pour unUserSig.Pour plus d'informations, voyez comment calculer les utilisateurs sur le serveur ?.
Créez rapidement une application Flutter en suivant la documentation Flutter.
Tuikit a besoin des autorisations de tournage / album / enregistrement / réseau pour les fonctions de messagerie de base. Vous devez déclarer ces autorisations manuellement pour utiliser normalement les capacités pertinentes.
Ouvrez android/app/src/main/AndroidManifest.xml et ajoutez les lignes suivantes entre <manifest> et </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 " /> Ouvrez ios/Podfile et ajoutez les lignes suivantes à la fin du fichier.
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
Ajoutez tencent_cloud_chat_uikit sous dependencies dans le fichier pubspec.yaml , ou exécutez la commande suivante:
flutter pub add tencent_cloud_chat_uikitIl prend en charge Android et iOS par défaut. Si vous souhaitez également l'utiliser sur le Web, reportez-vous au guide suivant.
La version 0.1.4 ou ultérieure est nécessaire pour prendre en charge le Web.
Si votre projet Flutter existant ne prend pas en charge le Web, exécutez flutter create . Dans le répertoire racine du projet pour ajouter une prise en charge Web.
Installez les dépendances JavaScript sur web/ à l'aide npm ou yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Ouvrez web/index.html et ajoutez les deux lignes suivantes entre <head> et </head> pour les importer.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Initialisez Tuikit lorsque votre application démarre. Vous n'avez besoin d'effectuer l'initialisation qu'une seule fois pour que le projet commence.
Obtenez d'abord l'instance de Tuikit à l'aide de TIMUIKitCore.getInstance() , suivie par l'initialisation avec votre 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 ();
}}Vous pouvez également enregistrer une fonction de rappel pour
onTUIKitCallbackListenerici. Reportez-vous à l'annexe.
Vous pouvez désormais vous connecter l'un des comptes de test générés à l'étape 0 pour démarrer le module de chat cloud Tencent.
Connectez-vous à l'aide de _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);Remarque: L'importation d'utilisateurs sur votre application est uniquement à des fins de débogage et ne peut pas être utilisée pour la version de version. Avant de publier votre application, vous devez générer vos utilisateurs à partir de votre serveur. Reportez-vous à: générer de la signature.
Vous pouvez utiliser la page de liste de conversation (canal) comme page d'accueil de votre module de chat, qui comprend toutes les conversations avec les utilisateurs et les groupes qui ont des enregistrements de chat.
Vous pouvez créer une classe Conversation , avec TIMUIKitConversation comme son corps, pour rendre la liste des conversations. Vous n'avez qu'à fournir le rappel onTapItem , qui permet aux utilisateurs de naviguer vers la page de chat pour chaque conversation. Dans la prochaine étape, nous présenterons la classe 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,
),
));
},
),
);
}
}La page de chat se compose de la liste des messages principale et d'une barre d'envoi de messages en bas.
Vous pouvez créer une classe Chat , avec TIMUIKitChat comme corps, pour rendre la page de chat. Nous vous recommandons de fournir une fonction de rappel onTapAvatar pour accéder à la page de profil pour le contact actuel, que nous introduirons à l'étape suivante.
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),
));
},
);
}Cette page montre le profil d'un utilisateur spécifique et maintient la relation entre l'utilisateur connecté actuel et l'autre utilisateur.
Vous pouvez créer une classe UserProfile , avec TIMUIKitProfile comme corps, pour rendre la page de profil utilisateur.
Le seul paramètre que vous devez fournir est userID , tandis que ce composant génère automatiquement la page de maintenance de profil et de relation en fonction de l'existence de l'amitié.
Astuce : veuillez d'abord utiliser
profileWidgetBuilderpour personnaliser certains widgets de profil et déterminer leur séquence verticale à l'aide deprofileWidgetsOrdersi vous souhaitez personnaliser cette page. Si cette méthode ne peut pas répondre aux besoins de votre entreprise, vous pouvez envisager d'utiliserbuilderà la place.
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,
),
);
}
}Maintenant, votre application peut envoyer et recevoir des messages, afficher la liste des conversations et gérer les amitiés de contact. Vous pouvez utiliser d'autres composants de Tuikit pour implémenter rapidement et facilement le module de chat complet.
Non. Vous n'avez pas besoin d'intégrer à nouveau le SDK de chat. Si vous souhaitez utiliser les API liées au SDK CHAT, vous pouvez les obtenir via TIMUIKitCore.getSDKInstance() . Cette méthode est recommandée pour assurer la cohérence de la version SDK CHAT.
Vérifiez si vous avez activé la caméra , le micro , l'album ou d'autres autorisations connexes.
Fait référence à l'étape 1 ci-dessus.
Vérifiez que l'appareil n'est pas occupé par d'autres ressources. Alternativement, cliquez sur Build pour générer un package APK, faites-le glisser vers le simulateur et exécutez-le.
Si une erreur se produit après la configuration, cliquez sur Produit> Nettoyer le dossier de construction , nettoyez le produit et exécutez pod install ou flutter run .
Allumez le mode avion sur votre Apple Watch et accédez à Paramètres> Bluetooth sur votre iPhone pour désactiver Bluetooth.
Redémarrez Xcode (si ouvert) et exécutez à nouveau flutter run à nouveau.
androidappsrcmainAndroidManifest.xml et complétez xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" comme suit. < 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 et terminer minSdkVersion et targetSdkVersion dans defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Pour ceux qui ont besoin de capacités d'appel vocal et vidéo en temps réel aux côtés de notre UIKIT de chat, nous recommandons fortement notre package de composants d'interface utilisateur vocale et vidéo dédié, Tencent_Calls_Uikit. Ce package robuste et riche en fonctionnalités est spécifiquement conçu pour compléter notre solution existante et s'intègre de manière transparente, offrant une expérience de communication unifiée complète et unifiée pour vos utilisateurs.
