[FLUTTER] Firebase 연동

🔑 시작하기 앞서...

1️⃣ Node.js 설치

1. Node.js 설치한다.
   1-1. Node.js에서 다운로드한다.
   1-2. 터미널창에 brew install node 입력 후 설치한다.
2. node --version

---

🔑 Firebase 연동

1️⃣ Firebase 프로젝트 생성

1. Firebase에 접속하여 로그인한다.
2. 시작하기를 클릭하고 프로젝트 만들기를 눌러 새 프로젝트를 생성한다.
   
3. 프로젝트명과 Google 애널리틱스를 설정하여 프로젝트 생성을 완료한다.
   ✔️ Google 애널리틱스는 설정하지 않아도 상관X
   

2️⃣ Flutter과 연동

1. VScode의 터미널을 열고 아래 명령어를 입력한다.

npm install -g firebase-tools

2. firebase 계정과 연동한다.
   2-1. firebase login
   2-2. 질문이 나오면 Y를 입력하여 넘어간다.
   
3. dart pub global activate flutterfire_cli
4. flutterfire configure -a "com.프로젝트명.app"
5. 연동하려는 프로젝트와 플랫폼을 선택한다.
6. 아래 명령어를 입력하여 패키지를 설치한다.

flutter pub add firebase_core
flutter pub add cloud_firestore

💡 CLI 설치 시 Path 연결 오류 해결
1. nano ~/.zshrc
2. 아래 경로를 추가한다.

export PATH="$PATH:$HOME/.pub-cache/bin"

3. source ~/.zshrc

3️⃣ Firebase 데이터베이스 생성

1. 사이트로 돌아가 cloud Firestore를 클릭한다.
2. 데이터베이스 만들기를 클릭하고 테스트 모드에서 시작을 선택한다.
3. 컬렉션추가를 클릭하여 데이터를 넣는다.
   3-1. 다음 컬렉션ID를 입력한다.
   
   3-2. 문서ID는 자동ID를 선택하고 필드에 데이터에 대한 정보를 입력한다.
   

4️⃣ Flutter과 연동2

1. 아래의 코드를 프로젝트에 입력한다.

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

void main() async {
  //flutter엔진과 위젯 시스템을 초기화
  WidgetsFlutterBinding.ensureInitialized();
  //firebase 서비스를 초기화(초기화 시작 전까지 시작하지 않고 대기)
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform, //현재 플랫폼에 맞는 설정 정보를 사용
  );
  runApp(MyApp());
}

2. 데이터를 불러오는 부분을 변경한다.

//strean: firebase의 컬렉션을 실시간으로 구독,  snapshots : 컬렉션에 있는 데이터를 변경
StreamBuilder(
	stream: FirebaseFirestore.instance.collection('todo').snapshots(),
	builder: (context, snapshot) {
		//데이터가 로드되지 않았을 때 로딩을 반환
		if (snapshot.hasData) {
			return CircularProgressIndicator();
		}
		//스트림에서 받은 데이터의 문서 목록을 저장
		final document = snapshot.data!.docs;
		return Expanded(
			child: ListView(
				children:document.map((doc) => _buildItemWidget(doc)).toList(),
	));
}),

3. 데이터를 생성, 삭제, 변경하는 부분을 변경한다.

void _addTodo(Todo todo) {
    FirebaseFirestore.instance
        .collection('todo')
        .add({'title': todo.title, 'isDone': todo.isDone});
    _todoController.text = "";
  }

  void _deleteTodo(DocumentSnapshot doc) {
    FirebaseFirestore.instance.collection('todo').doc(doc.id).delete();
  }

  void _toggleTodo(DocumentSnapshot doc) {
    FirebaseFirestore.instance
        .collection('todo')
        .doc(doc.id)
        .update({'isDone': !doc['isDone']});
  }

  Widget _buildItemWidget(DocumentSnapshot doc) {
    final todo = Todo(doc['title'], isDone: doc['isDone']);

    return ListTile(
      onTap: () {
        _toggleTodo(doc);
      },
      title: Text(
        todo.title,
        style: todo.isDone
            ? TextStyle(
                decoration: TextDecoration.lineThrough,
                fontStyle: FontStyle.italic)
            : null,
      ),
      trailing: IconButton(
          onPressed: () {
            _deleteTodo(doc);
          },
          icon: Icon(Icons.delete_forever)),
    );
  }