FaunaDB와 떨림의 통합

소개하다.

모바일 앱을 구축할 때, 특히 신축성을 강조하는 상황에서 개발 과정이 시작되기 전에 많은 요소를 고려한다.그 중 하나는 데이터의 저장 방식이다.우리는 응용 프로그램의 데이터를 관리하는 독특한 해결 방안이 필요하다. Fauna.Fauna는 몇 분 안에 설치하고 준비할 수 있는 무료, 수시로 사용할 수 있는 데이터베이스를 제공했다. (네, 사용하기 쉽습니다.)Fanua에 대해 yoiu는 복잡한 설정이나 사용하기 어려운 검색을 걱정할 필요가 없다.그것들의 관계는 밀접하여 이해하기 쉽다.본고는 순서에 따라 점진적인 과정을 통해 우리의 Flitter 응용 프로그램에서 이 동물들을 집적하고 사용하는 방법을 가르쳐 드리겠습니다.

떨림과 결합하다.

우리는 Flutter 과 Fanua를 포함하는 업무 목록 프로그램을 구축할 것입니다.이 프로그램은 모든 대기 사항을 가져오고, 새로운 대기 사항을 만들고, 대기 사항을 삭제하는 기능을 제공합니다.
먼저 창설Fauna 사이트로 가서 계정을 만듭니다.
성공적으로 등록하고 로그인한 후 대시보드 화면에 표시됩니다.데이터베이스 만들기 버튼을 클릭하여 새 데이터베이스를 만듭니다.우리는 데이터베이스를 'todo' 라고 명명할 것이다.

데이터베이스를 만든 후 Security 를 클릭합니다.→ 새 열쇠.

이것은 응용 프로그램이 데이터베이스에 접근하는 키를 만들기 위해서입니다.이것은 우리의 응용 프로그램과 Fanua 사이의 링크입니다.링크가 한 번만 표시되므로 안전한 위치로 복사해야 합니다.

그런 다음 왼쪽의 컬렉션 탭을 클릭하여 컬렉션을 작성합니다.[새 모음] 버튼을 클릭하고 모음의 이름을 입력합니다.우리는 우리가 있는 데이터베이스와 같이 하나의 집합만 사용하기 때문에 우리의 '대기사항' 이라고 할 수 있다.

다음 단계는 색인을 만드는 것입니다.이것은 더욱 직접적이고 빠른 방법으로 별도의 압력 없이 데이터베이스에 있는 데이터를 정렬할 수 있다(네! 동물군은 매우 귀엽다).색인 탭을 클릭한 다음 새 색인 버튼을 클릭합니다.이 특정한 인덱스에 대해 "all todo"라고 명명합니다. 이 인덱스가 우리가 저장한 전체 todo 목록을 되돌려 주기를 원하기 때문입니다.

이것들이 있어서, 우리는 이미 동물 방면에 약간의 물건을 세웠기 때문에, 지금은 우리의 코드 라이브러리에 있다.
"떨림"명령을 사용하여 새 떨림 항목 만들기

`flutter create faunadb_sample_project`

완성되면 pubspec로 가세요.yaml 파일입니다. 의존항을 추가하는 것부터 시작합니다.dependencies 블록에 다음을 추가합니다.

faunadb_data: 이것은 우리의 신청과FaunaDB 사이의 링크가 될 것입니다.이 패키지를 사용하면 데이터베이스에서 CRUD 작업을 수행할 수 있습니다.

stacked: 애플리케이션에서 사용할 아키텍처 솔루션입니다.

stacked services: Stacking에서 제공하는 맞춤형 서비스

intl: 국제화, 디지털 형식과 기타 일에 사용된다.

optional: 이것은 우리의 함수가null로 되돌아오지 않도록 보장합니다.

dev dependencies 아래에서 추가

build_runner: 응용 프로그램에 필요한 파일을 생성하기 위해 명령을 실행할 수 있습니다.

stacked generator: 이렇게 하면 스택된 주석이 표시된 파일을 자동으로 생성할 수 있습니다.

    dependencies:
     cupertino_icons: ^1.0.2
     faunadb_data: ^0.0.6
     flutter:
      sdk: flutter
     intl: ^0.17.0
     optional: ^6.1.0+1
     stacked: ^2.2.7
     stacked_services: ^0.8.15
    dev_dependencies:
     build_runner: ^2.1.5
     flutter_lints: ^1.0.0
     flutter_test:
      sdk: flutter
     stacked_generator: ^0.5.6
    flutter:
     uses-material-design: true

우리는 faunadb_data 패키지 링크 클라이언트의 설정을 사용하고 데이터베이스에 대한 조회를 실행할 것입니다.
다음에 todo라는 새 파일을 만듭니다.던지다.클래스 내부에서 클래스를 만들고 클래스의 이름을 TodoModel로 지정합니다.그것은 다섯 개의 매개 변수로 각 Todo를 구성한다.id, todoName, todoContent, 완료(상태), 날짜입니다.

    class TodoModel extends Entity<TodoModel> {
     final String id;
     final String todoName;
     final String todoContent;
     final bool completed;
     final String date;
     TodoModel(
      this.id,
      this.todoName,
      this.todoContent,
      this.completed,
      this.date,
     );
    }

이 클래스는 faunadb 데이터에서 온 실체 클래스를 확장합니다.fromJson, getId, 모델 방법은 실체 클래스의 재작성을 충당합니다.

    class TodoModel extends Entity<TodoModel> {
    //The fromJson() method returns a TodoModel object with the key parameters in the map passed in. 
     @override
     TodoModel fromJson(Map<String, dynamic> model) {
      // TODO: implement fromJson
      throw UnimplementedError();
     }
     // The getId() method returns the id making it easier to fetch the id of a particular Todo Object. 
     @override
     String getId() {
      // TODO: implement getId
      throw UnimplementedError();
     }
     // The model() method returns a map with key-value pairs of the parameters for the TodoModel.
     @override
     Map<String, dynamic> model() {
      // TODO: implement model
      throw UnimplementedError();
     }
    }



    class TodoModel extends Entity<TodoModel> {
     final String id;
     final String todoName;
     final String todoContent;
     final bool completed;
     final String date;
     TodoModel(
      this.id,
      this.todoName,
      this.todoContent,
      this.completed,
      this.date,
     );
     @override
     TodoModel fromJson(Map<String, dynamic> model) {
      return TodoModel(
       model['id'] as String,
       model['todoName'] as String,
       model['todoContent'] as String,
       model['status'] as bool,
       model['date'] as String,
      );
     }
     @override
     String getId() {
      return id;
     }
     @override
     Map<String, dynamic> model() {
      Map<String, dynamic> model = {
       'id': id,
       'todoName': todoName,
       'todoContent': todoContent,
       'status': completed,
       'date': date,
      };
      return model;
     }

    // In addition to this, we create two static variables which point to the collection name and the index we created earlier. 
     static String collection() => "todos";
     static String allTodosIndex() => "all_todos";
    }

이렇게 하면 Todo Model 과 덮어쓰기 방법이 있습니다.
맵을 수신하고 Todo Model 객체를 구성하기 위해 역서열화기를 설정해야 합니다.

    TodoModel getTodoFromJson(Map<String, dynamic> json) {
      return TodoModel(
        json['id'] as String,
        json['todoName'] as String,
        json['todoContent'] as String,
        json['status'] as bool,
        json['date'] as String,
      );
    }

다음에 설정할 것은 Repository 클래스입니다.Todo Repository라는 호출은 Fauna Repository 클래스를 확장합니다. 이 클래스는 우리가 사용하고 있는 fauna 데이터 클래스에서 나온 것입니다.이 클래스는FaunaDB에서 만든 데이터베이스와 우리가 사용하고자 하는 특정한 인덱스에 연결됩니다.우리는 슈퍼 구조 함수를 통과할 것이다.

    class TodoRepository extends FaunaRepository<TodoModel> {
     TodoRepository() : super("todos", "all_todos");
    }

슈퍼 구조 함수를 사용하면 집합의 이름과 인덱스를 전달합니다. 이것은 저장소 설정에 필요한 두 가지 일입니다.
다음에 '서비스' 라는 새 폴더를 만듭니다.이 폴더에 todo service라는 파일을 생성합니다.todoService라는 클래스를 사용하여 dart를 수행합니다.이 클래스는 우리의 응용 프로그램과 우리가 사용하고 있는 소프트웨어 패키지 사이의 중개가 될 것이다.우리는 데이터베이스에 대한 모든 호출을 이 종류를 통해 진행할 것이다.데이터베이스에서 데이터를 읽고, 저장하고, 업데이트하고, 삭제하는 방법은 여기에 있습니다.

    import 'package:faunadb_data/faunadb_data.dart';
    import 'package:optional/optional.dart';
    import 'package:pilots/todo.dart';
    class TodoService {
     TodoRepository todoRepository = TodoRepository();

     //CRUD Operations in Fauna
     /// Create Operation
     saveTodo(TodoModel todo) async {
      await todoRepository.save(todo, getTodoFromJson);
     }
     /// Read Operation 1
     Future<List> getAllTodos() async {
    //The number of results per page would go into the size parameter, we are starting with 20 results per page here
      PaginationOptions po = PaginationOptions(size: Optional.of(20));
      final result = await todoRepository.findAll(po, getTodoFromJson);
      return result.data;
     }
     /// Read Operation 2
     Future<TodoModel> getSingleTodo(String id) async {
      final result = await todoRepository.find(id, getTodoFromJson);
      return result.value;
     }
     /// Update Operation
     updateTodo(TodoModel todo) async {
      await todoRepository.save(todo, getTodoFromJson);
     }
     /// Delete Operation
     deleteTodo(String id) async {
      final result = await todoRepository.remove(id, getTodoFromJson);
      return result.value;
     }
    }

이제 데이터베이스와의 원활한 상호작용에 필요한 서비스와 다른 설정을 마쳤습니다. UI라는 새 폴더를 만듭니다.응용 프로그램에는 다음과 같은 두 개의 화면이 있습니다.

업무 목록을 표시하는 홈뷰와

add todo, 새 todo 대상을 만드는 상세한 정보를 추가합니다.

UI 폴더에 각각 홈 뷰 및 add todos라는 두 개의 폴더를 생성합니다.
홈 뷰 폴더에 home_view.dart와 home_viewmodel.dart라는 두 개의 새 파일을 만듭니다.업무 논리와 기능은viewmodel에 있고 UI 코드는 보기 파일에 있습니다.
또한add todos 폴더에 두 개의 새 파일을 생성합니다. 제목은 각각 add_todos_view.dart 과 add_todos_viewmodel.dart 입니다.add_todo_viewmodel.dart와 home_viewmodel.dart 파일에 베이스뷰 모델을 확장하는 클래스를 만듭니다.

    class AddTodoModel extends BaseViewModel {}


    class HomeViewModel extends BaseViewModel{}

add todos 뷰에서dart 파일, 무상태 위젯을 만들고 ViewModelBuilder로 돌아갑니다.패키지의 reactive () 함수입니다.내가 언급한viewmodel 파일은 보기 파일의 논리를 저장할 것입니다.ViewModelBuilder.reactive () 구조 함수는 보기 파일과 대응하는viewmodel 사이의 연결을 충당합니다.이렇게 하면 보기는 보기 파일에서viewmodel에서 설명한 논리에 접근하고 사용할 수 있습니다.
다음은 홈 뷰입니다.

    class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<HomeViewModel>.reactive(
       viewModelBuilder: () => HomeViewModel(),
       onModelReady: (viewModel) => viewModel.setUp(),
       builder: (context, viewModel, child) {
        return Scaffold();
       },
      );
     }
    }

다음은 addTodoView입니다.

    class AddTodoView extends StatelessWidget {
     AddTodoView({
      Key? key,
     }) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<AddTodoModel>.reactive(
       viewModelBuilder: () => AddTodoModel(),
       builder: (context, viewModel, child) {
        return Scaffold();
       },
      );
     }
    }

다음 일은 우리의 루트를 설정하고 서비스를 등록함으로써 전체 코드 라이브러리에서 포지셔닝 머신을 사용하기 쉽다는 것이다.app라는 새 폴더를 만듭니다.이 폴더에 새 파일을 만들고 app로 이름을 붙입니다.던지다.등록 서비스를 위해 @StackedApp 주석을 사용할 것입니다.이것은 우리로 하여금 두 개의 매개 변수인 루트와 의존항에 접근할 수 있게 한다.dependencies 블록에서 Todo Service 및 Navigation Service를 등록합니다.또한 사용할 페이지의 라우팅, 즉 HomeView 및 AddToView도 설명합니다.

    @StackedApp(
     routes: [
      MaterialRoute(page: AddTodoView),
      MaterialRoute(page: HomeView),
     ],
     dependencies: [
      LazySingleton(classType: NavigationService),
      LazySingleton(classType: TodoService),
     ],
    )
    class AppSetup {}

다음 flatter 명령을 실행하여 필요한 파일을 생성합니다.

`flutter pub run build_runner build --delete-conflicting-outputs`

이 명령은 app.locator.dart 파일과 app.router.dart 파일을 생성하고, 우리의 의존항과 루트는 이 파일에 등록됩니다.
당신의 main.dart 파일로 가기;메인 블록runApp() 위에 위치추적기와 데이터베이스 키를 설정해야 응용 프로그램이 데이터베이스에 접근할 수 있습니다.Fanura 계정에 DB를 설정할 때 만든 키를 생각해 보십시오.

    void main() {
     WidgetsFlutterBinding.ensureInitialized();
     setCurrentUserDbKey("//YOUR-KEY-GOES-HERE");
     setupLocator();
     runApp(MyApp());
    }

현재 우리는 이미 진행해야 할 모든 설정과 설정을 완성했다.UI를 구축하고 ViewModel에서 비즈니스 논리를 작성할 수 있습니다.
HomeViewModel에서 응용 프로그램을 시작할 때 데이터베이스에 있는 현재 모든 TODO를 가져오는 방법(데이터베이스에서의 읽기 작업)을 정의했습니다.또 다른 기능은 특정한 업무 수행을 삭제하는 것이다.로케이터를 사용하여 Google은 서비스를 주입하고 Todo Service 클래스에서 설정한 방법에 접근합니다.대기 사항 목록은 UI 화면에서 화면을 구성할 때 사용할 내용입니다.또한 데이터베이스에 있는 현재 TODO 목록이 프로그램을 시작한 후에 나타나기를 원하기 때문에, ViewModel * 에게 "헤이, 기본 데이터를 가져오고 있습니다. * 잠시만 기다려 주십시오. 그리고 마운트 표시기를 보여 주십시오."라는 함수를 만들었습니다.이 함수는 상태, 업무 목록에 따라 UI를 더욱 안전하게 조정할 수 있습니다.

    class HomeViewModel extends BaseViewModel {
     final _todoService = locator<TodoService>();
     final _navigationService = locator<NavigationService>();
     List<dynamic> todosList = [];

     Future<void> setUp() async {
      await runBusyFuture(getTodos());
     }

     Future<void> getTodos() async {
      todosList = await _todoService.getAllTodos();
     }

     Future<void> deleteTodo(String id) async {
      await _todoService.deleteTodo(id);
      todosList = await _todoService.getAllTodos();
      notifyListeners();
     }

     navigateToAddTodoPage() {
      _navigationService.navigateTo(Routes.addTodoView);
     }
    }

ddNew Todo 보기 모델에서 새 Todo 세부 사항을 저장하고 Todo를 만드는 방법을 설명합니다.Todo가 완료되면 사용자를 HomeView로 라우팅하고 HomeView는 모든 Todo 목록을 표시합니다.

    class AddTodoModel extends BaseViewModel {
     final service = locator<TodoService>();
     TodoRepository repo = TodoRepository();
     bool status = false;
     NavigationService navigationService = NavigationService();

     Future<void> createTodo(String name, String content) async {
      Optional<String> uniqueId = await repo.nextId();
      String id = uniqueId.value;
      TodoModel newTodo = TodoModel(id, name, content, status, formatDate());
      final result = await service.saveTodo(newTodo);
      navigateToHome();
     }

     String formatDate() {
      DateTime now = DateTime.now();
      String formattedDate = DateFormat('MMMM d' + ', ' + 'y').format(now);
      return formattedDate;
     }

     void navigateToHome() {
      navigationService.navigateTo(Routes.homeView);
     }
    }

다음은 UI 화면을 채우기 위해 ListViewBuilder를 사용하여 데이터베이스에서 얻은 목록 요소를 표시합니다.너는 전체 코드의 요점을 볼 수 있다here.
addNewTodo의 경우 양식을 사용합니다.파일 상단에서 @FormView 주석을 사용합니다.이렇게 하면 이 필드에 접근할 수 있다.필드 블록에서 FormTextField를 사용하여 양식에 필드를 추가하고 생성된 mixin을 클래스에 추가합니다.

    class AddTodoView extends StatelessWidget with $AddTodoView {


    @FormView(fields: [
     FormTextField(name: 'todoName'),
     FormTextField(name: 'todoContent'),
    ])

그런 다음 flatter 명령을 실행하여 파일을 생성합니다.

`flutter pub run build_runner build --delete-conflicting-outputs`

이것은 컨트롤러를 관리하는 데 사용되는mixin을 포함하고, 폼의 필드에 할당할 수 있습니다.
todoName 양식 필드의 경우

    TextFormField(
     controller: todoNameController,
     focusNode: todoNameFocusNode,
     decoration: const InputDecoration(
      label: Text('Title'),
      border: OutlineInputBorder(
       borderSide: BorderSide(),
       borderRadius: BorderRadius.all(
        Radius.circular(16.0),
       ),
      ),
     ),
    ),

todoContent 양식 필드의 경우

    TextFormField(
         controller: todoContentController,
         focusNode: todoContentFocusNode,
         decoration: const InputDecoration(
          label: Text('Content'),
          border: OutlineInputBorder(
           borderSide: BorderSide(),
           borderRadius: BorderRadius.all(
            Radius.circular(16.0),
           ),
          ),
         ),
        ),

이 요점here에서 UI 화면의 전체 코드를 볼 수 있습니다.
응용 프로그램을 저장하고 실행하면 다음과 같은 내용이 표시됩니다.

예시 프로그램 here 의 전체 코드를 볼 수 있습니다.

결론

이것은 총결산이다!우리는 동물군을 Flitter 응용 프로그램에 정식으로 통합시켰고, 이 과정에서 기능이 완비된 업무 목록 응용 프로그램을 구축했다.Fauna는 빠르고 원활하며 사용하기 쉬우며 몇 걸음만 가면 설치와 통합이 가능합니다.진일보한 연구를 위해 정부 문서를 열람하다.계속 공부하고, 계속 건설하고, 물론, 동물을 계속 사용한다.
질문이 있으시면 주저 없이 트위터나 링크드 인에 연락 주세요.
건배!
Write with Fauna 프로그램과 관련이 있습니다.