소개

마지막 아키텍처 1 다음에 2가 됩니다. 이번에는 DB에서 값을 가져와 나열하는 유스 케이스를 정리합니다.

DB에 무엇을 사용합니까?

서버 측을 개발한다면 Heroku를 사용, Aws의 Lambda에서 서버리스로 구축 등 다양한 옵션이 있습니다만, 라이트에 앱을 만드는 경우, Firebase의 Firestore를 사용하면 편리합니다. Firestore를 사용하면 Flutter의 코드만으로 데이터의 영속화, 영속화된 데이터의 화면에 실시간 반영을 할 수 있습니다. 또한 요금도 무료로 시작할 수 있습니다.

Stream vs Future

Firestore에서 값을 얻으려면 Firestore의 Collection 변경을 모니터링하고 실시간으로 화면에 값을 반영 할 수있는 Stream과 Future가 있지만 Stream을 사용하면 Firestore의 강점 인 실시간 반영을 실현할 수 있습니다. 그래서 Stream을 사용합니다.

전체 아키텍처

등장하는 클래스가 여러 개 있으므로 먼저 전체 구성도를 정리해 둡니다.


Firestore에서 DataSource 클래스에서 값을 가져오고 StreamProvider를 사용하여 BuildContext에 값을 주입하고 Widget에서 해당 값을 사용합니다. 또한 FIrebase의 Document를 표현하는 Entity 클래스를 작성합니다.

Firestore 컬렉션 구성

Firestore의 컬렉션 구성은 다음과 같습니다.

Entity

Firestore의 Document를 나타내는 모델 클래스입니다. 생성자 fromDocumentSnapshot 를 준비해, DocumentSnapshot 로부터 인스턴스를 생성할 수 있도록 해 둡니다.

entity.dart

class Entity {
  final String name;

  Entity({@required this.name});

  factory Entity.fromDocumentSnapshot(DocumentSnapshot doc) => Entity(name: doc['name']);
}

DataSource

Firestore에서 Strem 형식으로 데이터를 검색합니다. Collection의 snapshot에 대해 asyncMap하면 Firestore에서 변경된 내용을 실시간으로 반영할 수 있습니다. snapshot은 QuerySnapshot 클래스 때문에 documents에서 실제 컬렉션의 내용인 문서의 배열을 가져오고 map에서 Entity로 변환합니다.

data_source.dart

class DataSource {

  final db = Firestore.instance;

  Stream<List<Entity>> streamList() =>
      db.collection('hoge').snapshots().asyncMap((snapshot) =>
          snapshot.documents.map((doc) => Entity.fromDocumentSnapshot(doc)).toList());
}

위젯

실제로 값을 사용하는 Widget 클래스입니다. 아키텍처 1과 마찬가지로 Static 메서드로 데이터 주입 부분을 만듭니다.
StreamProvider 클래스를 사용하면 Stream을 BuildContext에 포함할 수 있습니다. initialData에서의 배열을 해 두면, 데이터 취득전에 Provider로부터 null가 건너 후속의 처리가 null가 되는 것을 막을 수가 있습니다.

실제 사용하는 부분에서는 Provider.of<List<Entity>>(context) 로 List<Entuty>> 를 간단하게 꺼낼 수 있습니다.

hoge_screen.dart

class HogeScreen extends StatelessWidget {
  static Widget withDependencies() => StreamProvider<List<Entity>>(
        create: (_) => DataSource().streamList(),
        initialData: [],
        child: HogeScreen(),
      );

  @override
  Widget build(BuildContext context) => ListView(
        children: _buildList(context),
      );

  List<Widget> _buildList(BuildContext context) =>
      Provider.of<List<Entity>>(context)
          .map((entity) => Text(entity.name))
          .toList();
}

요약

Firestore와 Flutter를 사용하면 쉽게 실시간으로 반영되는 목록을 만들 수 있습니다. 아키텍처 헤매고있는 ​​사람은 꼭 시험해보십시오