🔰Flutter와 ZEGOCLOUD ZIMKit을 사용해 실시간 채팅 앱 만들기 (백엔드 없이)

Source: Dev.to

소개

실시간 채팅 기능은 이제 현대 앱의 핵심 기능입니다—WhatsApp 같은 메신저 플랫폼이든, 고객 지원 채팅이든, 커뮤니티 그룹 애플리케이션이든 말이죠. 서버를 직접 구축하고, WebSocket을 관리하며, 메시지를 수동으로 동기화하는 대신 ZEGOCLOUD는 Flutter 개발자를 위한 즉시 사용 가능한 API와 UI 컴포넌트를 제공합니다. ZIMKit을 사용하면 백엔드 인프라를 관리하지 않고도 몇 분 안에 실시간 채팅 앱을 만들 수 있습니다.

이번 튜토리얼에서는 다음을 포함한 실시간 채팅 앱을 만들겠습니다:

• 로그인
• 1:1 채팅
• 그룹 채팅
• 실시간 메시지 전송
• 백엔드 불필요

만들게 될 것

이 글을 끝까지 읽으면 다음을 할 수 있게 됩니다:

• Flutter에 ZEGOCLOUD ZIMKit 통합하기
• 채팅 SDK 초기화하기
• 로컬에서 사용자 등록하기
• 1:1 채팅 만들기
• 그룹 채팅 생성 및 참여하기
• 실시간으로 대화 목록 표시하기

ZEGOCLOUD란?

ZEGOCLOUD는 다음과 같은 SDK를 제공하는 통신 플랫폼입니다:

• 인앱 채팅
• 음성 및 영상 통화
• 라이브 스트리밍
• 인터랙티브 룸

웹사이트:
인앱 채팅 제품:
Flutter 문서:

1단계 — Zego ZIMKit 설치

pubspec.yaml 파일을 열고 ZIMKit 의존성을 추가합니다:

그런 다음 실행합니다:

flutter pub get

2단계 — 채팅 SDK 초기화

자격 증명을 위한 파일을 만들고, 예를 들어 utils/app_string.dart 를 생성합니다.

⚠️ AppSign을 공개 저장소에 절대 노출하지 마세요.

필수 Android 설정

권한

android/app/src/main/AndroidManifest.xml 에 필요한 권한을 추가합니다:

Proguard 규칙 (릴리스 모드)

android/app/proguard-rules.pro 파일을 만들거나 편집합니다:

Build Gradle 설정

android/app/build.gradle 를 편집하고 minify와 proguard를 활성화합니다:

3단계 — main.dart 에서 ZIMKit 초기화

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/utils/app_string.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  ZIMKit().init(appID: AppString.appID, appSign: AppString.appSign);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zego Chat',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: const LoginPage(),
    );
  }
}

4단계 — 로그인 페이지 만들기

백엔드 없이 userID와 username을 사용해 로컬에서 사용자를 인증합니다.

screens/login.dart

import 'package:chat_app_zegogloud/screens/home.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State create() => _LoginPageState();
}

class _LoginPageState extends State {
  final userId = TextEditingController();
  final userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login to Chat')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: userId,
              decoration: const InputDecoration(labelText: 'User ID'),
            ),
            TextField(
              controller: userName,
              decoration: const InputDecoration(labelText: 'User Name'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ZIMKit().connectUser(id: userId.text, name: userName.text);
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const HomePage()),
                );
              },
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

5단계 — 대화 목록이 있는 홈 페이지

이 페이지에서는 모든 1:1 채팅과 그룹 채팅을 보여줍니다.

screens/home.dart

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/screens/home_page_popUp.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State create() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
        actions: [
          IconButton(icon: const Icon(Icons.logout), onPressed: _handleLogout),
          const HomePagePopup(),
        ],
      ),
      body: ZIMKitConversationListView(
        onPressed: (context, conversation) {
          // Navigate to chat screen (implementation omitted for brevity)
        },
      ),
    );
  }

  void _handleLogout() {
    ZIMKit().logout();
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) => const LoginPage()),
    );
  }
}

나머지 UI(채팅 화면, 그룹 생성 등)는 ZIMKitMessageListView, ZIMKitMessageInput 같은 ZIMKit 위젯을 사용하여 동일한 패턴으로 구현됩니다. 앱 디자인에 맞게 필요에 따라 조정하세요.