개요
이번 포스트에서는 Firebase Firestore와 플러터(Flutter)를 이용하여 일정 관리 애플리케이션을 만들어보겠습니다. Firebase Firestore는 실시간 데이터베이스 역할을 하며, 플러터는 사용자 인터페이스(UI)를 개발하기 위한 프레임워크입니다. 이 두 가지를 결합하여 간단한 일정 관리 애플리케이션을 개발해보겠습니다.
준비물
- Flutter 개발환경 세팅 (https://flutter.dev/docs/get-started/install)
- Firebase 프로젝트 생성 (https://console.firebase.google.com/)
- Firebase Flutter 패키지 추가 (https://firebase.flutter.dev/docs/overview)
애플리케이션 구조
애플리케이션은 다음과 같은 구조로 개발될 것입니다.
- lib
- main.dart
- models
- event.dart
- screens
- home_screen.dart
- services
- firestore_service.dart
각 파일의 역할은 다음과 같습니다.
main.dart: 애플리케이션 진입점 및 라우팅 설정models/event.dart: 일정 데이터 모델screens/home_screen.dart: 홈 화면 UI 및 일정 데이터 표시services/firestore_service.dart: Firebase Firestore와의 통신을 위한 서비스
Firebase Firestore 설정
- Firebase 프로젝트에 Firestore 데이터베이스를 생성합니다.
- Firebase 콘솔에서 “프로젝트 설정”으로 이동하여 앱에 대한 구성 파일(
google-services.json또는GoogleService-Info.plist)을 다운로드합니다. - 다운로드한 파일을
android/app또는ios/Runner폴더에 복사합니다.
Firestore Service 작성
firestore_service.dart 파일을 생성하고, Firebase Firestore와의 통신을 위한 서비스를 작성합니다.
import 'package:cloud_firestore/cloud_firestore.dart';
class FirestoreService {
final CollectionReference _eventsCollection =
FirebaseFirestore.instance.collection('events');
Future<List<Event>> getEvents() async {
var snapshot = await _eventsCollection.get();
return snapshot.docs.map((doc) => Event.fromSnapshot(doc)).toList();
}
// 다른 CRUD 메서드를 여기에 추가할 수 있습니다.
}
위의 코드에서 Event는 일정 데이터 모델을 나타냅니다. Firestore에서 데이터를 가져올 때, Event 객체로 변환하여 사용할 것입니다.
Home 화면 UI 작성
home_screen.dart 파일을 생성하고, 홈 화면의 UI와 일정 데이터를 표시하는 기능을 개발합니다.
import 'package:flutter/material.dart';
import 'package:flutter_firebase_firestore/models/event.dart';
import 'package:flutter_firebase_firestore/services/firestore_service.dart';
class HomeScreen extends StatelessWidget {
final FirestoreService _firestoreService = FirestoreService();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('일정 관리'),
),
body: FutureBuilder<List<Event>>(
future: _firestoreService.getEvents(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Event event = snapshot.data[index];
return ListTile(
title: Text(event.title),
subtitle: Text(event.description),
);
},
);
} else if (snapshot.hasError) {
return Text('데이터를 불러올 수 없습니다.');
} else {
return CircularProgressIndicator();
}
},
),
);
}
}
위의 코드에서는 FutureBuilder를 사용하여 Firestore로부터 일정 데이터를 비동기로 가져오고, 가져온 데이터를 리스트로 표시합니다. 데이터가 로딩 중일 때는 로딩 스피너를 보여주고, 데이터를 가져오는데 실패하면 에러 메시지를 표시합니다.
애플리케이션 실행
애플리케이션을 실행하기 위해 main.dart 파일을 다음과 같이 작성합니다.
import 'package:flutter/material.dart';
import 'package:flutter_firebase_firestore/screens/home_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '일정 관리 앱',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
애플리케이션을 실행하면 홈 화면에서 Firebase Firestore로부터 일정 데이터를 가져와 리스트로 표시됩니다.
마치며
Firebase Firestore와 플러터를 활용하여 일정 관리 애플리케이션을 구축하는 방법에 대해 알아보았습니다. Firebase Firestore를 사용하면 실시간으로 데이터를 업데이트할 수 있고, 플러터를 사용하면 사용자 친화적인 UI를 쉽게 만들 수 있습니다. 이러한 기술을 활용하여 다양한 종류의 애플리케이션을 개발할 수 있습니다.