[Flutter] 넷플릭스 클론 코딩 #9 | 파이어베이스에서 실제 데이터 받아오기 | 파이어베이스 연결 | cloud_firestore | firebase_core | StreamBuilder | QuerySnapshot | DocumentSnapshot | Snapshot | DocumentReference

지난 번엔 Flutter에서 Firebase를 사용하기 위한 콘솔 및 환경 설정에 대해 정리했다.

(https://codingstorywithme.tistory.com/94)

 

출처 : https://developers-kr.googleblog.com/2016/08/have-you-met-realtime-database.html

 

 

이번에는 Flutter에서 Firebase를 사용하는 방법에 대해 정리해보겠다.

 

# Package 설치

파이어베이스의 데이터베이스인 파이어스토어 사용을 위해,

dependency 에 cloud_firestore와 firebase_core를 설치한다.

 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  carousel_slider:
  flutter_linkify: #for using clickable link
  url_launcher: #for executing link
  cloud_firestore: #for using firestore that is database of firebase
  firebase_core: #for using firestore that is database of firebase

 

---

# 데이터 선언 (snapshot -> map)

model/model_movie.dart

 

기존에는 map으로 바로 데이터를 사용했다면,

Movie.fromMap(Map<String, dynamic> map, {required this.reference})
      : title = map['title'],
        keyword = map['keyword'],
        poster = map['poster'],
        like = map['like'];

 

파이어베이스 사용을 위해

현재 데이터 베이스의 데이터를 사진처럼 전달하는 snapshot데이터를 map으로 변환시키는 함수를 추가한다.

  Movie.fromSnapshot(DocumentSnapshot snapshot)
      : this.fromMap(snapshot.data() as Map<String, dynamic>,
            reference: snapshot.reference);

 

---

 

# Initialization (initializeApp)

최근 버전의 파이어베이스는 앱을 실행시킬 때, 초기화 해주는 작업이 필수다!

공식 문서 참고 : https://firebase.flutter.dev/docs/overview/ 

FlutterFire Overview | FlutterFire

 

main.dart

 

기존 :

void main() {
  runApp(const MyApp());
}

 

파이어베이스 사용을 위해 초기화 설정 :

import 'firebase_options.dart';

+ firebase_options.dart 파일은 firebase를 flutter 프로젝트에 연동시키면 자동으로 생성됨.

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

 

이렇게 하면 비동기적으로 초기 설정을 세팅 할 수 있다고 함.

 

---

# Firebase에 데이터 생성

테스트를 위해 파이어베이스에 5가지 데이터를 생성했다.

생성하는 방법은 진짜 자세히 https://codingstorywithme.tistory.com/96 에 정리해둠

 

---

# DATA READ

수시로 변하는 데이터를 다루기 위해 StreamBuilder 를 사용

 

데이터 베이스를 지정하는 라이브러리 세개가 있음

- QuerySnapshot : 쿼리 결과의 전체 상태를 나타내며 여러 문서 포함 가능. 데이터베이스의 전체 상태를 나타내는 것.

- Snapshot : 데이터베이스의 상태를 나타내고 변경 사항을 추적하는 데 사용.

- DocumentSnapshot :  단일 문서의 상태를 나타내며 해당 문서의 데이터와 메타데이터에 직접 접근 가능. 각 문서의 상태를 나타내는 것

 

정리하면

QuerySnapshot 를 이용해 파이어베이스에 지정하고 있는 전체 데이터를 가지고 올 수 있다.

이 중에 하나의 컬렉션을 고르면 그 데이터베이스가 Snapshot으로 지정됨.

그리고 실제 데이터 셋은 DocumentSnapshot 에 들어있다고 볼 수 있다.

이 분 블로그에 잘 정리되어 있는 듯 함!

https://funncy.github.io/flutter/2021/03/06/firestore/

[Flutter] - Firebase FireStore 총정리

 

1. 컬렉션 받아오기

StreamBuilder의 stream 속성을 이용해 쿼리를 실행하여 컬렉션을 받아옴.

StreamBuilder<QuerySnapshot>(
	stream: FirebaseFirestore.instance.collection('movie').snapshots(),
    ....

 

2. 데이터베이스 실제로 받아오기

StreamBuilder의 builder 속성을 사용하여 데이터를 처리하고 UI를 빌드함.

builder의 원형 :

typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

AsyncSnapshot은 현재 스트림의 최신 데이터.

 

Snapshot 객체에서 실제 사용 가능한 데이터를 DocumentSnapshot 를 사용하여 저장해야함.

DocumentSnapshot의 데이터 셋은 Snapshot.data.docs를 사용하여 받아 올 수 있음

라이브러리 원형 :

abstract class QuerySnapshot<T extends Object?> {
  /// Gets a list of all the documents included in this snapshot.
  List<QueryDocumentSnapshot<T>> get docs;
  ...

 

예제 : 

StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('movie').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return const LinearProgressIndicator(); // show loading screen
      }
      return _buildBody(context, snapshot.data!.docs);
});

 

 

3. UI 빌드

Widget _buildBody(BuildContext context, List<DocumentSnapshot> snapshot) {
    List<Movie> movies = snapshot.map((d) => Movie.fromSnapshot(d)).toList();

    return ListView(
    	children: <Widget>[
          Stack(children: <Widget>[CarouseImage(movies: movies), const TopBar()]),
          CircleSlider(movies),
          BoxSlider(movies)
        ]
    );
}

 

 

---

 

# Data Update

DocumentSnapshot.reference (DocumentReference) 를 이용해 데이터를 업데이트 할 수 있다.

라이브러리 사이트 : https://pub.dev/documentation/cloud_firestore/latest/cloud_firestore/DocumentReference/update.html

update method - DocumentReference class - cloud_firestore library - Dart API

 

원형 : 

 Future<void> update(Map<Object, Object?> data);

 

예제 : 

버튼이 눌릴 때, 데이터 업데이트

// + Add Liked Content button
Container(
  padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
  child: InkWell(
    onTap: () {
      setState(() {
        like = !like;
        widget.movie.reference.update({'like': like});
      });
    },
    child: Column(
      children: <Widget>[
        like
            ? const Icon(Icons.check)
            : const Icon(Icons.add),
        const Padding(
          padding: EdgeInsets.all(5),
        ),
        const Text(
          'Liked Content',
          style: TextStyle(
              fontSize: 11, color: Colors.white60),
        )
      ],
    ),
  ),
),
// Add Liked Content button +

 

 

이렇게 파이어베이스에서 데이터를 읽고 쓰는 방법까지 정리완료우

 

파이어베이스 라이브러리 추가하고 나서 첫 빌드는 진짜 오래걸리는 듯..

계속 오류 난 줄 알고, 껐다 키는 것을 반복했는데 그냥 시간이 조금 걸리는 것 이였나보다.

계속 checkout 했다가 다시 추가했다가 반복했는데... ㅠ

10분? 정도 안되게 걸린 듯!

 

실제 데이터를 잘 받아와서 보여주는 영상과

좋아요 버튼을 누를때 실시간으로 데이터가 업데이트 되는 파이어베이스 콘솔!