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

Flutter 앱에서 Firebase 사용 하기 (Android 편)

by 어느덧중반 2021. 1. 25.
반응형

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

Firebase 에서 제공하는 수많은 기능을 통해 사용자의 데이터를 저장하고 분석하며 비즈니스를 성장시킬 수 있다? 잘 이해가 안간다면 우선 뭐든 만들어보고 무엇을 의미했던건지 역추적해보도록 하자. 해당 게시글에서 Firebase 프로젝트를 생성하는 방법에 대해 알아볼 것이다.

#1. 구글 로그인 및 Firebase 프로젝트 생성

#2. Flutter 앱 만들기 (Android Studio 기준)

#3. Firebase - Android 플랫폼 추가하기


#1. 구글 로그인  Firebase 프로젝트 생성

 

 - Firebase 프로젝트를 생성하기 위해선 일단 본인의 구글 계정으로 로그인이 필요하다. 자, 우선 로그인해보자.

 - 다음으로 Firebase 페이지에 접속해보자.

 

Firebase

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

firebase.google.com

 - Get Started를 눌러보자.

 - 기존 프로젝트가 없다면 빈 화면만 있을 것이다. 프로젝트 추가 버튼을 눌러 프로젝트를 생성해보자.

 - 나는 SNS Login 화면을 구성해볼 것이기에 login test로 프로젝트를 생성했다.

 - 구글 애널리틱스는 추후에 앱의 사용자가 많아진다면 여러 도움을 받을 수 있는 도구인것 같은데, 나도 고수가 아니라서 잘 모르겠다. (예를 들어, 내 앱을 사용하는 주요 사용자의 연령대나 성별 등을 분석해주는?) 나는 우선 사용 설정은 해두는데 체크해제를 하고 계속해도 무방하다.

 - 애널리틱스 계정이 없다면 하나 생성해주자. 구성을 안하는 경우 여긴 스킵하겠지?

 - 자, 프로젝트가 생성되었다. 시작이 반이라지 않나? 이제 무한한 도구들을 아낌없이 사용해보도록 하자.

 - 프로젝트 생성후 접하게 되는 첫 화면이다. 좌측에 수많은 아이콘은 Firebase에서 사용할 수 있는 수많은 기능들이고 빨간색 체크표시해둔 것이 바로 iOS / Android / Web / Unity 등 어떤 플랫폼을 추가하여 사용할지를 선택하는 부분이다. 해당 게시글에서는 iOS와 Android만 추가하도록 하겠다.

아주 간단하게 Firebase 프로젝트를 하나 생성해보았다. 아직까지 어려운 것은 전혀 없다. 이제 Flutter 앱을 하나 만들고 각 플랫폼을 추가해보도록 하자.

 

#2. Flutter 앱 만들기 (Android Studio 기준)

 - Android 와 iOS 플랫폼 추가를 위해서는 우선 Flutter 프로젝트 생성을 해야한다.
   왜냐하면, 각 플랫폼을 추가할 때 패키지명이 필수로 들어가게 된다.
   (패키지명은 왜 들어가야 하는가? 예를 들어 A앱과 B앱 2개가 있다고 치자.
    우리는 A앱에 들어가는 데이터베이스 (Firebase의 Firestore 기능) 를 Firebase로 구성하고 싶다면 A앱에 대한
    고유 정보 등을 등록해서 이 데이터베이스는 A앱의 데이터베이스이다! 라고 구분할 수 있어야 한다. 그렇기 때문에
    우리가 Flutter 프로젝트를 생성하고 패키지명을 알아야 하는 것이 해당 앱이라는 것을 구분하기 위함이라고
    알고 있으면 된다.)

 - 자, Android Studio를 열어 Flutter 프로젝트를 생성하자. (다른 IDE 사용자도 각자 프로젝트 생성하면 됩니다.)

프로젝트 이름 등은 각자 알아서 생성하기 바랍니다. 똑같이 생성할 필요가 전혀 없음

이제 Flutter 프로젝트까지 생성되었다면 앞으로 Android / iOS 플랫폼 추가하는 것만 하면 된다. 거의 다 왔으니 지치지 말고 조금만 더 가보도록 하자.

 

#3. Android 플랫폼 추가하기

- 자, 위의 Firebase 프로젝트 생성한 화면에서 Android 아이콘을 눌러 추가해보자.

- 아래와 같은 화면이 보일 것이다. 긴장하지 말자. 우리는 이미 패키지명을 알고 있다.

- 각 플랫폼 등록을 위해선 패키지명이 반드시 필요하다. 우선 Android부터 패키지 확인하는 방법을 알아보자.

Flutter 프로젝트 생성 후 초기화면

 - Android 패키지명 확인을 위해 아래의 경로로 이동해보자.
   root > android > app > src > main > AndroidManifest.xml

 - 위의 패키지명을 복사하여 Firebase Android 플랫폼 추가화면에 붙여넣자.

추가 후 앱 등록버튼을 누르자 (선택사항에 대해선 굳이 아직 입력하지 않아도 된다.)

 - 가장 중요한 부분이다. google-services.json 다운로드 버튼을 눌러 해당 파일을 받자

 - 이제 다운받은 파일을 알맞은 경로에 붙여넣자. (root > android > app > google-services.json)
   (나는 다운로드 받은 파일을 드래그앤드롭으로 떨구는 방식으로 옮겼다.) ==> 혹 실수할 수도 있으니..... 옮긴 후에 app 폴더에는
   src 폴더와 build.gradle 파일과 google-services.json 파일이 존재하면 된다.

 - 이제 다시 firebase쪽 화면으로 넘어와 다음 단계를 진행하자. 

다운받은 파일을 app 폴더 밑에 위치시킨 후 다음 버튼을 클릭하자.

 - 중간에 있는 classpath 'com.google.gms~~~~~~~~~ :4.3.4' 우측에 복사버튼을 클릭하자.

 - 아래 위치하도록 붙여넣자. (root > android > build.gradle)

 - Firebase 프로젝트 생성시 구글 애널리틱스 사용설정을 해두었다면 아래 내용도 복사해주자.

 - 해당 내용을 root > app > src > build.gradle 의 해당위치에 붙여넣어주자. (위의 root > app > build.gradle 과는 다른 위치임)

 - 구글 로그인을 최종적으로 사용하기 위해선 key hash 등록도 필요하다. 이것도 지금 해두는 것이 좋다.
   우선 key hash를 등록하지 않았다면 Mac 기준 아래의 경로로 이동해 명령어 입력 후 keystore를 생성하자.
   ( ※ terminal : cd /Users/(사용자명)/.android )

 - 본인의 keystore 등록은 한 번도 안했다면 아래 명령어를 통해 keystore를 생성하자.

keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -keysize 2048 -validity 

- 위 방법대로 새로 생성했거나 기존에 key가 있었다면 아래 명령어로 key hash를 확인하자.

keytool -list -v -keystore debug.keystore -alias androiddebugkey

- 확인된 SHA-1 / SHA-256을 Firebase 프로젝트 내에 생성한 Android 플랫폼 설정에 추가해주자.
   (안드로이드 폰에서 구글 로그인을 위해 해줘야 하는 과정이다.)

디지털 지문 추가 클릭해서 key hash 추가해주자.

 - 위의 과정까지 진행했다면 Firebase 프로젝트의 Android 플랫폼 추가는 완료이다.

 

Firebase 프로젝트 생성과 Android 플랫폼을 만드는 과정은 여러 번 반복하다보니 이젠 어느정도 익숙해진 것 같다. 해당 과정을 통해 Google Login을 구현할 수 있게 되었다. 다음 편에선 Google Login 로직을 설명하고 실제로 Login 소스를 구현해보도록 하겠다.

 

iOS 플랫폼 추가 하는 법을 알고 싶다면 아래 링크로 이동해서 참고하면 된다.

1. 2021/01/31 - [트렌드/Flutter & Dart] - Flutter 앱에서 Firebase 사용 하기 (iOS 편) 

 

반응형

댓글