이전 포스팅에서 플러터에서 Rest API를 사용하여 Firebase Realtime Database를 사용하는 방법에 대해 소개했습니다.
플러터에서 Rest API로 Firebase Realtime Database 사용하기
이번에는 플러터에서 Rest API로 Firebase의 Realtime Database를 사용하는 방법에 대해 알아보겠습니다. 굳이 Firebase의 Realtime Database을 사용하는 이유는 Rest API를 지원하기 때문입니다. 아래의 공식 문서
android-developer.tistory.com
Rest API를 사용한 이유는 특별한 설치 같은 것 없이 바로 Realtime Database를 사용할 수 있기 때문입니다.
플러터에서 Firebase SDK를 사용하기 위해서는 여러 가지 셋업이 필요한데
해당 방법을 알려드리겠습니다.
Firebase CLI 설치하기
Flutter에서 Firebase SDK를 사용하기 위해서는 Firebase CLI가 필요합니다.
또한 Firebase 프로젝트를 반드시 1개 이상 생성한 상태이어야합니다.
(제가 올린 Realtime Database를 실시했다면 무시해도 됩니다.)
CLI 설치는 Firebase에서 가이드라인이 나와있습니다.
Firebase CLI 참조 | Firebase 문서
firebase.google.com
간단히 설명하자면 저는 윈도우 환경에서 했기 때문에...
다음과 같이 독립 실행형 바이너리를 사용해서 설치했습니다.
윈도우의 경우 해당 프로그램을 실행하려고 하면
경고가 뜨는데 무시하고 실행하면 됩니다.
바이너리가 실행되면 "명령 프롬프트" 같은 창이 나오는데
다음과 같은 커맨드를 사용하여 Firebase에 로그인할 수 있습니다.
firebase login
그리고 다음과 같은 커맨드를 사용하여 현재 생성되어 있는 Firebase Project를 확인할 수 있습니다.
firebase projects:list
하지만 여기서 다음과 같이 에러 메시지가 나는 사람들은
firebase-debug.log를 확인해 보시길 바랍니다.
firebase-debug.log
(참고로 firebase-debug.log 는 해당 파일이 생성되었을 때만 확인가능)
저는 다음과 같은 에러가 발생했기 때문에
FirebaseError: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential.
토큰을 새롭게 부여받았습니다.
다음과 같은 커맨드로 firebase의 새로운 OAuth2 토큰을 부여받을 수 있습니다.
firebase login --reauth
그러면 다음과 같은 Firebase Project 리스트를 볼 수 있습니다.
Flutterfire 사용 설정하기
공식 문서는 다음과 같습니다.
Flutter 앱에 Firebase 추가
의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Flutter 앱에 Firebase 추가 plat_ios plat_android plat_web iOS+ Android 웹 기본 요건 아직 Flutter 앱이 없다면
firebase.google.com
위 과정까지 완료했다면 cmd 또는 터미널에서 firebase 커맨드를 사용할 수 있습니다.
윈도우의 명령 프롬프트에서 다음과 같은 커맨드를 입력하면
firebase
다음과 같은 결과를 볼 수 있습니다.
그러면 다음 커맨드를 사용해서 firebase에 로그인 중인지 확인해 보시길 바랍니다.
firebase login
그리고 FlutterFire CLI도 설치합니다.
dart pub global activate flutterfire_cli
그럼 다음과 같은 경고 메시지를 볼 수 있습니다.
이 말은 해당 환경 변수를 추가해야만 flutterfire를 사용할 수 있다는 의미입니다.
윈도우의 경우 다음과 같은 방법으로 환경변수를 추가할 수 있습니다.
1. 메뉴창을 열고 "환경변수"를 검색합니다.
그럼 다음과 같은 "시스템 속성"창을 볼 수 있습니다.
2. 오른쪽 밑에 있는 "환경 변수"를 클릭합니다.
3. "시스템 변수"에서 "Path"를 찾아서 "편집"을 클릭합니다.
4. 그리고 방금 경고창에서 나온 C:\Users\{UserName}\AppData\Local\Pub\Cache\bin를 복사하여 추가해 줍니다.
여기까지 했으면 flutterfire 커맨드를 사용할 수 있습니다.
Flutter에서 Firebase 사용하기
다음 커맨드를 사용하여 Flutter가 Firebase를 사용하도록 할 수 있습니다.
flutterfire configure
그러면 다음과 같이 선택 옵션이 주어집니다.
해당 옵션은 방향키로 움직일 수 있고 Space 버튼을 통해 선택 / 해제할 수 있고
Enter 키를 사용하여 확인을 할 수 있습니다.
완료가 되면 다음과 같이 뜨고
다음과 같이 android와 ios의 firebase app ID가 출력되는 것을 확인할 수 있습니다.
필요한 Firebase 패키지 설치하기
다음과 같은 커맨드로 firebase core를 설치합니다.
flutter pub add firebase_core
그러고 나서 필요한 firebase 패키지를 설치할 수 있습니다.
(각 패키지를 최신 버전으로 업데이트하기 위해선 flutterfire configure 커맨드를 사용할 수 있습니다.)
필요한 firebase 패키지는 다음과 같은 방법으로 설치할 수 있습니다.
flutter pub add PLUGIN_NAME
예를 들면 다음과 같습니다.
설치한 Firebae가 Flutter에서 제대로 동작하는지 확인하기
다음과 같이 밑줄 친 부분을 main.dart에 추가하여
앱을 시작할 때 Firebase를 사용하도록 합니다.
이때 DefaultFirebaseOptions.dart라는 파일이 자동으로 추가된 것을 확인할 수 있습니다.
그 이후 애뮬레이터를 닫고 프로젝트를 새롭게 실행합니다.
(평소보다 실행하는데 조금 더 시간이 걸림)
혹시 실행했는데 app 시작 화면에서 움직이지 않는다면 다음과 같이 코드를 추가합니다.
Flutter 앱을 실행하는데 문제가 없다면 정상적으로 Firebase SDK가 설치된 것입니다.
Firebase SDK 설치 완료 후 해야하는 것
Flutter 프로젝트에 Firebase SDK 설치가 완료되었다면
root 디렉토리에 firebase_options.dart 파일이 생성되어있는 것을 확인할 수 있습니다.
해당 파일에는 apiKey 등 중요한 정보가 들어있기 때문에
github에 올릴 때는 ignore 처리를 해야합니다.
이미 github에 올려버렸다면 다음 포스팅을 참조해서 제외하시길 바랍니다.
변경한 깃 ignore 적용해서 깃 허브에 이미 업로드된 파일 제거하기
깃 허브에 이미 프로젝트를 push 한 상태라면 git ignore를 변경했더라도 이미 push된 파일들은 적용되지 않습니다. 하지만 깃 커맨드를 사용해서 이미 push된 깃 허브에 이를 적용할 수 있는 방법을
android-developer.tistory.com
'플러터(flutter)' 카테고리의 다른 글
| 플러터에서 Firebase SDK를 사용하여 로그인 상태 처리 (0) | 2024.01.08 |
|---|---|
| 플러터에서 Firebase SDK를 사용해서 로그인 인증하기 (0) | 2024.01.06 |
| 플러터에서 Rest API로 Firebase Realtime Database 사용하기 (1) | 2023.12.23 |
| 플러터의 AnimatedBuilder를 사용하여 Animation 만들기 - 2 (0) | 2023.12.20 |
| 플러터의 AnimatedBuilder를 사용하여 Animation 만들기 - 1 (1) | 2023.12.11 |
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
댓글