[Flutter] 플러터 Firebase(파이어베이스) 연동

이번에는 Flutter와 Firebase를 연동해보려고 한다.

연동하기 전에 Firebase에 대해서 간단하게 알아보자.

FIrebase란?

Firebase는 백엔드 서비스라고 생각하면 이해하기 쉬울 것이라고 생각하고 flutter와 쉽고 간편하게 연동되며 여러 가지 기능을 제공하고 있다.

빌드

우선 간단히 빌드를 살펴보면 6개의 기능을 제공하고 있다.

• Authentication

서버 기반의 서비스를 제공하는 앱이라면 사용자의 가입과 로그인 기능이 필수인데, Firebase에서는 이 기능을 제공하고 있어서 직접 구현할 필요가 없다. google, facebook, twitter, github와 제휴되어서 각각의 계정으로 로그인 인증을 제공한다. kakao와 naver도 가능하다고 알고 있다.

 

• Database(Cloud Firestore)

서비 기반의 서비스라면 데이터베이스도 필요할 것이다. Firebase에서 제공하는 Database는 실시간으로 업데이트되고 특히 오프라인 자원을 제공하여 앱이 인터넷에 접속할 수 없거나 지연이 발생할 때에도 유연하게 서비스가 가능하다.

• Storage

사용자의 사진, 동영상 등의 콘텐츠를 저장할 수 있는 공간을 제공한다. 

 

• Hosting

웹 사이트를 운영할 수 있는 호스팅 서비스를 제공한다.

 

• Functions

Firebase 기능과 HTTPS 요청에 의해 트리거 되는 이벤트에 응답하여 백엔드 코드를 자동으로 실행할 수 있는 서버리스 프레임워크이다.

 

• ML Kit

Firebase Machine Learning은 강력하면서도 사용하기 쉬운 패키지로 Google의 기계 학습 전문 지식을 Android 및 Apple 앱에 제공하는 모바일 SDK이다. 기계 학습을 처음 접하든 경험이 있든 관계없이 몇 줄의 코드로 필요한 기능을 구현할 수 있다. 

앱을 개발하다 보면 위의 기능들을 구현하기 위해 애를 먹는 경우가 있는데 Firebase를 이용하면 시간을 줄일 수 있는 큰 장점이 있다. 더 자세한 내용은 Firebase Documentation에 들어가 확인하면 좋을 것 같다.

Android 프로젝트에 Firebase 추가  |  Firebase Documentation

---

Firebase 프로젝트 생성

그럼 이제 본격적으로 Flutter와 Firebase를 연동해보자.

일단 Flutter에서 새로운 프로젝트를 하나 생성한다.

프로젝트를 생성하면 firebase console 창에 들어간다.

로그인 - Google 계정

창에 들어가게 되면 로그인 후에 프로젝트를 하나 추가한다.

간단하게 프로젝트 이름을 지정하고 계속 버튼을 누른다.

Google 애널리틱스 사용 설정도 권장이기 때문에 체크 후 계속 버튼을 누른다.

현재 위치를 설정하고 애널리틱스 약관에 동의 후 프로젝트 만들기를 누른다.

프로젝트를 성공적으로 만들게 되면 다음 창이 뜨게 되는데 여기서 우리는 android만을 설정하기 위해 android 아이콘을 눌러준다.

ios의 경우 Xcode로만 설정 가능한 걸로 알고 있기 때문에 설정하지 못할 것 같다...ㅠ

---

Android 앱에 Firebase 추가

위 누르게 되면 다음 이미지와 같이 창이 나오게 된다.

android 패키지 이름은 이전에 Flutter에서 생성했던 프로젝트에서 android > app > src > main > AndroidMainfest.xml 에 들어가 package이름을 복사하여 붙여 넣는다.

앱 닉네임은 자유롭게 작성하고 디버그 서명 인증서 SHA-1의 경우는 cmd창에 다음 코드를 작성한다.

window

keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

mac

keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

작성하고 Enter를 치게 되면 SHA-1 값을 얻을 수 있게 된다.

모두 다 작성 후 앱을 등록하면 다음 이미지와 같이 창이 나오게 된다.

google-services.json파일을 다운로드하고 이미지와 같이 파일을 넣어준다.

파일을 넣게 되면 위에 이미지처럼 파일이 추가된 것을 확인할 수 있다.

위에 이미지처럼 파일을 추가했다면 다음 버튼을 누른다.

다음 버튼을 누르게 되면 Firebase SDK 추가하는 방법이 설명되어 있는데 설명대로 천천히 코드를 복사하여 붙여 넣으면 된다.

android > build.gradle에 들어가 위 코드를 복사하여 붙여 넣는다.

그 밑에 코드도 복사하여 android > app > build.gradle에 복사하여 붙여 넣는다.

복붙을 성공적으로 했다면 android > app > build.gradle에서 defaultConfig 부분에 multiDexEnabled를 true로 설정한다.

그리고 마지막으로 하단에 dependencies에 다음 코드를 추가한다.

implementation 'com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava'

이렇게 복사 붙여 넣기를 모두 했다면 다음 버튼을 누른다.

위 모든 과정을 끝내고 콘솔로 이동 버튼을 누른다.

라이브러리

Firebase 프로젝트를 성공적으로 추가했다면 Firebase를 사용하기 위한 라이브러리 core를 추가한다.

firebase_core | Flutter Package

dependencies:
  firebase_core: ^1.11.0

라이브러리까지 추가하게 되면 Flutter와 Firebase 연동을 성공적으로 하게 된 것이다.

다음에는 Firebase에서 제공하는 여러 가지 기능을 활용하여 구현해보자.

=> Firebase에 있는 Authentication, Database(Cloud Firestore), Storage, ML Kit를 사용한 앱 링크

2022 GDSC KR Winter Hack

참고

Android 프로젝트에 Firebase 추가  |  Firebase Documentation

Flutter 앱에 Firebase 추가  |  Firebase Documentation