[Flutter] Firebase로 채팅앱 만들기 - 1 (파이어베이스 연동 3.0.0)

앞으로 Flutter 관련 포스팅을 집중적으로 업로드할 예정이다.

그동안 Flutter 개발을 진행하면서 데이터를 다룰 때 대부분 RDBMS(관계형 데이터베이스)와 WebAPI 서버 구현을 통해

온라인 어플리케이션을 구현해 왔었다.

 

하지만 커뮤니티 앱의 경우 데이터 요청 건이 상당이 많아지는 경우가 있기 때문에 Back-End의 선택을 다른 곳으로 바꿔야 할 필요성을 느끼게 되었다.

 

오늘부터 연습해볼 Back-End 기술은 Firebase이다.

사실 NoSQL(Not-Only-SQL) 들 중 MongoDB와 Firestore 중 고민을 많이 했는데

MongoDB를 사용하려면 Node.js를 숙달하고 서버 구축까지 다시 진행해야 하기 때문에 소규모 앱으로 시작하기엔 비용이 많이 들 것 같은 문제가 들었다.

따라서 이미 Back-End의 인프라가 대부분 구축된 Firebase 사용을 선택했고 데이터베이스는 Cloud Firestore를 이용하게 되었다.

 

그래서 이번 포스팅에서는 Cloud Firestore를 통해 실시간 채팅이 가능한 앱을 만들어보려고 한다.

 

우선 DB세팅을 먼저 진행해야 한다.

아래 링크를 통해 파이어베이스 콘솔로 이동해주도록 한다.

https://console.firebase.google.com/

로그인 - Google 계정

 

로그인이 완료되었다면 프로젝트 추가 버튼을 눌러준다.

 

 

 

프로젝트 이름은 원하는 것으로 지정해주도록 한다.

 

 

애널리틱스는 나중에 사용하면 되니 지금은 언체크!

 

 

 

그러면 새로운 콘솔이 생기게 되고 아래 빨간색 동그라에 Flutter 아이콘을 클릭하도록 한다.

이번 Flutter 3.0.0부터 Firebase에서도 Flutter 지원을 적극적으로 진행하는 것 같다.

 

 

 

영문으로 되었지만 크게 어려운 내용은 아니다.

 

순서대로

1. Firebase CLI를 설치하고 해당 콘솔로 로그인을 진행한다

 

2. Flutter SDK 가 설치되어 있어야 한다.

 

3. Firebase를 연동할 플러터 프로젝트를 만들어야 한다.

 

2,3 번은 이미 다 설치가 됐다고 가정을 하고

1번의 경우 조금 설명을 진행하겠다.

https://firebase.google.com/docs/cli?authuser=0&hl=ko#windows-npm 

Firebase CLI 참조  |  Firebase Documentation

 

해당 문서에서 Firebase CLI를 설치할 운영체제를 선택한다.

 

그러면 하단으로 이동하게 되는데 독립실행형을 선택할지 npm(노드 패키지 관리자)를 선택해서 진행할지 고르는 게 나온다. 선택은 본인이 원하는 것으로 하는데 독립실행형을 해서 안될 경우 npm을 이용하도록 한다. (개인적으로 npm을 추천, 독립실행형은 환경변수 세팅이 되지 않아 오류가 발생)

 

나는 npm 기준으로 설명을 하도록 하겠다.

https://nodejs.org/en/

Node.js

사이트에서 Node.js를 받아 설치를 한다 (버전은 LTS(LongTimeSupport)가 붙은 게 적합하다)

그리고 콘솔 창을 열고 아래 명령어를 실행한다.

npm install -g firebase-tools

이러면 대충 세팅은 firebase 환경변수 설정은 완료된 것이다.

 

이제 내 PC에서 firebase 환경을 사용 가능해졌으니 로그인을 진행하도록 한다.

아래 명령어를 입력한다.

firebase login

나의 경우는 이미 이전에 로그인을 했었기 때문에 Already Logged in 글자가 뜨게 된다.

 

PC환경에서 로그인이 완료되었으면 다시 Firebase 콘솔로 이동하자.

 

 

차례대로 콘솔에 아래 명령어를 입력하면 된다.

dart pub global activate flutterfire_cli

이렇게 뜨게 되면 flutterfire_cli가 활성화된 상태이고

 

이번엔 firebase를 연동할 프로젝트를 생성하고 거기에서 연동해야 한다.

이름은 대충 flutter_test_chatapp으로 지었다.

 

그리고 프로젝트 콘솔에서 다음에 입력해야 되는 명령어를 넣고 실행한다.

여기서 플랫폼을 선택하라고 나오는데 화살표 키로 이동하고 스페이스로 체크박스를 선택하면 된다.

적용할 플랫폼을 정했으면 엔터!

 

이 화면처럼 되면 내 플러터 프로젝트에 파이어베이스 연동이 완료된 것이다.

 

실제로 Android빌드 폴더로 가면 이전에 google-service.json 파일을 추가하던 방식처럼

연동이 되어있는 모습을 볼 수 있다.

 

이제 앱에서 파이어베이스를 사용할 수 있도록 초기화를 해야 한다.

아래 커맨드를 프로젝트 콘솔에 입력하자.

flutter pub add firebase_core

flutter pub add cloud_firestore

 

그러고 pubspec.yaml 파일로 이동하게 되면

이렇게 파이어베이스와 파이어스토어 플러그인이 추가가 된 것을 볼 수 있다.

 

 

그다음 main.dart 파일 최상단에 다음과 같이 수정을 해주도록 한다.

여기서 Firebase.initializeApp()은 앱을 실행할 때 Firebase를 비동기 방식으로 초기화하도록 하는 것이고

WidgetsFlutterBinding.ensureInitialized()는 runApp으로 앱이 실행되기 전에 비동기로 지연이 되더라도 오류가 발생하지 않도록 하는 역할을 한다. 따라서 main() 메서드도 async를 붙여 사용을 할 수가 있게 된다.

 

이렇게 앱에서 파이어베이스 사용을 위한 연동작업이 끝났다.

실제로 채팅앱 구현은 다음 포스팅부터 계속 할 예정이다.