개요

이번 튜토리얼에서는 Firebase Database와 Flutter를 활용하여 여행 일지를 작성하고 저장할 수 있는 애플리케이션을 만들어보겠습니다. Firebase Database는 클라우드 기반의 NoSQL 데이터베이스로, 실시간으로 데이터를 동기화하고 관리할 수 있기 때문에 여행 일지와 같은 애플리케이션에 적합합니다.

준비 사항

• Flutter SDK 설치
• Firebase 프로젝트 생성 및 애플리케이션 등록
• Flutter 프로젝트 생성

Firebase Database 설정

1. Firebase 콘솔에서 새로운 프로젝트를 만듭니다.
2. 프로젝트 설정으로 이동하여 Firebase Database를 활성화합니다.
3. Realtime Database를 선택하고 규칙 탭에서 다음 규칙으로 설정합니다:

   {
     "rules": {
    ".read": true,
    ".write": true
     }
   }
   

Flutter 프로젝트 설정

1. Flutter 프로젝트에 firebase_core 및 firebase_database 패키지를 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

   dependencies:
     flutter:
    sdk: flutter
     firebase_core: ^1.2.0
     firebase_database: ^6.1.2
   

2. main.dart 파일에 Firebase와 연결하는 코드를 작성합니다: ``` dart import ‘package:firebase_core/firebase_core.dart’;

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

## 데이터 모델링
여행 일지의 데이터 모델은 다음과 같이 정의할 수 있습니다:
``` dart
class TravelEntry {
  final String id;
  final String location;
  final String description;
  final double rating;

  TravelEntry({required this.id, required this.location, required this.description, required this.rating});

  Map<String, dynamic> toJson() => {
    'location': location,
    'description': description,
    'rating': rating,
  };

  factory TravelEntry.fromJson(Map<String, dynamic> json) {
    return TravelEntry(
      id: json['id'],
      location: json['location'],
      description: json['description'],
      rating: json['rating'],
    );
  }
}

애플리케이션 구현

1. lib 폴더에 screens 및 models라는 폴더를 생성합니다.
2. screens 폴더에 travel_entry_screen.dart 파일을 생성하고 다음과 같이 코드를 작성합니다: ``` dart import ‘package:flutter/material.dart’; import ‘package:firebase_database/firebase_database.dart’; import ‘package:uuid/uuid.dart’;

import ‘../models/travel_entry.dart’;

class TravelEntryScreen extends StatefulWidget { @override _TravelEntryScreenState createState() => _TravelEntryScreenState(); }

class _TravelEntryScreenState extends State { final databaseReference = FirebaseDatabase.instance.reference(); final TextEditingController _locationController = TextEditingController(); final TextEditingController _descriptionController = TextEditingController(); final TextEditingController _ratingController = TextEditingController();

void createTravelEntry() { final String id = Uuid().v4(); final String location = _locationController.text; final String description = _descriptionController.text; final double rating = double.parse(_ratingController.text);

final travelEntry = TravelEntry(
  id: id,
  location: location,
  description: description,
  rating: rating,
);

databaseReference.child("travel_entries").child(id).set(travelEntry.toJson());

_locationController.text = "";
_descriptionController.text = "";
_ratingController.text = "";

Navigator.pop(context);   }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(“여행 일지 작성”), ), body: Padding( padding: EdgeInsets.all(16.0), child: Column( children: [ TextFormField( controller: _locationController, decoration: InputDecoration(labelText: "장소"), ), TextFormField( controller: _descriptionController, decoration: InputDecoration(labelText: "설명"), ), TextFormField( controller: _ratingController, keyboardType: TextInputType.number, decoration: InputDecoration(labelText: "평가 (1부터 5까지)"), ), ElevatedButton( onPressed: createTravelEntry, child: Text("저장"), ), ], ), ), ); } }

3. `lib` 폴더의 `main.dart` 파일에 다음과 같이 코드를 업데이트합니다:
``` dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import './screens/travel_entry_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',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TravelEntryScreen(),
    );
  }
}

실행

1. Flutter 프로젝트를 실행하고 여행 일지 작성 화면이 나타나는지 확인합니다.
2. 장소, 설명 및 평가를 입력하고 저장 버튼을 누릅니다.
3. Firebase 콘솔에서 데이터베이스에 travel_entries 항목이 생성되고, 해당 항목에 입력한 데이터가 저장되었는지 확인합니다.

결론

이제 Firebase Database를 활용하여 Flutter 애플리케이션에 여행 일지를 작성하고 저장하는 기능을 구현하는 방법을 알게 되었습니다. Firebase를 통해 데이터베이스를 관리하면 실시간으로 데이터를 동기화하고 여행 일지를 보다 효율적으로 관리할 수 있습니다.