Firebase와 Flutter 연동

2강: Firebase와 Flutter 연동

이번 강의에서는 Firebase와 Flutter를 연결하고, Firestore와 Storage를 설정하여 사용자가 입력한 데이터를 저장하고, 이후 생성된 음악 파일을 저장할 준비를 합니다.

---

1. Firebase 프로젝트 생성 및 초기 설정

1. Firebase Console에서 프로젝트 생성

   • Firebase Console에 접속하여 새 프로젝트를 생성합니다.
   • 프로젝트 생성 후, Firestore와 Authentication, Storage 기능을 활성화합니다.

2. Flutter 앱에서 Firebase 설정

   • Firebase Console의 프로젝트 설정으로 이동하여 Flutter 앱을 추가하고, google-services.json 파일을 다운로드하여 Flutter 프로젝트의 android/app 디렉터리에 위치시킵니다.
   • Firebase SDK에 필요한 설정을 build.gradle 파일에 추가합니다.
     • android/build.gradle 파일의 dependencies 섹션에 다음을 추가:

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

     • android/app/build.gradle 파일의 최하단에 다음을 추가:

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

3. Firebase SDK 패키지 추가

   • pubspec.yaml 파일에 Firebase SDK 관련 패키지를 추가합니다.

     dependencies:
       firebase_core: latest_version
       cloud_firestore: latest_version
       firebase_auth: latest_version
       firebase_storage: latest_version

   • flutter pub get 명령어로 패키지를 설치합니다.

4. Firebase 초기화 코드 추가

   • main.dart 파일에서 Firebase를 초기화하고, Flutter 앱을 실행합니다.

   • 아래 코드를 참고하여 main.dart에 추가합니다:

     import 'package:flutter/material.dart';
     import 'package:firebase_core/firebase_core.dart';
     
     void main() async {
       WidgetsFlutterBinding.ensureInitialized();
       await Firebase.initializeApp();
       runApp(MyApp());
     }
     
     class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Music Generator',
           home: Scaffold(
             appBar: AppBar(title: Text('Music Generator')),
             body: Center(child: Text('Firebase Initialized!')),
           ),
         );
       }
     }

5. Firebase 초기화 테스트

   • 앱을 실행하여 오류 없이 초기화 메시지가 출력되면 Firebase와 Flutter의 연동이 완료된 것입니다.

---

2. Firestore 데이터베이스와 Storage 설정

1. Firestore 데이터베이스 구조

   • keywords라는 컬렉션을 생성하여 사용자가 입력한 키워드를 저장합니다.
   • 각 문서에는 다음과 같은 필드가 포함될 수 있습니다:
     • keyword: 사용자가 입력한 키워드 (String)
     • status: 현재 상태 (예: “pending”, “generated”, “registered” 등)
     • fileUrl: 생성된 음악 파일의 URL (String)

2. Firestore에 데이터 저장

   • 사용자가 키워드를 입력하고 Firestore에 저장하는 코드를 작성합니다. 예시 UI와 코드:

     import 'package:cloud_firestore/cloud_firestore.dart';
     import 'package:flutter/material.dart';
     
     class KeywordInputPage extends StatelessWidget {
       final TextEditingController _controller = TextEditingController();
     
       Future<void> _saveKeyword(String keyword) async {
         await FirebaseFirestore.instance.collection('keywords').add({
           'keyword': keyword,
           'status': 'pending',
         });
       }
     
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(title: Text('Enter a Keyword')),
           body: Padding(
             padding: const EdgeInsets.all(16.0),
             child: Column(
               children: [
                 TextField(
                   controller: _controller,
                   decoration: InputDecoration(labelText: 'Enter keyword'),
                 ),
                 ElevatedButton(
                   onPressed: () {
                     final keyword = _controller.text;
                     if (keyword.isNotEmpty) {
                       _saveKeyword(keyword);
                       _controller.clear();
                       ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                         content: Text('Keyword saved!'),
                       ));
                     }
                   },
                   child: Text('Save'),
                 ),
               ],
             ),
           ),
         );
       }
     }

3. Firebase Storage 설정

   • 생성된 음악 파일을 저장할 Storage에 대한 규칙을 설정합니다.
   • Firebase Console의 Storage 섹션으로 이동해 storage.rules에서 인증된 사용자만 접근할 수 있도록 규칙을 설정합니다:

     rules_version = '2';
     service firebase.storage {
       match /b/{bucket}/o {
         match /{allPaths=**} {
           allow read, write: if request.auth != null;
         }
       }
     }

---

3. Flutter에서 Firebase Storage에 파일 업로드 및 URL 저장

• FastAPI 서버에서 생성된 음악 파일을 Firebase Storage에 저장할 때 사용할 수 있도록 Storage 경로와 파일 URL을 준비합니다.
• Flutter 앱에서는 Firestore에 저장된 fileUrl을 통해 음악 파일을 접근하고, 이를 사용자가 재생 및 다운로드할 수 있도록 준비합니다.

---

이번 강의 요약

• Firebase와 Flutter를 연결하고, Firestore 및 Storage를 설정하여 데이터 저장소를 구성했습니다.
• Flutter에서 사용자가 입력한 키워드를 Firestore에 저장하는 UI를 구현했습니다.

다음 강의에서는 사용자 입력 처리 및 음악 생성 요청 과정을 다루며, Flutter 앱에서 사용자가 입력한 키워드를 FastAPI 서버로 전달하여 음악 생성 프로세스를 시작하도록 설정하겠습니다.