[flutter] Firebase Database와 플러터를 이용한 쇼핑 애플리케이션 만들기

30 Nov 2023

flutter

소개

이번 포스트에서는 Firebase Database를 사용하여 플러터로 쇼핑 애플리케이션을 만드는 방법을 알아보겠습니다. Firebase는 백엔드 서비스로서 사용하기 간편하고 실시간 데이터베이스를 제공하는 장점이 있습니다. 플러터(Flutter)는 구글에서 개발한 사용자 인터페이스(UI) 프레임워크로, 크로스 플랫폼 앱 개발을 위한 도구입니다.

Firebase Database 설정

Firebase 콘솔에 로그인하고 “프로젝트 만들기”를 선택합니다.
프로젝트 이름을 입력하고 “프로젝트 만들기”를 클릭합니다.
“프로젝트 설정”으로 이동하고 “서비스 계정” 탭에서 서비스 계정을 생성합니다.
키를 생성하고 JSON 파일을 다운로드합니다.

플러터 프로젝트 설정

Flutter SDK를 설치하고 개발 환경을 설정합니다.
flutter create shopping_app 명령어를 실행하여 플러터 프로젝트를 생성합니다.

pubspec.yaml 파일을 열고 firebase_core와 firebase_database 라이브러리를 추가합니다.

dependencies:
  flutter:
 sdk: flutter
  firebase_core: ^1.0.0
  firebase_database: ^7.0.0

flutter pub get 명령어를 실행하여 종속성을 설치합니다.

Firebase와 플러터 연동

Firebase 프로젝트의 JSON 파일을 android/app 폴더 안에 복사합니다.
android/build.gradle 파일을 열고 com.google.gms:google-services 플러그인을 추가합니다.
```
dependencies {
 // ...
 classpath 'com.google.gms:google-services:4.3.10'
}
```
android/app/build.gradle 파일을 열고 apply plugin: 'com.google.gms.google-services'를 추가합니다.
main.dart 파일을 열고 Firebase를 초기화합니다. ```dart import ‘package:firebase_core/firebase_core.dart’;

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

## 상품 목록 페이지 만들기
1. `products_page.dart` 파일을 생성하고 기본 플러터 앱 코드를 작성합니다.
2. Firebase 데이터베이스를 가져옵니다.
```dart
import 'package:firebase_database/firebase_database.dart';

final database = FirebaseDatabase.instance.reference();

initState에서 데이터베이스에서 상품 목록을 가져옵니다. ```dart List products = [];

@override void initState() { super.initState();

database.child(‘products’).onValue.listen((event) { setState(() { products.clear(); var data = event.snapshot.value; if (data != null) { data.forEach((key, value) { products.add(Product.fromMap(value)); }); } }); }); }

## 상품 상세 페이지 만들기
1. `product_detail_page.dart` 파일을 생성하고 기본 플러터 앱 코드를 작성합니다.
2. `productId`를 인자로 전달받아 해당 상품의 정보를 가져옵니다.
```dart
var product;

@override
void initState() {
  super.initState();

  database.child('products/$productId').once().then((snapshot) {
    if (snapshot.value != null) {
      setState(() {
        product = Product.fromMap(snapshot.value);
      });
    }
  });
}

장바구니 페이지 만들기

cart_page.dart 파일을 생성하고 기본 플러터 앱 코드를 작성합니다.
Firebase Auth를 사용하여 사용자 인증을 구현합니다. ```dart import ‘package:firebase_auth/firebase_auth.dart’;

final auth = FirebaseAuth.instance;

3. 사용자가 로그인 되어 있는지 확인하고 장바구니 항목을 가져옵니다.
```dart
User user;

@override
void initState() {
  super.initState();

  user = auth.currentUser;

  if (user != null) {
    database.child('cart').child(user.uid).onValue.listen((event) {
      setState(() {
        // 장바구니 항목 로직 구현
      });
    });
  }
}

이렇게 Firebase Database와 플러터를 이용하여 쇼핑 애플리케이션을 만들 수 있습니다. Firebase의 실시간 데이터베이스를 사용하면 앱에서 실시간으로 데이터를 동기화할 수 있어 사용자 경험을 향상시킬 수 있습니다.

목차

소개

Firebase Database 설정

플러터 프로젝트 설정

Firebase와 플러터 연동

장바구니 페이지 만들기

참고 자료