Colin's Blog
[flutter] Firebase Database와 플러터를 이용한 음식 레시피 애플리케이션 만들기

이번 글에서는 Firebase Database와 플러터(Flutter)를 사용하여 음식 레시피 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Firebase는 구글에서 제공하는 모바일 앱 개발 플랫폼으로, 데이터베이스, 사용자 인증, 애드몹(AdMob) 등의 기능을 제공합니다. 플러터는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 만들 수 있습니다.

필요한 준비물

이 튜토리얼을 완료하기 위해서는 다음의 준비물이 필요합니다:

Firebase 프로젝트 생성 및 Firebase Realtime Database 추가

  1. Firebase 콘솔(https://console.firebase.google.com/)에 접속하여 Google 계정으로 로그인합니다.
  2. “프로젝트 추가” 버튼을 클릭하고 프로젝트의 이름을 입력한 후 “프로젝트 만들기” 버튼을 클릭합니다.
  3. Firebase 프로젝트가 생성되면 “콘솔로 이동” 버튼을 클릭합니다.
  4. “개발 > 데이터베이스”를 선택한 후 “데이터베이스 만들기” 버튼을 클릭합니다.
  5. “실시간 데이터베이스”를 선택하고 “다음”을 클릭합니다.
  6. “외부 액세스 규칙”을 “테스트 모드로 시작”으로 선택한 후 “다음”을 클릭합니다.
  7. 데이터베이스가 생성되면 “프로젝트 개요” 페이지에서 “프로젝트 설정” 버튼을 클릭하여 “서비스 계정”을 생성합니다.

플러터 프로젝트 생성 및 Firebase 설정

  1. Flutter SDK를 설치하고 개발 환경을 설정합니다.
  2. 커맨드 라인 또는 터미널에서 “flutter create recipe_app”을 실행하여 플러터 프로젝트를 생성합니다.
  3. 생성된 프로젝트 폴더로 이동한 후 “pubspec.yaml” 파일을 연다.
  4. “dependencies” 섹션에 다음과 같이 firebase_database 패키지를 추가합니다:
dependencies:
  flutter:
    sdk: flutter

  firebase_database: ^7.1.1
  1. “pubspec.yaml” 파일을 저장한 후 터미널에서 “flutter pub get”을 실행하여 패키지를 다운로드합니다.

애플리케이션 개발

  1. 플러터 프로젝트의 “lib” 폴더에 “models” 폴더를 생성하고 “recipe.dart” 파일을 만듭니다. 이 파일은 음식 레시피를 나타내는 모델 클래스를 정의합니다.
class Recipe {
  String name;
  String ingredients;
  String instructions;

  Recipe(this.name, this.ingredients, this.instructions);
}
  1. “lib” 폴더에 “screens” 폴더를 생성하고 “recipe_list_screen.dart” 파일을 만듭니다. 이 파일은 음식 레시피 목록을 보여주는 스크린을 구현합니다. 다음의 코드를 추가합니다:
import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import '../models/recipe.dart';

class RecipeListScreen extends StatefulWidget {
  @override
  _RecipeListScreenState createState() => _RecipeListScreenState();
}

class _RecipeListScreenState extends State<RecipeListScreen> {
  final referenceDatabase = FirebaseDatabase.instance.reference().child('recipes');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('음식 레시피'),
      ),
      body: Container(
        child: StreamBuilder(
          stream: referenceDatabase.onValue,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              List<Recipe> recipes = [];
              DataSnapshot dataValues = snapshot.data.snapshot;
              Map<dynamic, dynamic> values = dataValues.value;
              values.forEach((key, values) {
                Recipe recipe = Recipe(
                  values['name'],
                  values['ingredients'],
                  values['instructions'],
                );
                recipes.add(recipe);
              });
              return ListView.builder(
                itemCount: recipes.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(recipes[index].name),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => RecipeDetailScreen(recipe: recipes[index]),
                        ),
                      );
                    },
                  );
                },
              );
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}
  1. “lib” 폴더에 “screens” 폴더 안에 “recipe_detail_screen.dart” 파일을 만듭니다. 이 파일은 선택한 음식 레시피의 상세 정보를 보여주는 스크린을 구현합니다.
import 'package:flutter/material.dart';
import '../models/recipe.dart';

class RecipeDetailScreen extends StatelessWidget {
  final Recipe recipe;

  RecipeDetailScreen({required this.recipe});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(recipe.name),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('재료', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
            SizedBox(height: 8.0),
            Text(recipe.ingredients),
            SizedBox(height: 16.0),
            Text('조리 방법', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
            SizedBox(height: 8.0),
            Text(recipe.instructions),
          ],
        ),
      ),
    );
  }
}
  1. “lib” 폴더의 “main.dart” 파일을 열고 다음의 코드로 수정합니다:
import 'package:flutter/material.dart';
import 'screens/recipe_list_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '음식 레시피',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RecipeListScreen(),
    );
  }
}

이제 음식 레시피 애플리케이션을 실행해 볼 수 있습니다. 플러터 프로젝트 폴더에서 터미널을 열고 “flutter run”을 실행합니다. Firebase Realtime Database에 등록된 음식 레시피 목록이 앱에 표시됩니다.

이번 글에서는 Firebase Database와 플러터를 이용하여 음식 레시피 애플리케이션을 만드는 방법에 대해 알아보았습니다. 플러터와 Firebase를 함께 사용하면 다양한 모바일 앱 개발에 유용한 기능을 구현할 수 있습니다.

© 2018 Colin. All rights reserved.