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

30 Nov 2023

flutter

소개

이번 포스트에서는 Flutter와 Firebase Firestore를 사용하여 전자 상거래 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Firebase Firestore는 클라우드 기반 NoSQL 데이터베이스로, 실시간 연결 및 동기화 기능을 제공하여 실시간 상태 업데이트 및 데이터 동기화를 쉽게 구현할 수 있습니다. Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 네이티브 애플리케이션을 만들 수 있습니다. 이 두 기술을 결합하여 전자 상거래 애플리케이션을 구축해 보겠습니다.

준비물

Flutter 개발 환경 설치
Firebase 프로젝트 생성 및 Firestore 설정

단계별 설명

1. 프로젝트 설정

먼저 Flutter 개발 환경을 설치한 후, Firebase 프로젝트를 생성하고 Firestore를 활성화해야 합니다. Firebase 콘솔에서 프로젝트를 생성한 후, Firestore 섹션으로 이동하여 데이터베이스를 만들어야 합니다. Firestore 데이터베이스 생성 시 초기 규칙 설정을 유의해야 합니다. 전자 상거래 애플리케이션에 적합한 보안규칙을 설정하는 것이 중요합니다.

2. Flutter 프로젝트 생성

Flutter 프로젝트를 생성하기 위해 다음 명령어를 실행하세요:

flutter create ecommerce_app

위 명령어는 ecommerce_app이라는 이름의 새로운 Flutter 프로젝트를 생성합니다.

3. Firebase와 Flutter 연동

Flutter 애플리케이션에서 Firestore를 사용하기 위해 Firebase와 플러그인을 연동해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가하세요:

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

위 코드는 Firebase Core와 Cloud Firestore 라이브러리의 최신 버전을 앱에 추가하도록 설정합니다. 그리고 Flutter 애플리케이션에 Firebase를 초기화하는 코드를 추가해야 합니다. Flutter 애플리케이션의 main.dart 파일에 다음과 같은 코드를 추가하세요:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 앱 위젯 코드 작성
  }
}

위 코드는 Firebase를 초기화 한 후, MyApp 위젯을 실행합니다. Firebase 초기화를 비동기로 수행하기 위해 async-await를 사용합니다.

4. 전자 상거래 애플리케이션 UI 설계

이제 애플리케이션의 UI를 설계하기 위해 Flutter 위젯을 사용합니다. 예를 들어, 상품 목록을 표시하는 목록 페이지를 만들어 보겠습니다. 다음과 같은 코드를 main.dart 파일의 MyApp 위젯에 추가하세요:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ecommerce App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductListPage(),
    );
  }
}

class ProductListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 상품 목록 페이지 UI 코드 작성
  }
}

위 코드에서는 MyApp 위젯에 MaterialApp을 사용하여 애플리케이션의 기본 테마를 설정하고, ProductListPage 위젯을 홈 페이지로 설정합니다.

5. Firestore 데이터 조회 및 표시

상품 목록 페이지에서 Firestore 데이터베이스에 저장된 상품 정보를 조회하고 표시해야 합니다. Flutter에서 Cloud Firestore를 사용하려면 cloud_firestore 라이브러리를 import해야 합니다. 다음과 같은 코드를 ProductListPage 위젯에 추가하세요:

import 'package:cloud_firestore/cloud_firestore.dart';

class ProductListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('products').snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('데이터를 불러올 수 없습니다.');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }

        return ListView(
          children: snapshot.data!.docs.map((doc) {
            return ListTile(
              title: Text(doc['name']),
              subtitle: Text(doc['price']),
            );
          }).toList(),
        );
      },
    );
  }
}

위 코드는 Firestore에서 ‘products’ 컬렉션의 데이터를 스트림으로 읽어와서 목록으로 표시합니다. 데이터가 로딩 중일 때는 로딩 인디케이터를 표시하고, 에러가 발생하면 에러 메시지를 표시합니다.

결론

위 단계를 따르면 Flutter와 Firebase Firestore를 사용하여 전자 상거래 애플리케이션을 만들 수 있습니다. Firestore를 사용하면 실시간 데이터 업데이트 및 동기화를 쉽게 구현할 수 있으며, Flutter를 사용하면 크로스 플랫폼 애플리케이션을 쉽게 개발할 수 있습니다. 이를 기반으로 추가 기능을 구현하면 완전한 전자 상거래 애플리케이션을 만들 수 있습니다.

더 자세한 정보는 Firebase 문서와 Flutter 문서를 참고하십시오.