본문 바로가기
Flutter/Firebase

플러터에서 파이어베이스 CRUD 구현 및 자세한 사용법 가이드

by Maccrey Coding 2024. 7. 17.
728x90
반응형

 

Firebase는 백엔드 개발 없이도 모바일 앱을 빠르고 쉽게 구축할 수 있도록 지원하는 강력한 플랫폼입니다.

이 블로그 글에서는 플러터 앱에서 파이어베이스를 사용하여 CRUD(Create, Read, Update, Delete) 작업을 수행하는 방법을 자세히 살펴보겠습니다.

 

1. 프로젝트 설정

  1. Firebase 콘솔에 접속하여 새로운 프로젝트를 생성합니다.
  2. Database 탭에서 Cloud Firestore를 선택하고 데이터베이스를 생성합니다.
  3. Flutter 앱에서 Firebase SDK를 설치합니다.
  4. Firebase 콘솔에서 프로젝트 설정 > General 탭에서 SDK 설정을 확인하고 Android  iOS 플랫폼에 대한 앱 ID를 복사합니다.

2. 플러터 앱에 Firebase SDK 추가

  1. pubspec.yaml 파일에 다음 종속성을 추가합니다.
dependencies:
  firebase_core: ^1.12.0
  firebase_auth: ^3.3.10
  cloud_firestore: ^3.1.18
 
  1. 터미널에서 다음 명령을 실행하여 종속성을 설치합니다.
flutter pub get
 
  1. main.dart 파일에 다음 코드를 추가하여 Firebase SDK를 초기화합니다.
import 'package:firebase_core/firebase_core.dart';

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

3. 데이터 모델 정의

  1. models.dart 파일을 만들고 데이터 모델 클래스를 정의합니다. 예를 들어, 사용자 정보를 저장하는 User 클래스를 정의합니다.
class User {
  String id;
  String name;
  String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromMap(Map<String, dynamic> data) {
    return User(
      id: data['id'] as String,
      name: data['name'] as String,
      email: data['email'] as String,
    );
  }

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}
 

4. CRUD 작업 수행

 

4.1 데이터 생성 (Create)

// FirebaseFirestore 인스턴스 가져오기
final FirebaseFirestore db = FirebaseFirestore.instance;

// 사용자 데이터 생성
Future<void> createUser(User user) async {
  final docRef = db.collection('users').doc(user.id);
  await docRef.set(user.toMap());
}
 

4.2 데이터 읽기 (Read)

// 특정 사용자 데이터 가져오기
Future<User> getUser(String userId) async {
  final docRef = db.collection('users').doc(userId);
  final docSnapshot = await docRef.get();
  if (docSnapshot.exists) {
    return User.fromMap(docSnapshot.data()!);
  } else {
    return User(id: '', name: '', email: '');
  }
}

// 모든 사용자 데이터 가져오기
Stream<List<User>> getAllUsers() {
  final usersCollection = db.collection('users');
  return usersCollection.snapshots().map((snapshot) {
    return snapshot.docs.map((doc) => User.fromMap(doc.data())).toList();
  });
}
 

4.3 데이터 업데이트 (Update)

// 사용자 데이터 업데이트
Future<void> updateUser(User user) async {
  final docRef = db.collection('users').doc(user.id);
  await docRef.update(user.toMap());
}
 

4.4 데이터 삭제 (Delete)

// 사용자 데이터 삭제
Future<void> deleteUser(String userId) async {
  final docRef = db.collection('users').doc(userId);
  await docRef.delete();
}

 

5. 실제 앱에서 사용하기

위에서 소개된 CRUD 작업을 실제 앱에서 사용하는 방법은 다음과 같습니다.

 

5.1 사용자 인터페이스 구현

  • 사용자 데이터 입력, 표시, 수정, 삭제를 위한 UI를 디자인합니다.
  • UI에서 발생하는 이벤트를 처리하여 CRUD 작업을 수행하도록 코드를 작성합니다.

5.2 예제: 사용자 목록 화면 구현

  1. users_screen.dart 파일을 만들고 다음 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'models.dart';

class UsersScreen extends StatefulWidget {
  @override
  _UsersScreenState createState() => _UsersScreenState();
}

class _UsersScreenState extends State<UsersScreen> {
  Stream<List<User>> _usersStream = getAllUsers();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users'),
      ),
      body: StreamBuilder<List<User>>(
        stream: _usersStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final users = snapshot.data!;
            return ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.name),
                  subtitle: Text(user.email),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}
 
  1. main.dart 파일에 다음 코드를 추가하여 UsersScreen을 라우트합니다.
MaterialApp(
  home: UsersScreen(),
);
 

6. 주의 사항

  • Firebase에서 제공하는 보안 규칙을 사용하여 데이터 접근을 제어해야 합니다.
  • 오류 처리 및 예외 처리를 적절하게 구현해야 합니다.
  • 데이터베이스 성능 최적화를 위해 적절한 데이터 구조를 사용해야 합니다.

7. 추가 정보

이 블로그 글에서 소개된 내용을 통해 플러터 앱에서 파이어베이스 CRUD를 사용하는 방법을 쉽게 이해하셨기를 바랍니다.

더 궁금한 점이나 도움이 필요한 부분이 있으면 언제든지 질문해주세요.

728x90
반응형