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

Flutter로 ToDo앱 클라우드DB로 연결하기 (feat. Firebase)

by 어느덧중반 2020. 5. 23.
반응형

지난 번 만든 ToDo 앱은 종료를 하게 되면 데이터가 초기화될 것이다.

다음으로 클라우드DB인 Firebase와 연동하여 데이터를 관리해보자.

 

1. Firebase 연동하기 (android, iOS)

2. Firestore 설정


1. Firebase 연동하기

- firebase.google.com 구글계정 로그인 후 시작하기 버튼 클릭

- 프로젝트 추가

- 프로젝트 이름 작성 후 계속 버튼 클릭

- Google 애널리틱스 체크해제 후 프로젝트 만들기 클릭

- 생성 완료

- 안드로이드 버튼 클릭

- android > app > build.gradle : applicationId 복사

- 앱 등록 경로에 붙여넣기 후 앱 등록 클릭

- 다음 화면에서 google-services.json 받고 android > app 폴더에 옮기기

- dependencies 안에 classpath 우측 복사버튼 클릭

- android > build.gradle 파일 중간에 붙여넣기

- apply plugin : 'com.google.gms.google-services' 우측 복사 버튼 클릭

- android > app > build.gradle 최하단에 붙여넣기

 

- 다음 버튼 클릭

- 추가 완료

 

- iOS 버튼 클릭

- android > app > build.gradle : applicationId 복사

- ios > 우클릭 > Flutter > Open iOS module in Xcode > Runner > Build Identifier 복사

- 앱 등록 경로에 붙여넣기 후 앱 등록 클릭

- 다음 화면에서 GoogleServices-Info.plist 받고 ios > Runner 폴더에 추가하기

  iOS > Runner > 마우스 우클릭 : Reveal in finder > Runner.xcodeproj 실행

  1. Podfile이 없으면 하나 만듭니다.

    cd your-project-directory

     

    pod init

     

  2. 앱에 사용할 pod를 Podfile에 추가합니다. 예를 들어 애널리틱스의 경우는 다음과 같습니다.

    pod 'Firebase/Analytics'

     

    이 pod는 iOS 앱에서 Firebase 및 Firebase용 Google 애널리틱스를 사용하기 위한 필수 라이브러리를 추가합니다.

  3. pod를 설치하고 .xcworkspace 파일을 열어 Xcode에서 프로젝트를 확인합니다.

    pod install

     

    open your-project.xcworkspace

 

 

  * trouble shooting : iOS는 단순히 파일을 폴더에 옮기면 끝이 아니라 cocoapod 실행해줘야 함

  Android studio > terminal > pod repo update > sudo gem install cocoapods

 

- dependencies 안에 classpath 우측 복사버튼 클릭

- android > build.gradle 파일 중간에 붙여넣기

- apply plugin : 'com.google.gms.google-services' 우측 복사 버튼 클릭

- android > app > build.gradle 최하단에 붙여넣기

 

- 다음 버튼 클릭

- 추가 완료

 

 

2. Firestore 설정

- 주황색 Cloud Firestore 클릭

- 데이터베이스 만들기 클릭

- 테스트 모드로 시작 체크 후 다음 클릭

- 위치 기본값으로 완료 클릭

- 만들어진 파이어베이스 콘솔에서의 Firestore 설정 완료

- Flutter에서 사용하기 위해 pubspec.yaml 파일에 cloud_firestore 추가하고 'Pub get' 클릭

 

반응형

댓글