[flutter] Firebase Database와 플러터를 이용한 전자 상거래 애플리케이션 만들기

30 Nov 2023

flutter

이 블로그 포스트에서는 Firebase Database를 사용하여 플러터(Flutter)로 전자 상거래 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

Firebase 설정

Firebase를 사용하기 위해서는 먼저 Firebase 프로젝트를 만들어야 합니다. Firebase 콘솔에 로그인한 후, 프로젝트를 생성하고 애플리케이션을 추가합니다. 애플리케이션 추가 시에는 Android와 iOS 애플리케이션을 모두 등록해야 합니다.

플러터 프로젝트 설정

Firebase 설정이 완료되면, 플러터 프로젝트를 생성하고 Firebase SDK를 추가해야 합니다. 프로젝트의 pubspec.yaml 파일에 다음과 같이 dependencies를 추가합니다:

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

그리고 터미널에서 flutter pub get 명령어를 실행하여 종속성을 설정합니다.

Firebase Database와의 연동

Firebase Database와의 연동을 위해 Firebase 앱을 초기화해야 합니다. main.dart 파일에 다음 코드를 추가합니다:

import 'package:firebase_core/firebase_core.dart';

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

Firebase 앱을 초기화한 후에는 Firebase Database를 사용할 준비가 된 것입니다.

상품 목록 표시하기

Firebase Database에는 상품 정보를 저장하는 ‘products’라는 컬렉션이 있다고 가정해 봅시다. 이를 이용하여 상품 목록을 표시하는 방법은 다음과 같습니다:

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';

class ProductList extends StatelessWidget {
  final databaseReference = FirebaseDatabase.instance.reference();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: databaseReference.child('products').onValue,
      builder: (context, snapshot) {
        if (snapshot.hasData &&
            snapshot.data.snapshot.value != null) {
          Map<dynamic, dynamic> products =
              snapshot.data.snapshot.value;
          List<ProductItem> productList = [];
      
          products.forEach((key, value) {
            productList.add(ProductItem(
              name: value['name'],
              price: value['price'],
            ));
          });

          return ListView(
            children: productList,
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

class ProductItem extends StatelessWidget {
  final String name;
  final double price;

  ProductItem({required this.name, required this.price});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(name),
      subtitle: Text('가격: $price'),
    );
  }
}

위의 코드는 ProductList 위젯을 통해 Firebase Database에서 상품 목록을 스트림으로 받아와 ListView에 표시합니다. 상품 목록에는 상품 이름과 가격이 포함되어 있으며, ProductItem 위젯을 사용하여 각 상품의 리스트 타일을 생성합니다.

이렇게 하면 Firebase Database에 저장된 상품 목록을 플러터 애플리케이션에서 표시할 수 있게 됩니다.

상품 상세 정보 보기

상품 목록을 표시하는 것 외에도, Firebase Database에서 상품의 상세 정보를 가져와 사용자에게 보여줄 수 있습니다. 상세 정보는 각 상품을 클릭했을 때 표시되도록 구현할 수 있습니다.

class ProductDetail extends StatelessWidget {
  final DatabaseReference databaseReference =
      FirebaseDatabase.instance.reference();

  final String productId;

  ProductDetail({required this.productId});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: databaseReference
          .child('products')
          .child(productId)
          .onValue,
      builder: (context, snapshot) {
        if (snapshot.hasData &&
            snapshot.data.snapshot.value != null) {
          Map<dynamic, dynamic>? product =
              snapshot.data.snapshot.value;
      
          return Column(
            children: [
              Text(product['name']),
              Text('가격: ${product['price']}'),
              Text('설명: ${product['description']}'),
              // 기타 상품 상세 정보 표시
            ],
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

위의 코드에서는 ProductDetail 위젯을 통해 Firebase Database에서 선택한 상품의 상세 정보를 가져옵니다. productId를 통해 해당 상품을 식별하고, 상세 정보는 해당 상품의 ‘products’ 컬렉션에서 가져옵니다. 가져온 상세 정보는 원하는 방식으로 표시할 수 있습니다.

장바구니에 상품 추가하기

마지막으로, Firebase Database를 사용하여 사용자가 선택한 상품을 장바구니에 추가하는 방법을 알아보겠습니다.

class Cart {
  final DatabaseReference databaseReference =
      FirebaseDatabase.instance.reference();

  Future<void> addToCart(String productId) async {
    await databaseReference
      .child('cart')
      .child(productId)
      .set(true);
  }
}

위의 코드는 Cart 클래스를 통해 Firebase Database에서 장바구니에 상품을 추가하는 방법을 보여줍니다. addToCart 메서드를 호출하여 선택한 상품의 ID를 전달하면, 해당 상품을 ‘cart’ 컬렉션에 추가합니다.

이제 Firebase Database와 플러터를 이용하여 전자 상거래 애플리케이션을 만드는 방법을 알아보았습니다. Firebase를 사용하면 간단하게 데이터베이스를 구축하고 애플리케이션과 연동할 수 있습니다.

더 자세한 내용은 다음 링크를 참조해주세요:

목차