프로그래밍/flutter

Flutter에 Firestore 연동하는법

싯타마 2020. 3. 5. 19:23

 안녕하세요, 오늘은 Flutter로 Firestore를 연동해보겠습니다.

먼저, Firestore를 연동하기 위해서는 FIrebase먼저 연동을 해야 됩니다.

전에 Firebase 연동하는 포스팅을 했었는데요 다시 한번 최신 버전으로 연동을 해보겠습니다.

 

 

1.Firebase 연동하기

 먼저 파이어 베이스 콘솔 홈페이지로  들어가서

https://firebase.google.com/

 

Firebase

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

firebase.google.com

 

구글 로그인을 하고 Firebase 시작하기를 눌러줍니다.

그 후 새 프로젝트 만들기를 클릭해줍니다.

프로젝트의 이름 등을 입력해주고 프로젝트를 만들면 이런 화면이 나옵니다.

 

 

 가운데에 위치한 버전에 맞는 앱을 추가하여 시작하기를 눌러 줍니다.

저는 안드로이드 앱 버전으로 시작했습니다.

 

 

 

앱 등록 절차에 맞는 값을 입력해 줍니다.

 

1. 먼저 패키지 이름은  android->app->build.gradle을 보면 applicationid에 정확한 패키지 이름이 입력돼 있습니다. 이    를 복사 후 붙여 넣기 하시면 됩니다.

 

2. 앱 닉네임은 원하시는 대로 입력합니다.

 

3. sha값은 sha값을 알아내는 방법을 설명했던 포스팅 링크를 올려드리겠습니다. 자세하게 설명되어 있고 sha값을 찾고 입력하시면 됩니다.

https://for-it-study.tistory.com/8

 

Flluter를 Firebase와 연동하기! (디버그 서명 인증서 입력 방법, SHA1 입력방법)

오늘은 Firebase를 등록하는 법을 알려드릴게요! https://firebase.google.com/?gclid=CjwKCAiA6vXwBRBKEiwAYE7iS53ZxweL8OhSUzib6dEd8gES3PcoLMwzlsFUb96Gv0i8dmj3Wocd8BoCwwEQAvD_BwE Firebase Firebase는 고품..

for-it-study.tistory.com

 

모두 입력을 완료했다면 앱을 등록을 클릭합니다.

 

 google-service.json파일을 연동을 원하는 앱에 넣어 줘야 합니다. 

다운로드를 하시고 안드로이드 프로젝트를 하시는 분께서는 설명하는 경로에 위치해놓으면 되지만, 

Flutter는 android->app의 경로에 파일을 넣어 줍니다.

 

 다음은 프로젝트 수준의 build.gradle에 다음과 같은 명령어들을 입력해 주어야 합니다.

android-> gradle -> build.gradle에서 보기의 명령어들이 들어갈 위치에 복사 붙여 넣기 해줍니다.(입력되어있는 값은 그대로 놔두고 추가만)

 

 다음은 앱 수준의 build.gradle입니다. 

android-> app-> build.gradle에 보기와 같이 명령어들이 들어갈 위치에 복사 붙여넣기 합시다.

 

*주의: 프로젝트 수준과 앱 수준을 혼동하지 말 것!

 

 

 모든 입력을 맞췄다면 지금 동기화를 무시하고 다음을 클릭해줍니다.

그 후 연동이 되었는지 확인하기 위해 앱을 실행시켜봅니다. (이미 실행되어 있었다면 종료 후 다시 실행)

연동이 잘 되었다면 앱 실행하여 설치확인 단계에서 완료 버튼이 활성화됩니다. 버튼 클릭하면 연동이 완료됩니다.

 

2.Firestore 연동하기

Firebase 연동해 성공한 후 이제는 Firestore를 연동해 봅시다.

 

 연동한 Firebase콘솔 창에서 Cloud Firestore 클릭

 

 

 데이터베이스 만들기 클릭

 

 

 포스팅 용이기 때문에 테스트 모드로 시작을 클릭하겠습니다.

테스트 모드 체크 후 다음 클릭(프로덕션 모드는 개발자가 보안규칙을 지정해주어야 합니다.

 

 

 

 Clou Firestre위치를 지정되어있는 곳으로 하고 완료 버튼 클릭

 

 

 그 후 FIrestore를 이용하기 위해 cloud_firestore 라이브러리를 추가해 줍니다. 

https://pub.dev/packages/cloud_firestore#-installing-tab-

링크 접속 후 installing-> dependencies에 있는 부분 복사

 

 

 

 프로젝트의 pubspec.yaml의 dependencies하위 목록에 붙여 넣기 후 Packges get 클릭 후 import 해주면

성공적으로 Firestore가 연동됩니다.

 

 

 다음 포스팅 때에는 연동한 Firestore를 사용하는 방법에 대해 포스팅해보겠습니다.