[flutter] Firebase Database와 플러터를 이용한 음식 주문 애플리케이션 만들기

30 Nov 2023

flutter

안녕하세요! 오늘은 Firebase Database와 플러터(Flutter)를 사용하여 음식 주문 애플리케이션을 만드는 방법에 대해서 알아보겠습니다. Firebase는 Google이 제공하는 백엔드 인프라 서비스로, 데이터베이스, 인증, 스토리지 등 다양한 기능을 제공합니다. Flutter는 Google이 개발한 크로스 플랫폼 프레임워크로, 단일 코드베이스에서 iOS, Android, 웹 등 다양한 플랫폼에서 동작할 수 있는 모바일 애플리케이션을 개발할 수 있습니다.

1. Firebase 프로젝트 생성

Firebase Console에 접속하여 새로운 프로젝트를 생성합니다. 프로젝트의 이름과 지역을 설정한 뒤, 프로젝트 생성을 완료합니다.

2. Firebase Database 설정

Firebase Console의 “Database” 탭에서 “Firestore Database” 섹션으로 이동합니다. “Firestore Database”를 클릭하여 데이터베이스를 생성합니다. 데이터베이스 규칙은 일단 “테스트 모드”로 설정하여 편하게 개발할 수 있습니다.

3. 플러터 프로젝트 생성

Flutter 개발 환경이 설치되어 있다면, 터미널에서 아래의 명령어를 실행하여 플러터 프로젝트를 생성합니다.

flutter create food_order_app

4. Firebase와 플러터 연동

Firebase와 플러터를 연동하기 위해, pubspec.yaml 파일에 firebase_core 및 cloud_firestore 패키지를 추가합니다. 아래의 예시는 pubspec.yaml 파일의 dependencies 부분입니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.3.0
  cloud_firestore: ^2.2.2

의존성을 추가한 뒤, 아래의 명령어를 실행하여 패키지를 다운로드합니다.

flutter pub get

5. 데이터 조회 및 추가

Firebase와 플러터가 연동되었으니, 데이터를 조회하고 추가하는 방법을 알아보겠습니다. 플러터 코드에서 아래와 같이 Firebase 인스턴스를 초기화합니다.

import 'package:firebase_core/firebase_core.dart';

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

Firestore에 데이터를 추가하거나 조회하기 위해서는 cloud_firestore 패키지의 FirebaseFirestore 클래스를 사용합니다. 아래는 예시 코드입니다.

import 'package:cloud_firestore/cloud_firestore.dart';

void addData() {
  FirebaseFirestore.instance.collection('orders').add({
    'name': 'John Doe',
    'food': 'Pizza',
    'quantity': 2,
  });
}

void getData() {
  FirebaseFirestore.instance.collection('orders').get().then((snapshot) {
    snapshot.docs.forEach((doc) {
      print(doc.data());
    });
  });
}

위의 코드에서는 orders 컬렉션에 주문 정보를 추가하고, 주문 정보를 조회합니다.

6. 주문 기능 구현

애플리케이션에서 주문 기능을 구현하기 위해서는 사용자로부터 주문 정보를 입력받아 Firestore에 데이터를 추가해야 합니다. 예를 들어, 아래와 같이 주문 폼을 만들 수 있습니다.

class OrderForm extends StatelessWidget {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController foodController = TextEditingController();
  final TextEditingController quantityController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: nameController,
          decoration: InputDecoration(labelText: '이름'),
        ),
        TextField(
          controller: foodController,
          decoration: InputDecoration(labelText: '음식'),
        ),
        TextField(
          controller: quantityController,
          decoration: InputDecoration(labelText: '수량'),
          keyboardType: TextInputType.number,
        ),
        ElevatedButton(
          onPressed: () {
            FirebaseFirestore.instance.collection('orders').add({
              'name': nameController.text,
              'food': foodController.text,
              'quantity': int.parse(quantityController.text),
            });
          },
          child: Text('주문하기'),
        ),
      ],
    );
  }
}

위의 코드에서는 주문 폼을 만들고, 주문하기 버튼을 누르면 주문 정보를 Firestore에 추가합니다.

7. 애플리케이션 테스트

이제 앱을 실행하여 테스트해보세요! 주문 폼에 정보를 입력하고 주문하기 버튼을 누르면 Firestore에 주문 정보가 추가되는지 확인해보세요.

이렇게 Firebase Database와 플러터를 이용하여 음식 주문 애플리케이션을 만들 수 있습니다. Firebase를 사용하면 실시간 데이터베이스 기능도 제공하기 때문에, 주문 상태의 변화를 실시간으로 알 수도 있습니다. 자세한 내용은 Firebase 문서를 참고해보세요.

다음에는 주문 목록을 조회하고 주문 상태를 업데이트하는 기능을 추가해보세요. 즐거운 개발되세요!

목차