[TIL] firebase 연동

내일배움캠프 Flutter 앱 개발

 

• firebase 기능

1.실시간 데이터베이스
2.인증
3.저장소
4.푸시 메세지
5.오류추적
6.실시간 사용자 통계
7.Firebase Remote Config(개발자는 사용자가 업데이트를 하지 않고도 앱의 기능 또는 구성을 업데이트 가능)

 

• firebase 연결하기

1.파이어베이스 웹사이트에서 프로젝트 생성
2.데이터 베이스 만들기
3.컬렉션 만들기(필드)
4. 안드로이드/ios 연동

 

[실습] 스레드 앱에서 파이어베이스 연결

1.feed를 등록하는 ThreadFeedWriteController에 파이어 베이스 데이터베이스를 사용할 수 있도록 oninit 함수에서 설정

late CollectionReference feedsCollectionRef;

@override
void onInit() {
  super.onInit();
  feedsCollectionRef = FirebaseFirestore.instance.collection('feeds');
}

변수 feedsCollectionRef로 데이터베이스에 연결하여 사용할 수 있도록 담아둔 것

2.실제적으로 저장되는 함수인 save 함수에서 feed 데이터를 저장하기
FeedModel을 Map<String, dynamic>형태로 형 변환해주기

import 'dart:io';
import 'package:uuid/uuid.dart';

class FeedModel {
  String id;
  String contents;
  List<File> images;
  DateTime createdAt;

  FeedModel({
    required this.contents,
    required this.images,
  })  : id = Uuid().v4(),
        createdAt = DateTime.now();

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'contents': contents,
      'createdAt': createdAt.toIso8601String(),
    };
  }
}

3.createdAt의 경우 createdAt인 DateTime 클래스로 저장할 수 없기 때문에 toIso8691String()으로 변환해서 저장 시켜야 함.

4. save 함수 저장시 toMap 사용해야함

void save() {
  var feedModel = FeedModel(
    contents: contents,
    images: selectedImages?.map<File>((e) => File(e.path)).toList() ?? [],
  );
  feedsCollectionRef.add(feedModel.toMap());

  Get.back(result: feedModel);
}

앱을 실행하거나 피드를 등록한 뒤에 홈 화면으로 돌아오면 피드가 새로고침되어 갱신된 데이터를 확인할 수 있어야 함.

5. feedList 데이터를 조회하는 로직 만들기

late CollectionReference feedsCollectionRef;

@override
void onInit() {
  super.onInit();
  feedsCollectionRef = FirebaseFirestore.instance.collection('feeds');
  loadAllFeeds();
}

void loadAllFeeds() async {
  var feedData = await feedsCollectionRef.get();
  feedList = feedData.docs
      .map<FeedModel>(
          (data) => FeedModel.fromJson(data.data() as Map<String, dynamic>))
      .toList();
  update();
}

6. feedModel에 fromJson 함수 구현

import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:uuid/uuid.dart';

class FeedModel {
  String id;
  String contents;
  List<File> images;
  DateTime createdAt;

  FeedModel({
    String? id,
    required this.contents,
    required this.images,
    DateTime? createdAt,
  })  : id = id ?? Uuid().v4(),
        createdAt = createdAt ?? DateTime.now();

  factory FeedModel.fromJson(Map<String, dynamic> json) {
    return FeedModel(
      id: json['id'],
      contents: json['contents'],
      images: [],
      createdAt: DateTime.parse(json['createdAt']),
    );
  }

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'contents': contents,
      'images': images,
      'createdAt': createdAt.toIso8601String(),
    };
  }
}

앱을 새로고침 하더라도 데이터 휘발되지 않고 파이어베이스로부터 데이터를 받아와서 화면 구성함.

7. 피드 수정 하기(수정 로직)

CupertinoActionSheetAction(
  onPressed: () async {
    var result = await Get.to<FeedModel?>(ThreadWritePage(),
        binding: BindingsBuilder(() {
      Get.put(ThreadFeedWriteController(editFeedModel: feedModel));
    }));
    if (result != null) {
      Get.find<HomeFeedListcontroller>().reload();
    }
  },
  child: Text('수정'),
),

 

8. 삭제하기

void removeFeed(String feedId) async {
  var doc = await feedsCollectionRef.where('id', isEqualTo: feedId).get();
  feedsCollectionRef.doc(doc.docs.first.id).delete();
  feedList.removeWhere((feed) => feed.id == feedId);
  update();
}