[Flutter]플러터 디데이 & 가계부 앱 [러브페이] 만들기(2) - 파이어베이스

https://dongkyu.tistory.com/50

Flutter & Dart 디데이 & 가계부 앱 [러브페이] 만들기(1) - 바텀네비게이션

지난 글에 이어 이번엔 파이어베이스를 연결 하겠다.

서버, 데이터베이스 등이 없어서 파이어베이스를 이용하여 CRUD(생성,조회,수정,삭제) 를 할 것이다.

 

1. 파이어베이스 설치

 1). firebase_core

https://pub.dev/packages/firebase_core/install

firebase_core install | Flutter package

 

파이어베이스 사용을 위해 firebase_core를 설치 해 준다.

 

 2) cloud_firestore

https://pub.dev/packages/cloud_firestore/install

cloud_firestore install | Flutter package

파이어베이스 데이터베이스 (firebase_store)를 사용하기 위해 설치한다

 

 

 3) firebase_auth

https://pub.dev/packages/firebase_auth/install

firebase_auth install | Flutter package

추후 firebase 로그인을 위해 firebase_auth 로 함께 설치해준다.

 

2. 파이어베이스 설정하기

파이어베이스의 데이터베이스를 사용하기 위해서 Firestore Database를 생성 하여야 한다.

 1) 데이터베이스 생성하기

 

빌드 - Firestore Database - 데이터베이스 만들기 버튼 클릭.

 

서버 위치 설정하는 부분인데   asia-northeast3(seoul)을 선택하자  그래도 서버가 가까이 있는게 좋을것같다.

 

 

프로덕션모드로 시작 선택 후 만들기 버튼을 클릭하여 데이터베이스를 생성한다.

 

Firestore Database를 사용하기 전 규칙을 들어가서 수정을 해줘야 한다.

기본으로 읽기, 쓰기가 거부상태로 셋팅 되어있다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write, delete: if true;
    }
  }
}

 

읽기, 쓰기, 삭제를 하기 위해 delete를 추가 하고,  true로 변경해주자.

이러면 파이어베이스에서는 설정이 완료 되었다.

 

 2) 테이블 만들기

 

컬렉션 시작 버튼을 누른다.

컬렉션은  데이터베이스의 테이블이라고 생각 하면 된다.

테이블 명과 같은 컬렉션ID 입력 후 다음버튼 클릭하기

 

문서ID는 자동ID를 클릭해주고  제목,내용,일자  필드를 추가해주었다.  

 

3. Flutter 파이어베이스 사용하기

 

import 'package:cloud_firestore/cloud_firestore.dart';

 

플러터에서 파이어베이스에 값을 저장하기 위해서 추가해준다.

 

 1) 저장

    final map = <String, dynamic>{};
    map['date'] = ftDt.value.toString().substring(0, 10);
    map['subject'] = subjectController.text;
    map['content'] = contentController.text;
    
    await FirebaseFirestore.instance.collection("dday").add(map);

 

위와같이 맵에 값을 추가해준 후 await FirebaseFirestore.instance.collection("dday")에 해당 맵을 넣어주면 데이터가 저장 된다.

.collection("dday") 는 테이블 선택이라고 생각 하면 될것이다.

 

 2) 조회

    var result = await firestore
        .collection('dday')
        .where('groupId', isEqualTo: LogInOut.groupIdReturn().value)
        .orderBy('date', descending: false)
        .get();

 

위와같이 firestore의 콜렉션 중 dday 를 선택하고 특정 조건,  오더바이를 설정 할 수 있다.

조회를 하게되면 documentId가 같이 조회 되는데  해당 데이터의 키값이라고 생각하면 된다.

 

 3) 수정

    final map = <String, dynamic>{};
    map['date'] = ftDt.value.toString().substring(0, 10);
    map['subject'] = subjectController.text;
    map['content'] = contentController.text;
    
    var documentReference = FirebaseFirestore.instance.collection("dday").doc(documentId);
    await documentReference.update(map);

 

방법은 저장때와 동일 하지만  조회 시 나온 documentId를 

 var documentReference = FirebaseFirestore.instance.collection("dday").doc(documentId);  에서 이용하여 

해당 값을 선택하여 await documentReference.update(map); 를 호출하여 데이터를 업데이트 해준다.

 

 4) 삭제

      var documentReference = FirebaseFirestore.instance.collection("dday").doc(documentId);
      await documentReference.delete();

 

수정때와 동일한 방법으로 해당 값을 선택 후 삭제 한다.

 

다음엔 디데이 화면 구성과 실제 적용을 해보겠다.