[flutter] Firebase Firestore와 플러터를 이용한 여행 일지 애플리케이션 만들기
목차
소개
이번 글에서는 Flutter와 Firebase Firestore를 결합하여 간단한 여행 일지 애플리케이션을 만드는 방법을 알아보겠습니다. Flutter는 Google에서 개발한 UI 프레임워크로, 하나의 코드로 iOS와 Android 애플리케이션을 개발할 수 있게 해줍니다. Firebase Firestore는 Google의 클라우드 데이터베이스로, 실시간 데이터 동기화 및 데이터 관리를 제공합니다.
Firebase Firestore 설정
Firebase Firestore를 사용하기 위해 프로젝트를 생성하고 설정해야 합니다. Firebase 콘솔에서 새 프로젝트를 생성한 후, 앱을 추가하고 Firebase SDK 설정 파일을 다운로드합니다. Firebase 프로젝트 설정에 대한 자세한 내용은 Firebase 문서를 참조하세요.
플러터 프로젝트 생성
Flutter SDK를 설치하고 Flutter 프로젝트를 생성합니다. Flutter SDK 설치에 대한 자세한 내용은 Flutter 공식 문서를 참조하세요. Flutter 프로젝트를 생성하기 위해 다음 명령어를 실행합니다:
flutter create travel_journal_app
Firebase Firestore 연동
- pubspec.yaml 파일을 열고
firebase_core와cloud_firestore패키지를 추가합니다:
dependencies:
flutter:
sdk: flutter
firebase_core: ^0.9.0
cloud_firestore: ^2.7.0
- Firebase SDK 설정 파일을
android/app및ios/Runner폴더에 추가합니다. - main.dart 파일에서 Firebase 초기화를 수행합니다:
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
- Firebase Firestore 연결을 확인하기 위해 다음 코드를 추가합니다:
import 'package:cloud_firestore/cloud_firestore.dart';
void getTravelJournals() {
CollectionReference travelJournals =
FirebaseFirestore.instance.collection('travel_journals');
travelJournals.get().then((QuerySnapshot querySnapshot) {
querySnapshot.docs.forEach((doc) {
print(doc['title']);
});
});
}
여행 일지 애플리케이션 UI 개발
lib폴더 내에screens폴더와models폴더를 생성합니다.models폴더 내에travel_journal.dart파일을 생성하고 다음 코드를 추가합니다:
class TravelJournal {
final String title;
final String description;
TravelJournal({required this.title, required this.description});
}
screens폴더 내에home_screen.dart파일을 생성하고 다음 코드를 추가합니다:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/travel_journal.dart';
class HomeScreen extends StatelessWidget {
final CollectionReference travelJournals =
FirebaseFirestore.instance.collection('travel_journals');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Travel Journal'),
),
body: StreamBuilder<QuerySnapshot>(
stream: travelJournals.snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView.builder(
itemCount: snapshot.data!.size,
itemBuilder: (BuildContext context, int index) {
final TravelJournal travelJournal = TravelJournal(
title: snapshot.data!.docs[index]['title'],
description: snapshot.data!.docs[index]['description'],
);
return ListTile(
title: Text(travelJournal.title),
subtitle: Text(travelJournal.description),
);
},
);
},
),
);
}
}
lib폴더 내에main.dart파일을 열고 다음 코드로 교체합니다:
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Travel Journal App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
결론
이제 Firebase Firestore와 Flutter를 사용하여 간단한 여행 일지 애플리케이션을 만들었습니다. Firebase Firestore를 사용하면 데이터베이스 작업을 쉽게 수행할 수 있고, Flutter는 멋진 UI를 개발하는 데 도움을 줍니다. 여행 일지 애플리케이션을 더욱 확장하고 발전시킬 수 있습니다.