나만의 뽀모도로 만들기 #1. Flutter-FireBase 연동

지금까지 플러터 프로젝트를 만들때에는 

 

PHP에 API 를 만들고 MSSQL 데이터베이스를 사용했는데

 

파이어베이스를 한번쯤 해봐야겠다고 꼭 생각했는데

 

이번기회에 해보려고 한다

 

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

Firebase CLI 참조  |  Firebase 문서

Firebase CLI를 설치한다 .. CLI가 뭐지 ..

아 일단 ㅇㅋㅇㅋ 설치해보장

 

npm으로 설치하자 

 

https://nodejs.org/ko

Node.js

 

노드JS다운받고 ... 설치 다음다음 ~

 

npm install -g firebase-tools

cmd에 입력을 해주면 설치가 설치가 된다 ~

 

그러면 이제 firebase 명령어를 사용할수있다 !

 

firebase login

파이어베이스에 로그인을 한다 ~

 

파이어베이스에 프로젝트도 만들어보자

firebase projects:create hooing777-flutter-pomodormammu

나랑 똑같이 할순없다 프로젝트명은 다른사람과 중복이 되면 안된다 !

 

 

그리구 플러터 프로젝트를 만들어준다

flutter create pomodormammu

flutter pub add firebase_core

나만의 포모도로 프로젝트 이름은 포모도르마무이다 ㅎㅎ ~
firebase_core 도 추가해줘야한다

 

파이어베이스에 생성한 프로젝트로 들어가서 플러터 아이콘을 눌러준다

 

dart pub global activate flutterfire_cli

만들어준 프로젝트 터미널에 입력해준다

 

여기서 환경변수 설정을 해주어야한당

나는 C:\Users\PC1\AppData\Local\Pub\Cache\bin 이라고 나와있는데 이걸 환경변수 Path에 넣어주어야한다.

환경변수 설정해주고

vscode를 사용하면 터미널과 vscode 둘다 껏다 켜주어야한다.

 

그리고 프로젝트 터미널에 두번째 문구를 입력해주면 된다.

그러면 플러터 프로젝트에 firebase_options.dart 가 생긴다 !

그리고 main.dart의 main함수를 수정한다.

 

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

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

정상적으로 실행이 된당 ~~

 

오늘은 파이어베이스와 플러터의 연동을 해보았다 ~

 

코딩쉐프님의 동영상과 파이어베이스 공식문서를 참고해서 작성했습니다 ~

https://youtu.be/J3OqrOJpPVQ

 

 

감사합니다 ~