플러터로 SNS어플 만들기 9.데이터베이스 만들기-파이어베이스 파이어스토어(firebase-firestore) 연결하기 1

자 드디어 데이터 베이스 라는걸 써볼거에요.

 

앱이든 웹이든

 

클라이언트와

서버 

 

가 있어요.

 

클라이언트는 사용자눈에 보이는 모든걸 다룬다고 보면되고

서버는 뒤에 돌아가는거라고 하는데

이렇게 말하면 좀 추상적이긴하네요

 

어쨋든 우리는 지금 클라이언트 부분을 하고있었어요. 그런데 클라이언트에서 쓰는 대부분을 서버에서 받아와요.

처음엔 뭔말이야하겠지만 하다보면서 또 하다보면 그냥 직감적으로 쉽게 개념이 찾아와요,

모든지 처음엔 낯설지만 지식의 퍼즐이 맞춰지면서 잘 이해가 되니 

 

어쨋든 시작합니다.

 

오늘의 작업내용

 

1. Firebase 란

2. Firebase 프로젝트 추가하기

3. Firebase 프로젝트에 앱등록하기

4. google-services.json 파일 다운받기

5. project 수준의 build.gradle 파일 설정하기

6. app 수준의 build.gradle 파일 설정하기

7. FireStore (데이터베이스) 생성하기

8. FireStore 라이브러리 등록하기

 

 

1. Firebase 란

 

지금까지 우리가 하드코딩으로 앱을 만들고 있었어요. 좋아요 갯수라던지 제목이라던지 글쓴이 아이디라던지

모두 하드코딩으로 임의로 적었어요. 하드코딩의 의미가 이게 맞는지 모르겠는데 저는 그렇게 말해요.

서버에서 받아온 데이트를 기반으로 보여주는것이 아닌 내가 임의적으로 직접 쳐서 넣는작업이요.

 

그런데 이제는 데이터베이스에서 가져올거에요. 서버라는 곳에 데이터베이스가 있어요.

서버는 주는 사람 이라는 뜻이니까 주는사람이 데이터베이스를 준다. 뭐 이런식으로 생각하면되겠죠.

저는 서버를 firebase를 이용해요. 그리고 firestore 라는 데이터 베이스를 사용하죠.

예전에는 서버를 직접 만들었는데, 요즘은 아마존이나 구글에서 데이터베이스 등 서버에서 사용하는 기술들을 전부 넣은 그것도 아주 잘만든놈을 만들어서, 사용량 만큼 돈을 받고 있어요.

 

개발자 입장에서는 처음에 힘들게 서버만들고 하는것보다 돈 조금주고 이용하는게 낫죠.

그리고 돈 조금든다고했는데 처음에 개발하고 어느정도 사용할때까지 돈이 아에 안들어요.

그러다가 돈을 벌수있을정도의 서비스가 될때쯤 과금이 발생하죠

그래서 이런거 쓰는게 좋아요. 편하기도하고..

근데 엄청나게 큰 서비스를 이용할때는 이거 이용하면 돈많이드니 그때는 서버기술을 익혀서 직접 서버를 만드심되요.

 

어쨋든 이런 서버 서비스를 해주는 대표적인곳이 아마존의 AWS ,구글의 Firebase 가 있는데 저는 Firebase를 이용합니다.

 

 

구글에 firebase를 검색하고 들어갑니다. 

 

 

로그인 하시고 콘솔로 이동을 눌러 들어가주세요.

 

2. Firebase 프로젝트 추가하기

 

프로젝트 추가를 눌러주세요.

오른쪽에 뜨는것들 저게 한개한개의 프로젝트 들이에요.

저는 이미 2개의 프로젝트가 있죠.

이제 한개 더만들면 3개가 되겠죠.

 

 

 

프로젝트 이름을 적어주세요.

프로젝트 이름을 영어로 적어주면 되는데, 자기가 만들앱 이름으로 하면되겟죠.

 

 

구글 애널리틱스인데

이거는 안해도되요.

근데 하게되면 애널리틱스 아이디도 필요하고 하긴한데,

귀찮아서 그냥 안하는데,

어쨋든 나중에 하는걸로 바꿀수있어요.

 

저는 그냥할게요. 프로젝트 만들기를 눌러주세요.

 

그러면 뭐 뺑뺑이 돌아가면서 시간이 좀걸러요.

 

이렇게 새프로젝트가 만들어졌어요.

 

 

 

 

프로젝트는 만들어 졌으나, 프로젝트에 속한 앱이 없어요.

그게 무슨말이냐.

한개의 프로젝트에 여러앱을 등록할수있어요. 서버 공유한다는거죠.

앱뿐만아니라, 웹 도 등록할수가 있죠.

 

3. Firebase 프로젝트에 앱등록하기

 

어쨋든 우리는 최소 3개는 등록해줘야되요.

안드로이드 앱, IOS앱, 안드로이드 관리자용 앱 

이렇게 3개 할거에요. 안드로이드 관리자용 앱은 서버에 뭐 특별한거 올릴때쓸거에요. 웹을 좀 다룰줄 아신다면 관리자용으로 쓰는거는 웹으로 하심 되겠네요. 어쨋든 나중에 만들건데

 

일단은 안드로이드 앱 1개만 등록해봅시다.

저기 안드로이드 처럼 보이는거를 클릭해주세요.

 

 

다른건 딱히 안중요한데 저기 패키지 이름 적는곳이 중요해요.

저거는 맨처음 안드로이드 스튜디오에서 패키지 생성할때 적었던거에요.

프로젝터 생성을 한뒤부터 포스트가 진행됫으니 같이 하지는 않았네요.

 

어쨋든 패키지 명이 기억이 안나시면 여기로 들어가주세요.

 

 

플러터로 SNS어플 만들기 4. 실제 단말기연결,앱 아이콘 만들기

할때 오늘의 작업내용 5번째에 라벨 변경하기 부분에서 AndroidManifest.xml 라는 파일을 열었던거 기억하시나요?

어쨋든 거기 가보면 저기 떡하니 패키지 이름이 적혀있어요. 저걸 복사합니다.

 

 

그리고 계속이어서, firebase 앱등록 부분에 패키지 이름부분에 복붙해서 넣어주시고앱 닉네임을 적어주세요. 아무거나 하면되는데 저는 안드로이드 유저앱 이라는의미로AOS유저앱 이라고 해줬어요.아래에 디버그 서명 인증서 저거는 나중에 할거에요.일단 저렇게만하고 앱 등록 눌러주세요.

 

 

4. google-services.json 파일 다운받기

 

저 파일을 다운받아주세요.

저파일이 굉장히 중요합니다.

 

저는 바탕화면에 이렇게 파일을 만들어주고 저기에다가 다운받았어요.

 

그리고 android 폴드 아래의 app폴더 안에다가 집어넣어줍니다.

그럼 왼쪽 사진에서 오른쪽사진처럼 됫겠죠?

 

그럼 여기서 조금 해깔릴수 있는데요,

build.gradle 빌드그래들 이라는놈이 2개가 있어요.

 

project 수준의 build.gradle 이라는 뜻은

project-mynephew(각자다름)-android-build.gradle 이구요

 

app 수준의 build.gradle 이라는 뜻은

project-mynephew(각자다름)-android-app-build.gradle 입니다.

 

엄연히 다른 파일이니까 해깔리면 안됩니다.

 

 

5. project 수준의 build.gradle 파일 설정하기

 

그러면, 먼저 project 수준의 build.gradle 파일에 들어옵니다.

그래서 dependencies 부분에 빨강박스를 추가해줍니다.

 

classpath 'com.google.gms:google-services:4.3.8'

 

근데 지금 글을 적는 시점에서는 저런데, 1달 뒤에는 어떻게 바뀔지 모르니까, 

가이드를 항상 따라가세요

 

저도 아래 가이드 보고 말씀드리는 겁니다.

 

6. app 수준의 build.gradle 파일 설정하기

 

그다음은 app수준의 build.gradle로 들어옵니다.

저기 보라색 네모박스 친거를 추가해줍니다.

 

apply plugin: 'com.google.gms.google-services'

 

 

그리고 그아래에 이걸 추가해줍니다.

 

dependencies {
implementation platform('com.google.firebase:firebase-bom:28.0.1')
implementation 'com.google.firebase:firebase-analytics'
}

 

*빌드 그래들 에 뭐적고 이러면 빨강글씨로 오류가 나오는데 그거는 그냥 가볍게 무시해주시면 됩니다.

 

 

다음을 눌러주세요.

 

콘솔로 이동을 눌러주세요.

그러면 firebase에 앱등록이 완성됩니다.

 

그리고 앞으로 "콘솔에서 작업한다" 라고 하면 firebase에 직접들어와서 조작한다는 의미로 생각하시면됩니다.

 

 

콘솔로 이동하면, 아무것도 없을겁니다.

 

7. FireStore (데이터베이스) 생성하기

 

맨처음 말씀한거 처럼 firebase는 서버 서비스 이고,

우리가 사용할거는 데이터 베이스이니 firebase 에서 제공하는 데이터베이스 서비스인

fireStore 라는것을 이용해봅시다.

 

(예전에는 realTimeDatabase 라는걸 데이터베이스 서비스로 이용했었습니다.

지금은 fireStore를 주력으로 서비스합니다.)

 

왼쪽 빨강색 동그라미 친부분을 눌러주세요.

이게 파이어스토어 입니다.

 

데이터베이스 만들기를 눌러주세요.

 

 

 

 

테스트 모드에서 시작을 눌러주시고 다음을 눌러주세요.

 

 

Cloud Firestore 위치에

asia-norteast3 을 선택해주세요.

 

이건 데이터베이스 센터의 위치입니다.

자신이 어느곳에 서비스할것인지를 생각하고 하면되는데

asia-norteast3 가 한국이라고 하길래 저걸햇습니다.

 

 

사용설정을 눌러주세요.

그러면 프로비저닝중 하면서 시간이 조금 걸립니다.

 

끝나게되면 이런 화면이 나옵니다.

 

지금은 데이터가 하나도 없네요.

 

 

8. FireStore 라이브러리 등록하기

 

구글에 flutter cloud_firestore 라고 검색합니다.

그리고 저걸 pubspec 에 등록하고  pub get 해주세요

 

 

그다음 다시 런을 해보면

이렇게 dex file 오류가 생깁니다.

 

현재 singledex 로 되어있는데 이걸 multidex로 바꿔줘야해요

 

 

그래서 따로 multidex를 한다고 해줘도 되지만,

 

minSdkVersion 을 현재 16에서 21로 바꿔주기만 하면 바로 해결되는 문제입니다.

그 이유는 sdk 21 버전부터는 기본적으로 multidex 이기 때문이에요.

그래서 다른거하지말고 그냥 minSdkVersion 을 21로 바꿔줍니다.

 

그러면 21버전 이하의 기계에서는 안돌아가는데 버전 21도 굉장히 옜날꺼에요. 2015년도꺼?

그때이전꺼는 안돌아간다는거죠. 그래서 16으로 나두고 싶을수도 있지만

근데 어차피 나중에 다른 라이브러리 쓸때 어차피 21이상으로 올려야할경우가 있기때문에 그냥 21로 해주도록 합시다.

 

그러면 다시 빌드가 됩니다.

 

그다음 main 다트페이지로 와주세요.

import 에 직접

import 'package:firebase_core/firebase_core.dart'; 을 적어주세요.

 

void main()async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}

 

그리고 이렇게 main 함수를 고쳐주세요.

async 와 await 가 나오는데 굉장히 중요한 개념입니다.다음포스팅에 동기 비동기 이야기하면서 다시 이야기할테니일단 그냥 적어주세요.

 

 

자 여기까지 이번 포스팅을 마치고,

다음 포스트에는 직접 한번 사용해보도록 하겠습니다.