chat uikit flutter
version: 4.0.0
Solo necesita integrar el SDK de chat para obtener fácilmente el chat, la conversación, las capacidades grupales, y también puede comunicarse con otros productos, como las pizarras a través de mensajes de señalización. El chat puede cubrir varios escenarios comerciales, apoyar el acceso y el uso de varias plataformas y satisfacer completamente las necesidades de comunicación.
Este documento presenta cómo ejecutar rápidamente la demostración de chat en la plataforma iOS. Para las otras plataformas, consulte el documento:
Chat SDK viene con Tuikit, que es un conjunto oficial de componentes de la interfaz de usuario que tienen la lógica de negocios de chat incorporada. Tuikit incluye componentes como conversación, chat, cadena de relaciones y grupo. Consulte la descripción general de la biblioteca Tuikit para obtener más detalles.
Los desarrolladores pueden usar estos componentes de la interfaz de usuario para agregar rápida y fácilmente módulos de chat en la aplicación a sus aplicaciones móviles.
Actualmente, Flutter Tuikit contiene los siguientes componentes principales:
Además de estos componentes, hay otros componentes y widgets útiles disponibles para ayudar a los desarrolladores a satisfacer sus necesidades comerciales, como la lista de aplicaciones de entrada grupal y la lista de miembros del grupo.
Las plataformas son compatibles con la implementación de nuestro chat uikit.
Consulte la demostración de ejecución para una guía completa y detallada sobre cómo comenzar.
La siguiente guía describe cómo construir rápidamente una aplicación de chat simple usando Flutter Tuikit. Consulte el apéndice si desea conocer los detalles y parámetros de cada widget.
Regístrese e inicie sesión en la consola de chat.
Cree una aplicación e ingrese. Haga clic en los usuarios y cree dos cuentas.
La forma correcta de distribuir
UserSiges integrar el código de cálculo paraUserSigen su servidor y proporcionar una API orientada a la aplicación. Cuando se necesitaUserSig, su aplicación puede enviar una solicitud al servidor empresarial para una dinámicaUserSig.Para obtener más información, consulte ¿Vea cómo calculo los usuarios en el servidor?
Cree una aplicación Flutter rápidamente siguiendo la documentación de Flutter.
Tuikit necesita los permisos de disparar/álbum/grabación/red para funciones básicas de mensajería. Debe declarar estos permisos manualmente para usar las capacidades relevantes normalmente.
Abra android/app/src/main/AndroidManifest.xml y agregue las siguientes líneas entre <manifest> y </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 " /> Abra ios/Podfile y agregue las siguientes líneas al final del archivo.
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
Agregue tencent_cloud_chat_uikit en dependencies en el archivo pubspec.yaml o ejecute el siguiente comando:
flutter pub add tencent_cloud_chat_uikitAdmite Android e iOS por defecto. Si también desea usarlo en la web, consulte la siguiente guía.
Se requiere la versión 0.1.4 o posterior para admitir la web.
Si su proyecto Flutter existente no admite la web, ejecute flutter create . En el directorio raíz del proyecto para agregar soporte web.
Instale dependencias de JavaScript en web/ usando npm o yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Abra web/index.html y agregue las siguientes dos líneas entre <head> y </head> para importarlas.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Inicialice Tuikit cuando comience su aplicación. Solo necesita realizar la inicialización una vez para que comience el proyecto.
Obtenga la instancia de Tuikit primero usando TIMUIKitCore.getInstance() , seguido de inicializarlo con su 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 ();
}}También es posible que desee registrar una función de devolución de llamada para
onTUIKitCallbackListeneraquí. Consulte el Apéndice.
Ahora puede iniciar sesión en una de las cuentas de prueba generadas en el Paso 0 para iniciar el módulo de chat de Tencent Cloud.
Inicie sesión usando _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);Nota: Importar usuarios a su aplicación es solo para fines de depuración y no se puede utilizar para la versión de lanzamiento. Antes de publicar su aplicación, debe generar sus usuarios desde su servidor. Consulte: Generar firma.
Puede usar la página de la lista de conversación (canal) como la página de inicio de su módulo de chat, que incluye todas las conversaciones con usuarios y grupos que tienen registros de chat.
Puede crear una clase Conversation , con TIMUIKitConversation como su cuerpo, para representar la lista de conversaciones. Solo necesita proporcionar la devolución de llamada onTapItem , que permite a los usuarios navegar a la página de chat para cada conversación. En el siguiente paso, presentaremos la clase 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 página de chat consta de la lista de mensajes principales y una barra de envío de mensajes en la parte inferior.
Puede crear una clase Chat , con TIMUIKitChat como su cuerpo, para representar la página de chat. Recomendamos proporcionar una función de devolución de llamada onTapAvatar para navegar a la página de perfil para el contacto actual, que presentaremos en el siguiente paso.
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),
));
},
);
}Esta página muestra el perfil de un usuario específico y mantiene la relación entre el usuario actualizado actual y el otro usuario.
Puede crear una clase UserProfile , con TIMUIKitProfile como su cuerpo, para representar la página del perfil de usuario.
El único parámetro que debe proporcionar es userID , mientras que este componente genera automáticamente la página de perfil y mantenimiento de relaciones en función de la existencia de la amistad.
Consejo : Utilice
profileWidgetBuilderprimero para personalizar algunos widgets de perfil y determinar su secuencia vertical utilizandoprofileWidgetsOrdersi desea personalizar esta página. Si este método no puede satisfacer las necesidades de su negocio, puede considerar usarbuilder.
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,
),
);
}
}Ahora su aplicación puede enviar y recibir mensajes, mostrar la lista de conversaciones y administrar las amistades de contacto. Puede usar otros componentes de Tuikit para implementar rápida y fácilmente el módulo de chat completo.
No. No necesitas integrar el SDK de chat nuevamente. Si desea usar API relacionadas con SDK de CHAT, puede obtenerlas a través de TIMUIKitCore.getSDKInstance() . Se recomienda este método para garantizar la consistencia de la versión SDK de chat.
Compruebe si ha habilitado la cámara , el micrófono , el álbum u otros permisos relacionados.
Se refiere al paso 1 anterior.
Verifique que el dispositivo no esté ocupado por otros recursos. Alternativamente, haga clic en Build para generar un paquete APK, arrástrelo al simulador y ejecutarlo.
Si se produce un error después de la configuración, haga clic en Producto> Limpiar la carpeta de compilación , limpiar el producto y ejecutar pod install o flutter run nuevamente.
Encienda el modo de avión en su reloj Apple y vaya a Configuración> Bluetooth en su iPhone para apagar Bluetooth.
Reinicie Xcode (si se abre) y ejecute flutter run nuevamente.
androidappsrcmainAndroidManifest.xml y complete xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" como sigue. < 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 y complete minSdkVersion y targetSdkVersion en defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Para aquellos que requieren capacidades de llamadas de voz y video en tiempo real junto con nuestro chat uikit, recomendamos encarecidamente nuestro paquete de componentes de interfaz de usuario de voz y video dedicados, TENCENT_CALLS_UIKIT. Este paquete robusto y rico en funciones está diseñado específicamente para complementar nuestra solución existente e integrarse sin problemas con ella, proporcionando una experiencia de comunicación integral y unificada para sus usuarios.
