flutter에서 firestore 사용하기(1)
firebase 및 firestore 연동하기
들어가며
Firestore는 flutter 개발자에게 쉽고 간편한 데이터베이스를 제공합니다. 하지만 Firestore의 공식문서에는 flutter의 예제코드가 존재하지 않아 사용하는데 불편함을 겪을 수 밖에 없습니다. 앞으로 세번의 글을 써나가면서, Firestore를 처음 접하는 flutter 개발자에게 Firestore의 가장 기본적이면서도 중요한 기능들을 알려드리겠습니다. 첫번째 글에서는 flutter 에서 Firebase 및 Firestore를 연동하는 방법에 대해 설명하겠습니다:)
목차
- flutter에서 firestore 사용하기(1) — firebase 및 firestore 연동하기(here!)
- flutter에서 firestore 사용하기(2) — firestore 에서 데이터 관리하기
- flutter에서 firestore 사용하기(3) — firestore 를 활용한 예제만들기
시작하기 전에..
- 실습은 윈도우, 안드로이드 스튜디오에서 진행합니다.
- 안드로이드 운영체제를 기준으로 설명합니다.
- flutter의 기본적인 설정(SDK설치 등)이 완료되었다는 가정하에 진행합니다.
Firebase 연동하기
Firestore는 Firebase에 속한 제품이기 때문에, 먼저 Firebase를 사용가능하게 설정해야 합니다. Firebase공식홈페이지에 들어가 구글 아이디로 로그인 합니다. 그후 밑에 화면에 있는 “get started”버튼을 클릭합니다.
그후 밑에 화면에 보이는 프로젝트 만들기를 클릭합니다.
프로젝트 이름은 본인이 원하는 이름을 사용하면 되고,약관 동의 후 ‘계속’ 버튼을 클릭합니다.
다음화면에 나오는 구글 애널리틱스는 우리의 지향점과는 맞지 않으므로 체크를 해제하고 다음 버튼을 클릭합니다.
프로젝트 생성이 완료되면 다음과 같은 화면이 나오게 됩니다. 앞으로의 실습은 안드로이드 운영체제에서 진행되므로 안드로이드 아이콘을 클릭합니다.
버튼을 클릭하면 다음과 같은 화면이 나옵니다. 이제 이 화면은 그대로 두고, 안드로이드 스튜디오를 열어 새로운 flutter 프로젝트를 만들어주세요:)
flutter프로젝트를 만들었으면, <project>/android/app/build.gradle 파일을 열어줍니다.
해당파일의 코드중 아래 보이는 applicationId의 내용을 복사합니다. 이 예제의 경우에는 ga.trialxerror.www.flutter_firestore 이며,이 내용을 다시 홈페이지로 돌아와 Android 패키지 이름에 붙여넣기를 하고 다음 버튼을 누릅니다
android {
...
defaultConfig {
applicationId "ga.trialxerror.www.flutter_firestore"
...
}
...
}
밑에 보이는 다운로드 버튼을 클릭한 뒤, 해당 파일을 <project>/android/app 디렉토리에 추가합니다
다음과 같이 파일이 배치되어야 합니다.
표시해둔 빨간색 부분을 클릭하여 복사한 뒤, 안드로이드 스튜디오의 <project>/build.gradle 파일을 열어 dependencies에 붙여넣기합니다. 그리고 현재 2019년 11월 기준으로 dependencies를 다음과 같이 수정합니다.
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.2'
classpath 'com.google.gms:google-services:4.3.2'
}
}...
표시해둔 빨간색 부분을 클릭하여 복사한 뒤, 안드로이드 스튜디오의<project>/android/app/ build.gradle 파일을 열어 제일 하단에 붙여넣기합니다.
모든과정을 마쳤으면 다음버튼을 클릭하여 다시 콘솔화면으로 돌아옵니다. 이것으로 Firebase연동을 마치고 이어서 Firestore 연동을 해보겠습니다.
Firestore 연동하기
오른쪽 하단에 있는 Cloud Firestore를 클릭합니다. 이후 다음화면에 있는 데이터베이스 만들기 버튼을 클릭합니다.
다음과 같은 창이 나오면 테스트 모드로 체크하고 다음버튼을 누릅니다.
현재 개발자의 지역에 따라 위치를 설정하시면 됩니다.(예제는 한국에서 작성되었으므로 asia-northeast를 선택하였습니다.)
다음과 같은 화면이 나오면 firestore 설정이 완료된 것이고, 마지막으로 flutter와의 연동을 위해 안드로이드 스튜디오로 돌아갑니다.
현재 Firestore패키지의 버전은 0.12.10 입니다. pubspec.yaml 파일을 열고 dependencies에 cloud_firestore: ^0.12.10를 추가합니다. 이후 빨간색으로 표시한 packages get을 눌러 변동사항을 저장합니다.
main.dart 파일을 열고 전체 코드를 아래와 같이 수정한 후, 앱을 실행시켰을때, 정상적으로 작동하면 Firebase 및 Firestore 연동에 성공하신 것입니다. 축하합니다! 다음 포스트에서는 Firebase의 데이터를 다루는 방법에 대해 이야기하겠습니다.
추가)에러가 발생하는 경우
개발자의 환경설정에 따라 다양한 오류가 발생할 수 있습니다. 오류는 다음 두가지 방법 중 하나로 해결해 주세요
- 자주 발생하는 에러는 링크로 표시된 사이트 에서 확인해주세요.
- 구글에 오류내용을 검색하는 방법도 도움 됩니다.