Flutter 앱에서 Parse 객체 기본 CRUD 작업 실행 방법

10 분

이 가이드는 Flutter 플러그인을 사용하여 Back4App에서 Parse 객체를 관리하는 방법을 보여줍니다. 기본 CRUD 작업인 생성, 읽기, 업데이트 및 삭제를 배우게 됩니다. 이 튜토리얼은 이러한 작업을 설명하기 위해 간단한 ToDo 앱을 사용합니다.

Back4app 백엔드 데이터 저장소는 ParseObject, JSON 호환 데이터의 키-값 쌍을 보유합니다. Back4App 데이터 저장소는 문자열, 숫자, 불리언, DateTime, GeoPoints, Pointers, Relations, 리스트 및 객체를 포함한 다양한 일반 데이터 유형을 수용합니다. 본질적으로 JSON 형식으로 인코딩할 수 있는 모든 데이터를 지원하여 다양한 데이터 저장 요구에 대한 유연하고 강력한 솔루션을 제공합니다.

필수 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

Flutter 버전 3.x.x 이상
Android Studio 또는 VS Code 설치 (과 플러그인 Dart 및 Flutter)
Back4App에서 생성된 앱:
- 참고: 새 Parse 앱 튜토리얼을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
Back4app에 연결된 Flutter 앱.
- 참고: Flutter 프로젝트에 Parse SDK 설치을 따라 Back4App에 연결된 Flutter 프로젝트를 만드세요.
Android 또는 iOS를 실행하는 장치(또는 가상 장치).

1. 객체 생성

저장할 saveTodo 함수는 제목과 done 상태가 false로 설정된 새로운 작업을 생성합니다. 작동 방식은 다음과 같습니다:

속성을 설정하여 Parse 객체 초기화: ParseObject의 인스턴스를 생성합니다(예: 'Todo'). set 메서드를 사용하여 키-값 쌍을 정의합니다.
객체 저장: save 메서드를 호출하여 객체를 데이터베이스에 저장합니다.

Future<void> saveTodo(String title) async {
  final todo = ParseObject('Todo')
    ..set('title', title)
    ..set('done', false);
  await todo.save();
}

2. 객체 읽기

getTodo 함수는 데이터베이스를 쿼리하고 작업 목록을 반환합니다. 작동 방식은 다음과 같습니다:

쿼리 초기화: 클래스에 대한 QueryBuilder 인스턴스를 생성합니다.
쿼리 실행: query 메서드를 사용하여 데이터를 검색합니다.
응답 처리: 쿼리가 성공했는지 확인하고 결과를 처리합니다.

Future<List<ParseObject>> getTodo() async {
  QueryBuilder<ParseObject> queryTodo =
      QueryBuilder<ParseObject>(ParseObject('Todo'));
  final ParseResponse apiResponse = await queryTodo.query();

  if (apiResponse.success && apiResponse.results != null) {
    return apiResponse.results as List<ParseObject>;
  } else {
    return [];
  }
}

ListView.builder 함수를 업데이트하여 Parse 객체 값을 추출하고 표시합니다:

// Get Parse Object Values
final varTodo = snapshot.data![index];
final varTitle = varTodo.get<String>('title')!;
final varDone = varTodo.get<bool>('done')!;

3. 객체 업데이트

업데이트 updateTodo 함수는 기존 작업의 상태를 업데이트합니다. 작동 방식은 다음과 같습니다:

Parse 객체 초기화 및 속성 설정: ParseObject의 인스턴스를 생성하고 objectId를 설정합니다. set 메서드를 사용하여 키-값 쌍을 업데이트합니다.
객체 저장: save 메서드를 호출하여 데이터베이스에서 객체를 업데이트합니다.

Future<void> updateTodo(String id, bool done) async {
  var todo = ParseObject('Todo')
    ..objectId = id
    ..set('done', done);
  await todo.save();
}

4. 객체 삭제

삭제 deleteTodo 함수는 데이터베이스에서 기존 작업을 제거합니다. 작동 방식은 다음과 같습니다:

Parse 객체 초기화: ParseObject의 인스턴스를 생성하고 objectId를 설정합니다.
객체 삭제: delete 메서드를 호출하여 데이터베이스에서 객체를 제거합니다.

Future<void> deleteTodo(String id) async {
  var todo = ParseObject('Todo')..objectId = id;
  await todo.delete();
}

전체 예제 코드

여기 Back4app 백엔드와 통합된 간단한 ToDo 앱의 전체 코드가 있습니다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  const keyApplicationId = 'YOUR_APP_ID_HERE';
  const keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(const MaterialApp(home: TodoApp()));
}

class TodoApp extends StatefulWidget {
  const TodoApp({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _TodoAppState createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  List<ParseObject> tasks = [];
  TextEditingController taskController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Colors.white,
          hintColor: Colors.black,
          scaffoldBackgroundColor: Colors.white,
          appBarTheme:
              AppBarTheme(backgroundColor: Color.fromARGB(255, 68, 122, 246))),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Todo List'),
        ),
        body: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
          ),
          child: Column(
            children: [
              const SizedBox(height: 20),
              _buildTaskInput(),
              const SizedBox(height: 20),
              Expanded(child: _buildTaskList()),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTaskInput() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              controller: taskController,
              decoration: InputDecoration(
                hintText: 'Enter tasks',
                filled: true,
                fillColor: Colors.grey[200],
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
          const SizedBox(width: 10),
          ElevatedButton(
            onPressed: addTodo,
            style: ButtonStyle(
                foregroundColor:
                    MaterialStateProperty.all<Color>(Colors.black)),
            child: const Text('Add'),
          ),
        ],
      ),
    );
  }

  Widget _buildTaskList() {
    return ListView.builder(
      itemCount: tasks.length,
      itemBuilder: (context, index) {
        final varTodo = tasks[index];
        final varTitle = varTodo.get<String>('title') ?? '';
        bool done = varTodo.get<bool>('done') ?? false;

        return ListTile(
          title: Row(
            children: [
              Checkbox(
                value: done,
                onChanged: (newValue) {
                  updateTodo(index, newValue!);
                },
              ),
              Expanded(child: Text(varTitle)),
            ],
          ),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () {
              deleteTodo(index, varTodo.objectId!);
            },
          ),
        );
      },
    );
  }

  Future<void> addTodo() async {
    String task = taskController.text.trim();
    if (task.isNotEmpty) {
      var todo = ParseObject('Todo')
        ..set('title', task)
        ..set('done', false);

      var response = await todo.save();

      if (response.success) {
        setState(() {
          tasks.add(todo);
        });
        taskController.clear();
      } else {
        // Handle error
      }
    }
  }

  Future<void> updateTodo(int index, bool done) async {
    final varTodo = tasks[index];
    final String id = varTodo.objectId.toString();

    var todo = ParseObject('Todo')
      ..objectId = id
      ..set('done', done);

    var response = await todo.save();

    if (response.success) {
      setState(() {
        tasks[index] = todo;
      });
    } else {
      // Handle error
    }
  }

  Future<void> getTodo() async {
    var queryBuilder = QueryBuilder<ParseObject>(ParseObject('Todo'));
    var apiResponse = await queryBuilder.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        tasks = apiResponse.results as List<ParseObject>;
      });
    } else {
      // Handle error
    }
  }

  Future<void> deleteTodo(int index, String id) async {
    var todo = ParseObject('Todo')..objectId = id;
    var response = await todo.delete();

    if (response.success) {
      setState(() {
        tasks.removeAt(index);
      });
    } else {
      // Handle error
    }
  }
}

당신의 앱은 다음과 같아야 합니다:

결론

이제 Back4App에서 Parse를 사용하여 Flutter 앱에서 기본 CRUD 작업을 구현했습니다. 이 튜토리얼에서는 ToDo 앱에서 작업을 추가, 검색, 업데이트 및 삭제하는 방법을 보여주었습니다.