[flutter] Firebase Database와 플러터를 이용한 책 추천 애플리케이션 만들기

30 Nov 2023

flutter

개요

이번에는 Firebase Database와 플러터(Flutter)를 사용하여 책 추천 애플리케이션을 만들어 보겠습니다. Firebase Database는 실시간 데이터베이스로, 실시간으로 데이터를 동기화 할 수 있으므로 책 추천 애플리케이션에 적합한 서비스입니다. 플러터는 구글에서 개발한 UI 프레임워크로, 크로스 플랫폼 개발을 지원하여 iOS와 Android 애플리케이션을 동시에 개발할 수 있습니다.

필요한 패키지 설치하기

플러터에서 Firebase Database를 사용하기 위해서는 firebase_database 패키지를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치해주세요.

flutter pub add firebase_database

Firebase 프로젝트 설정하기

Firebase 콘솔(https://console.firebase.google.com)에 접속하여 프로젝트를 생성합니다.
프로젝트 설정에서 “앱 추가”를 선택하여 Android 및 iOS 앱을 추가합니다. 이때, 각 앱의 패키지명(Android) 및 번들 식별자(iOS)를 입력해야 합니다.
Firebase 콘솔의 “프로젝트 설정” 페이지에서 “서비스 계정” 탭으로 이동하여 “새 비공개 키 생성”을 클릭합니다. 비공개 키 파일이 다운로드됩니다.

프로젝트에 Firebase 설정하기

Android 프로젝트:

android/app/build.gradle 파일에 다음 코드를 추가합니다.

dependencies {
  // ...
  implementation 'com.google.firebase:firebase-database:VERSION'
}

android/app/src/main/AndroidManifest.xml 파일에 다음 코드를 추가합니다.

<application ...>
  <!-- ... -->
  <meta-data
      android:name="com.google.firebase.database.collectionDebUrl"
      android:value="https://firestore.googleapis.com/" />
  <!-- ... -->
</application>

android/app/src/main/java/[YOUR_PACKAGE_NAME]/MainActivity.java 파일에 다음 코드를 추가합니다.

import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.plugins.firebase.database.FirebaseDatabasePlugin;

public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        FirebaseDatabasePlugin.registerWith(flutterEngine.getPlugins().get(FirebaseDatabasePlugin.class));
    }
}

iOS 프로젝트:
- ios/Podfile 파일을 열고 다음 코드를 추가합니다.
```
pod 'Firebase/Database'
```
- 터미널에서 cd ios 명령어를 입력한 후 pod install 명령어를 실행하여 팟을 설치합니다.

플러터 코드에서 Firebase 초기화하기

플러터 코드에서 Firebase를 사용하기 전에 초기화 작업이 필요합니다. main() 함수에서 다음 코드를 추가합니다.

import 'package:firebase_core/firebase_core.dart';

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

Firebase Database 사용하기

이제 Firebase Database를 사용하여 책 추천 애플리케이션을 만들어 보겠습니다. Firebase Database에는 책의 제목, 저자, 출판사 등의 정보가 포함된 “books”라는 이름의 컬렉션을 생성하고, 해당 컬렉션에서 책 정보를 읽어와 화면에 표시하는 단순한 애플리케이션을 만들어 보겠습니다.

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

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

class MyApp extends StatelessWidget {
  final databaseReference = FirebaseDatabase.instance.reference();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Book Recommendation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Book Recommendation'),
        ),
        body: Center(
          child: FutureBuilder(
            future: databaseReference.child('books').once(),
            builder: (BuildContext context, AsyncSnapshot<DataSnapshot> snapshot) {
              if (snapshot.hasData) {
                List<dynamic> books = snapshot.data!.value;
                return ListView.builder(
                  itemCount: books.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Text(books[index]['title']),
                      subtitle: Text('${books[index]['author']} - ${books[index]['publisher']}'),
                    );
                  },
                );
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

위 코드에서 FirebaseDatabase.instance.reference()를 사용하여 Firebase Database의 레퍼런스를 가져온 후, databaseReference.child('books').once()를 호출하여 “books” 컬렉션의 데이터를 가져옵니다. 그 후, FutureBuilder를 사용하여 데이터를 비동기적으로 가져와 화면에 표시합니다.

마무리

이제 Firebase Database와 플러터를 사용하여 책 추천 애플리케이션을 만들어 보았습니다. Firebase Database를 사용하면 쉽고 간편하게 실시간 데이터베이스 서비스를 구현할 수 있으며, 플러터는 크로스 플랫폼 개발을 지원하여 한 번의 작업으로 iOS와 Android 애플리케이션을 동시에 개발할 수 있습니다.

더 많은 Firebase Database와 플러터 관련 기능을 알아보려면 아래 링크를 참고하세요:

Firebase Database 문서: https://firebase.flutter.dev/docs/database/overview

좋은 애플리케이션 개발에 도움이 되길 바랍니다!