chat uikit flutter

ขอแนะนำให้ดาวน์โหลดซอร์สโค้ดจาก pub.dev

การแนะนำผลิตภัณฑ์

คุณจะต้องรวมแชท SDK เพื่อรับการแชทการสนทนาความสามารถของกลุ่มและคุณยังสามารถสื่อสารกับผลิตภัณฑ์อื่น ๆ เช่นไวท์บอร์ดผ่านข้อความส่งสัญญาณ แชทสามารถครอบคลุมสถานการณ์ทางธุรกิจที่หลากหลายสนับสนุนการเข้าถึงและการใช้แพลตฟอร์มต่างๆและตอบสนองความต้องการด้านการสื่อสารอย่างเต็มที่

ตรวจสอบแอพตัวอย่างของเรา

เอกสารนี้แนะนำวิธีเรียกใช้การสาธิตแชทบนแพลตฟอร์ม iOS อย่างรวดเร็ว สำหรับแพลตฟอร์มอื่น ๆ โปรดดูเอกสาร：

• chat-uikit-android
• chat-uikit-osi
• chat-uikit-vue
• chat-uikit-react
• chat-uikit-uniapapp
• chat-uikit-wechat

รู้เบื้องต้นเกี่ยวกับ tuikit

แชท SDK มาพร้อมกับ Tuikit ซึ่งเป็นชุดส่วนประกอบ UI อย่างเป็นทางการที่มีตรรกะธุรกิจแชทในตัว Tuikit มีส่วนประกอบต่าง ๆ เช่นการสนทนาการแชทห่วงโซ่ความสัมพันธ์และกลุ่ม ดูภาพรวมห้องสมุด Tuikit สำหรับรายละเอียดเพิ่มเติม

นักพัฒนาสามารถใช้ส่วนประกอบ UI เหล่านี้เพื่อเพิ่มโมดูลแชทในแอปได้อย่างรวดเร็วและง่ายดายในแอปพลิเคชันมือถือของพวกเขา

ปัจจุบัน Flutter Tuikit มีส่วนประกอบหลักต่อไปนี้:

• timuikitcore: รายการหลัก
• TimuikitConversation: รายการสนทนา
• Timuikitchat: โมดูลแชทรวมถึงรายการข้อความประวัติศาสตร์และพื้นที่ส่งข้อความพร้อมคุณสมบัติอื่น ๆ เช่นปฏิกิริยาข้อความและตัวอย่าง URL ฯลฯ
• TimuikitContact: รายชื่อผู้ติดต่อ
• TimuikitProfile: โปรไฟล์ผู้ใช้และการจัดการความสัมพันธ์
• TimuikitGroupprofile: โปรไฟล์และการจัดการกลุ่ม
• TimuikitGroup: รายชื่อกลุ่มตัวเองเข้าร่วม
• timuikitblacklist: รายการของผู้ใช้ถูกบล็อก
• TimuikitNewContact: รายการผู้ติดต่อใหม่รายการแอปพลิเคชัน
• TimuikitSearch: ค้นหาทั่วโลก
• TimuikitSearchMSGDetail: ค้นหาในการสนทนาที่เฉพาะเจาะจง

นอกเหนือจากส่วนประกอบเหล่านี้แล้วยังมีส่วนประกอบและวิดเจ็ตที่มีประโยชน์อื่น ๆ เพื่อช่วยให้นักพัฒนาตอบสนองความต้องการทางธุรกิจของพวกเขาเช่นรายการแอปพลิเคชันกลุ่มและรายชื่อสมาชิกกลุ่ม

แพลตฟอร์มที่เข้ากันได้

แพลตฟอร์มนี้เข้ากันได้กับการปรับใช้ uikit แชทของเรา

• Android
• iOS
• เว็บ (เวอร์ชัน 0.1.4 และใหม่กว่า)
• Windows (เวอร์ชัน 2.0.0 และใหม่กว่า)
• MacOS (เวอร์ชัน 2.0.0 และใหม่กว่า)

เริ่มต้นใช้งาน

โปรดดูที่ Run Demo สำหรับคำแนะนำที่สมบูรณ์และมีรายละเอียดเกี่ยวกับการเริ่มต้นใช้งาน

ทิศทาง

คู่มือต่อไปนี้อธิบายวิธีการสร้างแอปพลิเคชันแชทง่าย ๆ โดยใช้ Flutter Tuikit อย่างรวดเร็ว อ้างถึงภาคผนวกหากคุณต้องการเรียนรู้เกี่ยวกับรายละเอียดและพารามิเตอร์ของแต่ละวิดเจ็ต

ขั้นตอนที่ 0: สร้างสองบัญชีสำหรับการทดสอบ

ลงทะเบียนและเข้าสู่ระบบคอนโซลแชท

สร้างแอปพลิเคชันและป้อน คลิกผู้ใช้และสร้างสองบัญชี

วิธีที่ถูกต้องในการแจกจ่าย UserSig คือการรวมรหัสการคำนวณสำหรับ UserSig เข้ากับเซิร์ฟเวอร์ของคุณและให้ API ที่เน้นแอปพลิเคชัน เมื่อ UserSig ชันของคุณสามารถส่งคำขอไปยังเซิร์ฟเวอร์ธุรกิจสำหรับ UserSig. แบบไดนามิก สำหรับข้อมูลเพิ่มเติมดูที่ฉันจะคำนวณผู้ใช้บนเซิร์ฟเวอร์ได้อย่างไร

ขั้นตอนที่ 1: สร้างแอพพลิเคชั่น Flutter และเพิ่มการกำหนดค่าการอนุญาต

สร้างแอพพลิเคชั่น Flutter อย่างรวดเร็วโดยทำตามเอกสาร Flutter

Tuikit ต้องการสิทธิ์ในการถ่ายภาพ/อัลบั้ม/การบันทึก/เครือข่ายสำหรับฟังก์ชั่นการส่งข้อความพื้นฐาน คุณต้องประกาศสิทธิ์เหล่านี้ด้วยตนเองเพื่อใช้ความสามารถที่เกี่ยวข้องตามปกติ

Android

เปิด android/app/src/main/AndroidManifest.xml และเพิ่มบรรทัดต่อไปนี้ระหว่าง <manifest> และ </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 " />

iOS

เปิด ios/Podfile และเพิ่มบรรทัดต่อไปนี้ไปที่ส่วนท้ายของไฟล์

 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

ขั้นตอนที่ 2: ติดตั้งการพึ่งพา

เพิ่ม tencent_cloud_chat_uikit ภายใต้ dependencies ในไฟล์ pubspec.yaml หรือเรียกใช้คำสั่งต่อไปนี้:

flutter pub add tencent_cloud_chat_uikit

รองรับ Android และ iOS โดยค่าเริ่มต้น หากคุณต้องการใช้มันบนเว็บให้ดูที่คู่มือต่อไปนี้

การสนับสนุนเว็บ

เวอร์ชัน 0.1.4 หรือใหม่กว่านั้นจำเป็นต้องสนับสนุนเว็บ

หากโครงการ Flutter ที่มีอยู่ของคุณไม่รองรับเว็บ Run flutter create . ใน Project Root Directory เพื่อเพิ่มการสนับสนุนเว็บ

ติดตั้งการพึ่งพา JavaScript ไปยัง web/ ใช้ npm หรือ yarn

 cd web

npm init

npm i tim-js-sdk

npm i tim-upload-plugin

เปิด web/index.html และเพิ่มสองบรรทัดต่อไปนี้ระหว่าง <head> และ </head> เพื่อนำเข้า

 < script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >

ขั้นตอนที่ 3: เริ่มต้น tuikit

เริ่มต้น Tuikit เมื่อแอปของคุณเริ่มต้น คุณจะต้องดำเนินการเริ่มต้นหนึ่งครั้งเพื่อให้โครงการเริ่มต้น

รับอินสแตนซ์ของ tuikit ก่อนโดยใช้ TIMUIKitCore.getInstance() ตามด้วยการเริ่มต้นด้วย 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 ();
}}

คุณอาจต้องการลงทะเบียนฟังก์ชั่นการโทรกลับสำหรับ onTUIKitCallbackListener ที่นี่ อ้างถึงภาคผนวก

ขั้นตอนที่ 4: รับลายเซ็นและเข้าสู่ระบบ

ตอนนี้คุณสามารถเข้าสู่ระบบหนึ่งในบัญชีทดสอบที่สร้างขึ้นในขั้นตอนที่ 0 เพื่อเริ่มโมดูลแชทคลาวด์ Tencent

เข้าสู่ระบบโดยใช้ _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);

หมายเหตุ: การนำเข้า usersig ไปยังแอปพลิเคชันของคุณมีไว้สำหรับวัตถุประสงค์ในการดีบักเท่านั้นและไม่สามารถใช้สำหรับเวอร์ชันรุ่น ก่อนที่จะเผยแพร่แอปของคุณคุณควรสร้างผู้ใช้จากเซิร์ฟเวอร์ของคุณ อ้างถึง: สร้างลายเซ็น

ขั้นตอนที่ 5 การใช้หน้ารายการการสนทนา

คุณสามารถใช้หน้ารายการการสนทนา (ช่อง) เป็นหน้าแรกของโมดูลแชทของคุณซึ่งรวมถึงการสนทนาทั้งหมดกับผู้ใช้และกลุ่มที่มีบันทึกการแชท

คุณสามารถสร้างคลาส Conversation ด้วย TIMUIKitConversation เป็นร่างกายเพื่อแสดงรายการการสนทนา คุณจะต้องให้การโทรกลับ onTapItem ซึ่งช่วยให้ผู้ใช้สามารถไปที่หน้าแชทสำหรับการสนทนาแต่ละครั้ง ในขั้นตอนต่อไปเราจะแนะนำคลาส 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,
                    ),
              ));
        },
      ),
    );
  }
}

ขั้นตอนที่ 6. การใช้หน้าแชท

หน้าแชทประกอบด้วยรายการข้อความหลักและแถบส่งข้อความที่ด้านล่าง

คุณสามารถสร้างคลาส Chat ด้วย TIMUIKitChat เป็นร่างกายเพื่อแสดงหน้าแชท เราขอแนะนำให้จัดหาฟังก์ชั่นการโทรกลับ onTapAvatar เพื่อนำทางไปยังหน้าโปรไฟล์สำหรับผู้ติดต่อปัจจุบันซึ่งเราจะแนะนำในขั้นตอนต่อไป

 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),
            ));
      }, 
    );
  }

ขั้นตอนที่ 7 การใช้หน้าโปรไฟล์ผู้ใช้

หน้านี้แสดงโปรไฟล์ของผู้ใช้เฉพาะและรักษาความสัมพันธ์ระหว่างผู้ใช้ที่เข้าสู่ระบบปัจจุบันและผู้ใช้รายอื่น

คุณสามารถสร้างคลาส UserProfile โดยมี TIMUIKitProfile เป็นร่างกายเพื่อแสดงหน้าโปรไฟล์ผู้ใช้

พารามิเตอร์เดียวที่คุณต้องให้คือ userID ในขณะที่ส่วนประกอบนี้จะสร้างหน้าโปรไฟล์และการบำรุงรักษาความสัมพันธ์โดยอัตโนมัติตามการมีอยู่ของมิตรภาพ

เคล็ดลับ : โปรดใช้ profileWidgetBuilder ก่อนเพื่อปรับแต่งวิดเจ็ตโปรไฟล์และกำหนดลำดับแนวตั้งของพวกเขาโดยใช้ profileWidgetsOrder หากคุณต้องการปรับแต่งหน้านี้ หากวิธีนี้ไม่สามารถตอบสนองความต้องการทางธุรกิจของคุณได้คุณอาจพิจารณาใช้ builder แทน

 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,
      ),
    );
  }
}

ตอนนี้แอปของคุณสามารถส่งและรับข้อความแสดงรายการสนทนาและจัดการมิตรภาพติดต่อ คุณสามารถใช้ส่วนประกอบอื่น ๆ จาก Tuikit ไปยังโมดูลแชทที่สมบูรณ์ได้อย่างรวดเร็วและง่ายดาย

คำถามที่พบบ่อย

ฉันจำเป็นต้องรวมแชท SDK หลังจากรวม Tuikit หรือไม่?

ไม่คุณไม่จำเป็นต้องรวมแชท SDK อีกครั้ง หากคุณต้องการใช้ API ที่เกี่ยวข้องกับแชท SDK คุณสามารถรับได้ผ่าน TIMUIKitCore.getSDKInstance() วิธีการนี้แนะนำเพื่อให้แน่ใจว่าการแชทรุ่น SDK สอดคล้องกัน

เหตุใด Force จึงเลิกเกิดขึ้นเมื่อฉันส่งเสียงรูปภาพไฟล์หรือข้อความอื่น ๆ

ตรวจสอบว่าคุณเปิดใช้งาน กล้อง ไมค์ อัลบั้ม หรือสิทธิ์อื่น ๆ ที่เกี่ยวข้องหรือไม่

หมายถึงขั้นตอนที่ 1 ด้านบน

ฉันควรทำอย่างไรถ้าคลิกสร้างและเรียกใช้สำหรับอุปกรณ์ Android ทำให้เกิดข้อผิดพลาดโดยระบุว่าไม่พบอุปกรณ์ที่มีอยู่?

ตรวจสอบว่าอุปกรณ์ไม่ได้ถูกครอบครองโดยทรัพยากรอื่น ๆ อีกทางเลือกหนึ่งคลิกสร้างเพื่อสร้างแพ็คเกจ APK ลากไปยังตัวจำลองและเรียกใช้

ฉันควรทำอย่างไรหากเกิดข้อผิดพลาดในระหว่างการรันครั้งแรกสำหรับอุปกรณ์ iOS

หากเกิดข้อผิดพลาดหลังจากการกำหนดค่าให้คลิก ผลิตภัณฑ์> ทำความสะอาดโฟลเดอร์บิลด์ ทำความสะอาดผลิตภัณฑ์และเรียกใช้ pod install หรือ flutter run อีกครั้ง

ฉันควรทำอย่างไรถ้าเกิดข้อผิดพลาดระหว่างการดีบักบนอุปกรณ์ iOS จริงเมื่อฉันใส่ Apple Watch?

เปิดโหมด Airplane บน Apple Watch ของคุณและไปที่ การตั้งค่า> บลูทู ธ บน iPhone ของคุณเพื่อปิดบลูทู ธ

รีสตาร์ท XCODE (ถ้าเปิด) และเรียกใช้ flutter run อีกครั้ง

ฉันควรทำอย่างไรเมื่อเกิดข้อผิดพลาดบนอุปกรณ์ Android หลังจาก Tuikit ถูกนำเข้าสู่แอปพลิเคชันที่สร้างขึ้นโดยอัตโนมัติโดย Flutter?

1. เปิด androidappsrcmainAndroidManifest.xml และเสร็จสมบูรณ์ xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label"

< 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 " >

2. เปิด androidappbuild.gradle และเสร็จสิ้น minSdkVersion และ targetSdkVersion ใน defaultConfig

 defaultConfig {
  applicationId " " // Replace it with your Android package name
  minSdkVersion 21
  targetSdkVersion 30
}

---

ทรัพยากรที่แนะนำ

สำหรับผู้ที่ต้องการความสามารถในการโทรด้วยเสียงและวิดีโอแบบเรียลไทม์ควบคู่ไปกับการแชท Uikit ของเราเราขอแนะนำแพ็คเกจเสียงและวิดีโอ UI โดยเฉพาะของเรา Tencent_calls_uikit แพ็คเกจที่แข็งแกร่งและอุดมไปด้วยคุณสมบัตินี้ได้รับการออกแบบมาโดยเฉพาะเพื่อเสริมโซลูชันที่มีอยู่ของเราและรวมเข้ากับมันอย่างราบรื่นมอบประสบการณ์การสื่อสารที่ครอบคลุมและครบวงจรสำหรับผู้ใช้ของคุณ