[Flutter] Firebase로 채팅앱 만들기 - 2 (데이터 가져오기)

이번에선 저번 포스팅에 이어 파이어베이스에 컬렉션 구조를 설계하고 데이터를 Flutter프로젝트로 가져오는 작업을 진행해 볼 것이다.

 

먼저 Firebase 콘솔로 이동한다.

콘솔 좌측 메뉴에서 Firestore Database를 선택한다.

 

 

그러면 이렇게 Cloud Firestore 섹션으로 이동하게 되고 여기서 데이터베이스 만들기라는 버튼을 클릭하도록 한다.

 

 

새로운 창이 뜨게 되는데 여기서 보안규칙을 적용하라고 한다.

규칙은 나중에 언제든지 수정이 가능하므로 지금은 30일 동안만 열어두는 테스트 모드로 작동을 시키도록 하겠다.

 

 

다음으로 이동하면 해당 데이터베이스가 저장되는 위치를 선택하라고 뜬다 기본으로 설정해두고 넘어가도록 하겠다.

 

 

완료가 되면 이렇게 데이터 테이블 같은 화면이 나오게 된다. 여기서 중요한 개념이 하나 있는데

MySql이나 MSSQL 등은 RDBMS라는 관계형 데이터베이스 구조를 사용하기 때문에

Database > Table > Row 그리고 테이블 간의 관계를 중요시하게 여기는 구조를 사용한다.

그러나 Firestore나 MongoDB의 경우 문서형 데이터 베이스를 기본구조로 하기 때문에

Database > Collection > Document > Collection > Document > ... 와 같은 구조를 가질 수 있다.

RDBMS와는 다르게 관계에 대한 제약사항이 없다 보니 데이터 모델을 확장하는 게 매우 편리하다는 장점이 있다.

 

우리는 채팅 앱의 구조를 먼저 정해둘 것인데

앱을 켜면 채팅방 목록이 나오게 되고 채팅방 안에는 메시지 목록과 사용자 목록이 있는 모습으로 설계할 예정이다.

 

설계를 할 때는 기본적으로 '목록'자를 붙이는 부분은 '컬렉션'이라 부르고 '단일 객체'는 '도큐먼트'라고 부르도록 하겠다.

 

채팅방목록(컬렉션)안에는 채팅방객체(도큐먼트)가 존재하게 되고

채팅방객체(도큐먼트)안에는 메시지목록(컬렉션)과 사용자목록(컬렉션)이 존재하게 되고

메시지목록(컬렉션)안에는 메시지객체(도큐먼트)가 존재하게 된다

메시지객체(도큐먼트)안에는 메시지 내용이나 시간 등을 넣으면 좋다.

 

그러면 바로 구조를 완성해보도록 하겠다.

 

빨간 동그라미 안에 컬렉션 시작을 눌러준다

 

채팅방 목록(컬렉션)을 만들어 주도록 한다.

 

 

채팅방목록(컬렉션)안에 채팅방객체(도큐먼트)를 만들어주도록 할껀데 문서ID는 자동으로 발급받도록 한다.

만약 채팅방의 이름을 정해두고 싶다면 아래 필드에 name을 넣고 값에다가 원하는 채팅방 이름을 써도 될 것이다.

그리고 저장을 누른다.

 

 

 

이제 채팅방 한 개가 만들어졌으니 그 안에 메시지목록(컬렉션)을 만들어주도록 한다.

 

 

 

컬렉션의 이름은 messages라고 정했다 

 

채팅방을 만들듯이 메시지객체(도큐멘트)에도 자동아이디를 부여해주고

이번에는 메시지 객체엔 내용이 들게 가게 되므로 content라는 필드를 추가하여 내용을 입력하였다.

 

정상적으로 메시지객체(도큐먼트) 또한 추가가 되었고 채팅방에 메시지 한 개는 허전하니 원하는 만큼 추가해도 된다.

 

그리고 기본적인 데이터베이스 설계는 끝이 났으니 이번엔 Flutter 프로젝트로 이동하도록 한다.

 

저번 포스팅에서 생성해두고 파이어베이스와 연동한 프로젝트에서 두 개의 파일을 추가하도록 하자.

 

 

 

그리고 데이터의 그릇이 될 MessageModel 클래스를 살펴보도록 하겠다.

message_model.dart

class MessageModel {
  final String id; //해당 도큐먼트의 ID를 담기위함.
  final String content;

  MessageModel({
    this.id = '',
    this.content = ''});

  //서버로부터 map형태의 자료를 MessageModel형태의 자료로 변환해주는 역할을 수행함.
  factory MessageModel.fromMap({required String id,required Map<String,dynamic> map}){
    return MessageModel(
      id: id,
      content: map['content']??'',
    );
  }

  Map<String,dynamic> toMap(){
    Map<String,dynamic> data = {};
    data['content']=content;
    return data;
  }

}

Model 클래스는 데이터의 그릇이다. 여기서는 서버로부터 어떤 데이터를 받은 그것을 잘 가공해서

앱에서 사용하기 편한 형태로 만들어져야 한다.

 

이번에는 MessageList를 표시할 화면인 

MessageListScreen클래스를 살펴보도록 하겠다.

 

message_list_screen.dart

import 'dart:developer';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test_chatapp/model/message_model.dart';

class MessageListScreen extends StatefulWidget {
  const MessageListScreen({Key? key}) : super(key: key);

  @override
  State<MessageListScreen> createState() => _MessageListScreenState();
}

class _MessageListScreenState extends State<MessageListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('메세지 목록')),
      body: StreamBuilder<List<MessageModel>>(
        stream: streamMessages(), //중계하고 싶은 Stream을 넣는다.
        builder: (context,asyncSnapshot) {
          if (!asyncSnapshot.hasData) { //데이터가 없을 경우 로딩위젯을 표시한다.
            return const Center(child: CircularProgressIndicator());
          } else if (asyncSnapshot.hasError) {
            return const Center(
              child: Text('오류가 발생했습니다.'),
            );
          } else {
            List<MessageModel> messages = asyncSnapshot.data!;//비동기 데이터가 존재할 경우 리스트뷰 표시
            return Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                    child: ListView.builder(
                        itemCount: messages.length,
                        itemBuilder: (context, index) {
                          return ListTile(
                            title: Text(messages[index].content),
                          );
                        })),
              ],
            );
          }
        },
      ),
    );
  }

  Stream<List<MessageModel>> streamMessages(){
    try{
      //찾고자 하는 컬렉션의 스냅샷(Stream)을 가져온다.
      final Stream<QuerySnapshot> snapshots = FirebaseFirestore.instance.collection('chatrooms/YLCoRBj59XRsDdav2YV1/messages').snapshots();

      //새낭 스냅샷(Stream)내부의 자료들을 List<MessageModel> 로 변환하기 위해 map을 사용하도록 한다.
      //참고로 List.map()도 List 안의 element들을 원하는 형태로 변환하여 새로운 List로 반환한다
      return snapshots.map((querySnapshot){
        List<MessageModel> messages = [];//querySnapshot을 message로 옮기기 위해 List<MessageModel> 선언
        querySnapshot.docs.forEach((element) { //해당 컬렉션에 존재하는 모든 docs를 순회하며 messages 에 데이터를 추가한다.
           messages.add(
              MessageModel.fromMap(
                  id:element.id,
                  map:element.data() as Map<String, dynamic>
              )
           );
        });
        return messages; //QuerySnapshot에서 List<MessageModel> 로 변경이 됐으니 반환
      }); //Stream<QuerySnapshot> 에서 Stream<List<MessageModel>>로 변경되어 반환됨

    }catch(ex){//오류 발생 처리
      log('error)',error: ex.toString(),stackTrace: StackTrace.current);
      return Stream.error(ex.toString());
    }
  }
}

여기서 중요한 부분은 streamMessages라는 메소드 영역이다.

쉽게 말해 데이터를 파이어 베이스 모듈로부터 Stream 형태로 제공받고 Stream 내부의 데이터를 List <MessagesModel>로 가공하여 반환하는 역할을 해준다.

코드는 모든 것을 알려주니 잘 살펴보도록 하자.

 

 

 

마지막으로 main.dart의 소스코드부터 살펴보도록 하겠다.

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_test_chatapp/screen/message_list_screen.dart';

import 'firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MessageListScreen(),
    );
  }
}

여기선 별 내용 없이 저번에 main()메소드 안에서 Firebase를 초기화해주는데 이어 MessageListScreen()을 홈화면으로 적용해주는 것을 볼 수 있다.

 

이제 앱을 실행하도록 하자.

 

 

아까 DB에 입력했던 데이터가 잘 뜬다.

 

여기서 만약 서버 측 데이터를 바꾼다면

앱에서는 StreamBuilder로 인해 데이터의 변경을 알게 되고

스스로 변경된 데이터를 갱신하게 된다.

 

오늘 포스팅은 여기까지 하도록 하고 다음 포스팅에서는 메세지를 업로드하고 그에 걸맞은 UI 구성을 진행하도록 하겠다.