본문 바로가기
프로그래밍/Flutter & Dart

Firebase project 생성 및 Android, iOS 앱 추가하기

by 어느덧중반 2021. 9. 15.
반응형

Flutter를 이용하여 앱을 개발하게 되면 Firebase는 기본적으로 사용 방법을 알아두는 것이 좋다.

Project 생성부터 Android, iOS 앱 추가하는 간단한 방법을 짚고 넘어가도록 하겠다.

 

  • Firebase project 생성
  • Android 앱 추가
  • iOS 앱 추가

 

Firebase project 생성

- Firebase 사이트 접속 

 

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

firebase.google.com

- Firebase 시작하기

시작하기 버튼 클릭

- 신규 프로젝트 추가하기

프로젝트 추가 버튼 클릭

- 애널리틱스 사용여부 결정하기 (해도 되고 안 해도 된다.)

- 애널리틱스 구성 확인하기

계정을 선택하고 프로젝트 만들기 클릭

 

Flutter project 생성

- test_app 이라는 프로젝트를 하나 생성했다.

 

Android 앱 추가하기

- Android 앱 추가하기

Android 앱 추가 버튼 클릭

- Android package name 확인하기

- 앱 등록을 위한 패키지 이름 넣기

Android 패키지 이름 확인 후 추가 후 앱 등록 버튼 클릭

- google-services.json 다운로드

- 다운받은 google-services.json 파일 넣기

Flutter project > android > app 폴더 하위에 넣기

- Firebase SDK 추가하기 : 우측 클립보드로 복사 버튼을 누르면 자동 복사 된다.

- 방금 복사한 코드 넣기

Flutter project > android > app > build.gradle > buildscript 하위 dependencies에 추가하기

- plugin 추가로 넣기 : 주의할 점은 위의 build.gradle(Flutter pjt > android > build.gradle) 과는
                                   다른 파일(Flutter pjt > android > app > build.gradle) 이다.

Flutter project > android > app > build.gradle > apply plugin: 'com.android.application' 아래 줄에 추가
Kotlin의 경우 기존 dependencies가 있어서 그 아랫줄에 넣으면 되고 Java의 경우 dependencies 부분이 없기 때문에 Firebase 사이트에 있는 dependencies 모든 코드를 복사해 넣으면 된다.

 

iOS 앱 추가하기

- iOS 앱 추가하기

iOS 앱 추가버튼 클릭

- iOS xcode에서 열기

ios 폴더 우클릭 > Flutter > Open iOS module in Xcode 클릭

- xcode에서 bundle identifier 확인하기

Runner > General > Bundle identifier 확인하기

- iOS 번들ID 입력 후 앱 등록하기

Xcode에서 확인한 번들ID 넣은 후 앱 등록 버튼 클릭

- GoogleServices-info.plist 다운로드

- xcode에서 Runner폴더 하위에 GoogleService-Info.plist 파일 복사해넣기 (드래그&드롭이 편리함)

Runner폴더 하위에 드래그&드롭 후 Finish 버튼 클릭

- GoogleService-Info.plist 추가된 것 확인

 - 나머지 내용은 모두 Flutter build시 자동으로 처리해주기 때문에 '다음' 클릭

다음 클릭
다음 클릭

- 콘솔로 이동 클릭

콘솔로 이동 클릭

 

추가된 2개의 앱 확인

상단에 Android, iOS 앱이 각각 추가된 것을 확인할 수 있다.

 

여기까지 Firebase project에서 Android와 iOS 앱을 추가하는 방법에 대해 알아보았다.

 

반응형

댓글