[Flutter &FireStore] 모델 제작, 데이터 일람

이번에는 퍼스트 스토어에서 데이터를 얻는 방법을 적어 봅시다.
Firebase와의 협업 방법에 대해서는 다양한 보도가 있기 때문에 언급하지 않겠습니다.
이번에는 상품 일람을 얻은 예로 쓴다.(코드에 상품을 제품이라고 적는다)

ProductModel 만들기

Firestore에서 데이터를 얻을 때뿐만 아니라 데이터베이스에서 데이터를 얻으려고 할 때 기본적으로 모델도 준비한다.
모델이란 어떤 물건의 특성을 변수로 정의하는 클래스로, 프로그램에서'물체 자체'역할을 한다.
예를 들어 EC 사이트에서 상품 데이터를 데이터베이스에 넣고 이를 얻으려면 상품의 특성, 상품 명칭, 가격을 하나의 유형으로 정의한다.따라서 데이터베이스에서 데이터를 얻을 때 각각의 데이터를 얻는 것이 아니라 상품을 상품으로 삼아 데이터를 종합할 수 있다.
Flutter(dart)는 다음과 같이 정의됩니다.

class ProductModel {
  String productName, productPrice;
  ProductModel(
    this.productName,
    this.productPrice,
  );
}

이번 사례에서는 상품명과 가격만 정의했지만 원본이라면 상품 ID, 상세내역, 재고 수량, 상품 카테고리 등 많은 정보가 있을 것으로 보인다.

ProductListModel(상품의 전체 모델) 만들기

상품 전체의 모델에 대해 말하자면 방금 제작된 ProductModel은 한 상품을 목록으로 열거한 모델이다.
인상은 이렇다.
ProductListModel→[상품1, 상품2, 상품3, 상품4...]
실제 인코딩은 이런 느낌입니다.

class ProductListModel{
  List<ProductModel> products = [];
}

List형 변수의 내용인'ProductModel'(ProductModel)입니다. 이름은'products'입니다.라는 정의를 내렸다.

Firestore에서 데이터를 가져와 ProductListModel에 넣기

FireStore에서 데이터를 가져오는 함수를 ProductListModel에 추가합니다.
이번에 Firestore의 데이터 구조는 다음과 같다.
모음집:products
문서:product1
필드:name:aaa,price:1000
문서의 일부분은 그 상품 명세서의 형식이다.

class ProductListModel extends ChangeNotifier {
  List<ProductModel> products = [];

  Future getProducts() async {
    collection =
        await FirebaseFirestore.instance.collection('products').get();
    products = collection.docs
        .map((doc) => ProductModel(
           　doc['name'],doc['price']))
        .toList();
    this.products = products;
    notifyListeners();
  }
}

1. Future형 반환값을 반환하는 함수 정의

처음에 추가 섹션을 보면 Future getProducts()라고 적혀 있습니다.
이것은 Future 데이터 형식의 값을 반환하는 getProduct 함수입니다.라는 정의를 내렸다.

2. 문서 가져오기

collection =
        await FirebaseFirestore.instance.collection('products').get();

firestore에 저장된'products'라는 소장품에서 모든 데이터를 가져옵니다.

3. 하나하나의 상품 데이터를 얻어 배열하기

에서 상품 데이터를 포함하는 용기를 얻었기 때문에 그 중에서 하나하나의 데이터를 꺼내 배열로 저장해야 한다.여기에 등장한 것은 초기 제작된 프로듀스 모델이다.

Firestore에서 얻은 데이터를 ProductModel에 넣고 배열에 넣습니다.
한 마디로 하면firestore의 데이터를 계속 사용하면 사용할 수 없기 때문에 응용 프로그램에서 정의한 형식으로 복사합니다.

products = collection.docs
        .map((doc) => ProductModel(
            doc['name'],doc['price']))
        .toList();

collection에 문서 목록이 있기 때문에docs로 얻습니다
→ 맵 ()으로 하나씩 (문서 목록에 있는 문서를 하나씩 추출)
→맵()에서 추출한 데이터를 사용하여 ProductModel에서 상품 대상을 만들고 toList()로 배열형을 만든다.

4. 제작된 품목 목록을 ProductListModel 내의 변수에 저장

	this.products = products;　//左辺はModel内の変数、右辺はfirebaseから値をとってきた変数

같은 변수명을 이해하기 어려울 수도 있지만 이런 경우 보통 같은 변수명으로 쓰기 때문에 이 원칙을 따랐다.

5. notifyListeners 그리기()

이것은 주문 같은 물건이다.notify라는 이름처럼 "변화에 주의해라!"라는 뜻이다.(가능)
이 모델은 FireStore에서 데이터를 얻기 전과 얻은 후의 값이 바뀝니다.
처음에는 빈 배열에 데이터가 있었기 때문이다.
이 변화를 발견한 Flutter 군은 변경된 수치를 자동으로 표시합니다.

데이터 가져오기 완료

데이터의 취득은 완성되었지만 가장 중요한 취득 데이터의 표시는 아직 남아 있다.
하지만 이 기사가 길어졌기 때문에 다음엔 다른 기사를 쓸 겁니다.