setup Firebase Project

setup Firebase Project

 

Creating a New Firebase Project

 

 - app에서 사용할 firebase 기능 : Cloud Firestore, Authentication

 - firebase 접속 —> go to console —> add a new project —> project name 설정(projectAbc) —> 마지막에 있는 terms만 체크 —> 다음 —> 모든 항목 체크하지 않음. —> create project

 

Android Firebase Project Setup

 

1) 패키지명 입력

 - projectAbc 진입 —> 프로젝트명 바로 아래에 안드로이드 심볼 클릭 —> android 패지지명 입력해야 함.

 - android 패키지명 확인(build.gradle 파일의 applicationID) : 프로젝트 - android - app - build.gradle - applicationID (build.gradle 파일이 2종류이니 위치 주의, 앱 레벨 파일임.)

applicationId "co.example.projectAbc"

 

 - example 부분을 자신의 이름이나 도메인명으로 변경 : co.test.projectAbc

 - 패키지명은 안드로이드 플레이 스토어에서 유니크해야 함.

 - 변경한 applicationID를 복사해서 firebase의 android 패키지 이름에 붙여넣음.

(파이어 베이스에 넣을 때는 따옴표는 없어야 하며, 반드시 flutter app의 패키지명과 일치해야 함.

 - 패키지명 넣은 후 앱 등록 버튼 클릭

 

2) google-services.json 다운로드 및 flutter app에 복사

 - json 파일의 이름은 반드시 google-services.json 이어야 함.

 - 복사 위치 : flutter project - android - app

 

3) SDK 설정

 - Android용 Firebase 시작 가이드 링크 클릭 (아래 과정은 수시로 변동되니, 적용 시점의 가이드 라인을 따르자.)

https://firebase.google.com/docs/android/setup?authuser=1

 

 - flutter 프로젝트 - android - build.gradle(위치 주의, 프로젝트 레벨 파일임.)

 - dependencies에 Google service plugin classpath를 추가

dependencies {

    classpath 'com.android.tools.build:gradle:3.2.1'

    classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin

}

 - 앱 레벨 build.gradle 파일로 이동, 맨 아래 —> Google play services cradle plugin을 추가

apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

 - 앱 레벨 build.gradle 파일의 dependencies에 아래 내용을 추가

 implementation 'com.google.firebase:firebase-core:16.0.8'

 —> 콘솔로 이동 클릭 --> 앱 실행 —> 앱이 원래 화면대로 실행되면 firebase - flutter android 연동이 정상적으로 완료된 것임.

 

 

157. iOS Firebase Project Setup

 

 - firebase projectAbc - 앱 추가 버튼 클릭 - iOS 심볼 클릭

 

1. iOS 번들 ID 입력

 - flutter - ios - Runner 폴더에서 메뉴 버튼 클릭 - Reveal in finder —> Runner.xcodeproj 파일을 더블 클릭해서 xcode에서 오픈

 - xcode 좌측 상단의 Runner 클릭 - General tab에서 Bundle identifier 확인 —> 수정 필요시 수정 후 firebase 에 입력 —> 앱 등록 버튼 클릭

 - 번들 ID는 애플 앱 스토어에서 유니크 해야 함.

 

1. GoogleService-Info.plist 다운로드 및 flutter app에 복사

 - GoogleService-Info.plist 다운로드(파일명 변경 금지) —> xcode 좌측 파일 트리에서 Runner 폴더에 끌어넣기 —> 체크사항 확인(Copy items if needed, create folder references, add to targets) —> finish —> Xcode close

(복사 위치가 위 내용과 다를 수 있음. 실행 오류시 파이어 베이스 안내대로 변경해 볼 것.)

 

1. SDK 설정

 - iOS용 Firebase 시작 가이드 클릭

 - 여기에 보이는 SDK 설정은 flutter iOS에서 cocoapod의 도움으로 자동으로 설정됨. 아무 작업을 하지 않아도 됨. --> 콘솔로 이동

—> 앱 실행 테스트

 

 

Firebase Flutter Package Setup (iOS & Android)

 

 - firebase package를 우리 flutter project에 추가하자.

 - FlutterFire plugins

https://github.com/flutter/plugins/blob/master/FlutterFire.md

 

 - 적용할 패키지 : cloud_firestore 0.9.13+1, firebase_auth 0.8.4+4, firebase_core

 - 위 사이트에서 어떤 패키지를 사용하더라도 firebase_core는 기본적으로 적용되어야 함.

 - pubspec.yaml 수정

 dependencies:

  flutter:

    sdk: flutter

 

  cupertino_icons: ^0.1.2

  animated_text_kit: ^1.3.0

  firebase_core: ^0.3.4

  firebase_auth: ^0.8.4+4

  cloud_firestore: ^0.9.13+1

 

 - 위 패키지들을 적용했으면 coding을 하기 전 반드시 앱 실행 테스트를 해야 함.(앱 중지 - 재실행)

 - 안드로이드 : 정상 실행

 - 아이폰 : 실행 테스트 전 반드시 cocoapod을 업데이트 해야함. --> android studio —> terminal —> pod repo update 실행 —> sudo gem install cocoapods 실행 —> Mac device pw 입력 —> 중간에 overwrite 여부 체크 나오면 y 클릭 —> pod setup 실행 —> cocoapod 업데이트 및 셋업 완료됨.(Setup completed 메세지 보여야 함.) (중간에 붉은 글자 에러 메세지 없어야 함.)

 - 앱실행 테스트

 

 

Registering Users with Firebase using FirebaseAuth

 

 - iOS simulator에서 text input의 글자 입력시 키보드가 나타나지 않으면...

아이폰 : command + k

안드로이드 : 우측 하단 키보드 버튼에서 설정

 - chat_screen.dart 파일에 auth 설정을 완료한 후 firebase의 설정을 아래와 같이 변경해야 함.

Firebase project - 메뉴 - development(개발) - Authentication - Sign-in method(로그인 방법) - 위 항목을 사용설정으로 토글 - 저장 —> 앱 테스트(파이어베이스에서 비밀번호는 최소 6자 이상 입력해야 함. 6자 미만이면 사용자 등록 실패됨.)

 

Saving Data into Cloud Firestore

 

 - data를 cloud firestore에 저장하자.

 - firebase project —> Databse —> Cloud Firestore —> Create database —> Start in test mode —> Enable —> add collection(컬렉션 시작) —> collection ID에 messages 입력

 - 샘플 데이터 입력 : 

1. Field: text, Value: Hello
2. Field: sender, Value: abc@gmail.com

—> save click —> 샘플 데이터가 입력됨. (우리는 파이어 베이스가 아닌 앱에서 입력한 내용이 messages collection 에 저정되도록 해야 함.