Flutter로 CRUD 앱 만들기?

28min
개요
이 가이드에서는 Back4app을 백엔드 서비스로 활용하여 필수 CRUD 작업—생성, 읽기, 업데이트 및 삭제—을 처리하는 Flutter 애플리케이션을 개발합니다.
Back4app 프로젝트 설정, 유연한 데이터 스키마 설계, 그리고 Flutter 앱을 Parse SDK for Flutter를 사용하여 백엔드와 통합하는 과정을 안내해 드리겠습니다.
먼저, Basic-CRUD-App-Flutter라는 이름의 새로운 Back4app 프로젝트를 생성합니다. 이 프로젝트는 모바일 애플리케이션을 위한 신뢰할 수 있는 데이터 저장 솔루션을 제공합니다. 그런 다음, Back4app의 AI 에이전트의 도움을 받거나 수동으로 컬렉션과 필드를 생성하여 데이터 모델을 정의합니다.
다음으로, 직관적인 Back4app 관리 앱을 사용하여 데이터를 원활하게 관리합니다. 마지막으로, parse_server_sdk_flutter 패키지를 사용하여 Flutter 애플리케이션을 Back4app에 연결하여 안전하고 효율적인 CRUD 작업을 가능하게 합니다.
이 튜토리얼이 끝나면 기본 CRUD 기능과 안전한 사용자 인증 및 데이터 관리를 수행할 수 있는 프로덕션 준비가 완료된 Flutter 애플리케이션을 갖게 됩니다.
주요 통찰
강력한 백엔드와 상호작용하는 Flutter 앱을 구축하세요.
Back4app에서 확장 가능한 백엔드 스키마를 설계하는 방법을 배우세요.
데이터 관리를 쉽게 하기 위해 Back4app 관리 앱을 활용하세요.
ACL 및 사용자 인증을 포함한 강력한 보안 조치를 구현하세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
Flutter 개발 환경입니다.
Flutter를 설치하고 Visual Studio Code 또는 Android Studio와 같은 IDE를 선택하세요.
Flutter, Dart 및 REST API에 대한 기본 이해입니다.
필요한 경우 Flutter 문서를 확인하세요.
﻿
1단계 – 프로젝트 초기화
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Flutter 및 설정을 완료하기 위한 안내를 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나며, 백엔드 구성을 준비할 수 있습니다.
﻿
2단계 – 데이터 모델 만들기
데이터 구조 설정하기
이 Flutter 애플리케이션을 위해 Back4app 프로젝트 내에 여러 컬렉션을 설정할 것입니다. 아래는 CRUD 기능을 지원하기 위해 필요한 주요 컬렉션 및 필드의 예입니다.
1. 제품 컬렉션
이 컬렉션은 개별 제품에 대한 세부 정보를 저장합니다.
필드
유형
설명
_id
객체 ID
자동으로 할당된 고유 식별자.
이름
문자열
제품의 이름.
세부사항
문자열
제품에 대한 간략한 설명.
생성일
날짜
제품이 추가된 타임스탬프.
업데이트됨
날짜
제품이 마지막으로 업데이트된 시간.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 인증 세부 정보를 관리합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호 해시
문자열
안전한 인증을 위한 암호화된 비밀번호.
생성일
날짜
계정이 생성된 타임스탬프.
업데이트됨
날짜
계정이 마지막으로 업데이트된 시간.
Back4app 대시보드에서 이러한 컬렉션을 수동으로 생성할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 데이터 유형을 선택하고, 필드 이름을 지정하고, 필요한 경우 기본값을 설정하고, 필수로 표시하면 됩니다.
열 만들기
﻿
Back4app의 AI 에이전트를 사용한 스키마 생성
Back4app에 통합된 AI 에이전트는 설명에 따라 데이터 스키마를 자동으로 생성하여 설정 프로세스를 간소화할 수 있습니다.
AI 에이전트 사용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드를 열고 프로젝트 설정에서 AI 에이전트를 찾습니다.
스키마 설명하기:
필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 제공합니다.
검토 및 확인하기:
AI 에이전트가 입력을 처리한 후, 제안된 스키마를 검토하고 적용을 확인합니다.
샘플 프롬프트
Text
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 접근 방식은 시간을 절약하고 데이터 스키마가 일관되고 최적화되도록 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 관리
관리자 앱 소개
Back4app 관리자 앱은 백엔드 데이터를 관리하기 위한 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 기능을 통해 레코드를 생성, 읽기, 업데이트 및 삭제하는 CRUD 작업을 손쉽게 수행할 수 있습니다.
관리자 앱 활성화하기
“더보기” 메뉴로 이동 당신의 Back4app 대시보드에서.
“관리자 앱” 선택 그런 다음 클릭하십시오 “관리자 앱 활성화.”
관리자 자격 증명 설정 초기 관리자 계정을 생성하여 설정하며, 이 계정은 B4aAdminUser와 같은 역할도 구성합니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 애플리케이션 데이터를 관리하십시오.
관리자 앱 대시보드
﻿
CRUD 작업 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
항목 생성: 컬렉션(예: 제품)에서 “레코드 추가” 옵션을 사용하여 새 데이터를 삽입합니다.
항목 보기 및 편집: 레코드를 클릭하여 세부 정보를 검사하거나 필드를 업데이트합니다.
항목 삭제: 더 이상 필요하지 않은 레코드를 제거합니다.
이 사용자 친화적인 인터페이스는 백엔드 데이터를 관리하는 과정을 간소화합니다.
﻿
4단계 – Flutter 앱을 Back4app과 연결하기
백엔드가 구성되었으므로 Flutter 애플리케이션을 Back4app과 통합할 시간입니다.
Flutter용 Parse SDK 사용하기
의존성 추가하기:
당신의 pubspec.yaml 파일을 열고 parse_server_sdk_flutter 패키지를 포함하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
﻿
앱에서 Parse 초기화하기:
당신의 main.dart, Back4app 자격증명으로 Parse를 초기화하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
﻿
CRUD 작업 구현하기:
Dart 파일을 생성하세요 (예: product_service.dart) CRUD 작업을 처리하기 위해:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
﻿
이 서비스 파일은 Flutter UI가 Back4app 백엔드와 원활하게 상호작용할 수 있도록 합니다.
대안: Flutter에서 REST/GraphQL 사용하기
Parse SDK를 사용하지 않기로 선택하면 http와 같은 패키지를 사용하여 REST 호출을 할 수 있습니다. 그러나 더 통합된 경험을 위해 Parse SDK를 권장합니다.
﻿
5단계 – 백엔드 보안
접근 제어 목록 (ACLs)
데이터를 보호하기 위해 객체에 대한 ACL을 구성하십시오. 예를 들어, 생성자만 볼 수 있는 제품을 만듭니다:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

  final acl = ParseACL(owner)
    ..setPublicReadAccess(false)
    ..setPublicWriteAccess(false);

  product.setACL(acl);

  final response = await product.save();
  if (response.success) {
    print('Private product created.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

  final acl = ParseACL(owner)
    ..setPublicReadAccess(false)
    ..setPublicWriteAccess(false);

  product.setACL(acl);

  final response = await product.save();
  if (response.success) {
    print('Private product created.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
﻿
클래스 수준 권한 (CLPs)
Back4app 대시보드에서 CLPs를 구성하여 기본 보안 규칙을 시행하고, 인증된 사용자만 특정 컬렉션에 접근하거나 수정할 수 있도록 합니다.
﻿
6단계 – 사용자 인증 구현
사용자 등록 및 로그인 설정
Back4app은 인증 처리를 위해 Parse User 클래스를 사용합니다. Flutter 앱에서 사용자 등록 및 로그인을 다음과 같이 구현하십시오:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

  Future<void> loginUser(String username, String password) async {
    final user = await ParseUser.login(username, password);
    if (user.success) {
      print('Logged in as: ${user.result?.username}');
    } else {
      print('Login error: ${user.error?.message}');
    }
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

  Future<void> loginUser(String username, String password) async {
    final user = await ParseUser.login(username, password);
    if (user.success) {
      print('Logged in as: ${user.result?.username}');
    } else {
      print('Login error: ${user.error?.message}');
    }
  }
}
﻿
이 설정은 Flutter 애플리케이션의 사용자 등록, 로그인 및 추가 인증 관리를 포함합니다.
﻿
7단계 – 결론 및 향후 개선 사항
축하합니다! Back4app과 통합된 Flutter 기반 CRUD 애플리케이션을 성공적으로 구축했습니다.
이 튜토리얼에서는 Basic-CRUD-App-Flutter라는 프로젝트를 만들고, 제품 및 사용자에 대한 컬렉션을 정의하며, 관리 앱을 사용하여 백엔드를 관리했습니다.
또한, parse_server_sdk_flutter 패키지를 사용하여 Flutter 앱을 Back4app과 연결하고 강력한 보안 및 사용자 인증을 구현했습니다.
다음 단계:
앱 확장:
고급 검색, 상세 보기 또는 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 기능 향상:
클라우드 기능, 타사 API 통합 또는 더 세분화된 역할 기반 액세스 제어를 탐색하세요.
계속 배우기:
Back4app 문서 및 추가 튜토리얼을 검토하여 애플리케이션을 더욱 최적화하세요.
코딩을 즐기고 Flutter 개발 여정에 행운이 있기를 바랍니다!
필드	유형	설명
_id	객체 ID	자동으로 할당된 고유 식별자.
이름	문자열	제품의 이름.
세부사항	문자열	제품에 대한 간략한 설명.
생성일	날짜	제품이 추가된 타임스탬프.
업데이트됨	날짜	제품이 마지막으로 업데이트된 시간.
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	안전한 인증을 위한 암호화된 비밀번호.
생성일	날짜	계정이 생성된 타임스탬프.
업데이트됨	날짜	계정이 마지막으로 업데이트된 시간.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Xamarin로 CRUD 앱 만들기?
How to Build a CRUD App with React Native?