Flutter Instagram Clone #10 Firebase Storage와 Firestore를 이용한 사진 업로드

jakeseo_me·2020년 7월 27일
0

Flutter-Instagram-Clone

목록 보기
10/14

Flutter Instagram Clone #10 Firebase Storage와 Firestore를 이용한 사진 업로드

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

할 일

먼저, 이전에 만들었던 글쓰기 화면에서

  1. 파일을 올리고 종이비행기 모양(send button)을 누르면, 사진이 Storage로 전송된다.
  2. Storage에 파일이 저장되면, 파일을 가리키는 URL을 얻을 수 있다.
  3. 파일을 가리키는 URL과 작성자 정보 등을 DB에 저장한다.

패키지 설치하기

cloud_firestorefirebase_storage를 설치해준다. 각각 현재에 맞는 최신버전으로 설치한다.

2020-07-27일자 기준으로 위와 같은 버전이 최신 버전이라고 나온다. 최신버전은 pub.dev에서 확인 가능하다.

에러 발생 및 해결

이러한 에러가 발생했다 .dex 파일이 64K를 넘어버린 것이다. 이전 포스팅에서 설명한 것처럼 multiDexEnabledtrue로 설정하여, 에러를 해결했다.

앱 수준의 build.gradle(android > app > build.gradle)에 접속하여 defaultConfig 내부의 내용에 multiDexEnabled true를 추가해주면 된다.

그리고 Android Studio 공식문서에서 권장하듯, dependencies에서 implementation 'com.android.support:multidex:1.0.3'도 추가해주었다.

위와 같은 절차를 밟았더니 에러가 무사히 해결됐다.

Firebase Storage에 파일 저장하는 코드 작성하기

Firebase Storage에 파일을 저장하는 방법은

  1. FirebaseStorage의 인스턴스 가져오기
  2. FirebaseStorage 인스턴스의 ref 가져오기
  3. FirebaseStorage 인스턴스의 ref에서 child 메소드를 이용하여 파일 저장 경로 및 이름 지정해주기
  4. FirebaseStorageRef의 putFile 메소드를 이용하여, 실제로 파일 저장하기

위의 과정들을 코드로 변환하면 다음과 같은 코드가 나온다.

이를 기존의 AppBar에 있는 버튼의 onPressed에 입력해주었다.

파일 저장 후 파일 경로 및 정보 Firebase Database에 저장하기

위에서 task라는 변수를 만들어 putFile 메소드의 결과를 저장해두었는데, 그 task가 완료되는 시점을 이용할 수 있다.

taskStorageUploadTask라는 클래스를 반환하는데, 이 클래스는 비동기로 작업을 마무리하여 .onComplete 메소드를 이용하면 그 완료시점에 콜백함수를 넣을 수 있다.

위와 같은 형식으로 코드를 작성할 수 있다.

위는 onComplete의 메소드 설명인데, Future<StorageTaskSnapshot>을 반환하는 것을 볼 수 있다.

Firebase에서 Database 만들기

개발 메뉴에서 Database를 선택하면 바로 데이터베이스 만들기가 보인다. 바로 클릭해서 만들 수 있다.

지금은 개발을 위해 잠시 이용할 것이기 때문에, 테스트 모드로 시작한다. 서버의 위치는 대충 과금이 안되는 곳으로 설정하자.

데이터베이스가 만들어지면 왼쪽의 +컬렉션 시작을 눌러 컬렉션을 시작해보자.

컬렉션 ID에 다음 그림과 같이 아무거나 넣어서 저장해보자.

그러면,

위와 같은 형식으로 저장이 된다.

컬렉션이라는 것이 DB에서 테이블과 비슷한 개념이고, 문서가 테이블에 있는 하나의 데이터라고 생각하면 된다.

이전에 작성한 소스의 내용을 살펴보면

var doc = Firestore.instance.collection('post').document();

위와 같은 부분이 존재하는데, post라는 컬렉션에 데이터를 저장하겠다는 뜻이다.

Firebase FireStorage 사용하기

Database를 사용할 때 처럼 개발의 Storage에 들어가서 시작하기를 누르면 된다.

다음을 누르자.

이렇게 생성이 된다.

Firebase Database에 정보 저장하는 코드 작성하기

대략 위와 같이 작성하면 된다.

user의 정보를 모든 페이지에서 갖고 있지는 않기 때문에 user의 정보를 가져오는 부분을 작성해야 한다. TabPage > SearchPage > CreatePage 순으로 가져오면 된다.

setDataMap 형태의 데이터를 받는데, 간단하게 json 형태로 입력해주면 된다.

그리고, 데이터 입력이 완료됐을 시에는 Navigator.pop() 메소드를 이용하여 화면을 제거해준다.

소스코드 수정이 완료되고 Hot-reload로 앱을 고치면

위와 같은 에러가 뜨기 때문에, 앱을 완전히 껐다가 재시작해준다.

결과 테스트해보기

이렇게 호랑이 사진 하나를 올려보면,

FirebaseStore 에서 잘 올라간 것이 확인 되고,

데이터베이스에도 데이터가 잘 저장된 것을 확인할 수 있다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글