Flutter

flutter Firebase 사용법(안드로이드 스튜디오)

마느아 2021. 8. 24. 13:54
반응형

1. 우선 안드로이드 스튜디오로 새로운 app을 만든뒤 Firebase로 접속한다.

 

Firebase

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

firebase.google.com

2. Firebase 프로젝트 개설

시작하기->프로젝트추가->프로젝트 이름 쓰고 계속-> 계속을 누르면 된다.

그뒤로 구글 애널리틱스는 있다면 그대로 쓰고, 없다면 생성한 뒤, 프로젝트 만들기를 누르면 된다. 

 

3. Firebase와 flutter앱 연동

a. flutter 앱 등록

android-app-build.gradle에 있는 applicationId의 문자열 부분을 안드로이드 패키지이름으로 사용한다.

또한 여기서 minSdkVersion(바로아래) 것을 21로 변경해준다. (20이상이면 변경안해도됨)

앱 닉네임은 아무렇게나 지어도 된다.(영어추천)

디버그 서명 인증서는 아무것도 쓰지 않아야함.

b.  구성 파일 다운로드(json)

주어지는 json파일을 app폴더에 업로드한다.

안드로이드 스튜디오는 그냥 끌어서 올리면 된다.

다음과 같이 올라가면 성공이다.

 

c. Firebase SDK 추가

가장 어려운 부분이다. 이부분에서 그대로 따라해도 안돼서 몇시간을 버렸는지 모르겠다.

필자가 성공한 방법을 그대로 알려줄테니 따라해보자.

 

일단 프로젝트 수준의 build.gradle은 dependencies 부분만 수정한다. 위아래 google은 이미 되어있을 것이다.

그다음 앱 수준의 build.gradle(아까 ID가져온 곳) 에서는 한줄만 추가한다. 공식문서에는 다른것도 추가하라고 하는데, 오히려 오류의 원인이 되더라. 

막줄만 추가하면 된다. 나머지는 위치를 확인하라고 같이 올린다.

그리고 sync now를 하라고 하는데 그런거 없다. 그냥 무시해도 아무 문제 안생긴다. (공식 가이드는 Flutter가 아님)

그 뒤에 다음단계-콘솔로 이동을 누르면 앱 등록이 완료된다.

 

4. Firestore database

좌측 build에 있 Firestore database-> 데이터 베이스 만들기 -> 테스트 모드에서 시작, 다음 -> CheckFirestore 위치는 northeastasia-3로 한다음 다음을 누르면 된다. (마지막은 서버위친데, 아시아로 하는게 좋긴하지만 큰문제는 안생김)

 

차례로 Firestore Database-데이타베이스 만들기- 테스트 모드에서 시작

 

5. Firebase 필요한 라이브러리 설치 

우리는 flutter를 쓰고 있기때문에 아까 3-C과정에서 일부를 넘겼고, 이제 그 일부를 채우러 가야한다.

 

 

FlutterFire | FlutterFire

The official Firebase plugins for Flutter

firebase.flutter.dev

우선 다음 공식사이트로 접속한 뒤, firebase_core, firebase_database, cloud_firestore를 연결시키면 된다.

 

이것들은 pubspec.yaml에다가 다음과 같이 복사하면 되고, 버전은 달라질 수 있으므로, 아까 위에 알려준 공식링크에서 

왼쪽 화면에서 표시해둔 부분을 클릭하면 오른쪽 화면으로 넘어가고, 저 부분을 복사하면 된다.

그 뒤에 pub get을 꼭 눌러주자.

 

6. main.dart 코드 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart'//flutter의 package를 가져오는 코드 반드시 필요
// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';
 
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
 
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget { //MyApp 클래스 선언
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my first app',
      home: MyPage(),
    );
  }
}
 
 
class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        child: Text('button'),
        onPressed: (){
          createData();
        },
      ),
    );
  }
}
 
void createData(){
  final usercol=FirebaseFirestore.instance.collection("users").doc("userkey1");
  usercol.set({
    "username" : "abc",
    "age" : 5,
  });
}
cs

다음 코드를 main.dart에 복붙하자. (테스트용으로 굉장히 대충 만듬)

 

버튼을 눌러본 뒤 firebase에 가보면 다음과 같이 컬렉션이 추가되어있을 것이다. 그러면 당신은 성공한 것이다.

 

7. 마치며

이까지 무사히 왔다면 당신은 firebase의 연동을 성공한 것이다.

이제 본격적으로 firebase사용하는 부분은 다음 포스팅에서 알려 주도록 하겠다.

 

반응형