[Flutter] 채팅앱 만들기 - Flutter앱을 Firebase와 연동하기

Flutter를 공부하며 개인 프로젝트를 한번 해보면 좋겠다고 생각해서, 채팅앱을 만들어보고 있습니다.

 

회원 가입 / 로그인 기능을 구현할 때, Firebase로 서버를 구성하였는데,

예상보다 쉽게 연동되지 않아서, Firebase 연동하는 과정을 따로 블로그에 기록해봐야겠다고 생각했습니다.

 

Firebase와 연동하기 위해서는 먼저 Firebase에 로그인해서 프로젝트를 생성하는 과정이 필요합니다.

로그인은 구글 이메일로 간단하게 로그인 가능합니다.

 

이번 글에서는 프로젝트를 만들고, Flutter앱과 Firebase 연동시키기.

그리고 Firebase와 연동하는 과정에서 어려웠던 부분과 배운 점들에 대해서 정리하겠습니다.

 

1. 프로젝트 만들기

위와 같은 화면에서 먼저 [프로젝트 만들기]를 누릅니다.

 

그리고 간단하게 프로젝트 이름을 지정해주고, Google 애널리틱스 설정을 하면 프로젝트를 생성할 수 있습니다.

 

프로젝트 생성까지는 약 1분정도 걸립니다.

 

 

2. Flutter 앱과 Firebase 연동

프로젝트로 들어오면 이런 화면을 볼 수 있는데,
저는 Flutter로 개발하고 있기 때문에 앱 추가 부분에 Flutter 아이콘을 선택합니다.

 

먼저 Firebase CLI와 Flutter SDK를 설치해야 하는데,

 

 

운영체제에 맞게 공식 문서에서 잘 설명되어 있어서, 쉽게 설치하실 수 있을거에요!

 

 

그 다음 FlutterFire CLI를 실행하고 등록하는 과정을 진행합니다.

이처럼 /ios 디렉토리로 이동해서 해당 명령어를 실행해주고,

다시 상위 폴더로 이동해서 앱 등록을 해줍니다.

 

그럼 이렇게 자동으로 android, ios, macos, window앱을 firebase와 연결시켜 줍니다.

* 저는 Which platforms should your configuration support (use arrow keys & space to select)? 이 질문에서 ios를 선택했는데 4가지를 다 연결시켜주더라구요...

 

다시 Firebase로 돌아오면 이처럼 앱 4개가 성공적으로 Firebase에 연동된 것을 확인할 수 있습니다.

 

그리고 main.dart 파일 위에 firebase_options.dart 파일이 생성되었습니다.

 

처음에는 firebase_options.dart파일에 빨간 줄이 뜨는데, 이렇게 pubspec.yaml 파일의 dependencies에

firebase_core와 firebase_auth를 추가해주시고, flutter pub get을 통해 적용해주면 빨간 줄을 없앨 수 있습니다.

 

 

3. 어려웠던 부분

저는 Firebase 연동을 금방 끝낼줄 알았지만, 한참을 해맸습니다.

그 이유는 Flutter 앱과 연결하지 않고 Android 앱과 iOS를 따로 연결시키려 했기 때문입니다.

Android 앱을 연결할 때는 /android/app 디렉토리에 google-services.json파일을,

iOS 앱을 연결할 때는 /ios/Runner 디렉토리에 GoogleService-info.plist 파일을 추가해주어야 하는데,

특히 iOS 앱과 연결하는 부분에서 계속 아래와 같은 cocoapods관련 에러가 계속 발생했습니다.

Warning: CocoaPods is installed but broken. Skipping pod install.
  You appear to have CocoaPods installed but it is not working.
  This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it.
  This can usually be fixed by re-installing CocoaPods. For more info, see https://github.com/flutter/flutter/issues/14293.
To re-install:
  sudo gem install cocoapods

Exception: CocoaPods not installed or not in valid state.

 

그래서 cocoapods를 설치하고, Podfile 설정을 계속 바꿔가며 시도했지만 결국 성공하지 못했습니다.

Flutter 앱 연결을 통해서 결과적으로 해결하였지만, 정말 시간을 많이 썼습니다.

 

해결하고 생각난 몇 가지 해결 방안

1. Podfile 내부의 ios 버전 수정

저는 iOS 애뮬레이터로 iPhone 15 Pro Max를 사용하고 있는데, iOS 버전을 따로 설정하지 않아서 문제가 발생했을 수도 있습니다. -> 현재 Podfile을 보면 platform :ios, '13.0' 으로 설정되어 있습니다.

 

2. Cocoapods를 삭제 후 재설치

계속 Cocoapods 문제라고 나온다면, 삭제 후 재설치하는 방법을 고려해볼 수 있습니다.

 

Cocoapods 삭제

$ sudo gem uninstall cocoapods

 

Cocoapods 1.7.5버전 설치

$ sudo gem install cocoapods -v 1.7.5

 

Cocoapods 초기화

$ pod setup

 

Cocoapods 업데이트

$ sudo gem install cocoapods

 

위 과정을 통해서 Cocoapods를 재설치하면 문제가 해결될 수 있습니다.

 

 

 

 

4. 배운점

왜 Firebase.initializedApp 메서드를 실행하기 전에 WidgetsFlutterBinding.ensureInitialized()를 실행해야 할까?

이 이유는 플러터에서 사용하는 플러그인을 초기화할 때  초기화 메서드가 비동기 방식일 때 문제가 발생하는데,

Firebase를 사용하기 위해 최초로 불러와야하는 Firebase.initializeApp 메서드는 비동기 방식으로 작동합니다.

 

Firebase.initializeApp 메서드는 플러터와 통신하길 바라지만,

runApp 메서드가 호출되기 전에는 플러터 엔진이 초기화되지 않아서 접근할 수 없습니다.

따라서 메인 메소드 내부에서 플러터 엔진과 관련된 Firebase 초기화와 같은 사용하려면 플러터 코어인증을 초기화시켜야 합니다.

이 기능(플러터 코어 인증)을 수행하는 메서드가 WidgetsFlutterBinding.ensureInitialized 메서드입니다.

정리: runApp이 호출되기 전 비동기 초기화 메서드를 사용할 때는 플러터 엔진을 초기화시켜주는 메서드를 먼저 실행시켜야 한다.

 

 

오늘은 Flutter 앱과 Firebase의 연동에 대해서 공부해보았습니다.

 

다음에는 Flutter로 만들고 있는 채팅앱에 대해서 차근차근 정리해서 올려보겠습니다.