파이어베이스에서 데이터를 플러터에서 캐싱[ Hive 패키지 로컬 스토리지 이용 ]

 

Hive 패키지를 사용하여 Firebase 데이터베이스와 로컬 데이터베이스를 동기화하고 캐싱하는 방법을 설명드리겠습니다.

Hive는 경량 키-값 저장소로, Flutter 애플리케이션에 로컬 저장소를 구현하는 데 유용합니다.

1. 패키지 설치

먼저 pubspec.yaml 파일에 다음 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.5.2
  firebase_database: ^9.1.0
  hive: ^2.2.3
  hive_flutter: ^1.1.0
  path_provider: ^2.0.12

2. Firebase 초기화

Firebase를 초기화하는 코드를 main.dart 파일에 추가합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'firebase_options.dart';
import 'item_model.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  await Hive.initFlutter();
  Hive.registerAdapter(ItemAdapter());
  await Hive.openBox<Item>('itemsBox');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. Hive 데이터 모델 정의

Hive 데이터 모델을 정의합니다. 예를 들어 item_model.dart 파일을 만듭니다.

import 'package:hive/hive.dart';

part 'item_model.g.dart';

@HiveType(typeId: 0)
class Item extends HiveObject {
  @HiveField(0)
  final String id;

  @HiveField(1)
  final String value;

  Item({required this.id, required this.value});
}

그리고 item_model.g.dart 파일을 생성해야 합니다. 터미널에서 flutter packages pub run build_runner build 명령을 실행하여 이 파일을 생성합니다.

4. Firebase 데이터 읽기 및 Hive에 캐싱

이제 Firebase Realtime Database에서 데이터를 읽어와서 Hive에 캐싱하는 방법을 살펴보겠습니다.

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final databaseReference = FirebaseDatabase.instance.reference();
  Box<Item>? itemsBox;

  @override
  void initState() {
    super.initState();
    itemsBox = Hive.box('itemsBox');
    syncData();
  }

  Future<void> syncData() async {
    databaseReference.child('items').onValue.listen((event) async {
      var snapshot = event.snapshot;
      Map<dynamic, dynamic>? items = snapshot.value as Map<dynamic, dynamic>?;

      if (items != null) {
        await itemsBox!.clear();
        items.forEach((key, value) async {
          await itemsBox!.put(key, Item(id: key, value: value['value']));
        });
      }
      setState(() {});
    });
  }

  Future<List<Item>> getItemsFromCache() async {
    return itemsBox!.values.toList().cast<Item>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: FutureBuilder(
        future: getItemsFromCache(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else if (snapshot.hasData) {
            List<Item> items = snapshot.data as List<Item>;
            return ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].value),
                );
              },
            );
          } else {
            return Text('No data');
          }
        },
      ),
    );
  }
}

5. 데이터 동기화 및 삭제 처리

Firebase에서 데이터가 변경되거나 삭제될 때 로컬 데이터베이스도 자동으로 갱신됩니다. onValue 리스너를 통해 데이터가 변경될 때마다 Hive 데이터베이스를 업데이트합니다.

위 코드에서 syncData 함수는 Firebase 데이터베이스의 변경 사항을 듣고, 변경된 데이터를 Hive 데이터베이스에 동기화합니다.

결론

이렇게 하면 Flutter 앱이 Firebase와 동기화된 데이터를 로컬에 캐싱하고, Firebase에서 데이터가 변경될 때 이를 반영할 수 있게 됩니다. Hive를 사용하여 로컬 데이터를 저장하고 관리하며, Firebase Realtime Database와 동기화하여 항상 최신 데이터를 유지할 수 있습니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱