chat uikit flutter
version: 4.0.0
Anda hanya perlu mengintegrasikan obrolan SDK untuk dengan mudah mendapatkan obrolan, percakapan, kemampuan grup, dan Anda juga dapat berkomunikasi dengan produk lain seperti papan tulis melalui pesan pensinyalan. Obrolan dapat mencakup berbagai skenario bisnis, mendukung akses dan penggunaan berbagai platform, dan sepenuhnya memenuhi kebutuhan komunikasi.
Dokumen ini memperkenalkan cara menjalankan demo obrolan dengan cepat di platform iOS. Untuk platform lainnya, silakan merujuk ke dokumen ：
Obrolan SDK dilengkapi dengan Tuikit, yang merupakan serangkaian komponen UI resmi yang memiliki logika bisnis obrolan. Tuikit termasuk komponen seperti percakapan, obrolan, rantai hubungan, dan kelompok. Lihat Tinjauan Perpustakaan Tuikit untuk detail lebih lanjut.
Pengembang dapat menggunakan komponen UI ini untuk dengan cepat dan mudah menambahkan modul obrolan dalam aplikasi ke aplikasi seluler mereka.
Saat ini, Flutter Tuikit berisi komponen utama berikut:
Selain komponen -komponen ini, ada komponen dan widget lain yang tersedia untuk membantu pengembang memenuhi kebutuhan bisnis mereka, seperti daftar aplikasi entri grup dan daftar anggota grup.
Platform ini kompatibel dengan penyebaran uikit obrolan kami.
Silakan merujuk ke Demo Run untuk panduan yang lengkap dan terperinci untuk memulai.
Panduan berikut menjelaskan cara dengan cepat membangun aplikasi obrolan sederhana menggunakan flutter tuikit. Lihat lampiran jika Anda ingin mempelajari tentang detail dan parameter setiap widget.
Daftar dan Masuk ke Konsol Obrolan.
Buat aplikasi dan masukkan. Klik pengguna dan buat dua akun.
Cara yang benar untuk mendistribusikan
UserSigadalah mengintegrasikan kode perhitungan untukUserSigke dalam server Anda dan memberikan API yang berorientasi aplikasi. KetikaUserSigdiperlukan, aplikasi Anda dapat mengirim permintaan ke server bisnis untukUserSig.Untuk informasi lebih lanjut, lihat bagaimana cara menghitung pengguna di server?.
Buat aplikasi flutter dengan cepat dengan mengikuti dokumentasi flutter.
Tuikit membutuhkan izin pemotretan/album/rekaman/jaringan untuk fungsi pesan dasar. Anda perlu menyatakan izin ini secara manual untuk menggunakan kemampuan yang relevan secara normal.
Buka android/app/src/main/AndroidManifest.xml dan tambahkan baris berikut antara <manifest> dan </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 " /> Buka ios/Podfile dan tambahkan baris berikut ke ujung file.
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
Tambahkan tencent_cloud_chat_uikit di bawah dependencies dalam file pubspec.yaml , atau jalankan perintah berikut:
flutter pub add tencent_cloud_chat_uikitIni mendukung Android dan iOS secara default. Jika Anda juga ingin menggunakannya di web, lihat panduan berikut.
Versi 0.1.4 atau lebih baru diperlukan untuk mendukung Web.
Jika proyek Flutter Anda yang ada tidak mendukung Web, jalankan flutter create . Di direktori Root Proyek untuk menambahkan dukungan web.
Instal dependensi JavaScript ke web/ Menggunakan npm atau yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Buka web/index.html dan tambahkan dua baris berikut antara <head> dan </head> untuk mengimpornya.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Inisialisasi Tuikit saat aplikasi Anda dimulai. Anda hanya perlu melakukan inisialisasi sekali agar proyek memulai.
Dapatkan instance Tuikit pertama menggunakan TIMUIKitCore.getInstance() , diikuti dengan menginisialisasi dengan sdkAppID Anda.
/// 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 ();
}}Anda mungkin juga ingin mendaftarkan fungsi panggilan balik untuk
onTUIKitCallbackListenerdi sini. Lihat Lampiran.
Anda sekarang dapat masuk salah satu akun pengujian yang dihasilkan pada langkah 0 untuk memulai modul obrolan cloud tencent.
Masuk menggunakan _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);Catatan: Mengimpor pengguna ke aplikasi Anda hanya untuk tujuan debugging dan tidak dapat digunakan untuk versi rilis. Sebelum menerbitkan aplikasi Anda, Anda harus menghasilkan pengguna Anda dari server Anda. Lihat: Hasilkan tanda tangan.
Anda dapat menggunakan halaman daftar percakapan (saluran) sebagai beranda modul obrolan Anda, yang mencakup semua percakapan dengan pengguna dan grup yang memiliki catatan obrolan.
Anda dapat membuat kelas Conversation , dengan TIMUIKitConversation sebagai tubuhnya, untuk membuat daftar percakapan. Anda hanya perlu memberikan panggilan balik onTapItem , yang memungkinkan pengguna untuk menavigasi ke halaman obrolan untuk setiap percakapan. Pada langkah berikutnya, kami akan memperkenalkan kelas 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,
),
));
},
),
);
}
}Halaman obrolan terdiri dari daftar pesan utama dan bilah pengiriman pesan di bagian bawah.
Anda dapat membuat kelas Chat , dengan TIMUIKitChat sebagai tubuhnya, untuk membuat halaman obrolan. Kami merekomendasikan untuk menyediakan fungsi panggilan balik onTapAvatar untuk menavigasi ke halaman profil untuk kontak saat ini, yang akan kami perkenalkan pada langkah berikutnya.
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),
));
},
);
}Halaman ini menunjukkan profil pengguna tertentu dan mempertahankan hubungan antara pengguna yang masuk saat ini dan pengguna lainnya.
Anda dapat membuat kelas UserProfile , dengan TIMUIKitProfile sebagai tubuhnya, untuk membuat halaman profil pengguna.
Satu -satunya parameter yang harus Anda berikan adalah userID , sementara komponen ini secara otomatis menghasilkan halaman Profil dan Pemeliharaan Hubungan berdasarkan keberadaan persahabatan.
Kiat : Silakan gunakan
profileWidgetBuilderterlebih dahulu untuk menyesuaikan beberapa widget profil dan menentukan urutan vertikal mereka menggunakanprofileWidgetsOrderjika Anda ingin menyesuaikan halaman ini. Jika metode ini tidak dapat memenuhi kebutuhan bisnis Anda, Anda dapat mempertimbangkan untuk menggunakanbuildersebagai gantinya.
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,
),
);
}
}Sekarang aplikasi Anda dapat mengirim dan menerima pesan, menampilkan daftar percakapan, dan mengelola persahabatan kontak. Anda dapat menggunakan komponen lain dari Tuikit untuk dengan cepat dan mudah menerapkan modul obrolan lengkap.
Tidak. Anda tidak perlu mengintegrasikan obrolan SDK lagi. Jika Anda ingin menggunakan API terkait Obrolan SDK, Anda bisa mendapatkannya melalui TIMUIKitCore.getSDKInstance() . Metode ini disarankan untuk memastikan konsistensi versi obrolan SDK.
Periksa apakah Anda telah mengaktifkan kamera , mic , album , atau izin terkait lainnya.
Mengacu pada langkah 1 di atas.
Periksa apakah perangkat tidak ditempati oleh sumber daya lain. Atau, klik Build untuk menghasilkan paket APK, seret ke simulator, dan jalankan.
Jika kesalahan terjadi setelah konfigurasi, klik Produk> Bersihkan Folder Build , Bersihkan Produk, dan Jalankan pod install atau flutter run lagi.
Nyalakan mode pesawat pada Apple Watch Anda, dan buka Pengaturan> Bluetooth di iPhone Anda untuk mematikan Bluetooth.
Restart xcode (jika dibuka) dan jalankan flutter run lagi.
androidappsrcmainAndroidManifest.xml dan Lengkapi xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" sebagai berikut. < 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 dan Lengkapi minSdkVersion dan targetSdkVersion di defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Bagi mereka yang membutuhkan kemampuan panggilan suara dan video real-time bersama uikit obrolan kami, kami sangat merekomendasikan paket komponen UI panggilan suara dan video kami, tencent_calls_uikit. Paket yang kuat dan kaya fitur ini dirancang khusus untuk melengkapi solusi kami yang ada dan mengintegrasikannya dengan mulus, memberikan pengalaman komunikasi yang komprehensif dan terpadu untuk pengguna Anda.
