Colin's Blog
[flutter] Firebase Database와 플러터를 이용한 음성 메모 애플리케이션 만들기

이번에는 Firebase Database와 플러터(Flutter)를 이용하여 음성 메모 애플리케이션을 만들어 보겠습니다. Firebase Database는 실시간 데이터베이스로서 스마트폰 애플리케이션의 실시간 데이터 저장 및 동기화를 지원합니다. 플러터는 구글이 개발한 크로스 플랫폼 앱 개발 프레임워크로서, 하나의 코드베이스로 안드로이드와 iOS 애플리케이션을 개발할 수 있습니다.

개발 환경 설정

플러터 개발을 위해 다음의 도구들을 설치해야 합니다.

이번 예제에서는 Android Studio를 사용하여 개발하도록 하겠습니다.

Firebase 프로젝트 준비

먼저 Firebase 프로젝트를 준비해야 합니다. Firebase의 공식 사이트에 접속하여 계정을 만들고 프로젝트를 생성합니다. 생성된 프로젝트에서 Firebase Database를 사용할 수 있도록 설정해야 합니다.

Firebase 프로젝트를 생성하고 Firebase Console에 접속한 후, ‘Database’ 메뉴를 선택하고 ‘실시간 데이터베이스 만들기’를 클릭합니다. 데이터베이스 규칙은 기본값으로 설정하고 ‘다음’ 버튼을 클릭합니다. 이후 데이터베이스 URL을 확인하고 필요한 경우 보안 규칙을 수정할 수 있습니다.

플러터 프로젝트 생성

플러터 개발을 위해 새로운 플러터 프로젝트를 생성합니다. 터미널 또는 명령 프롬프트에서 flutter create memo_app 명령을 실행하여 프로젝트를 생성합니다. 프로젝트 폴더에는 lib 폴더와 pubspec.yaml 파일이 생성됩니다.

Firebase Database 연동

Firebase Database를 사용하기 위해 firebase_database 패키지를 pubspec.yaml 파일에 추가합니다. 아래와 같이 dependencies 섹션에 패키지 정보를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_database: ^9.1.1

플러터 프로젝트 폴더에서 flutter pub get 명령을 실행하여 패키지를 가져옵니다.

이후 Firebase 프로젝트에서 제공되는 google-services.json 파일을 플러터 프로젝트 폴더의 android/app 폴더에 추가합니다.

Firebase Database에 데이터를 읽고 쓰기 위한 클래스를 작성합니다. 예를 들어, Memo 클래스에는 메모의 제목과 내용을 저장하는 변수와 해당 변수에 대한 getter와 setter 함수가 포함되어 있을 수 있습니다.

class Memo {
  String title;
  String content;

  Memo({this.title, this.content});

  Map<String, dynamic> toJson() {
    return {
      'title': title,
      'content': content,
    };
  }

  factory Memo.fromJson(Map<String, dynamic> json) {
    return Memo(
      title: json['title'],
      content: json['content'],
    );
  }
}

Firebase Database로부터 데이터를 읽어오는 함수와 데이터를 쓰는 함수를 작성합니다.

import 'package:firebase_database/firebase_database.dart';

class MemoRepository {
  final DatabaseReference _memoRef = FirebaseDatabase.instance.reference();

  Future<List<Memo>> getMemoList() async {
    DataSnapshot dataSnapshot = await _memoRef.once();
    Map<String, dynamic> jsonMap = dataSnapshot.value;
    List<Memo> memoList = List<Memo>.from(
      jsonMap?.values?.map((x) => Memo.fromJson(x)),
    );
    return memoList;
  }

  Future<void> writeMemo(Memo memo) async {
    await _memoRef.push().set(memo.toJson());
  }
}

음성 메모 앱에서는 로그인 및 회원가입 기능이 필요하므로 Firebase Authentication도 설정해야 합니다. Firebase Console에서 ‘Authentication’ 메뉴로 이동하여 인증 방법을 설정합니다. 이 예제에서는 이메일/패스워드 인증을 사용할 것입니다.

음성 메모 앱 개발

음성 메모 앱을 개발하는 방법에 대해 간략히 설명하겠습니다.

  1. 로그인 및 회원가입 기능을 구현합니다. Firebase Authentication을 사용하여 이메일/패스워드로 로그인 및 회원가입 기능을 구현할 수 있습니다.
  2. 메모 목록을 화면에 표시합니다. Firebase Database에서 데이터를 읽어와서 ListView로 표시할 수 있습니다.
  3. 새로운 메모를 작성하고 Firebase Database에 저장합니다. 사용자가 메모의 제목과 내용을 입력한 후, ‘저장’ 버튼을 누르면 Firebase Database에 메모가 저장됩니다.

이제 개발을 시작할 준비가 모두 끝났습니다. 플러터 개발에 대한 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.

참고 문서:

© 2018 Colin. All rights reserved.