플러터에 파이어베이스 프로젝트 세팅

플러터 앱이나 웹 개발할 때 파이어베이스를 백엔드로 사용하는 경우가 많은데 막상 세팅하려면 잘 안 되는 경우가 또 많죠. 플러터 신규 프로젝트에 파이어베이스 신규 프로젝트 연동하는 방법 알려드립니다.

파이어베이스 프로젝트 세팅

반응형

먼저 파이어베이스 콘솔 화면에서 새로운 프로젝트를 하나 생성해 줬습니다. 이름은 대충 아무렇게나 입력했는데 필요에 따라서 알아보기 좋게 입력하셔도 됩니다.

들어가면 좌측에 빌드라는 메뉴가 보이죠?

기본적으로 Athentication 하나만 일단 선택해봅시다.

Athentication으로 들어가면 시작하기라는 버튼이 보일 텐데요. 눌러줍니다.

플러터 연동을 위한 파이어베이스 프로젝트 세팅1

자 시작하기를 누르면 이제 로그인 방법을 선택할 수 있습니다.

파이어베이스 로그인 제공업체

이것도 지금 당장 사용할 건 아니고 나중에 추가가 가능하니 일단 구글만 하나 선택해 주겠습니다.

구글을 눌러서 사용하기 라디오 버튼을 켜준 뒤 로그인에 대한 알림을 받을 이메일을 선택하고 확인해 줍니다.

그렇게 하면 구글 로그인이 제공업체에 뜰 겁니다.

 

자 여기까지 파이어베이스 프로젝트 세팅 끝입니다.

이제 플러터에서 사용하는 방법을 찾아봅시다.

플러터 연동을 위한 파이어베이스 프로젝트 세팅2

프로젝트 개요에 들어가 보면 플러터 아이콘이 떡하니 보입니다.

이게 사실 추가된 지 그렇게 오래되지 않았지만 상당히 구글에 감사하면서 눌러줍니다.

플러터 프로젝트에 파이어베이스 연결하기

반응형

자 플러터 프로젝트 버튼을 클릭하면 이제 플러터 프로젝트에 파이어베이스 연결하는 방법을 알려줍니다.

이걸 따라 해 봐야죠.

먼저 Node JS 설치가 안된 분이라면 구글에서 Node JS라고 검색해서 들어가서 Node JS 최신 버전을 받아줍니다.

굳이 최신 버전이 아니라도 관계는 없고 일단 뭐 아무 버전이나 설치해 줍니다.

별거 없이 다운로드하고 다음 버튼 눌러서 설치하면 됩니다.

그리고 다시 VS Code로 들어와서 터미널을 하나 열어주고 우리의 프로젝트 폴더로 이동해 줍니다.

그리고 명령어를 아래와 같이 입력해 줍니다.

npm install -g firebase-tools

뭐 별거 없이 파이어베이스를 사용하기 위해 툴을 설치해 주는 겁니다.

앞서 Node JS를 아무 버전이나 설치하라고 했던 이유는 npm install을 사용하기 위함이고요.

파이어베이스 설치 화면

자 이렇게 뭐가 올라가면서 파이어베이스가 설치됩니다.

이게 끝나면 바로 다음 명령어를 입력해 줍니다.

dart pub global activate flutterfire_cli

이거고요. 외울 필요 없이 아까 그 사이트에 다 나와있는 명령어입니다.

플러터 파이어베이스 설정 도움화면

dart 명령으로 가져오는 건 이제 이 프로젝트에서 flutterfire라는 CLI를 쓰기 위해 설정하는 부분이고요.

다음에 있는 명령도 실행해 줍니다.

여기서 주의할 점은 터미널이 지금 우리의 플러터 프로젝트에 있어야 한다는 겁니다.

두 번째 명령어는 아마 다른 분들은 다르게 나올 거예요.

project 뒤에 나와있는 게 프로젝트 id다 보니 본인이 생성한 프로젝트의 프로젝트 ID가 나올 겁니다.

 

자 이 명령어를 치면 이제 뭘 계속 물어봅니다. 화살표 방향키로 이동하고 스페이스로 선택해서 엔터로 제출하면 됩니다.

귀찮다 하면 그냥 엔터 치면 전부 선택됩니다.

플러터 파이어베이스 설정 화면

엔터 치면 또 뭐가 빙글빙글 돌면서 설치가 되죠.

네 앞으로 이렇게 빙글빙글 돌면서 아 왜 안되지 하면서 돌아가서 다시 보고 다시 보고할 거라는 의미일 겁니다.

뭐 이런저런 생각을 하다 보면 설치가 끝납니다.

그러고 나서 다시 lib 폴더를 보면 firebase_options.dart라는 파일이 새로 생긴 걸 볼 수 있습니다.

자 이렇게 연결이 끝났나 싶은데 그 파일을 열어보니 에러가 있습니다.

플러터 파이어베이스 import 에러

Import가 제대로 되지 않고 있네요.

자 아래의 파이어베이스 설치 지원사이트로 가서 추가로 뭘 해야 되는지 확인해 봅시다.

https://firebase.google.com/docs/flutter/setup?hl=ko&authuser=0&_gl=1*1dtnd0e*_ga*MjE0Mjk5MTEzNy4xNjg4NTI3NTE5*_ga_CW55HF8NVT*MTY4ODY5Mjc2My40LjEuMTY4ODY5NDUxNS4wLjAuMA..&platform=ios#available-plugins 

Flutter 앱에 Firebase 추가

들어가 보면 3단계에 파이어베이스 초기화가 있습니다.

아 우리가 난 에러인 firebase_core를 pub add 해줘야 되는 거군요.

flutter pub add firebase_core

자 명령어를 또 쳐서 firebase_core를 가져와볼게요.

어라? 그런데 또 에러가 납니다. Developer Mode를 켜달라네요. 우리는 개발자니까 켜줍시다.

명령어에 아래와 같이 입력해 줍니다.

start ms-settings:developers

그러면 윈도 개발자 세팅이 나오는데요. 참고로 맥은 제가 안 써봐서 모르겠습니다.

블로그로 돈 많이 벌면 맥도 사서 맥 위주로 설명드릴게요. 아직은 가난합니다.

자 다른 건 모르겠고 개발자 모드가 꺼져있을 텐데요. 개발자 모드 켬으로 바꿔줍니다. 경고는 뭐 유심히 살펴보시고 저는 간과하고 넘어갈 겁니다.

다시 한번 pub add 명령어를 입력해 주면 이번에는 성공적으로 끌어지고 눈살을 찌푸리게 했던 import 에러는 사라졌습니다.

자 이쯤에서 main.dart 파일을 열어서 한번 실행해 봐도 됩니다.

뭐 변화는 없을 거예요. 단지 프로젝트가 잘 빌드되는지 확인차 해본 거니까요.

플러터 파이어베이스 연동 테스트

반응형

자 여기까지 따라왔다면 플러터에서 파이어베이스를 사용하기 위한 세팅은 끝났습니다.

이제 잘 연동이 되었는지 한번 확인을 해보면 더 좋겠죠. 로그인은 솔직히 창을 새로 만들어야 되니 까다롭고 반응이 뜨겁다면 다음에 설명하도록 하겠습니다.

이번에는 파이어스토어 데이터베이스에서 데이터를 한번 끌어와볼 겁니다.

파이어스토어 데이터베이스 연동

자 다시 파이어베이스 콘솔로 와서 파이어스토어 데이터베이스를 선택하고 데이터베이스를 만들어줍시다.

리얼타임 아니고 그냥 파이어스토어 데이터베이스입니다. 유념해 주세요.

프로덕션 선택하고 위치는 asia-northeast3이 서울로 되어있습니다. 가까워야 응답이 빠를 거니까 이걸 선택해 줍시다.

파이어베이스 데이터베이스 세팅

컬렉션 시작을 누르고 대충 이런 식으로 데이터를 하나 말아 넣어 줍시다.

중간에 하나 말하면 파이어 스토어 데이터베이스는 흔히 아는 RDBMS는 아니에요. 그래서 상당히 낯설 수 있는데 저도 굉장히 낯섭니다. 아직 낯 가리는 중이죠.

 

뭐가 하나 추가되었죠. 이 데이터를 끌어와볼 겁니다.

 

자 본격적으로 오랜만에 main.dart를 열어볼게요.

그리고 터미널에서 아래 명령어로 put 받아줍니다.

flutter pub add cloud_firestore

그러면 pubspec.yaml 파일에 dependency가 추가될 건데 그냥 안 볼게요. 됐을 겁니다.

다음으로 코드를 좀 정리하고 MyHomPageState 위젯 안에 firebase db를 받아오는 변수를 하나 만들어줬습니다.

class _MyHomePageState extends State<MyHomePage> {
  db = FirebaseFirestore.instance;

크게 손댄 건 없고 db = Firestore.instance 요 부분만 추가했죠.

여기에 에러가 날 겁니다.

 

참고로 여기부터는 순서대로 보면서 에러를 계속 볼 거예요. 만약 전체 소스를 붙여놓고 결과만 보고 싶다 하는 분들은 스크롤 쭉 내리셔서 결과 코드만 복사해서 사용하시길 바라고, 나는 어떤 경우에 어떤 에러가 나는지 보면서 차근차근 순차적으로 한번 같이 시도해보고 싶다 하시는 분들은 순서대로 따라와 주세요.

import 'package:cloud_firestore/cloud_firestore.dart';



  final db = FirebaseFirestore.instance;

db를 final로 바꿔주고 firestore를 import 시켜줍시다. 그럼 에러가 없어질 겁니다.

그리고 incrementCounter 메서드를 살짝 바꿔줄 겁니다.

  void _incrementCounter() {
    setState(() async {
      await db.collection("users").get().then((event) {
        for (var doc in event.docs) {
          print("${doc.id} => ${doc.data()}");
        }
      });
    });
  }

이렇게 말이죠. 이게 뭔 소린가 싶을 수 있지만 사실 아래 파이어베이스 공식 문서에 다 나와있는 내용을 쓴 거예요.

https://firebase.google.com/docs/firestore/quickstart?authuser=0&hl=ko#dart 

Cloud Firestore 시작하기  |  Firebase

여기까지 작업하고 실행을 해보면 놀랍게도 파이어베이스가 제대로 초기화되지 않았다는 에러가 뜨죠.

소스를 조금만 더 정리하고 main을 async로 바꾸고 main에서 초기화해 줘야 될 것 같습니다.

이것도 파이어베이스 공식 문서를 보니 Main을 아래와 같이 바꿔주라고 돼있네요.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebasetest/firebase_options.dart';
import 'package:flutter/material.dart';
//필요한 import

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

자 여기까지 전반적인 소스를 아래와 같이 좀 바꿨습니다.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebasetest/firebase_options.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final db = FirebaseFirestore.instance;
  void _incrementCounter() {
    setState(() async {
      await db.collection("users").get().then((event) {
        for (var doc in event.docs) {
          print("${doc.id} => ${doc.data()}");
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('파이어베이스테스트'),
        ),
        body: const Center(
          child: Text(
            '여기 받아올거에요.',
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

이제 마지막으로 "여기 받아올 거예요."라고 되어있는 텍스트를 실제 파이어베이스 DB에서 끌어올 겁니다.

참고로 init 하는 부분에서 옵션을 빼면 에러가 나더라고요.

자 이제 floatingActionButton을 한번 눌러서 로그를 봅시다.

어김없이 에러가 뜨죠.

"setState() callback argument returned a Future"라는 에러가 뜨는데요.

set state 함수를 빼주고 Future로 바꿔줍시다.

  Future<void> _incrementCounter() async {
    await db.collection("users").get().then((event) {
      for (var doc in event.docs) {
        print("${doc.id} => ${doc.data()}");
      }
    });
  }

이렇게 바꾸면 되겠죠. 이번에도 에러가 발생합니다.

"Missing or insufficient permissions" 이런 에러가 나오네요.

이게 왜 나냐? 파이어베이스 DB 권한이 없기 때문이죠.

파이어베이스 콘솔로 다시 가줍니다.

파이어베이스 DB로 들어가 주시고 규칙 탭으로 가줍니다.

파이어베이스 DB 규칙 설정

여기 모든 유저에 대해 read, write가 false로 되어있습니다.

일단 이걸 true로 바꿔볼게요. 추후에 read만 주는 게 나을 수도 있는데 쉽게 쉽게 갑시다.

다른 건 손대지 말고 여기 false만 true로 바꿔주는 거예요.

그리고 다시 플러터 앱으로 돌아가서 버튼을 눌러봅시다. 에러가 없어졌네요.

하지만 아무것도 안 나오죠. 우리에게 user라는 컬렉션이 없기 때문입니다.

우리는 앞에서 테스트라는 컬렉션을 만들었고 안에 아이템이란 문서가 있고 그 아이템의 속성으로 제목을 넣었습니다.

자 이제 user를 테스트로 바꿔야 된다는 걸 알겠죠.

자 바꿔주고 Hot Reload로 다시 열어준 뒤 버튼을 누르면 로그가 나옵니다.

파이어베이스 DB 조회 성공

파이어베이스 DB에서 데이터를 성공적으로 끌어왔습니다.

뭐 이제 플러터 기본 코딩 영역입니다. State 클래스 상단 부분을 이렇게 바꿔줄게요.

  final db = FirebaseFirestore.instance;
  String dbReply = '여기 받아올겁니다.';
  Future<void> _incrementCounter() async {
    await db.collection("테스트").get().then((event) {
      for (var doc in event.docs) {
        // print("${doc.id} => ${doc.data()}");
        setState(() {
          dbReply = doc.data().toString();
        });
      }
    });
  }

String dbReply라는 변수를 하나 만들어주고 여기에 제목을 받아올 겁니다.

그리고 dbReply에 값을 넣으면서 화면의 텍스트를 바꿔줘야 하기 때문에 setState 내부로 넣어준 거죠.

자 마지막으로 Text 내부의 텍스트를 dbReply 변수로 바꿔주면 끝이 나겠죠.

파이어베이스에서 데이터 받아온 결과 화면

 

최종 소스코드

반응형

에러가 발생하지 않는 파이어베이스 플러터 연동 확인하는 최종 소스코드입니다.

순서대로 따라 하기에는 시간이 아깝다 하시는 분들은 이것만 복사해서 쓰셔도 됩니다.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebasetest/firebase_options.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final db = FirebaseFirestore.instance;
  String dbReply = '여기 받아올겁니다.';
  Future<void> _incrementCounter() async {
    await db.collection("테스트").get().then((event) {
      for (var doc in event.docs) {
        // print("${doc.id} => ${doc.data()}");
        setState(() {
          dbReply = doc.data().toString();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('파이어베이스테스트'),
        ),
        body: Center(
          child: Text(
            dbReply,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

 

자 여기까지 플러터에 파이어베이스 연동하고 테스트까지 해보는 과정이었습니다.

어떠신가요? 재미있으셨나요? 저는 재미있었는데 힘들기도 하네요.

에러 케이스를 하나하나 보여드리면서 알려드린 이유는 이런 경우에 에러가 발생한다는 걸 미리 알아놓으면 나중에 같은 에러가 나면 익숙하게 수정할 수 있기 때문입니다.

진행 과정에서 계속해서 파이어베이스 공식 문서를 긁어왔다는 말을 많이 했듯이 추가로 인증이 필요하거나 광고를 넣거나 하는 과정은 파이어베이스 공식 문서에 플러터 사용법이 있으니 사용하시면 됩니다.

플러터를 공식 지원하면서 사용법도 차근차근 알려주니까 파이어베이스 공식 페이지만 잘 봐도 다른 매뉴얼이 필요가 없을 정도더라고요.