1. firebase_cli 설치
https://firebase.google.com/docs/cli?authuser=0&hl=ko#install_the_firebase_cli
위 링크에서 "npm" 방식 node.js를 다운받아 설치한다.
참고로 나는 윈도우에 "독립 실행형 바이너리"로 설치를 진행해 봤는데,
진행단계 마지막인 아래 프로젝트 구성 단계에서 프로젝트를 찾지못하는 Exception이 발생했고, 온갖 방법으로 해도 안되어서
flutterfire configure --project=app-daonelab-com"npm"방식으로 진행하니 잘되었다.
그래서 "npm"방식으로 연동하는 방법으로 정리한다.
사실 두방식 모두 진행 step은 똑같다. 최초 설치하는 프로그램이 달라서 그렇지.
암튼 정상적으로 설치가 되면 아래처럼 nodejs PATH가 등록된다.
Mac에서 설치 : https://blog.daonelab.com/post/46/1892/
2. 프로젝트 생성
https://console.firebase.google.com/
firebase 사이트에 로그인한다. 로그인 자체가 중요한게 아니라 계정을 등록하는게 목적이다.
위 firebase console 사이트에서 프로젝트를 추가할 수 도 있지만
이전 단계에서 다운받아 설치한 cli를 이용하여 console에서 프로젝트를 추가 할 수 있다.
cmd를 띄워서 firebase에 로그인한다.
c:\Work\Flutter project>firebase login
Already logged in as XXXXXXX@gmail.com이미 로그인이 되었다면 위 처럼 이미 로그인되었다는 메시지가 나오고,
로그인이 되지않았다면 브라우저가 뜨면서 google로그인 화면이 나오는데 로그인하면 된다.
기 생성된 프로젝트를 조회해 본다. 아직 생성한게 없으니 없다고 나온다.
c:\Work\Flutter project>firebase projects:list
√ Preparing the list of your Firebase projects
No projects found.
그럼 프로젝트를 생성한다. 이때 프로젝트명을 꾀 유니크하게 지정하여 생성한다.
c:\Work\Flutter project>firebase projects:create app-daonelab-com
? What would you like to call your project? (defaults to your project ID)
× Creating Google Cloud Platform project
그리고 프로젝트가 생성되었는지 조회해 본다.
c:\Work\Flutter project>firebase projects:list
√ Preparing the list of your Firebase projects
┌───────────────────────┬──────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID │ Project Number │ Resource Location ID │
├───────────────────────┼──────────────────┼────────────────┼──────────────────────┤
│ app-daonelab-com │ app-daonelab-com │ 884176781691 │ [Not specified] │
└───────────────────────┴──────────────────┴────────────────┴──────────────────────┘
1 project(s) total.
https://console.firebase.google.com/
firebase console 에서도 프로젝트가 등록된걸 확인할 수 있다.
혹 firebase console에서 프로젝트를 삭제하고 나서 다시 프로젝트를 살리고 싶다면, 메일을 확인해보자 그러면 삭제한 프로젝트를 복원시킬수 있는 링크가 제공된다.
해당링크에서 삭제 대기중인 프로젝트 목록이 보여지는데 여기서 되살릴 수 있다.
3. Firebase Flutter App 추가
firebase console에서 프로젝트 설정을 클릭하자.
그러고 Flutter App을 생성할 수 있는 Flutter icon을 Click!
그럼 Flutter App을 생성하는 절차를 안내하는 페이지가 나온다.
firebase_cli는 앞에서 설치했고, Flutter SDK는 이 게시글을 보고 있는 사람이라면 이미 설치한 사람들일 것이다.
여기서 Flutter 프로젝트 만들기란 앞에서 생성한 Firebase 프로젝트가 아니라 Flutter App Project를 말하는 것이다.
그럼 Flutter App을 만들어 보자.
계속해서 앞서 진행하던 cmd창에서 프로젝트를 생성하고 싶은 폴더로 이동한 다음
아래 명령으로 프로젝트를 생성한다.
flutter create 생성할 프로젝트명
그럼 아래처럼 생성결과가 보여지고
c:\Work\Flutter project>flutter create firebase_app
Running "flutter pub get" in flutter_tools...
Resolving dependencies in Flutter SDK 3.7.1\packages\flutter_tools... (16.5s)
_fe_analyzer_shared 50.0.0 (52.0.0 available)
analyzer 5.2.0 (5.4.0 available)
archive 3.3.2 (3.3.6 available)
args 2.3.1 (2.3.2 available)
built_value 8.4.2 (8.4.3 available)
checked_yaml 2.0.1 (2.0.2 available)
collection 1.17.0 (1.17.1 available)
completion 1.0.0 (1.0.1 available)
coverage 1.6.1 (1.6.2 available)
dds 2.5.0 (2.7.4 available)
dds_service_extensions 1.3.1 (1.3.2 available)
devtools_shared 2.18.0 (2.20.1 available)
dwds 16.0.2 (17.0.0 available)
fixnum 1.0.1 (1.1.0 available)
frontend_server_client 3.1.0 (3.2.0 available)
intl 0.17.0 (0.18.0 available)
io 1.0.3 (1.0.4 available)
js 0.6.5 (0.6.7 available)
json_annotation 4.7.0 (4.8.0 available)
logging 1.1.0 (1.1.1 available)
matcher 0.12.13 (0.12.14 available)
meta 1.8.0 (1.9.0 available)
mime 1.0.2 (1.0.4 available)
multicast_dns 0.3.2+2 (0.3.2+3 available)
native_stack_traces 0.5.2 (0.5.5 available)
path 1.8.2 (1.8.3 available)
sse 4.1.1 (4.1.2 available)
test 1.22.0 (1.22.2 available)
test_api 0.4.16 (0.4.18 available)
test_core 0.4.20 (0.4.22 available)
vm_service 9.4.0 (10.1.2 available)
web_socket_channel 2.2.0 (2.3.0 available)
webdriver 3.0.1 (3.0.2 available)
Got dependencies in Flutter SDK 3.7.1\packages\flutter_tools!
Creating project firebase_app...
Running "flutter pub get" in firebase_app...
Resolving dependencies in firebase_app... (2.2s)
+ async 2.10.0
+ boolean_selector 2.1.1
+ characters 1.2.1
+ clock 1.1.1
+ collection 1.17.0 (1.17.1 available)
+ cupertino_icons 1.0.5
+ fake_async 1.3.1
+ flutter 0.0.0 from sdk flutter
+ flutter_lints 2.0.1
+ flutter_test 0.0.0 from sdk flutter
+ js 0.6.5 (0.6.7 available)
+ lints 2.0.1
+ matcher 0.12.13 (0.12.14 available)
+ material_color_utilities 0.2.0
+ meta 1.8.0 (1.9.0 available)
+ path 1.8.2 (1.8.3 available)
+ sky_engine 0.0.99 from sdk flutter
+ source_span 1.9.1
+ stack_trace 1.11.0
+ stream_channel 2.1.1
+ string_scanner 1.2.0
+ term_glyph 1.2.1
+ test_api 0.4.16 (0.4.18 available)
+ vector_math 2.1.4
Changed 24 dependencies in firebase_app!
Wrote 127 files.
All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
In order to run your application, type:
$ cd firebase_app
$ flutter run
Your application code is in firebase_app\lib\main.dart.
c:\Work\Flutter project>생성한 프로젝트 폴더로 이동하라고 메시지가 나온다.
그 다음 절차를 보자.
이전단계 안내대로 프로젝트 폴더로 이동하고 아래 명령을 실행한다.
dart pub global activate flutterfire_cli그러면 본인 경우 아래의 경로에 flutterfire.bat가 설치되고, 환경설정에 PATH가 자동등록된다.
C:\Users\Administrator\AppData\Local\Pub\Cache\bin
c:\Work\Flutter project>cd firebase_app
c:\Work\Flutter project\firebase_app>dart pub global activate flutterfire_cli
+ ansi_styles 0.3.2+1s... (2.8s)
+ args 2.3.2
+ async 2.10.0
+ characters 1.2.1
+ ci 0.1.0
+ cli_util 0.3.5
+ clock 1.1.1
+ collection 1.17.1
+ dart_console 1.1.2
+ deep_pick 0.10.0
+ ffi 2.0.1
+ file 6.1.4
+ flutterfire_cli 0.2.7
+ http 0.13.5
+ http_parser 4.0.2
+ interact 2.2.0
+ intl 0.17.0 (0.18.0 available)
+ json_annotation 4.8.0
+ matcher 0.12.14
+ meta 1.9.0
+ path 1.8.3
+ petitparser 5.1.0
+ platform 3.1.0
+ process 4.2.4
+ pub_semver 2.1.3
+ pub_updater 0.2.4
+ pubspec 2.3.0
+ quiver 3.2.1
+ source_span 1.9.1
+ stack_trace 1.11.0
+ string_scanner 1.2.0
+ term_glyph 1.2.1
+ tint 2.0.1
+ typed_data 1.3.1
+ uri 1.0.0
+ win32 2.7.0 (4.1.1 available)
+ xml 6.2.2
+ yaml 3.1.1
Building package executables... (6.7s)
Built flutterfire_cli:flutterfire.
Installed executable flutterfire.
Activated flutterfire_cli 0.2.7.
그리고 아래 명령을 실행하면
flutterfire configure --project=app-daonelab-com등록할 플랫폼을 지정하는 질문을 하는데 그냥 엔터하면 아래처럼 진행된다.
c:\Work\Flutter project\firebase_app>flutterfire configure --project=app-daonelab-com
i Found 2 Firebase projects. Selecting project app-daonelab-com.
? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android
✔ ios
✔ macos
✔ web
✔ Which platforms should your configuration support (use arrow keys & space to select)? · android, ios, macos, web
i Firebase android app com.example.firebase_app is not registered on Firebase project app-daonelab-com.
i Registered a new Firebase android app on Firebase project app-daonelab-com.
i Firebase ios app com.example.firebaseApp is not registered on Firebase project app-daonelab-com.
i Registered a new Firebase ios app on Firebase project app-daonelab-com.
i Firebase macos app com.example.firebaseApp registered.
i Firebase web app firebase_app (web) is not registered on Firebase project app-daonelab-com.
i Registered a new Firebase web app on Firebase project app-daonelab-com.
Firebase configuration file lib\firebase_options.dart generated successfully with the following Firebase apps:
Platform Firebase App Id
web 1:884176781691:web:0e0dd3a33db11e49f7bdde
android 1:884176781691:android:6e3c762fd602fc89f7bdde
ios 1:884176781691:ios:b28ce9b337dec912f7bdde
macos 1:884176781691:ios:b28ce9b337dec912f7bdde
Learn more about using this file and next steps from the documentation:
> https://firebase.google.com/docs/flutter/setup
c:\Work\Flutter project\firebase_app>그러면 플랫폼별 App이 Firebase에 자동으로 등록되고,
firebase_options.dart 구성 파일이 자동으로 Flutter 프로젝트의 lib폴더 아래에 추가된 것을 안드로이드 스튜디오에서 확인 할 수 있다.
main.dart에 위 안내의 스크립트를 붙여넣는다.
import "package:flutter/material.dart";
import "package:firebase_core/firebase_core.dart";
import "firebase_options.dart";
import "package:firebase_analytics/firebase_analytics.dart";
void main() async {
WidgetsFlutterBinding.ensureInitialized(); // 이것도 넣어야 된다.
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
그리고 생성한 App에 firebase plugin을 추가한다.
c:\Work\Flutter project\firebase_app>flutter pub add firebase_core
Resolving dependencies...
collection 1.17.0 (1.17.1 available)
+ firebase_core 2.4.1
+ firebase_core_platform_interface 4.5.2
+ firebase_core_web 2.1.0
+ flutter_web_plugins 0.0.0 from sdk flutter
js 0.6.5 (0.6.7 available)
matcher 0.12.13 (0.12.14 available)
meta 1.8.0 (1.9.0 available)
path 1.8.2 (1.8.3 available)
+ plugin_platform_interface 2.1.3
test_api 0.4.16 (0.4.18 available)
Changed 5 dependencies!
c:\Work\Flutter project\firebase_app>flutter pub get
Running "flutter pub get" in firebase_app...
Resolving dependencies... (1.1s)
collection 1.17.0 (1.17.1 available)
js 0.6.5 (0.6.7 available)
matcher 0.12.13 (0.12.14 available)
meta 1.8.0 (1.9.0 available)
path 1.8.2 (1.8.3 available)
test_api 0.4.16 (0.4.18 available)
Got dependencies!
c:\Work\Flutter project\firebase_app>flutter pub add firebase_analytics
Resolving dependencies...
+ _flutterfire_internals 1.0.12
collection 1.17.0 (1.17.1 available)
+ firebase_analytics 10.1.0
+ firebase_analytics_platform_interface 3.3.17
+ firebase_analytics_web 0.5.1+8
js 0.6.5 (0.6.7 available)
matcher 0.12.13 (0.12.14 available)
meta 1.8.0 (1.9.0 available)
path 1.8.2 (1.8.3 available)
test_api 0.4.16 (0.4.18 available)
Changed 4 dependencies!
c:\Work\Flutter project\firebase_app>flutter pub get
Running "flutter pub get" in firebase_app...
Resolving dependencies... (1.4s)
collection 1.17.0 (1.17.1 available)
js 0.6.5 (0.6.7 available)
matcher 0.12.13 (0.12.14 available)
meta 1.8.0 (1.9.0 available)
path 1.8.2 (1.8.3 available)
test_api 0.4.16 (0.4.18 available)
Got dependencies!안드로이드 스튜디오로 해당App Project를 열어보면 pubspec.yaml에 firebase code와 firebase analytics가 추가된걸 확인할 수 있다.
위 단계는 안드로이드 스튜디오에서 pubspec.yaml을 직접수정해도된다.