직접 해본 Flutter로 멀티 플랫폼 채팅 앱 만들기(상세 과정 포함)

11일 전

채팅 앱을 만들고 싶은데 처음부터 만들려고 하니 너무 막막해서 어떡하지 싶다가 텐센트 클라우드에서 나온 Tencent Cloud Chat을 알게 되었습니다. 거의 영어로 되어있는 문서라서 처음부터 어떻게 Flutter Chat UIKit 를 사용해서 채팅 앱을 만들었는지 올려보려고 합니다. 만들면서 이 가이드를 작성했습니다.
참고 문서: 
[Tencent Cloud Chat 홈페이지](https://trtc.io/products/chat?source=flutter_devsnote&utm_campaign=social)
[Flutter UIKit 문서](https://www.tencentcloud.com/document/product/1047/45907?lang=en&pg=)
## 기본 앱 만들기 
앱이 이미 있으신 분들은 이 부분 건너 뛰시면 됩니다.
Flutter은 하나의 코드로 여러 플랫폼(iOS, Android, 웹, PC 등등)에서 사용할 수 있는 구글에서 나온 애플리케이션 UI 도구 모음입니다. 저도 완전 초보라 Flutter의 초보 가이드를 보고 했어요.[ 참고한 Flutter 가이드](https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#1)
저는 Mac에서 실행 시켰고 Flutter 가이드를 따라 4번 [버튼 추가하기] 까지만 했습니다.
![img](https://devsnote.com/assets/data/ck_upload/_upload_8e03b28ac7fae5d88142f6e5c4571cb8.png?v=1714114082)
## 계정 만들기
1. [콘솔](https://console.trtc.io/) 로 들어와 계정을 만들고 개인 정보 입력하면 끝. 저는 무료 버전으로 할거라 결제 수단은 추가할 필요 없더라고요. 팁: 개인 개발용이라면 구글 계정이 더 빠릅니다.
2. Free trial 선택 후 Application 만들기
	Call, Conference, RTC Engine 중에서 필요하신 기능 선택하시고 선택 누르면 새로운 Application이 생성됩니다. 저는 Call을 선택했더니 Call과 Chat기능이 포함되어 있네요. Application의 sdkappid와 secretKey는 초기화 및 로그인에 중요한 정보이니 기억해 두는게 좋습니다.
![img](https://devsnote.com/assets/data/ck_upload/_upload_38d79c989508895553004612d423f69f.png?v=1714114138)
![img](https://devsnote.com/assets/data/ck_upload/_upload_ff9575a34574c2cfb527cbc8efc3b71a.png?v=1714114143)
3. 테스트 유저 만들기
	저는 채팅 기능을 테스트 할거라 미리 콘솔에서 테스트 유저 2명을 만들어 줄게요.아까 만든 Application을 누르고 Chat을 누른 후 User로 들어가 User1 User2를 만들었습니다. 이미지에서는 왼쪽부터 오른쪽까지 순차적으로 버튼 누르면 됩니다.
![img](https://devsnote.com/assets/data/ck_upload/_upload_ffbe543f147aafe4b124056d5c858b1c.png?v=1714114174)
4. package import
다시 아까 만들어 두었던 Flutter app으로 돌아가 terminal에 이하 내용을 칩니다.
`flutter pub add tencent_cloud_chat`
만약 이때 TXIMSDK_Plus_Mac 문제가 떠서 앱을 실행시키지 못했더라면
`pod repo update`
혹은 macos/Podfile에서 platform version을 11.0로 설정해 보세요
`platform :osx, '11.0'`
그리고 다시 실행시키면 됩니다. 
그 다음 필요한 기능들을 다시 import 해줍니다. 저는 아래 내용들을 import 했어요.
```
// 메시지 창
flutter pub add tencent_cloud_chat_message 
 // 히스토리 메시지 리스트
flutter pub add tencent_cloud_chat_conversation
// 친구 리스트
flutter pub add tencent_cloud_chat_contact
// 유저 프로파일
flutter pub add tencent_cloud_chat_user_profile
// 그룹 프로파일
flutter pub add tencent_cloud_chat_group_profile

```
## 코딩
*  MaterialApp 을 TencentCloudChatMaterialApp 로 바꿔줍니다. (UIKit의 언어 설정, Theme 설정 등을 사용할 수 있게 해줍니다.)
![img](https://devsnote.com/assets/data/ck_upload/_upload_b4b95c1ea7bb63305e8f8e6aa65c54be.png?v=1714114319)
* 초기화
MyHomePage를 StatefulWidget 으로 바꾼 후 initState 함수에 UIKit 를 초기화 해줬습니다.
로그인하려는 유저의 userSig은 콘솔에서 구했습니다.
![img](https://devsnote.com/assets/data/ck_upload/_upload_bb302fc13af9d79c6ae9c9538a62c1e6.png?v=1714114338)
```
TencentCloudChat.controller.initUIKit(
  options: const TencentCloudChatInitOptions(
    sdkAppID: , /// [Required]: The SDKAppID of your Tencent Cloud Chat application
    userID: , /// [Required]: The userID of the logged-in user
    userSig: , /// [Required]: The userSig of the logged-in user
  ),
  components: const TencentCloudChatInitComponentsRelated( /// [Required]: The modular UI components related settings, taking effects on a global scale.
    usedComponentsRegister: [
      /// [Required]: List of registration functions for the components used in the Chat UIKit.
          TencentCloudChatConversationManager.register,
          TencentCloudChatMessageManager.register,
          TencentCloudChatUserProfileManager.register,
          TencentCloudChatGroupProfileManager.register,
          TencentCloudChatContactManager.register,
      ],
  ),
);

```
![img](https://devsnote.com/assets/data/ck_upload/_upload_8c58e90e23b2efffce982ecaf5834fcf.png?v=1714114358)
그리고 flutter run을 해주니 Terminal에 UIKit 초기화 성공으로 뭔가 많이 떴어요. 여기까지면 반은 성공 한거라고 쳐도 되겠죠 ㅎㅎ
* 채팅 페이지
저는 일단 Conversation ( 히스토리 메시지 리스트) 와 Contact (친구 목록) 을 사용해 주었습니다.
데모에 있던 build 내용을 바꿔 주었고, R (새로 고침) 을 누르니...
```
List<Widget> pages = [
    const TencentCloudChatConversation(),
    const TencentCloudChatContact(),
  ];
  int currentIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) async {
          if (index != currentIndex) {
            setState(
              () {
                currentIndex = index;
              },
            );
          }
        },
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.chat_bubble_outline), label: "Chats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.contacts), label: "Contacts"),
        ],
      ),
      body: pages[currentIndex],
    );
  }
```
![img](https://devsnote.com/assets/data/ck_upload/_upload_ea8927cb778b3dea1e07e1dd3338ae9d.png?v=1714114410)
![img](https://devsnote.com/assets/data/ck_upload/_upload_d43dc08339e5c60cb82f5e1670d72f76.png?v=1714114416)
![img](https://devsnote.com/assets/data/ck_upload/_upload_1bd0f72c67f21517abe570ddb0151779.png?v=1714114421)
짠 이런 효과가! 저는 페이지 전환 효과를 위해 Bottom Navigation을 더해줬지만 그냥 TencentCloudChatConversation() 을 해줘도 같은 효과가 나타납니다.
* 친구 추가
일단 user1이 친구가 없어서 메시지를 보내지 못하니 user2를 친구로 추가해 줍니다.
![img](https://devsnote.com/assets/data/ck_upload/_upload_26989d6cb6392e2d4c8412705d363c36.png?v=1714114444)
![img](https://devsnote.com/assets/data/ck_upload/_upload_20d6e47579416cc889e9bb914116cd37.png?v=1714114449)
추가 후에 연락처에 user2가 떴습니다. 만약 친구 추가에 실패하셨다면 콘솔에 user2의 친구 추가 옵션을 확인해 보세요.
![img](https://devsnote.com/assets/data/ck_upload/_upload_7497f6abd031dd22c1907bc15aa8f54b.png?v=1714114458)
* 메시지 보내기
마지막으로 제일 중요한 메시지를 보내기. 만약 iOS나 Android에서만 쓰신다면 바로 친구 리스트를 클릭하면 메시지 보내기 화면으로 돌아갈 수 있습니다. 하지만 저는 PC 플랫폼을 개발중이라 아래 내용을 더 추가해야만 메시지 보내기 창으로 넘어갈 수 있더라고요.
![img](https://devsnote.com/assets/data/ck_upload/_upload_f38c0a0b1d37552faf7fe2a781cceb1d.png?v=1714114479)
PC는 conversation 과 message 부분이 합쳐져 있기 때문에 conversation 페이지로 넘어가면 바로 채팅 화면도 같이 나타납니다. 이 때 return false;를 해야만 제가 쓴 conversation 페이지로 넘어가는 거 외에 다른 로직을 처리해 줍니다. return true는 아무런 로직도 처리해 주지 않는다는 사실!
이제 메시지를 보내기만 하면 간단한 채팅 앱 완성! 
![img](https://devsnote.com/assets/data/ck_upload/_upload_3cc1a3dc64fdba2c9f71fd5a7df9a5e3.png?v=1714114794)
동일하게 user2로 로그인하면 user1이 보낸 메시지를 볼 수 있습니다.
정확히 이 글을 쓰면서 반나절도 걸리지 않았네요.
만약 빠르고 쉽고 간단하게 멀티 플랫폼 채팅 앱을 만들고 싶으신 분들은 이거 한번 참고해 보셨으면 좋겠습니다.
* 추가:
언어와 테마 바꾸기 (일본어, 영어, 아랍어, 중국어 등 지원, 다크모드 지원)
![img](https://devsnote.com/assets/data/ck_upload/_upload_6d0bff1e1c8198bcfdee0a5c88b0cbdb.png?v=1714114809)
효과:
![img](https://devsnote.com/assets/data/ck_upload/_upload_15d42002293b0a5a6181fb113332c38c.png?v=1714114819)
이 외에 다크 모드, 세부 커스터마이징도 간단히 할 수 있으니 해당 문서를 참고하면 좋을 것 같습니다.
이미 완성된 완전한 데모도 있다고 하니 참고해 보시는 것도 좋을 것 같습니다.
[데모 링크](https://github.com/TencentCloud/chat-demo-flutter/tree/v2)
문제가 있다면[ 디스코드](https://discord.com/invite/hq7jW7zChW)로도 편하게 물어볼 수 있습니다.

챗 채팅 Flutter Dart 채팅 SDK 앱

192

데이지

11일 전

댓글 0

아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)

뎁스노트 앱으로 보시겠습니까?